Merge branch 'oen-issues' into 'master'

Oen issues

See merge request !459

editors/demo/src/OEN/config/config.js

@@ -143,7 +143,7 @@ export default {
         },
         {
           displayName: 'outline',
-          headingLevel: 3,
+          headingLevel: 2,
           isSection: false,
           nestedHeadingLevel: 4,
           className: 'outline',

wax-prosemirror-core/src/components/tabs/OENToolGroup.js

@@ -103,6 +103,7 @@ const OENToolGroup = ({ item }) => {
 
                       wrapIn(main.state.config.schema.nodes[node], {
                         class: tool.className,
+                        id: uuidv4(),
                       })(main.state, main.dispatch);
 
                       setTimeout(() => {

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

@@ -45,7 +45,7 @@ export default ({ setPosition, position }) => {
     const imageId = selection.node.attrs.id;
     const image = document.querySelector(`[data-id='${imageId}']`);
     const figCaption = document.getElementsByTagName('figcaption')[0];
-    if (!image) return;
+    if (!image || !figCaption) return;
     const imagePosition = image.getBoundingClientRect();
     const figCaptionPosition = figCaption.getBoundingClientRect().height - 5;
     const left = imagePosition.left - WaxSurface.left;

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

 import { DecorationSet } from 'prosemirror-view';
 import { Plugin, PluginKey, NodeSelection } from 'prosemirror-state';
+import { Commands } from 'wax-prosemirror-core';
+
+let imgDataId = '';
+let counter = 0;
 
 const captionPlugin = key =>
   new Plugin({
@@ -29,6 +33,7 @@ const captionPlugin = key =>
             e.target.nodeName === 'IMG' &&
             e.target.parentNode.lastElementChild.nodeName !== 'FIGCAPTION'
           ) {
+            imgDataId = e.target.getAttribute('data-id');
             let pos = view.posAtDOM(e.target);
             const id = {};
             const { tr } = view.state;
@@ -41,6 +46,7 @@ const captionPlugin = key =>
                   pos,
                   view.state.schema.nodes.figcaption.create({
                     class: 'decoration',
+                    id: imgDataId,
                   }),
                 )
                 .setMeta(captionPlugins, {
@@ -48,25 +54,6 @@ const captionPlugin = key =>
                 }),
             );
           }
-          // 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();
-          //       }
-          //     }
-          //   }
-          // }
 
           if (e.target.nodeName === 'IMG') {
             let pos = view.posAtDOM(e.target);
@@ -83,19 +70,57 @@ const captionPlugin = key =>
 
           return false;
         },
+
         keyup(view, e) {
+          if (e.key === 'Enter') {
+            if (
+              view.state.selection.$head.path[6] &&
+              view.state.selection.$head.path[6].type.name === 'figcaption'
+            ) {
+              counter += 1;
+              setTimeout(() => {
+                counter = 0;
+              }, 1500);
+            }
+
+            if (
+              view.state.selection.$head.path[6] &&
+              view.state.selection.$head.path[6].type.name === 'figcaption' &&
+              counter === 2
+            ) {
+              let captionId = '';
+              view.state.doc.nodesBetween(
+                view.state.selection.from,
+                view.state.selection.from,
+                node => {
+                  if (node.type.name === 'figcaption') {
+                    captionId = node.attrs.id;
+                  }
+                },
+              );
+              const figCapEl = document.getElementById(captionId);
+
+              view.dispatch(
+                view.state.tr.setSelection(
+                  NodeSelection.create(
+                    view.state.doc,
+                    view.posAtDOM(figCapEl.parentElement),
+                  ),
+                ),
+              );
+              Commands.simulateKey(view, 13, 'Enter');
+              Commands.simulateKey(view, 13, 'Enter');
+              counter = 0;
+            }
+          }
           // delete caption if figure is deleted
           if (e.key === 'Delete' || e.code === 'Backspace') {
-            const figcap = document.getElementsByTagName('figcaption');
-            const figcapLength = figcap.length;
+            const figCap = view.state.selection.$head.path;
+            if (figCap[6] && figCap[6].type.name === 'figcaption') {
+              const figCapEl = document.getElementById(figCap[6].attrs.id);
 
-            if (figcapLength) {
-              for (let i = 0; i < figcapLength; i += 1) {
-                if (
-                  figcap[i].parentElement.firstChild.tagName === 'FIGCAPTION'
-                ) {
-                  figcap[i].parentElement.remove();
-                }
+              if (figCapEl.parentElement.firstChild.tagName === 'FIGCAPTION') {
+                figCapEl.parentElement.remove();
               }
             }
           }

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

@@ -3,22 +3,24 @@ const figureCaptionNode = {
   group: 'figure',
   draggable: false,
   attrs: {
+    id: { default: '' },
     class: { default: '' },
     // tabindex: { default: 0 },
   },
-  toDOM: node => {
-    return ['figcaption', node.attrs, 0];
-  },
   parseDOM: [
     {
       tag: 'figcaption',
       getAttrs(dom) {
         return {
+          id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
         };
       },
     },
   ],
+  toDOM: node => {
+    return ['figcaption', node.attrs, 0];
+  },
 };
 
 export default figureCaptionNode;

wax-prosemirror-services/src/OENContainersService/components/OENAsideButton.js

@@ -3,6 +3,7 @@ import React, { useContext, useMemo } from 'react';
 import { WaxContext, MenuButton } from 'wax-prosemirror-core';
 import { wrapIn } from 'prosemirror-commands';
 import { liftTarget } from 'prosemirror-transform';
+import { v4 as uuidv4 } from 'uuid';
 
 const OENAsideButton = ({ view = {}, item, type }) => {
   const { active, icon, label, select, title } = item;
@@ -38,6 +39,7 @@ const OENAsideButton = ({ view = {}, item, type }) => {
 
     wrapIn(main.state.config.schema.nodes.oen_aside, {
       class: type,
+      id: uuidv4(),
     })(main.state, main.dispatch);
 
     setTimeout(() => {

wax-prosemirror-services/src/OENContainersService/schema/OenAsideNode.js

@@ -2,6 +2,7 @@ const OenAsideNode = {
   content: 'block+',
   group: 'block',
   attrs: {
+    id: { default: '' },
     class: { default: '' },
   },
   defining: true,
@@ -10,6 +11,7 @@ const OenAsideNode = {
       tag: 'aside',
       getAttrs(dom) {
         return {
+          id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
         };
       },
@@ -19,6 +21,7 @@ const OenAsideNode = {
     return [
       'aside',
       {
+        id: node.attrs.id,
         class: node.attrs.class,
       },
       0,

wax-prosemirror-services/src/OENContainersService/schema/OenContainerNode.js

@@ -2,6 +2,7 @@ const OenContainerNode = {
   content: 'block+',
   group: 'block',
   attrs: {
+    id: { default: '' },
     class: { default: '' },
     type: { default: 'content_structure_element' },
   },
@@ -11,6 +12,7 @@ const OenContainerNode = {
       tag: 'div[data-type="content_structure_element"]',
       getAttrs(dom) {
         return {
+          id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
           type: dom.dataset.type,
         };
@@ -21,6 +23,7 @@ const OenContainerNode = {
     return [
       'div',
       {
+        id: node.attrs.id,
         class: node.attrs.class,
         'data-type': node.attrs.type,
       },

wax-prosemirror-services/src/OENContainersService/schema/OenSectionNode.js

@@ -2,6 +2,7 @@ const OenSectionNode = {
   content: 'block+',
   group: 'block',
   attrs: {
+    id: { default: '' },
     class: { default: 'section' },
   },
   defining: true,
@@ -10,6 +11,7 @@ const OenSectionNode = {
       tag: 'section',
       getAttrs(dom) {
         return {
+          id: dom.getAttribute('id'),
           class: dom.getAttribute('class'),
           type: dom.dataset.group,
         };