diff --git a/editors/editoria/src/layout/EditorElements.js b/editors/editoria/src/layout/EditorElements.js
index e2e896a3663293f4913c2f9e692fd45ce1d3a1a2..54ebf1ecb23b2267d4ed97b480651f8ac28f1ddb 100644
--- a/editors/editoria/src/layout/EditorElements.js
+++ b/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;
}
diff --git a/wax-prosemirror-plugins/src/images/captionPlugin.js b/wax-prosemirror-plugins/src/images/captionPlugin.js
index 6ae3b7a1d41764b68fde03877d624c0a5a3589d8..8f8a5181bf73bfc0ba87940bcbb114aaa95a5130 100644
--- a/wax-prosemirror-plugins/src/images/captionPlugin.js
+++ b/wax-prosemirror-plugins/src/images/captionPlugin.js
@@ -1,18 +1,93 @@
-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();
+ }
+ }
+ }
+ }
+ },
+ },
},
});
diff --git a/wax-prosemirror-plugins/src/images/placeHolderPlugin.js b/wax-prosemirror-plugins/src/images/placeHolderPlugin.js
index 7cbe9bdfd3695f1db32fa5f06385f11a8eab1aef..2d294a6977137a57782bd93a90ff2220efe21495 100644
--- a/wax-prosemirror-plugins/src/images/placeHolderPlugin.js
+++ b/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;
},
diff --git a/wax-prosemirror-schema/index.js b/wax-prosemirror-schema/index.js
index 30b965c426c43930e2172e545a4fcd02b8357334..fd0c54754ca8ddb00116031f1adf81aa472b81b9 100644
--- a/wax-prosemirror-schema/index.js
+++ b/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';
diff --git a/wax-prosemirror-schema/src/nodes/figureCaptionNode.js b/wax-prosemirror-schema/src/nodes/figureCaptionNode.js
index a4303d6b9aa04556b7c5631ec6f00e6d42f6ed9a..2b267b1d5ee18978aa9756f31ad2faaa5b73a1f0 100644
--- a/wax-prosemirror-schema/src/nodes/figureCaptionNode.js
+++ b/wax-prosemirror-schema/src/nodes/figureCaptionNode.js
@@ -1,11 +1,26 @@
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;
diff --git a/wax-prosemirror-schema/src/nodes/imageNode.js b/wax-prosemirror-schema/src/nodes/imageNode.js
index 40e38f316a572f8d2bf5318449ccb56045564103..612e2938b67dc34558b62f053e9bf5d7af8b89e9 100644
--- a/wax-prosemirror-schema/src/nodes/imageNode.js
+++ b/wax-prosemirror-schema/src/nodes/imageNode.js
@@ -1,6 +1,6 @@
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 },
diff --git a/wax-prosemirror-services/src/ImageService/ImageService.js b/wax-prosemirror-services/src/ImageService/ImageService.js
index c25501933b0a6552f2a703f722fe04c8343c4c8f..13b1612440ad896c18d1d7350cc2c484f1caf393 100644
--- a/wax-prosemirror-services/src/ImageService/ImageService.js
+++ b/wax-prosemirror-services/src/ImageService/ImageService.js
@@ -33,7 +33,10 @@ class ImageService extends Service {
);
createNode({
figcaption: figureCaptionNode,
- });
+ }
+ // ,
+ // { toWaxSchema: true },
+ );
}
}
diff --git a/wax-prosemirror-services/src/ImageService/fileUpload.js b/wax-prosemirror-services/src/ImageService/fileUpload.js
index 36a6040420141f93373cffb4021006c538b3d009..d0e5d61139f3793a8060c4e3c904f2b7b56d567e 100644
--- a/wax-prosemirror-services/src/ImageService/fileUpload.js
+++ b/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,
}),