@manuscripts/body-editor 1.9.4 → 1.9.6

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

@@ -214,7 +214,10 @@ class ContextMenu {
                                     index: tablesFootnoteLabels.get(node.attrs.id),
                                 }));
                                 const targetDom = this.view.domAtPos(this.view.state.selection.from);
-                                if (targetDom.node instanceof Element && this.props) {
+                                const targetNode = targetDom.node.nodeType === Node.TEXT_NODE
+                                    ? targetDom.node.parentNode
+                                    : targetDom.node;
+                                if (targetNode instanceof Element && this.props) {
                                     const popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), style_guide_1.TableFootnotesSelector, {
                                         notes: footnotes,
                                         onAdd: () => {
@@ -251,7 +254,7 @@ class ContextMenu {
                                             (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
                                         },
                                     }, this.node, this.getPos, this.view, 'table-footnote-editor');
-                                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.show(targetDom.node, popperContainer, 'bottom-end');
+                                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.show(targetNode, popperContainer, 'bottom-end');
                                 }
                             }
                         }));

package/dist/cjs/plugins/footnotes/footnotes-utils.js

@@ -99,9 +99,9 @@ const updateTableInlineFootnoteLabels = (tr, table) => {
     return tr;
 };
 exports.updateTableInlineFootnoteLabels = updateTableInlineFootnoteLabels;
