block importer

editors/editoria/src/Editoria.js

@@ -62,7 +62,10 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={demo}
+          value={
+            '<p>hello</p><p class="custom-tag-label-3" data-type="block">Lorem ipsum dolor si</p>'
+          }
+          // value={demo}
           // readonly
           layout={layout}
           // onChange={source => console.log(source)}

editors/editoria/src/layout/EditorElements.js

@@ -412,19 +412,19 @@ export default css`
     font-weight: 600;
   }
 
-  custom-tag-block {
+  p[data-type='block'] {
     display: block;
     margin-top: 1em;
   }
 
-  custom-tag-block:before {
+  p[data-type='block']:before {
     color: #006f19;
     content: '|';
     display: inline;
     font-weight: 600;
   }
 
-  custom-tag-block:after {
+  p[data-type='block']:after {
     color: #006f19;
     content: '|';
     display: inline;

wax-prosemirror-schema/src/nodes/customBlockNode.js

@@ -5,21 +5,27 @@ const customBlockNode = {
   defining: true,
   attrs: {
     class: { default: '' },
+    type: { default: 'block' },
   },
   parseDOM: [
     {
-      tag: 'custom-tag-block',
+      tag: 'p[data-type="block"]',
       getAttrs(hook, next) {
         Object.assign(hook, {
           class: hook.dom.getAttribute('class'),
+          type: hook.dom.dataset.type,
         });
         next();
       },
     },
   ],
   toDOM(hook, next) {
-    const attrs = { class: hook.attrs.class };
-    return (hook.value = ['custom-tag-block', attrs, 0]);
+    const attrs = {
+      class: hook.node.attrs.class,
+      'data-type': hook.node.attrs.type,
+    };
+    hook.value = ['p', attrs, 0];
+    next();
   },
 };
 

wax-prosemirror-services/src/CustomTagService/CustomTagBlockService/CustomTagBlockService.js

@@ -6,9 +6,12 @@ class CustomTagBlockService extends Service {
   register() {
     this.container.bind('CustomTagBlockTool').to(CustomTagBlockTool);
     const createNode = this.container.get('CreateNode');
-    createNode({
-      customTagBlock: customBlockNode,
-    });
+    createNode(
+      {
+        customTagBlock: customBlockNode,
+      },
+      { toWaxSchema: true },
+    );
   }
 }