feat(image-caption): added image caption

editors/editoria/src/layout/EditorElements.js

@@ -348,6 +348,20 @@ export default css`
 
   /* -- Block Math ---------------------------------------- */
 
+  figcaption {
+    background-color: #eee;
+    cursor: text;
+    height: 20px;
+  }
+
+  .decoration:before {
+    content: 'Caption : ';
+  }
+
+  .decoration1:before {
+    content: '';
+  }
+
   math-display {
     display: block;
   }

wax-prosemirror-plugins/src/images/captionPlugin.js

-import { Decoration, DecorationSet } from 'prosemirror-view';
-import { Plugin, TextSelection } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import { Plugin, PluginKey } from 'prosemirror-state';
 
 const captionPlugin = key =>
   new Plugin({
+    key: new PluginKey(key),
     state: {
       init() {
         return DecorationSet.empty;
       },
-      apply(tr, set) {},
+      apply(tr, set) {
+        let setMap = set;
+        setMap = setMap.map(tr.mapping, tr.doc);
+        setMap = setMap.remove(set.find(null, null, spec => spec.id != null));
+        return setMap;
+      },
     },
     props: {
       decorations(state) {
         return this.getState(state);
       },
+      handleDOMEvents: {
+        mousedown(view, e) {
+          const captionPlugins = view.state.plugins.find(plugin =>
+            plugin.key.startsWith('caption$'),
+          );
+
+          if (
+            e.target.nodeName === 'IMG' &&
+            e.target.parentNode.lastElementChild.nodeName !== 'FIGCAPTION'
+          ) {
+            const id = {};
+            const { tr } = view.state;
+            const pos = view.posAtDOM(e.target);
+            const pos1 = pos + 1;
+            //  insert figure caption node
+            view.dispatch(
+              tr
+                .replaceWith(
+                  pos1,
+                  pos1,
+                  view.state.schema.nodes.figcaption.create({
+                    class: 'decoration',
+                    dataContent: 'Caption : ',
+                  }),
+                )
+                .setMeta(captionPlugins, {
+                  add: { id, pos: pos + 1 },
+                }),
+            );
+          } else if (e.target.nodeName !== 'FIGCAPTION') {
+            const decorationelement = document.getElementsByTagName(
+              'figcaption',
+            );
+            const decorationLength = decorationelement.length;
+
+            if (decorationLength) {
+              for (let i = 0; i < decorationLength; i += 1) {
+                if (!decorationelement[i].textContent.length) {
+                  decorationelement[i].remove();
+                } else if (
+                  decorationelement[i].parentElement.firstChild.tagName ===
+                  'FIGCAPTION'
+                ) {
+                  decorationelement[i].parentElement.remove();
+                }
+              }
+            }
+          }
+
+          return true;
+        },
+        keyup(view, e) {
+          // delete caption if figure is deleted
+          if (e.key === 'Delete') {
+            const figcap = document.getElementsByTagName('figcaption');
+            const figcapLength = figcap.length;
+
+            if (figcapLength) {
+              for (let i = 0; i < figcapLength; i += 1) {
+                if (
+                  figcap[i].parentElement.firstChild.tagName === 'FIGCAPTION'
+                ) {
+                  figcap[i].parentElement.remove();
+                }
+              }
+            }
+          }
+        },
+      },
     },
   });
 

wax-prosemirror-plugins/src/images/placeHolderPlugin.js

@@ -20,9 +20,9 @@ export default key =>
           });
           set = set.add(tr.doc, [deco]);
         } else if (action && action.remove) {
-          set = set.remove(
-            set.find(null, null, spec => spec.id === action.remove.id),
-          );
+          // set = set.remove(
+          //   set.find(null, null, spec => spec.id === action.remove.id),
+          // );
         }
         return set;
       },

wax-prosemirror-schema/index.js

@@ -37,7 +37,7 @@ export { default as bulletListNode } from './src/nodes/bulletListNode';
 export { default as listItemNode } from './src/nodes/listItemNode';
 export { default as subTitleNode } from './src/nodes/subTitleNode';
 export { default as figureNode } from './src/nodes/figureNode';
-export { default as figureCaptionNode } from './src/nodes/figureNode';
+export { default as figureCaptionNode } from './src/nodes/figureCaptionNode';
 export { default as imageNode } from './src/nodes/imageNode';
 export { default as headingNode } from './src/nodes/headingNode';
 export { default as blockQuoteNode } from './src/nodes/blockQuoteNode';

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

 const figureCaption = {
   content: 'inline*',
   group: 'figure',
-  marks: 'strong link',
-  parseDOM: [{ tag: 'figcaption' }],
-  toDOM(node) {
-    return ['figcaption', 0];
+  draggable: false,
+  attrs: {
+    class: { default: '' },
+    tabindex: { default: 0 },
+    dataContent: { default: '' },
   },
+  toDOM: node => {
+    return ['figcaption', node.attrs, 0];
+  },
+  parseDOM: [
+    {
+      tag: 'figcaption',
+      getAttrs(dom) {
+        return {
+          class: dom.getAttribute('class'),
+          dataContent: dom.getAttribute('dataContent'),
+        };
+      },
+    },
+  ],
 };
 
 export default figureCaption;

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

 import { SchemaHelpers } from 'wax-prosemirror-utilities';
+
 const image = {
-  // inline: true,
   attrs: {
     src: {},
     alt: { default: null },
@@ -26,12 +26,15 @@ const image = {
   ],
   toDOM(hook, next) {
     const attrs = {};
-    let temp = '';
+
     if (hook.node.attrs.track && hook.node.attrs.track.length) {
       attrs['data-track'] = JSON.stringify(hook.node.attrs.track);
       attrs['data-id'] = hook.node.attrs.id;
     }
+
     const { src, alt, title, id, track } = hook.node.attrs;
+
+    // eslint-disable-next-line no-param-reassign
     hook.value = [
       'img',
       { src, alt, title, 'data-id': id, 'data-track': track },

wax-prosemirror-services/src/ImageService/ImageService.js

@@ -33,7 +33,10 @@ class ImageService extends Service {
     );
     createNode({
       figcaption: figureCaptionNode,
-    });
+    }
+    // ,
+    // { toWaxSchema: true },
+    );
   }
 }
 

wax-prosemirror-services/src/ImageService/fileUpload.js

@@ -34,6 +34,9 @@ export default (view, fileUpload, placeholderPlugin) => file => {
           .replaceWith(
             pos,
             pos,
+            // view.state.schema.nodes.image.create({
+            //   src: url,
+            // }),
             view.state.schema.nodes.image.create({
               src: url,
             }),