@manuscripts/body-editor 3.12.19 → 3.12.22

package/dist/cjs/commands.js

@@ -185,7 +185,7 @@ const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case transform_1.schema.nodes.listing_element:
             node = transform_1.schema.nodes.listing_element.create({}, [
                 transform_1.schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(),
+                ...createAndFillCaption(),
             ]);
             break;
         case transform_1.schema.nodes.equation_element:
@@ -256,10 +256,7 @@ const insertFigure = (file, state, dispatch) => {
     });
     const element = state.schema.nodes.figure_element.createAndFill({}, [
         figure,
-        state.schema.nodes.figcaption.create({}, [
-            state.schema.nodes.caption_title.create(),
-            state.schema.nodes.caption.create(),
-        ]),
+        transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     ]);
     const tr = state.tr.insert(position, element);
     dispatch(tr);
@@ -275,7 +272,7 @@ const insertEmbed = (state, dispatch, attrs) => {
         ...attrs,
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed),
     }, [
-        createAndFillFigcaptionElement(),
+        ...createAndFillCaption(),
         transform_1.schema.nodes.alt_text.create(),
         transform_1.schema.nodes.long_desc.create(),
     ]);
@@ -301,12 +298,7 @@ const insertSupplement = (file, view) => {
     const supplement = transform_1.schema.nodes.supplement.createAndFill({
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
         href: file.id,
-    }, [
-        transform_1.schema.nodes.figcaption.create({}, [
-            transform_1.schema.nodes.caption_title.create(),
-            transform_1.schema.nodes.caption.create(),
-        ]),
-    ]);
+    }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
     tr.setSelection(prosemirror_state_1.NodeSelection.create(tr.doc, pos));
@@ -589,7 +581,7 @@ const insertBoxElement = (state, dispatch) => {
         paragraph,
     ]);
     const node = nodes.box_element.createAndFill({}, [
-        nodes.figcaption.create({}, [nodes.caption_title.create()]),
+        nodes.caption_title.create(),
         section,
     ]);
     if (position && dispatch) {
@@ -1123,7 +1115,7 @@ const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG) => {
         ...attrs,
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.table_element),
     }, [
-        createAndFillFigcaptionElement(),
+        transform_1.schema.nodes.caption_title.create(),
         transform_1.schema.nodes.table.create({}, tableRows),
         transform_1.schema.nodes.alt_text.create(),
         transform_1.schema.nodes.long_desc.create(),
@@ -1135,21 +1127,22 @@ const createAndFillFigureElement = (attrs) => transform_1.schema.nodes.figure_el
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.figure_element),
 }, [
-    transform_1.schema.nodes.figure.create({}, [transform_1.schema.nodes.figcaption.create()]),
-    createAndFillFigcaptionElement(),
+    transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
     transform_1.schema.nodes.listing.create(),
 ]);
-const createAndFillFigcaptionElement = () => transform_1.schema.nodes.figcaption.create({}, [
+const createAndFillCaption = () => [
     transform_1.schema.nodes.caption_title.create(),
-    transform_1.schema.nodes.caption.create(),
-]);
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
+];
 const createImageElement = (attrs) => transform_1.schema.nodes.image_element.create({
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.image_element),
 }, [
     transform_1.schema.nodes.figure.create(),
+    transform_1.schema.nodes.caption.create(undefined, transform_1.schema.nodes.text_block.create()),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
 ]);
@@ -1157,7 +1150,7 @@ const createEmbedElement = (attrs) => transform_1.schema.nodes.embed.create({
     ...attrs,
     id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.embed),
 }, [
-    createAndFillFigcaptionElement(),
+    ...createAndFillCaption(),
     transform_1.schema.nodes.alt_text.create(),
     transform_1.schema.nodes.long_desc.create(),
 ]);

package/dist/cjs/keys/title.js

@@ -65,9 +65,11 @@ const leaveTitle = (state, dispatch, view) => {
     }
     return true;
 };