-const getInlineFootnotes = (id, tableElement) => {
+const getInlineFootnotes = (id, targetNode) => {
     const inlineFootnotes = [];
-    tableElement.node.content.descendants((node, pos) => {
+    targetNode.descendants((node, pos) => {
         var _a;
         if (node.type === transform_1.schema.nodes.inline_footnote) {
             const footnote = node;

package/dist/cjs/plugins/footnotes/index.js

@@ -38,7 +38,8 @@ const buildPluginState = (doc) => {
     doc.descendants((node, pos, parentNode) => {
         if ((0, transform_1.isInlineFootnoteNode)(node) &&
             parentNode &&
-            parentNode.type !== transform_1.schema.nodes.table_cell) {
+            parentNode.type !== transform_1.schema.nodes.table_cell &&
+            parentNode.type !== transform_1.schema.nodes.table_header) {
             nodes.push([node, pos]);
             node.attrs.rids.forEach((rid) => {
                 labels.set(rid, String(++index));
@@ -73,11 +74,20 @@ const uncitedFootnoteWidget = () => () => {
     return element;
 };
 exports.uncitedFootnoteWidget = uncitedFootnoteWidget;
-const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, tableElement) => (view, getPos) => {
+const deleteFootnoteWidget = (node, props, id, tableElement) => (view, getPos) => {
     const deleteBtn = document.createElement('span');
     deleteBtn.className = 'delete-icon';
     deleteBtn.innerHTML = assets_1.deleteIcon;
-    deleteBtn.addEventListener('click', () => {
+    const parentType = tableElement ? 'table ' : '';
+    const footnote = {
+        type: node.type === transform_1.schema.nodes.footnote
+            ? `${parentType}footnote`
+            : 'table general note',
+        message: node.type === transform_1.schema.nodes.footnote
+            ? `This action will entirely remove the ${parentType}footnote from the list because it will no longer be used.`
+            : 'This action will entirely remove the table general note.',
+    };
+    deleteBtn.addEventListener('mousedown', () => {
         const handleDelete = () => {
             let tr = view.state.tr;
             const pos = getPos();
@@ -95,7 +105,8 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
                 }
             }
             if (node.type === transform_1.schema.nodes.footnote && pos) {
-                const inlineFootnotes = (0, footnotes_utils_1.getInlineFootnotes)(id, tableElement);
+                const targetNode = tableElement ? tableElement.node : view.state.doc;
+                const inlineFootnotes = (0, footnotes_utils_1.getInlineFootnotes)(id, targetNode);
                 const nodeWithPos = (0, prosemirror_utils_1.findParentNodeClosestToPos)(tr.doc.resolve(pos), (node) => node.type === transform_1.schema.nodes.footnote);
                 if (nodeWithPos) {
                     const { pos: fnPos, node: fnNode } = nodeWithPos;
@@ -104,13 +115,13 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
                 if (inlineFootnotes) {
                     tr = view.state.tr;
                     inlineFootnotes.forEach((footnote) => {
-                        const pos = footnote.pos + tableElement.pos;
+                        const pos = footnote.pos + (tableElement ? tableElement.pos + 1 : 0);
                         if (footnote.node.attrs.rids.length > 1) {
                             const updatedRids = footnote.node.attrs.rids.filter((rid) => rid !== id);
                             tr.setNodeMarkup(tr.mapping.map(pos + 1), undefined, Object.assign(Object.assign({}, node.attrs), { rids: updatedRids }));
                         }
                         else {
-                            tr.delete(tr.mapping.map(pos + 1), tr.mapping.map(pos + footnote.node.nodeSize + 1));
+                            tr.delete(tr.mapping.map(pos), tr.mapping.map(pos + footnote.node.nodeSize));
                         }
                     });
                 }
@@ -118,8 +129,8 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
             view.dispatch(tr);
         };
         const componentProps = {
-            footnoteType: footnoteType,
-            footnoteMessage: footnoteMessage,
+            footnoteType: footnote.type,
+            footnoteMessage: footnote.message,
             handleDelete: handleDelete,
         };
         (0, ReactSubView_1.default)(Object.assign(Object.assign({}, props), { dispatch: view.dispatch }), DeleteFootnoteDialog_1.DeleteFootnoteDialog, componentProps, node, () => getPos(), view);
@@ -158,19 +169,30 @@ exports.default = (props) => {
         props: {
             decorations: (state) => {
                 const decorations = [];
-                const isInTableElementFooter = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table_element_footer)(state.selection);
+                const tableElementFooter = (0, prosemirror_utils_1.findParentNodeOfType)(transform_1.schema.nodes.table_element_footer)(state.selection);
                 const tableElement = (0, prosemirror_utils_1.findParentNodeOfType)(transform_1.schema.nodes.table_element)(state.selection);
-                if (isInTableElementFooter) {
+                const footnote = (0, prosemirror_utils_1.findParentNodeOfType)(transform_1.schema.nodes.footnote)(state.selection);
+                let targetNode;
+                if (footnote) {
+                    targetNode = footnote;
+                }
+                else if (tableElementFooter) {
+                    targetNode = tableElementFooter;
+                }
+                const can = props.getCapabilities();
+                if (targetNode && can.editArticle) {
                     const parent = (0, utils_1.findParentNodeWithIdValue)(state.selection);
                     if (parent) {
                         decorations.push(prosemirror_view_1.Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
                             class: 'footnote-selected',
                         }));
+                        decorations.push(prosemirror_view_1.Decoration.widget(targetNode.pos + (footnote ? 1 : 2), deleteFootnoteWidget(targetNode.node, props, targetNode.node.attrs.id, tableElement), {
+                            key: targetNode.node.attrs.id,
+                        }));
                     }
                 }
                 const { labels } = exports.footnotesKey.getState(state);
                 let tableInlineFootnoteIds = undefined;
-                const can = props.getCapabilities();
                 state.doc.descendants((node, pos, parent) => {
                     var _a;
                     if ((0, transform_1.isFootnoteNode)(node)) {
@@ -191,35 +213,6 @@ exports.default = (props) => {
                             decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, (0, exports.uncitedFootnoteWidget)()));
                         }
                     }
-                    if (can.editArticle) {
-                        if (tableElement) {
-                            const footnote = (() => {
-                                switch (node.type) {
-                                    case transform_1.schema.nodes.footnote:
-                                        return {
-                                            type: 'table footnote',
-                                            message: 'This action will entirely remove the table footnote from the list  because it will no longer be used.',
-                                        };
-                                    default:
-                                        return {
-                                            type: 'table general note',
-                                            message: 'This action will entirely remove the table general note.',
-                                        };
-                                }
-                            })();
-                            if (node.type === transform_1.schema.nodes.footnote) {
-                                decorations.push(prosemirror_view_1.Decoration.widget(pos + 2, deleteFootnoteWidget(node, props, footnote.type, footnote.message, node.attrs.id, tableElement), {
-                                    key: node.attrs.id,
-                                }));
-                            }
-                            else if (node.type === transform_1.schema.nodes.paragraph &&
-                                (parent === null || parent === void 0 ? void 0 : parent.type) === transform_1.schema.nodes.table_element_footer) {
-                                decorations.push(prosemirror_view_1.Decoration.widget(pos + 1, deleteFootnoteWidget(parent, props, footnote.type, footnote.message, parent.attrs.id, tableElement), {
-                                    key: parent.attrs.id,
-                                }));
-                            }
-                        }
-                    }
                     if (node.type === transform_1.schema.nodes.footnotes_element) {
                         if ((parent === null || parent === void 0 ? void 0 : parent.type) === transform_1.schema.nodes.table_element_footer) {
                             decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {

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

@@ -207,7 +207,10 @@ export class ContextMenu {
                                     index: tablesFootnoteLabels.get(node.attrs.id),
                                 }));
                                 const targetDom = this.view.domAtPos(this.view.state.selection.from);
-                                if (targetDom.node instanceof Element && this.props) {
+                                const targetNode = targetDom.node.nodeType === Node.TEXT_NODE
+                                    ? targetDom.node.parentNode
+                                    : targetDom.node;
+                                if (targetNode instanceof Element && this.props) {
                                     const popperContainer = ReactSubView(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), TableFootnotesSelector, {
                                         notes: footnotes,
                                         onAdd: () => {
@@ -244,7 +247,7 @@ export class ContextMenu {
                                             (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
                                         },
                                     }, this.node, this.getPos, this.view, 'table-footnote-editor');
-                                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.show(targetDom.node, popperContainer, 'bottom-end');
+                                    (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.show(targetNode, popperContainer, 'bottom-end');
                                 }
                             }
                         }));

package/dist/es/plugins/footnotes/footnotes-utils.js

@@ -91,9 +91,9 @@ export const updateTableInlineFootnoteLabels = (tr, table) => {
     });
     return tr;
 };
-export const getInlineFootnotes = (id, tableElement) => {
+export const getInlineFootnotes = (id, targetNode) => {
     const inlineFootnotes = [];
-    tableElement.node.content.descendants((node, pos) => {
+    targetNode.descendants((node, pos) => {
         var _a;
         if (node.type === schema.nodes.inline_footnote) {
             const footnote = node;

package/dist/es/plugins/footnotes/index.js

@@ -16,7 +16,7 @@
 import { isFootnoteNode, isInlineFootnoteNode, schema, } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
 import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
-import { findParentNodeClosestToPos, findParentNodeOfType, hasParentNodeOfType, } from 'prosemirror-utils';
+import { findParentNodeClosestToPos, findParentNodeOfType, } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { alertIcon, deleteIcon } from '../../assets';
 import { DeleteFootnoteDialog, } from '../../components/views/DeleteFootnoteDialog';
@@ -32,7 +32,8 @@ export const buildPluginState = (doc) => {
     doc.descendants((node, pos, parentNode) => {
         if (isInlineFootnoteNode(node) &&
             parentNode &&
-            parentNode.type !== schema.nodes.table_cell) {
+            parentNode.type !== schema.nodes.table_cell &&
+            parentNode.type !== schema.nodes.table_header) {
             nodes.push([node, pos]);
             node.attrs.rids.forEach((rid) => {
                 labels.set(rid, String(++index));
@@ -65,11 +66,20 @@ export const uncitedFootnoteWidget = () => () => {
     element.innerHTML = alertIcon;
     return element;
 };
-const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, tableElement) => (view, getPos) => {
+const deleteFootnoteWidget = (node, props, id, tableElement) => (view, getPos) => {
     const deleteBtn = document.createElement('span');
     deleteBtn.className = 'delete-icon';
     deleteBtn.innerHTML = deleteIcon;
-    deleteBtn.addEventListener('click', () => {
+    const parentType = tableElement ? 'table ' : '';
+    const footnote = {
+        type: node.type === schema.nodes.footnote
+            ? `${parentType}footnote`
+            : 'table general note',
+        message: node.type === schema.nodes.footnote
+            ? `This action will entirely remove the ${parentType}footnote from the list because it will no longer be used.`
+            : 'This action will entirely remove the table general note.',
+    };
+    deleteBtn.addEventListener('mousedown', () => {
         const handleDelete = () => {
             let tr = view.state.tr;
             const pos = getPos();
@@ -87,7 +97,8 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
                 }
             }
             if (node.type === schema.nodes.footnote && pos) {
-                const inlineFootnotes = getInlineFootnotes(id, tableElement);
+                const targetNode = tableElement ? tableElement.node : view.state.doc;
+                const inlineFootnotes = getInlineFootnotes(id, targetNode);
                 const nodeWithPos = findParentNodeClosestToPos(tr.doc.resolve(pos), (node) => node.type === schema.nodes.footnote);
                 if (nodeWithPos) {
                     const { pos: fnPos, node: fnNode } = nodeWithPos;
@@ -96,13 +107,13 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
                 if (inlineFootnotes) {
                     tr = view.state.tr;
                     inlineFootnotes.forEach((footnote) => {
-                        const pos = footnote.pos + tableElement.pos;
+                        const pos = footnote.pos + (tableElement ? tableElement.pos + 1 : 0);
                         if (footnote.node.attrs.rids.length > 1) {
                             const updatedRids = footnote.node.attrs.rids.filter((rid) => rid !== id);
                             tr.setNodeMarkup(tr.mapping.map(pos + 1), undefined, Object.assign(Object.assign({}, node.attrs), { rids: updatedRids }));
                         }
                         else {
-                            tr.delete(tr.mapping.map(pos + 1), tr.mapping.map(pos + footnote.node.nodeSize + 1));
+                            tr.delete(tr.mapping.map(pos), tr.mapping.map(pos + footnote.node.nodeSize));
                         }
                     });
                 }
@@ -110,8 +121,8 @@ const deleteFootnoteWidget = (node, props, footnoteType, footnoteMessage, id, ta
             view.dispatch(tr);
         };
         const componentProps = {
-            footnoteType: footnoteType,
-            footnoteMessage: footnoteMessage,
+            footnoteType: footnote.type,
+            footnoteMessage: footnote.message,
             handleDelete: handleDelete,
         };
         ReactSubView(Object.assign(Object.assign({}, props), { dispatch: view.dispatch }), DeleteFootnoteDialog, componentProps, node, () => getPos(), view);
@@ -150,19 +161,30 @@ export default (props) => {
         props: {
             decorations: (state) => {
                 const decorations = [];
-                const isInTableElementFooter = hasParentNodeOfType(schema.nodes.table_element_footer)(state.selection);
+                const tableElementFooter = findParentNodeOfType(schema.nodes.table_element_footer)(state.selection);
                 const tableElement = findParentNodeOfType(schema.nodes.table_element)(state.selection);
-                if (isInTableElementFooter) {
+                const footnote = findParentNodeOfType(schema.nodes.footnote)(state.selection);
+                let targetNode;
+                if (footnote) {
+                    targetNode = footnote;
+                }
+                else if (tableElementFooter) {
+                    targetNode = tableElementFooter;
+                }
+                const can = props.getCapabilities();
+                if (targetNode && can.editArticle) {
                     const parent = findParentNodeWithIdValue(state.selection);
                     if (parent) {
                         decorations.push(Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
                             class: 'footnote-selected',
                         }));
+                        decorations.push(Decoration.widget(targetNode.pos + (footnote ? 1 : 2), deleteFootnoteWidget(targetNode.node, props, targetNode.node.attrs.id, tableElement), {
+                            key: targetNode.node.attrs.id,
+                        }));
                     }
                 }
                 const { labels } = footnotesKey.getState(state);
                 let tableInlineFootnoteIds = undefined;
-                const can = props.getCapabilities();
                 state.doc.descendants((node, pos, parent) => {
                     var _a;
                     if (isFootnoteNode(node)) {
@@ -183,35 +205,6 @@ export default (props) => {
                             decorations.push(Decoration.widget(pos + node.nodeSize - 1, uncitedFootnoteWidget()));
                         }
                     }
-                    if (can.editArticle) {
-                        if (tableElement) {
-                            const footnote = (() => {
-                                switch (node.type) {
-                                    case schema.nodes.footnote:
-                                        return {
-                                            type: 'table footnote',
-                                            message: 'This action will entirely remove the table footnote from the list  because it will no longer be used.',
-                                        };
-                                    default:
-                                        return {
-                                            type: 'table general note',
-                                            message: 'This action will entirely remove the table general note.',
-                                        };
-                                }
-                            })();
-                            if (node.type === schema.nodes.footnote) {
-                                decorations.push(Decoration.widget(pos + 2, deleteFootnoteWidget(node, props, footnote.type, footnote.message, node.attrs.id, tableElement), {
-                                    key: node.attrs.id,
-                                }));
-                            }
-                            else if (node.type === schema.nodes.paragraph &&
-                                (parent === null || parent === void 0 ? void 0 : parent.type) === schema.nodes.table_element_footer) {
-                                decorations.push(Decoration.widget(pos + 1, deleteFootnoteWidget(parent, props, footnote.type, footnote.message, parent.attrs.id, tableElement), {
-                                    key: parent.attrs.id,
-                                }));
-                            }
-                        }
-                    }
                     if (node.type === schema.nodes.footnotes_element) {
                         if ((parent === null || parent === void 0 ? void 0 : parent.type) === schema.nodes.table_element_footer) {
                             decorations.push(Decoration.node(pos, pos + node.nodeSize, {

package/dist/types/plugins/footnotes/footnotes-utils.d.ts

@@ -26,5 +26,5 @@ interface InlineFootnote {
     node: InlineFootnoteNode;
     pos: number;
 }
-export declare const getInlineFootnotes: (id: string, tableElement: NodeWithPos) => InlineFootnote[];
+export declare const getInlineFootnotes: (id: string, targetNode: ManuscriptNode) => InlineFootnote[];
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -111,4 +111,4 @@
     "@types/react": "^17.0.2",
     "prosemirror-tables": "^1.3.5"
   }
-}
+}

package/styles/Editor.css

@@ -959,18 +959,19 @@
 .ProseMirror .table-footnotes-element {
   counter-reset: table_footnote;
 }
-.table-footer .delete-icon {
-  display: none;
+.delete-icon {
   position: absolute;
   right: -20px;
   top: -13px;
   cursor: pointer;
   z-index: 1;
 }
-.table-footer .delete-icon:hover svg path {
+.delete-icon:hover svg path {
   fill: #353535;
 }
-.ProseMirror .table-footnotes-element > div {
+.ProseMirror .table-footnotes-element > div,
+.ProseMirror .block-footnotes_element > .block > div
+ {
   position: relative;
 }
 
@@ -990,29 +991,24 @@
   margin-top: 0px;
 }
 
-.ProseMirror .table-footer .footnote-selected, .table-footer > div:has(> p.footnote-selected) > p  {
+.ProseMirror .footnote-selected, .table-footer > div:has(> p.footnote-selected) > p  {
   background-color: #f2fbfc;
   padding: 4px;
 }
 
-.ProseMirror .table-footer .footnote-selected .delete-icon ,.ProseMirror .table-footer .footnote-selected .deleted.rejected .delete-icon {
-  display: block;
-}
 .table-footer > div > p {
   padding-bottom: 10px;
 }
 
-.ProseMirror .table-footnotes-element .footnote-selected {
+.ProseMirror .table-footnotes-element .footnote-selected,
+.ProseMirror .block-footnotes_element .footnote-selected
+{
   border: 1px solid #bce7f6;
 }
 .table-footer > div:has(> p.footnote-selected) > p {
   border-left: 1px solid #bce7f6;
   border-right: 1px solid #bce7f6;
 }
-.table-footer > div:has(> p.footnote-selected)  > p:first-child .delete-icon {
-  z-index: 2;
-  display: block;
-}
 .table-footer > div:has(> p.footnote-selected) > p:first-child {
   border-top: 1px solid #bce7f6;
   position: relative;