caption in progress

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

 import { DecorationSet } from 'prosemirror-view';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, NodeSelection } from 'prosemirror-state';
 
 const captionPlugin = key =>
   new Plugin({
@@ -29,23 +29,23 @@ const captionPlugin = key =>
             e.target.nodeName === 'IMG' &&
             e.target.parentNode.lastElementChild.nodeName !== 'FIGCAPTION'
           ) {
+            let pos = view.posAtDOM(e.target);
             const id = {};
             const { tr } = view.state;
-            const pos = view.posAtDOM(e.target);
-            const pos1 = pos + 1;
+            pos += 1;
             //  insert figure caption node
             view.dispatch(
               tr
                 .replaceWith(
-                  pos1,
-                  pos1,
+                  pos,
+                  pos,
                   view.state.schema.nodes.figcaption.create({
                     class: 'decoration',
                     dataContent: 'Caption : ',
                   }),
                 )
                 .setMeta(captionPlugins, {
-                  add: { id, pos: pos + 1 },
+                  add: { id, pos },
                 }),
             );
           } else if (e.target.nodeName !== 'FIGCAPTION') {
@@ -68,6 +68,19 @@ const captionPlugin = key =>
             }
           }
 
+          if (e.target.nodeName === 'IMG') {
+            let pos = view.posAtDOM(e.target);
+            const { $from } = view.state.selection;
+            const same = $from.sharedDepth(pos);
+            if (same === 0) return false;
+            pos = $from.before(same);
+            view.dispatch(
+              view.state.tr.setSelection(
+                NodeSelection.create(view.state.doc, pos),
+              ),
+            );
+          }
+
           return true;
         },
         keyup(view, e) {

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

@@ -8,7 +8,7 @@ const image = {
     track: { default: [] },
   },
   group: 'figure',
-  draggable: true,
+  draggable: false,
   parseDOM: [
     {
       tag: 'img[src]',

wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading2.js

@@ -27,7 +27,12 @@ class Heading2 extends Tools {
       if (activeViewId !== 'main') return false;
       const { from, to } = state.selection;
       state.doc.nodesBetween(from, to, (node, pos) => {
-        if (node.type.name === 'list_item' || node.type.name === 'image') {
+        if (
+          node.type.name === 'list_item' ||
+          node.type.name === 'image' ||
+          node.type.name === 'figure' ||
+          node.type.name === 'figcaption'
+        ) {
           isActive = false;
         }
       });

wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading3.js

@@ -27,7 +27,12 @@ class Heading3 extends Tools {
       if (activeViewId !== 'main') return false;
       const { from, to } = state.selection;
       state.doc.nodesBetween(from, to, (node, pos) => {
-        if (node.type.name === 'list_item' || node.type.name === 'image') {
+        if (
+          node.type.name === 'list_item' ||
+          node.type.name === 'image' ||
+          node.type.name === 'figure' ||
+          node.type.name === 'figcaption'
+        ) {
           isActive = false;
         }
       });

wax-prosemirror-services/src/DisplayBlockLevel/HeadingService/Heading4.js

@@ -27,7 +27,12 @@ class Heading4 extends Tools {
       if (activeViewId !== 'main') return false;
       const { from, to } = state.selection;
       state.doc.nodesBetween(from, to, (node, pos) => {
-        if (node.type.name === 'list_item' || node.type.name === 'image') {
+        if (
+          node.type.name === 'list_item' ||
+          node.type.name === 'image' ||
+          node.type.name === 'figure' ||
+          node.type.name === 'figcaption'
+        ) {
           isActive = false;
         }
       });