-const leaveFigcaption = (state) => {
+const leaveCaption = (state) => {
     const { selection: { $anchor }, } = state;
-    return $anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title;
+    return ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title ||
+        $anchor.node($anchor.depth - 1)?.type ===
+            $anchor.parent.type.schema.nodes.caption);
 };
 const protectTitles = (state, dispatch, view) => {
     const { selection } = state;
@@ -99,25 +101,37 @@ const protectReferencesTitle = (state) => {
 exports.protectReferencesTitle = protectReferencesTitle;
 const protectCaption = (state, dispatch) => {
     const { selection: { $anchor }, } = state;
-    if (dispatch &&
-        ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title ||
-            $anchor.parent.type === $anchor.parent.type.schema.nodes.caption) &&
+    let nodeType = undefined;
+    if ($anchor.node($anchor.depth - 1)?.type ===
+        $anchor.parent.type.schema.nodes.caption &&
+        $anchor.node($anchor.depth).content.size === 1) {
+        nodeType = $anchor.node($anchor.depth - 1).type;
+    }
+    else if ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
         $anchor.parent.content.size === 1) {
-        const slice = new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from([state.schema.nodes.caption_title.create()]), 1, 1);
+        nodeType = $anchor.parent.type;
+    }
+    if (dispatch && nodeType) {
+        const slice = new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from([nodeType.create()]), 1, 1);
         const tr = state.tr.replace($anchor.pos - 1, $anchor.pos, slice);
         dispatch(tr);
         return true;
     }
     return false;
 };
-const keepCaption = (state) => {
+const keepCaption = (state, dispatch) => {
     const { selection: { $anchor }, } = state;
-    return ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
-        $anchor.parent.content.size === 0);
+    if (dispatch &&
+        $anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
+        $anchor.parent.content.size === 1) {
+        dispatch(state.tr.delete($anchor.pos, $anchor.pos + 1));
+        return true;
+    }
+    return false;
 };
 const titleKeymap = {
     Backspace: (0, prosemirror_commands_1.chainCommands)(protectTitles, exports.protectReferencesTitle, protectCaption),
-    Enter: (0, prosemirror_commands_1.chainCommands)(commands_1.autoComplete, leaveTitle, leaveFigcaption),
+    Enter: (0, prosemirror_commands_1.chainCommands)(commands_1.autoComplete, leaveTitle, leaveCaption),
     Delete: (0, prosemirror_commands_1.chainCommands)(keepCaption, exports.protectReferencesTitle),
 };
 exports.default = titleKeymap;

package/dist/cjs/lib/__tests__/plugins.test.js

@@ -99,7 +99,7 @@ describe('editor view', () => {
         expect(figureElement.childCount).toBe(5);
         expect(figureElement.type).toBe(transform_1.schema.nodes.figure_element);
         expect(figureElement.content.child(0).type).toBe(transform_1.schema.nodes.figure);
-        expect(figureElement.content.child(1).type).toBe(transform_1.schema.nodes.figcaption);
+        expect(figureElement.content.child(1).type).toBe(transform_1.schema.nodes.caption);
         const sectionWithTable = view.state.doc.child(2).child(8);
         expect(sectionWithTable.attrs.id).toBe('section-with-table');
         expect(sectionWithTable.childCount).toBe(2);
@@ -107,7 +107,7 @@ describe('editor view', () => {
         const tableElement = sectionWithTable.content.child(1);
         expect(tableElement.childCount).toBe(5);
         expect(tableElement.type).toBe(tableElement.type.schema.nodes.table_element);
-        expect(tableElement.content.child(0).type).toBe(tableElement.type.schema.nodes.figcaption);
+        expect(tableElement.content.child(0).type).toBe(tableElement.type.schema.nodes.caption_title);
         expect(tableElement.content.child(1).type).toBe(tableElement.type.schema.nodes.table);
     });
 });

package/dist/cjs/lib/context-menu.js

