diff --git a/editors/demo/src/OEN/config/config.js b/editors/demo/src/OEN/config/config.js
index 6133d9c4b5a5189118e06a4fdefb66b7e06b888f..a1dae12c5de6d14774abf5f273ee5020338448b9 100644
--- a/editors/demo/src/OEN/config/config.js
+++ b/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',
diff --git a/wax-prosemirror-core/src/components/tabs/OENToolGroup.js b/wax-prosemirror-core/src/components/tabs/OENToolGroup.js
index 015c9d36a345464ff8c7225aacf692081a2a35f2..9f51a59fe924bdcfe1b2a848f3ef440f1047f62d 100644
--- a/wax-prosemirror-core/src/components/tabs/OENToolGroup.js
+++ b/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(() => {
diff --git a/wax-prosemirror-services/src/ImageService/AltComponent.js b/wax-prosemirror-services/src/ImageService/AltComponent.js
index 35ab8914bb525affb89d9baa3d84f2a110d5faa2..5662125c473320b8ba94466e3b91197c370b3835 100644
--- a/wax-prosemirror-services/src/ImageService/AltComponent.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/ImageService/plugins/captionPlugin.js b/wax-prosemirror-services/src/ImageService/plugins/captionPlugin.js
index b4fc2e7df01f36113885d9b148b724c8b84dfd15..2061eed54d09e6ddda406f1f4023282f4cab7b6f 100644
--- a/wax-prosemirror-services/src/ImageService/plugins/captionPlugin.js
+++ b/wax-prosemirror-services/src/ImageService/plugins/captionPlugin.js
@@ -1,5 +1,9 @@
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();
}
}
}
diff --git a/wax-prosemirror-services/src/ImageService/schema/figureCaptionNode.js b/wax-prosemirror-services/src/ImageService/schema/figureCaptionNode.js
index caac6098877e41cec96c64c3f6bb18a0669fcbc3..63b7b377ac030c44235e38572eeb073f404df055 100644
--- a/wax-prosemirror-services/src/ImageService/schema/figureCaptionNode.js
+++ b/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;
diff --git a/wax-prosemirror-services/src/OENContainersService/components/OENAsideButton.js b/wax-prosemirror-services/src/OENContainersService/components/OENAsideButton.js
index 41fc53202741480699d664f98d85b41b82f3d990..eb3ed682eaf07ea93bdf37d4b189b927175d17e8 100644
--- a/wax-prosemirror-services/src/OENContainersService/components/OENAsideButton.js
+++ b/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(() => {
diff --git a/wax-prosemirror-services/src/OENContainersService/schema/OenAsideNode.js b/wax-prosemirror-services/src/OENContainersService/schema/OenAsideNode.js
index 60b1cfa2cf7cf4efe831c1000f537f7e817eac3f..db7dfe4f3a2f579edae74697377fad44975558d4 100644
--- a/wax-prosemirror-services/src/OENContainersService/schema/OenAsideNode.js
+++ b/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,
diff --git a/wax-prosemirror-services/src/OENContainersService/schema/OenContainerNode.js b/wax-prosemirror-services/src/OENContainersService/schema/OenContainerNode.js
index b57ddc494d2794fe4db2b18b38e82a57dba02142..beb15c32d6ef156f3c46d73e0b1f78cbae2fbb93 100644
--- a/wax-prosemirror-services/src/OENContainersService/schema/OenContainerNode.js
+++ b/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,
},
diff --git a/wax-prosemirror-services/src/OENContainersService/schema/OenSectionNode.js b/wax-prosemirror-services/src/OENContainersService/schema/OenSectionNode.js
index e8543e570ce99909338af7870386eb906d744009..5b64e7b0bd5f3ab4201cb083c4cbb1ee9b83bbaf 100644
--- a/wax-prosemirror-services/src/OENContainersService/schema/OenSectionNode.js
+++ b/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,
};