@manuscripts/body-editor 1.7.10 → 1.7.12

package/dist/cjs/commands.js

@@ -722,28 +722,37 @@ const insertTableFootnote = (node, position, state, dispatch) => {
     });
     const insertedAt = state.selection.to;
     const inlineFootnotes = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.inline_footnote);
+    const labels = inlineFootnotes.map((nodeWithPos) => nodeWithPos.node.attrs.contents);
     const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
         rids: [footnote.attrs.id],
-        contents: inlineFootnotes.length + 1,
+        contents: labels.length ? Math.max(...labels) + 1 : 1,
     });
     const tr = state.tr;
     tr.insert(insertedAt, inlineFootnoteNode);
-    const footnoteElement = state.schema.nodes.footnotes_element.create({}, footnote);
-    const tableElementFooter = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.table_element_footer);
     let insertionPos;
-    if (tableElementFooter.length) {
-        const pos = tableElementFooter[0].pos;
-        insertionPos = position + pos + tableElementFooter[0].node.nodeSize + 1;
-        tr.insert(insertionPos, footnoteElement);
+    const footnotesElement = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.footnotes_element);
+    if (footnotesElement.length) {
+        const pos = footnotesElement[0].pos;
+        insertionPos = position + pos + footnotesElement[0].node.nodeSize + 1;
+        tr.insert(insertionPos, footnote);
     }
     else {
-        const tableSize = (_a = node.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize;
-        if (tableSize) {
-            insertionPos = position + tableSize + 2;
-            const tableElementFooter = transform_1.schema.nodes.table_element_footer.create({
-                id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.TableElementFooter),
-            }, [footnoteElement]);
-            tr.insert(insertionPos, tableElementFooter);
+        const footnoteElement = state.schema.nodes.footnotes_element.create({}, footnote);
+        const tableElementFooter = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.table_element_footer);
+        if (tableElementFooter.length) {
+            const pos = tableElementFooter[0].pos;
+            insertionPos = position + pos + tableElementFooter[0].node.nodeSize + 1;
+            tr.insert(insertionPos, footnoteElement);
+        }
+        else {
+            const tableSize = (_a = node.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize;
+            if (tableSize) {
+                insertionPos = position + tableSize + 2;
+                const tableElementFooter = transform_1.schema.nodes.table_element_footer.create({
+                    id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.TableElementFooter),
+                }, [footnoteElement]);
+                tr.insert(insertionPos, tableElementFooter);
+            }
         }
     }
     if (dispatch && insertionPos) {

package/dist/cjs/components/keywords/AddKeywordInline.js

@@ -93,7 +93,7 @@ const AddKeywordInline = ({ viewProps, getUpdatedNode }) => {
                 !(0, track_changes_utils_1.isRejectedInsert)(descNode)) {
                 keywords.push({
                     id: descNode.attrs.id,
-                    contents: descNode.attrs.contents,
+                    contents: descNode.textContent,
                 });
             }
         });

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

@@ -14,11 +14,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContextMenu = exports.sectionLevel = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const commands_1 = require("../commands");
+const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
 const popper_1 = require("./popper");
 const popper = new popper_1.PopperManager();
 const listTypes = [transform_1.schema.nodes.ordered_list, transform_1.schema.nodes.bullet_list];