@@ -258,19 +258,18 @@ class ContextMenu {
                 const tr = this.view.state.tr;
                 const boxElementNode = $pos.node($pos.depth - 1);
                 const boxStartPos = $pos.start($pos.depth - 1);
-                const figcaptions = (0, prosemirror_utils_1.findChildrenByType)(boxElementNode, transform_1.schema.nodes.figcaption);
-                const hasLabel = figcaptions.length > 0;
+                const captionTitle = (0, prosemirror_utils_1.findChildrenByType)(boxElementNode, transform_1.schema.nodes.caption_title, false)[0];
+                const caption = (0, prosemirror_utils_1.findChildrenByType)(boxElementNode, transform_1.schema.nodes.caption, false)[0];
+                const hasLabel = captionTitle;
                 menu.insertBefore(this.createMenuItem(hasLabel ? 'Delete Label' : 'Add Label', () => {
                     if (hasLabel) {
-                        const figcaptionNode = figcaptions[0].node;
-                        const figcaptionPos = boxStartPos + figcaptions[0].pos;
-                        tr.delete(figcaptionPos, figcaptionPos + figcaptionNode.nodeSize);
+                        const captionNode = captionTitle.node;
+                        const captionPos = boxStartPos + captionTitle.pos;
+                        tr.delete(captionPos, captionPos + captionNode.nodeSize + (caption?.node.nodeSize || 0));
                     }
                     else {
-                        const newFigcaption = transform_1.schema.nodes.figcaption.create({}, [
-                            transform_1.schema.nodes.caption_title.create(),
-                        ]);
-                        tr.insert(boxStartPos, newFigcaption);
+                        const captionTitle = transform_1.schema.nodes.caption_title.create();
+                        tr.insert(boxStartPos, captionTitle);
                     }
                     this.view.dispatch(tr);
                     popper.destroy();

package/dist/cjs/plugins/objects.js

@@ -19,6 +19,7 @@ exports.objectsKey = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
+const prosemirror_utils_1 = require("prosemirror-utils");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 exports.objectsKey = new prosemirror_state_1.PluginKey('objects');
 exports.default = () => {
@@ -41,26 +42,19 @@ exports.default = () => {
                         const { id } = node.attrs;
                         if (id) {
                             const target = targets.get(id);
-                            const resolvedPos = state.doc.resolve(pos);
-                            const isInGraphicalAbstract = (0, transform_1.isInGraphicalAbstractSection)(resolvedPos);
-                            if (target && !isInGraphicalAbstract) {
+                            if (target) {
                                 const labelNode = document.createElement('span');
-                                labelNode.className = 'figure-label';
-                                if (node.type.name === 'image_element') {
-                                    labelNode.textContent = target.label;
-                                    decorations.push(prosemirror_view_1.Decoration.widget(pos + (node.firstChild?.nodeSize || 0) + 1, labelNode));
-                                }
-                                else {
-                                    labelNode.textContent = target.label + ':';
-                                    node.forEach((child, offset) => {
-                                        if (child.type.name === 'figcaption') {
-                                            decorations.push(prosemirror_view_1.Decoration.widget(pos + 1 + offset + 1, labelNode, {
-                                                side: -1,
-                                                key: `figure-label-${id}-${target.label}`,
-                                            }));
-                                        }
-                                    });
-                                }
+                                labelNode.className = 'element-label';
+                                const caption = (0, prosemirror_utils_1.findChildren)(node, (node) => node.type === transform_1.schema.nodes.caption ||
+                                    node.type === transform_1.schema.nodes.caption_title, false)[0];
+                                const labelPos = getDecorationPos(target, state.doc, pos, caption);
+                                labelNode.textContent = caption
+                                    ? target.label + ':'
+                                    : target.label;
+                                decorations.push(prosemirror_view_1.Decoration.widget(labelPos, labelNode, {
+                                    side: -1,
+                                    key: `element-label-${id}-${target.label}`,
+                                }));
                             }
                         }
                     });
@@ -70,3 +64,14 @@ exports.default = () => {
         },
     });
 };
+const getDecorationPos = (target, doc, pos, caption) => {
+    const $pos = doc.resolve(pos + (caption?.pos || 1) + 1);
+    let targetPos = $pos.pos;
+    if (!caption) {
+        targetPos = $pos.end();
+    }
+    else if (!$pos.nodeBefore) {
+        targetPos -= 1;
+    }
+    return targetPos;
+};

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.12.19';
+exports.VERSION = '3.12.22';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/caption.js

@@ -26,7 +26,7 @@ class CaptionView extends base_node_view_1.BaseNodeView {
         };
     }
     createDOM() {
-        this.dom = document.createElement('p');
+        this.dom = document.createElement('caption');
         this.dom.className = 'caption-description placeholder';
         this.dom.contentEditable = 'true';
         this.contentDOM = this.dom;

package/dist/cjs/views/figure.js

@@ -60,7 +60,6 @@ class FigureView extends base_node_view_1.BaseNodeView {
         this.container.contentEditable = 'false';
         this.dom.appendChild(this.container);
         this.contentDOM = document.createElement('div');
-        this.contentDOM.className = 'figure-caption';
         this.contentDOM.setAttribute('tabindex', '1337');
         this.dom.appendChild(this.contentDOM);
     }

package/dist/es/commands.js

@@ -175,7 +175,7 @@ export const createBlock = (nodeType, position, state, dispatch, attrs) => {
         case schema.nodes.listing_element:
             node = schema.nodes.listing_element.create({}, [
                 schema.nodes.listing.create(),
-                createAndFillFigcaptionElement(),
+                ...createAndFillCaption(),
             ]);
             break;
         case schema.nodes.equation_element:
@@ -243,10 +243,7 @@ export const insertFigure = (file, state, dispatch) => {
     });
     const element = state.schema.nodes.figure_element.createAndFill({}, [
         figure,
-        state.schema.nodes.figcaption.create({}, [
-            state.schema.nodes.caption_title.create(),
-            state.schema.nodes.caption.create(),
-        ]),
+        schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     ]);
     const tr = state.tr.insert(position, element);
     dispatch(tr);
@@ -261,7 +258,7 @@ export const insertEmbed = (state, dispatch, attrs) => {
         ...attrs,
         id: generateNodeID(schema.nodes.embed),
     }, [
-        createAndFillFigcaptionElement(),
+        ...createAndFillCaption(),
         schema.nodes.alt_text.create(),
         schema.nodes.long_desc.create(),
     ]);
@@ -285,12 +282,7 @@ export const insertSupplement = (file, view) => {
     const supplement = schema.nodes.supplement.createAndFill({
         id: generateNodeID(schema.nodes.supplement),
         href: file.id,
-    }, [
-        schema.nodes.figcaption.create({}, [
-            schema.nodes.caption_title.create(),
-            schema.nodes.caption.create(),
-        ]),
-    ]);
+    }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = upsertSupplementsSection(tr, supplement);
     tr.setSelection(NodeSelection.create(tr.doc, pos));
@@ -559,7 +551,7 @@ export const insertBoxElement = (state, dispatch) => {
         paragraph,
     ]);
     const node = nodes.box_element.createAndFill({}, [
-        nodes.figcaption.create({}, [nodes.caption_title.create()]),
+        nodes.caption_title.create(),
         section,
     ]);
     if (position && dispatch) {
@@ -1072,7 +1064,7 @@ export const createAndFillTableElement = (attrs, config = DEFAULT_TABLE_CONFIG)
         ...attrs,
         id: generateNodeID(schema.nodes.table_element),
     }, [
-        createAndFillFigcaptionElement(),
+        schema.nodes.caption_title.create(),
         schema.nodes.table.create({}, tableRows),
         schema.nodes.alt_text.create(),
         schema.nodes.long_desc.create(),
@@ -1083,21 +1075,22 @@ const createAndFillFigureElement = (attrs) => schema.nodes.figure_element.create
     ...attrs,
     id: generateNodeID(schema.nodes.figure_element),
 }, [
-    schema.nodes.figure.create({}, [schema.nodes.figcaption.create()]),
-    createAndFillFigcaptionElement(),
+    schema.nodes.figure.create(),
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
     schema.nodes.listing.create(),
 ]);
