inline tags importer

editors/editoria/src/Editoria.js

@@ -52,6 +52,11 @@ const Editoria = () => {
     key = 'editoriaMobile';
   }
 
+  console.log(JSON.stringify('["test"]'));
+  // console.log(
+  //   JSON.parse('[{"item":"custom-tag-label-1"}]'),
+  // );
+
   const EditoriaComponent = useMemo(
     () => (
       <>
@@ -62,13 +67,11 @@ const Editoria = () => {
           autoFocus
           placeholder="Type Something..."
           fileUpload={file => renderImage(file)}
-          value={
-            '<p>hello</p><p class="custom-tag-label-3" data-type="block">Lorem ipsum dolor si</p>'
-          }
+          value={`<p class="paragraph">hello</p><p class="custom-tag-label-3" data-type="block">Lorem this is <span class="custom-tag-label-1,custom-tag-label-2" data-type="inline" data-tags="[&quot;custom-tag-label-1&quot;,&quot;custom-tag-label-2&quot;]">text </span>dolor si</p>`}
           // value={demo}
           // readonly
           layout={layout}
-          // onChange={source => console.log(source)}
+          onChange={source => console.log(source)}
           user={user}
         />
       </>

editors/editoria/src/layout/EditorElements.js

@@ -393,19 +393,19 @@ export default css`
     padding-top: 2px;
   }
 
-  .custom-tag-inline {
+  span[data-type='inline'] {
     display: inline;
     font-weight: 500;
   }
 
-  custom-tag-inline:before {
+  span[data-type='inline']:before {
     color: #006f19;
     content: ' | ';
     font-weight: 600;
     margin-left: 0;
   }
 
-  custom-tag-inline:after {
+  span[data-type='inline']:after {
     color: #006f19;
     content: ' | ';
     display: inline;

wax-prosemirror-components/src/components/customtag/CustomTagInlineOverlayCompoment.js

@@ -128,8 +128,8 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => {
   };
 
   const addToSelection = item => {
-    const tagNames = mark ? mark.attrs.tagNames : [];
-    tagNames.push(item);
+    const tags = mark ? mark.attrs.tags : [];
+    tags.push(item);
 
     dispatch(
       state.tr.addMark(
@@ -137,8 +137,8 @@ const CustomTagInlineOverlayComponent = ({ mark, setPosition, position }) => {
         $to.pos,
         state.schema.marks.customTagInline.create({
           ...((mark && mark.attrs) || {}),
-          tagNames,
-          class: tagNames.toString(),
+          tags,
+          class: tags.toString(),
         }),
       ),
     );

wax-prosemirror-schema/src/marks/customTagInlineMark.js

 const customtagInline = {
   attrs: {
     class: { default: null },
-    tagNames: { default: [] },
+    tags: [],
+    type: { default: 'inline' },
   },
   inclusive: false,
   parseDOM: [
     {
-      tag: 'custom-tag-inline',
+      tag: 'span[data-type="inline"]',
       getAttrs(hook, next) {
         Object.assign(hook, {
           class: hook.dom.getAttribute('class'),
-          tagNames: JSON.parse(hook.dom.dataset.tagNames),
+          tags: JSON.parse(hook.dom.dataset.tags),
+          type: hook.dom.dataset.type,
         });
         next();
       },
@@ -19,10 +21,11 @@ const customtagInline = {
   toDOM(hook, next) {
     // eslint-disable-next-line no-param-reassign
     hook.value = [
-      'custom-tag-inline',
+      'span',
       {
         class: hook.node.attrs.class,
-        'data-tagNames': JSON.stringify(hook.node.attrs.tagNames),
+        'data-type': hook.node.attrs.type,
+        'data-tags': JSON.stringify(hook.node.attrs.tags),
       },
     ];
     next();