@@ -36,7 +41,7 @@ const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
 class ContextMenu {
-    constructor(node, view, getPos, actions = {}) {
+    constructor(node, view, getPos, actions = {}, props) {
         this.showAddMenu = (target, after) => {
             const menu = document.createElement('div');
             menu.className = 'menu';
@@ -181,11 +186,48 @@ class ContextMenu {
                 if (isInTable) {
                     menu.appendChild(this.createMenuSection((section) => {
                         section.appendChild(this.createMenuItem('Add Reference Note', () => {
+                            var _a;
                             const footnotesElement = (0, prosemirror_utils_1.findChildrenByType)(this.node, transform_1.schema.nodes.footnotes_element);
                             if (!footnotesElement.length) {
                                 const { state, dispatch } = this.view;
                                 (0, commands_1.insertTableFootnote)(this.node, this.getPos(), state, dispatch);
                             }
+                            else {
+                                const footnotes = (0, prosemirror_utils_1.findChildrenByType)(footnotesElement[0].node, transform_1.schema.nodes.footnote).map((nodeWithPos) => {
+                                    return nodeWithPos.node;
+                                });
+                                const targetDom = this.view.domAtPos(this.view.state.selection.from);
+                                if (targetDom.node 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: () => {
+                                            var _a;
+                                            const { state, dispatch } = this.view;
+                                            (0, commands_1.insertTableFootnote)(this.node, this.getPos(), state, dispatch);
+                                            (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
+                                        },
+                                        onInsert: (notes) => {
+                                            var _a;
+                                            const insertedAt = this.view.state.selection.to;
+                                            const node = this.view.state.schema.nodes.inline_footnote.create({
+                                                rids: notes.map((note) => note.attrs.id),
+                                                contents: notes
+                                                    .map((note) => footnotes.indexOf(note) + 1)
+                                                    .join(),
+                                            });
+                                            const tr = this.view.state.tr;
+                                            tr.insert(insertedAt, node);
+                                            this.view.dispatch(tr);
+                                            (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
+                                        },
+                                        onCancel: () => {
+                                            var _a;
+                                            (_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');
+                                }
+                            }
                         }));
                     }));
                 }
@@ -306,6 +348,7 @@ class ContextMenu {
         this.view = view;
         this.getPos = getPos;
         this.actions = actions;
+        this.props = props;
     }
 }
 exports.ContextMenu = ContextMenu;

package/dist/cjs/views/editable_block.js

@@ -117,7 +117,7 @@ const EditableBlock = (Base) => {
                 const { setComment } = this.props;
                 return new context_menu_1.ContextMenu(this.node, this.view, this.getPos, {
                     setComment,
-                });
+                }, this.props);
             };
         }
     };

package/dist/es/commands.js

@@ -685,28 +685,37 @@ export const insertTableFootnote = (node, position, state, dispatch) => {
     });
     const insertedAt = state.selection.to;
     const inlineFootnotes = findChildrenByType(node, schema.nodes.inline_footnote);
+    const labels = inlineFootnotes.map((nodeWithPos) => nodeWithPos.node.attrs.contents);
     const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
         rids: [footnote.attrs.id],
-        contents: inlineFootnotes.length + 1,
+        contents: labels.length ? Math.max(...labels) + 1 : 1,
     });
     const tr = state.tr;
     tr.insert(insertedAt, inlineFootnoteNode);
-    const footnoteElement = state.schema.nodes.footnotes_element.create({}, footnote);
-    const tableElementFooter = findChildrenByType(node, schema.nodes.table_element_footer);
     let insertionPos;
-    if (tableElementFooter.length) {
-        const pos = tableElementFooter[0].pos;
-        insertionPos = position + pos + tableElementFooter[0].node.nodeSize + 1;
-        tr.insert(insertionPos, footnoteElement);
+    const footnotesElement = findChildrenByType(node, schema.nodes.footnotes_element);
+    if (footnotesElement.length) {
+        const pos = footnotesElement[0].pos;
+        insertionPos = position + pos + footnotesElement[0].node.nodeSize + 1;
+        tr.insert(insertionPos, footnote);
     }
     else {
-        const tableSize = (_a = node.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize;
-        if (tableSize) {
-            insertionPos = position + tableSize + 2;
-            const tableElementFooter = schema.nodes.table_element_footer.create({
-                id: generateID(ObjectTypes.TableElementFooter),
-            }, [footnoteElement]);
-            tr.insert(insertionPos, tableElementFooter);
+        const footnoteElement = state.schema.nodes.footnotes_element.create({}, footnote);
+        const tableElementFooter = findChildrenByType(node, schema.nodes.table_element_footer);
+        if (tableElementFooter.length) {
+            const pos = tableElementFooter[0].pos;
+            insertionPos = position + pos + tableElementFooter[0].node.nodeSize + 1;
+            tr.insert(insertionPos, footnoteElement);
+        }
+        else {
+            const tableSize = (_a = node.content.firstChild) === null || _a === void 0 ? void 0 : _a.nodeSize;
+            if (tableSize) {
+                insertionPos = position + tableSize + 2;
+                const tableElementFooter = schema.nodes.table_element_footer.create({
+                    id: generateID(ObjectTypes.TableElementFooter),
+                }, [footnoteElement]);
+                tr.insert(insertionPos, tableElementFooter);
+            }
         }
     }
     if (dispatch && insertionPos) {

package/dist/es/components/keywords/AddKeywordInline.js

@@ -64,7 +64,7 @@ export const AddKeywordInline = ({ viewProps, getUpdatedNode }) => {
                 !isRejectedInsert(descNode)) {
                 keywords.push({
                     id: descNode.attrs.id,
-                    contents: descNode.attrs.contents,
+                    contents: descNode.textContent,
                 });
             }
         });

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

@@ -13,9 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { TableFootnotesSelector } from '@manuscripts/style-guide';
 import { isInBibliographySection, nodeNames, schema, } from '@manuscripts/transform';
 import { findChildrenByType, hasParentNodeOfType } from 'prosemirror-utils';
 import { addComment, createBlock, insertGeneralFootnote, insertTableFootnote, } from '../commands';
+import ReactSubView from '../views/ReactSubView';
 import { PopperManager } from './popper';
 const popper = new PopperManager();
 const listTypes = [schema.nodes.ordered_list, schema.nodes.bullet_list];
@@ -32,7 +34,7 @@ const hasAny = (set, ...items) => {
     return items.some((i) => set.has(i));
 };
 export class ContextMenu {
-    constructor(node, view, getPos, actions = {}) {
+    constructor(node, view, getPos, actions = {}, props) {
         this.showAddMenu = (target, after) => {
             const menu = document.createElement('div');
             menu.className = 'menu';
@@ -177,11 +179,48 @@ export class ContextMenu {
                 if (isInTable) {
                     menu.appendChild(this.createMenuSection((section) => {
                         section.appendChild(this.createMenuItem('Add Reference Note', () => {
+                            var _a;
                             const footnotesElement = findChildrenByType(this.node, schema.nodes.footnotes_element);
                             if (!footnotesElement.length) {
                                 const { state, dispatch } = this.view;
                                 insertTableFootnote(this.node, this.getPos(), state, dispatch);
                             }
+                            else {
+                                const footnotes = findChildrenByType(footnotesElement[0].node, schema.nodes.footnote).map((nodeWithPos) => {
+                                    return nodeWithPos.node;
+                                });
+                                const targetDom = this.view.domAtPos(this.view.state.selection.from);
+                                if (targetDom.node instanceof Element && this.props) {
+                                    const popperContainer = ReactSubView(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), TableFootnotesSelector, {
+                                        notes: footnotes,
+                                        onAdd: () => {
+                                            var _a;
+                                            const { state, dispatch } = this.view;
+                                            insertTableFootnote(this.node, this.getPos(), state, dispatch);
+                                            (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
+                                        },
+                                        onInsert: (notes) => {
+                                            var _a;
+                                            const insertedAt = this.view.state.selection.to;
+                                            const node = this.view.state.schema.nodes.inline_footnote.create({
+                                                rids: notes.map((note) => note.attrs.id),
+                                                contents: notes
+                                                    .map((note) => footnotes.indexOf(note) + 1)
+                                                    .join(),
+                                            });
+                                            const tr = this.view.state.tr;
+                                            tr.insert(insertedAt, node);
+                                            this.view.dispatch(tr);
+                                            (_a = this.props) === null || _a === void 0 ? void 0 : _a.popper.destroy();
+                                        },
+                                        onCancel: () => {
+                                            var _a;
+                                            (_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');
+                                }
+                            }
                         }));
                     }));
                 }
@@ -302,5 +341,6 @@ export class ContextMenu {
         this.view = view;
         this.getPos = getPos;
         this.actions = actions;
+        this.props = props;
     }
 }

package/dist/es/views/editable_block.js

@@ -114,7 +114,7 @@ export const EditableBlock = (Base) => {
                 const { setComment } = this.props;
                 return new ContextMenu(this.node, this.view, this.getPos, {
                     setComment,
-                });
+                }, this.props);
             };
         }
     };

package/dist/types/lib/context-menu.d.ts

@@ -15,6 +15,7 @@
  */
 import { CommentAnnotation } from '@manuscripts/json-schema';
 import { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform';
+import { EditableBlockProps } from '../views/editable_block';
 export declare const sectionLevel: (depth: number) => string;
 interface Actions {
     setComment?: (comment: CommentAnnotation) => void;
@@ -24,7 +25,8 @@ export declare class ContextMenu {
     private readonly view;
     private readonly getPos;
     private readonly actions;
-    constructor(node: ManuscriptNode, view: ManuscriptEditorView, getPos: () => number, actions?: Actions);
+    private readonly props?;
+    constructor(node: ManuscriptNode, view: ManuscriptEditorView, getPos: () => number, actions?: Actions, props?: EditableBlockProps);
     showAddMenu: (target: Element, after: boolean) => void;
     showEditMenu: (target: Element) => void;
     private createMenuItem;

package/dist/types/views/editable_block.d.ts

@@ -26,7 +26,7 @@ export interface EditableBlockProps extends BaseNodeProps {
     retrySync: (componentIDs: string[]) => Promise<void>;
     setComment: (comment: CommentAnnotation) => void;
     dispatch?: Dispatch;
-    theme?: DefaultTheme;
+    theme: DefaultTheme;
 }
 export declare const EditableBlock: <T extends Constructor<BlockView<EditableBlockProps>>>(Base: T) => {
     new (...args: any[]): {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.10",
+  "version": "1.7.12",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,7 +31,7 @@
     "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.4",
     "@manuscripts/library": "^1.3.3",
-    "@manuscripts/style-guide": "^1.7.6",
+    "@manuscripts/style-guide": "1.7.7",
     "@manuscripts/track-changes-plugin": "^1.7.5",
     "@manuscripts/transform": "^2.1.2",
     "astrocite-eutils": "^0.16.4",
@@ -109,4 +109,4 @@
   "resolutions": {
     "@types/react": "^17.0.2"
   }
-}
+}

package/styles/popper.css

@@ -135,7 +135,8 @@
 .popper .citation-editor,
 .popper .cross-reference-editor,
 .popper .citation-references,
-.popper .track-changes-review-panel {
+.popper .track-changes-review-panel,
+.popper .table-footnote-editor {
   background: #fff;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
@@ -189,7 +190,8 @@
   height: auto;
 }
 
-.popper .citation-editor {
+.popper .citation-editor,
+.popper .table-footnote-editor {
   width: 600px;
 }
 
@@ -204,7 +206,8 @@
   .popper .citation-editor,
   .popper .cross-reference-editor,
   .popper .equation-editor,
-  .popper .link-editor {
+  .popper .link-editor,
+  .popper .table-footnote-editor {
     min-width: 90%;
     max-width: 90%;
   }
@@ -219,6 +222,10 @@
   width: 600px;
 }
 
+.popper .table-footnote-editor {
+  left: 50%;
+  transform: translate(-50%, -100%);
+}
 
 .popper .track-attrs-popper {
   box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.30);