-const createAndFillFigcaptionElement = () => schema.nodes.figcaption.create({}, [
+const createAndFillCaption = () => [
     schema.nodes.caption_title.create(),
-    schema.nodes.caption.create(),
-]);
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
+];
 const createImageElement = (attrs) => schema.nodes.image_element.create({
     ...attrs,
     id: generateNodeID(schema.nodes.image_element),
 }, [
     schema.nodes.figure.create(),
+    schema.nodes.caption.create(undefined, schema.nodes.text_block.create()),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
 ]);
@@ -1105,7 +1098,7 @@ const createEmbedElement = (attrs) => schema.nodes.embed.create({
     ...attrs,
     id: generateNodeID(schema.nodes.embed),
 }, [
-    createAndFillFigcaptionElement(),
+    ...createAndFillCaption(),
     schema.nodes.alt_text.create(),
     schema.nodes.long_desc.create(),
 ]);

package/dist/es/keys/title.js

@@ -62,9 +62,11 @@ const leaveTitle = (state, dispatch, view) => {
     }
     return true;
 };
-const leaveFigcaption = (state) => {
+const leaveCaption = (state) => {
     const { selection: { $anchor }, } = state;
-    return $anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title;
+    return ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title ||
+        $anchor.node($anchor.depth - 1)?.type ===
+            $anchor.parent.type.schema.nodes.caption);
 };
 const protectTitles = (state, dispatch, view) => {
     const { selection } = state;
@@ -95,25 +97,37 @@ export const protectReferencesTitle = (state) => {
 };
 const protectCaption = (state, dispatch) => {
     const { selection: { $anchor }, } = state;
-    if (dispatch &&
-        ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title ||
-            $anchor.parent.type === $anchor.parent.type.schema.nodes.caption) &&
+    let nodeType = undefined;
+    if ($anchor.node($anchor.depth - 1)?.type ===
+        $anchor.parent.type.schema.nodes.caption &&
+        $anchor.node($anchor.depth).content.size === 1) {
+        nodeType = $anchor.node($anchor.depth - 1).type;
+    }
+    else if ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
         $anchor.parent.content.size === 1) {
-        const slice = new Slice(Fragment.from([state.schema.nodes.caption_title.create()]), 1, 1);
+        nodeType = $anchor.parent.type;
+    }
+    if (dispatch && nodeType) {
+        const slice = new Slice(Fragment.from([nodeType.create()]), 1, 1);
         const tr = state.tr.replace($anchor.pos - 1, $anchor.pos, slice);
         dispatch(tr);
         return true;
     }
     return false;
 };
-const keepCaption = (state) => {
+const keepCaption = (state, dispatch) => {
     const { selection: { $anchor }, } = state;
-    return ($anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
-        $anchor.parent.content.size === 0);
+    if (dispatch &&
+        $anchor.parent.type === $anchor.parent.type.schema.nodes.caption_title &&
+        $anchor.parent.content.size === 1) {
+        dispatch(state.tr.delete($anchor.pos, $anchor.pos + 1));
+        return true;
+    }
+    return false;
 };
 const titleKeymap = {
     Backspace: chainCommands(protectTitles, protectReferencesTitle, protectCaption),
-    Enter: chainCommands(autoComplete, leaveTitle, leaveFigcaption),
+    Enter: chainCommands(autoComplete, leaveTitle, leaveCaption),
     Delete: chainCommands(keepCaption, protectReferencesTitle),
 };
 export default titleKeymap;

package/dist/es/lib/__tests__/plugins.test.js

@@ -94,7 +94,7 @@ describe('editor view', () => {
         expect(figureElement.childCount).toBe(5);
         expect(figureElement.type).toBe(schema.nodes.figure_element);
         expect(figureElement.content.child(0).type).toBe(schema.nodes.figure);
-        expect(figureElement.content.child(1).type).toBe(schema.nodes.figcaption);
+        expect(figureElement.content.child(1).type).toBe(schema.nodes.caption);
         const sectionWithTable = view.state.doc.child(2).child(8);
         expect(sectionWithTable.attrs.id).toBe('section-with-table');
         expect(sectionWithTable.childCount).toBe(2);
@@ -102,7 +102,7 @@ describe('editor view', () => {
         const tableElement = sectionWithTable.content.child(1);
         expect(tableElement.childCount).toBe(5);
         expect(tableElement.type).toBe(tableElement.type.schema.nodes.table_element);
-        expect(tableElement.content.child(0).type).toBe(tableElement.type.schema.nodes.figcaption);
+        expect(tableElement.content.child(0).type).toBe(tableElement.type.schema.nodes.caption_title);
         expect(tableElement.content.child(1).type).toBe(tableElement.type.schema.nodes.table);
     });
 });

package/dist/es/lib/context-menu.js

@@ -254,19 +254,18 @@ export class ContextMenu {
                 const tr = this.view.state.tr;
                 const boxElementNode = $pos.node($pos.depth - 1);
                 const boxStartPos = $pos.start($pos.depth - 1);
-                const figcaptions = findChildrenByType(boxElementNode, schema.nodes.figcaption);
-                const hasLabel = figcaptions.length > 0;
+                const captionTitle = findChildrenByType(boxElementNode, schema.nodes.caption_title, false)[0];
+                const caption = findChildrenByType(boxElementNode, schema.nodes.caption, false)[0];
+                const hasLabel = captionTitle;
                 menu.insertBefore(this.createMenuItem(hasLabel ? 'Delete Label' : 'Add Label', () => {
                     if (hasLabel) {
-                        const figcaptionNode = figcaptions[0].node;
-                        const figcaptionPos = boxStartPos + figcaptions[0].pos;
-                        tr.delete(figcaptionPos, figcaptionPos + figcaptionNode.nodeSize);
+                        const captionNode = captionTitle.node;
+                        const captionPos = boxStartPos + captionTitle.pos;
+                        tr.delete(captionPos, captionPos + captionNode.nodeSize + (caption?.node.nodeSize || 0));
                     }
                     else {
-                        const newFigcaption = schema.nodes.figcaption.create({}, [
-                            schema.nodes.caption_title.create(),
-                        ]);
-                        tr.insert(boxStartPos, newFigcaption);
+                        const captionTitle = schema.nodes.caption_title.create();
+                        tr.insert(boxStartPos, captionTitle);
                     }
                     this.view.dispatch(tr);
                     popper.destroy();

package/dist/es/plugins/objects.js

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { buildTargets, isInGraphicalAbstractSection, } from '@manuscripts/transform';
+import { buildTargets, schema, } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { findChildren } from 'prosemirror-utils';
 import { clear } from '@manuscripts/track-changes-plugin';
 export const objectsKey = new PluginKey('objects');
 export default () => {
@@ -38,26 +39,19 @@ export default () => {
                         const { id } = node.attrs;
                         if (id) {
                             const target = targets.get(id);
-                            const resolvedPos = state.doc.resolve(pos);
-                            const isInGraphicalAbstract = isInGraphicalAbstractSection(resolvedPos);
-                            if (target && !isInGraphicalAbstract) {
+                            if (target) {
                                 const labelNode = document.createElement('span');
-                                labelNode.className = 'figure-label';
-                                if (node.type.name === 'image_element') {
-                                    labelNode.textContent = target.label;
-                                    decorations.push(Decoration.widget(pos + (node.firstChild?.nodeSize || 0) + 1, labelNode));
-                                }
-                                else {
-                                    labelNode.textContent = target.label + ':';
-                                    node.forEach((child, offset) => {
-                                        if (child.type.name === 'figcaption') {
-                                            decorations.push(Decoration.widget(pos + 1 + offset + 1, labelNode, {
-                                                side: -1,
-                                                key: `figure-label-${id}-${target.label}`,
-                                            }));
-                                        }
-                                    });
-                                }
+                                labelNode.className = 'element-label';
+                                const caption = findChildren(node, (node) => node.type === schema.nodes.caption ||
+                                    node.type === schema.nodes.caption_title, false)[0];
+                                const labelPos = getDecorationPos(target, state.doc, pos, caption);
+                                labelNode.textContent = caption
+                                    ? target.label + ':'
+                                    : target.label;
+                                decorations.push(Decoration.widget(labelPos, labelNode, {
+                                    side: -1,
+                                    key: `element-label-${id}-${target.label}`,
+                                }));
                             }
                         }
                     });
@@ -67,3 +61,14 @@ export default () => {
         },
     });
 };
+const getDecorationPos = (target, doc, pos, caption) => {
+    const $pos = doc.resolve(pos + (caption?.pos || 1) + 1);
+    let targetPos = $pos.pos;
+    if (!caption) {
+        targetPos = $pos.end();
+    }
+    else if (!$pos.nodeBefore) {
+        targetPos -= 1;
+    }
+    return targetPos;
+};

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.12.19';
+export const VERSION = '3.12.22';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/caption.js

@@ -23,7 +23,7 @@ export class CaptionView extends BaseNodeView {
         };
     }
     createDOM() {
-        this.dom = document.createElement('p');
+        this.dom = document.createElement('caption');
         this.dom.className = 'caption-description placeholder';
         this.dom.contentEditable = 'true';
         this.contentDOM = this.dom;

package/dist/es/views/figure.js

@@ -57,7 +57,6 @@ export class FigureView extends BaseNodeView {
         this.container.contentEditable = 'false';
         this.dom.appendChild(this.container);
         this.contentDOM = document.createElement('div');
-        this.contentDOM.className = 'figure-caption';
         this.contentDOM.setAttribute('tabindex', '1337');
         this.dom.appendChild(this.contentDOM);
     }

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.12.19";
+export declare const VERSION = "3.12.22";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.12.19",
+  "version": "3.12.22",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,8 +38,8 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
     "@manuscripts/style-guide": "3.5.7",
-    "@manuscripts/track-changes-plugin": "2.3.9",
-    "@manuscripts/transform": "4.3.33",
+    "@manuscripts/track-changes-plugin": "2.3.10",
+    "@manuscripts/transform": "4.3.35",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/styles/AdvancedEditor.css

@@ -162,6 +162,10 @@
     [caption listing] auto !important;
 }
 
+.ProseMirror .figure-block {
+  text-align: center;
+}
+
 .ProseMirror .figure-block-group .figure-block {
   border: none;
   border-radius: 0;
@@ -254,16 +258,6 @@
   padding-bottom: 20px;
 }
 
-.ProseMirror .figure-block > figcaption {
-  grid-column-start: 1;
-  grid-column-end: -1;
-  margin-top: 30px;
-}
-
-.ProseMirror .figure-caption {
-  display: none;
-}
-
 .ProseMirror .figure.placeholder {
   align-items: center;
   border-radius: 16px;
@@ -319,22 +313,6 @@
   border: none;
 }
 
-.ProseMirror figcaption {
-  background: white;
-  font-size: 14px;
-  margin-top: 1em;
-  text-align: center;
-  word-wrap: break-word;
-}
-
-.ProseMirror .block-table_element figcaption {
-  text-align: left;
-}
-
-.ProseMirror .figure-block > figcaption .figure-label {
-  display: initial !important;
-}
-
 .ProseMirror .figure-block[id^='MPTable'] {
   border-collapse: collapse;
   empty-cells: show;
@@ -365,11 +343,6 @@
   border-bottom-width: 1pt !important;
 }
 
-.ProseMirror .figure-block[id^='MPTable'] > figcaption {
-  grid-row: 2 !important;
-  text-align: center !important;
-}
-
 .position-menu-button:focus-visible {
   outline: none;
 }
@@ -449,11 +422,6 @@ ProseMirror .block-embed .position-menu {
 .ProseMirror .block-affiliations {
   grid-template-columns: 52px auto 100px;
 }
-.ProseMirror .block-container.block-box_element > .block.box-element {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto;
-}
 
 .ProseMirror .box-element .block-container .block {
   background: var(--box-element-bg-color);
@@ -462,8 +430,8 @@ ProseMirror .block-embed .position-menu {
   border-right: 2px solid #e2e2e2;
 }
 
-.ProseMirror .box-element::after,
-.box-element > .block-section::before {
+.ProseMirror .box-element > .block-section::before,
+.ProseMirror .box-element > .block-section::after {
   content: ' ';
   margin-left: 52px;
   margin-right: 52px;
@@ -471,11 +439,16 @@ ProseMirror .block-embed .position-menu {
   height: 0;
 }
 
-.box-element > figcaption {
-  margin-left: 54px;
-  margin-right: 54px;
-  padding-bottom: 6px;
-  text-align: left;
+.ProseMirror .box-element > .block-section {
+  padding-top: 6px;
+}
+
+.ProseMirror .box-element > .element-label {
+  margin-left: 52px;
+}
+
+.ProseMirror .box-element > .caption-title {
+  margin-right: 52px;
 }
 
 .ProseMirror
@@ -496,9 +469,7 @@ ProseMirror .block-embed .position-menu {
   > h1.empty-node[data-placeholder]::before {
   font-size: 16pt;
 }
-.box-element section figcaption {
-  background: var(--box-element-bg-color);
-}
+
 .unsupported-format-label {
   font-size: 140%;
   line-height: 1.3;
@@ -1854,8 +1825,7 @@ th:hover > .table-context-menu-button,
 
 .ProseMirror .block-image_element .block:focus-visible,
 .ProseMirror .block-figure_element .block:focus-visible,
-.ProseMirror .block-embed .block:focus-visible,
-.ProseMirror .supplement-caption:focus-visible {
+.ProseMirror .block-embed .block:focus-visible {
   outline: none;
 }
 

package/styles/Editor.css

@@ -308,82 +308,55 @@
   padding-top: 1em;
 }
 
-.ProseMirror .caption-title:not(.empty-node) {
+/* Caption and Element Label */
+
+.ProseMirror .caption-title:not(.empty-node), .ProseMirror .element-label {
   font-weight: bold;
 }
 
-.ProseMirror .caption-description {
+.ProseMirror .element-label, .ProseMirror .caption-description, .ProseMirror .caption-title {
+  font-size: 14px;
+  outline: none;
   margin: 0;
-  outline: none !important;
+  display: inline;
 }
 
-.ProseMirror .suppress-title .caption-description {
+.ProseMirror .element-label + .caption-description > p:first-child {
   display: inline;
-  outline: none !important;
-}
-.ProseMirror .caption-title {
-  outline: none !important;
 }
 
-.ProseMirror .caption-title.empty-node::before {
-  content: 'Caption Title...';
-  color: #000;
-  cursor: text;
+.ProseMirror .caption-description > p {
+  margin: 0;
 }
 
-.ProseMirror .block-box_element .caption-title.empty-node::before {
-  content: none;
+.ProseMirror .element-label {
+  margin-right: 5px;
 }
 
-.ProseMirror .block-box_element label.caption-title.placeholder.empty-node {
-  display: inline-flex;
+.ProseMirror .block-equation_element .element-label {
+  display: block;
+  text-align: center;
 }
 
-.ProseMirror .block-box_element .caption-title.empty-node::after {
+.ProseMirror .caption-title.empty-node::before {
   content: 'Caption Title...';
-  color: #999;
-  font-style: italic;
-  pointer-events: none;
+  color: #000;
+  cursor: text;
 }
 
-.ProseMirror .caption-description.empty-node::before {
+.ProseMirror .caption-description > p.empty-node::before {
   content: 'Caption...';
   color: #000;
   cursor: text;
 }
 
-.ProseMirror .block-table_element .caption-description.empty-node::before {
-  content: 'Table caption';
-}
-
 .ProseMirror .block-table_element .caption-title.empty-node::before {
   content: 'Table title';
 }
 
-.ProseMirror .suppress-caption .caption-description {
-  display: none;
-}
-
-.ProseMirror .suppress-caption figcaption > .figure-label {
-  display: none !important;
-}
-
-.ProseMirror .suppress-title .caption-title {
-  display: none;
-}
-
-.ProseMirror .figure-label {
-  font-weight: bold;
-  font-size: 14px;
-  margin-right: 5px;
-  white-space: nowrap;
-}
-
-.block-image_element .figure-label {
-  display: block;
-  text-align: center;
-  grid-column-start: 1;
-  grid-column-end: -1;
+.ProseMirror .box-element > .caption-title.empty-node::before {
+  color: #999;
+  font-style: italic;
 }
 
 .ProseMirror .executable-container {
@@ -860,21 +833,18 @@
   max-width: 100%;
 }
 
-.ProseMirror figcaption .equation,
 .ProseMirror p .equation {
   display: inline;
   vertical-align: baseline;
   padding: 0 5px;
 }
 
-.ProseMirror figcaption .equation-placeholder,
 .ProseMirror p .equation-placeholder {
   display: inline;
 }
 
 .ProseMirror .code-placeholder,
-.ProseMirror .equation-placeholder,
-.ProseMirror .caption-placeholder {
+.ProseMirror .equation-placeholder {
   color: #c9c9c9;
 }
 
@@ -1229,23 +1199,22 @@
   border-bottom: none;
 }
 
-.ProseMirror .supplement-item figcaption {
-  text-align: left;
-  margin-top: 0;
-}
-
 .ProseMirror .supplement-item .caption-title.empty-node::before {
   content: 'Insert caption title...';
   color: #c9c9c9;
   font-style: italic;
 }
 
-.ProseMirror .supplement-item .caption-description.empty-node::before {
+.ProseMirror .supplement-item .caption-description > p.empty-node::before {
   content: 'Insert caption...';
   color: #c9c9c9;
   font-style: italic;
 }
 
+.ProseMirror .supplement-item .caption-description > p {
+  text-align: start;
+}
+
 .ProseMirror .supplement-file-info {
   display: flex;
   align-items: center;
@@ -1341,10 +1310,6 @@
   cursor: move;
 }
 
-.ProseMirror .supplement-item:hover figcaption {
-  background-color: #f2f2f2 !important;
-}
-
 .ProseMirror .supplement-item .drag-icon {
   position: absolute;
   top: 50%;