@manuscripts/body-editor 1.7.29 → 1.7.31-LEAN-3144-0

package/dist/cjs/commands.js

@@ -727,22 +727,35 @@ const updateCommentAnnotationState = (state, dispatch) => {
     }
 };
 exports.updateCommentAnnotationState = updateCommentAnnotationState;
-const insertTableFootnote = (node, position, view) => {
+const insertTableFootnote = (node, position, view, inlineFootnote) => {
     var _a;
     const { state, dispatch } = view;
+    const tr = state.tr;
     const footnote = state.schema.nodes.footnote.createAndFill({
         id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.Footnote),
         kind: 'footnote',
     });
     const insertedAt = state.selection.to;
-    const inlineFootnotes = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.inline_footnote);
-    const footnoteIndex = inlineFootnotes.filter(({ pos }) => position + pos <= insertedAt).length + 1;
-    const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
-        rids: [footnote.attrs.id],
-        contents: footnoteIndex === -1 ? inlineFootnotes.length : footnoteIndex,
-    });
-    const tr = state.tr;
-    tr.insert(insertedAt, inlineFootnoteNode);
+    let footnoteIndex;
+    if (inlineFootnote) {
+        const contents = inlineFootnote.node.attrs.contents.split(',').map(Number);
+        footnoteIndex = Math.max(...contents) + 1;
+        tr.setNodeMarkup(inlineFootnote.pos, undefined, {
+            rids: [...inlineFootnote.node.attrs.rids, footnote.attrs.id],
+            contents: inlineFootnote.node.attrs.contents + ',' + footnoteIndex,
+        });
+    }
+    else {
+        const inlineFootnotes = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.inline_footnote);
+        footnoteIndex =
+            inlineFootnotes.filter(({ pos }) => position + pos <= insertedAt).length +
+                1;
+        const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
+            rids: [footnote.attrs.id],
+            contents: footnoteIndex === -1 ? inlineFootnotes.length : footnoteIndex,
+        });
+        tr.insert(insertedAt, inlineFootnoteNode);
+    }
     let insertionPos = position;
     const footnotesElement = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.footnotes_element).pop();
     if (footnotesElement &&

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

@@ -198,9 +198,10 @@ class ContextMenu {
                             else {
                                 const tablesFootnoteLabels = (0, footnotes_utils_1.buildTableFootnoteLabels)(this.node);
                                 const footnotesWithPos = (0, prosemirror_utils_1.findChildrenByType)(footnotesElementWithPos.node, transform_1.schema.nodes.footnote);
-                                const footnotes = footnotesWithPos.map((nodeWithPos) => ({
-                                    node: nodeWithPos.node,
-                                    index: tablesFootnoteLabels.get(nodeWithPos.node.attrs.id),
+                                const footnotes = footnotesWithPos
+                                    .map(({ node }) => ({
+                                    node: node,
+                                    index: tablesFootnoteLabels.get(node.attrs.id),
                                 }));
                                 const targetDom = this.view.domAtPos(this.view.state.selection.from);
                                 if (targetDom.node instanceof Element && this.props) {

package/dist/cjs/plugins/table-footnote.js

@@ -14,11 +14,11 @@ const isInlineFootnoteChange = (step, oldState, newState) => {
 exports.default = () => {
     return new prosemirror_state_1.Plugin({
         appendTransaction(transactions, oldState, newState) {
-            const tableInlineFootnoteChange = transactions.find((tr) => tr.steps.find((s) => {
+            const tableInlineFootnoteChange = transactions.find((tr) => tr.steps.find((s, i) => {
                 var _a;
                 if (s instanceof prosemirror_transform_1.ReplaceStep) {
                     const step = s;
-                    const $pos = oldState.doc.resolve(step.from);
+                    const $pos = tr.docs[i].resolve(step.from);
                     return (((_a = $pos.node($pos.depth - 2)) === null || _a === void 0 ? void 0 : _a.type) === transform_1.schema.nodes.table &&
                         isInlineFootnoteChange(step, oldState, newState));
                 }

package/dist/cjs/views/inline_footnote.js

@@ -14,16 +14,43 @@
  * 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.InlineFootnoteView = 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 track_changes_utils_1 = require("../lib/track-changes-utils");
+const footnotes_utils_1 = require("../plugins/footnotes/footnotes-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
+const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class InlineFootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
+        this.findParentTableElement = () => (0, prosemirror_utils_1.findParentNodeClosestToPos)(this.view.state.doc.resolve(this.getPos()), (node) => node.type === transform_1.schema.nodes.table_element);
         this.handleClick = () => {
-            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            if ((0, track_changes_utils_1.isDeleted)(this.node)) {
+                return;
+            }
+            const tableElement = this.findParentTableElement();
+            if (tableElement) {
+                const componentProps = {
+                    notes: this.getNotes(tableElement),
+                    onAdd: this.onAdd,
+                    onInsert: this.onUpdate,
+                    onCancel: this.destroy,
+                    inlineFootnote: this.node,
+                };
+                this.popperContainer = (0, ReactSubView_1.default)(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), style_guide_1.TableFootnotesSelector, componentProps, this.node, this.getPos, this.view, 'table-footnote-editor');
+                this.props.popper.show(this.dom, this.popperContainer, 'bottom-end');
+            }
+            else {
+                this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            }
         };
         this.updateContents = () => {
             this.setDomAttrs(this.node, this.dom);
@@ -42,6 +69,49 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
         this.createDOM = () => {
             return document.createElement('span');
         };
+        this.destroy = () => {
+            var _a;
+            this.props.popper.destroy();
+            (_a = this.popperContainer) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+        this.getNotes = (tableElement) => {
+            var _a;
+            const footnotesElement = (_a = (0, prosemirror_utils_1.findChildrenByType)(tableElement.node, transform_1.schema.nodes.footnotes_element).pop()) === null || _a === void 0 ? void 0 : _a.node;
+            let footnotes = [];
+            if (footnotesElement) {
+                const tablesFootnoteLabels = (0, footnotes_utils_1.buildTableFootnoteLabels)(tableElement.node);
+                footnotes = (0, prosemirror_utils_1.findChildrenByType)(footnotesElement, transform_1.schema.nodes.footnote)
+                    .map(({ node }) => ({
+                    node: node,
+                    index: tablesFootnoteLabels.get(node.attrs.id),
+                }));
+            }
+            return footnotes;
+        };
+        this.onAdd = () => {
+            const tableElement = this.findParentTableElement();
+            if (tableElement) {
+                (0, commands_1.insertTableFootnote)(tableElement.node, tableElement.pos, this.view, {
+                    node: this.node,
+                    pos: this.getPos(),
+                });
+                this.destroy();
+            }
+        };
+        this.onUpdate = (notes) => {
+            const contents = this.node.attrs.contents.split(',');
+            const rids = notes.map((note) => note.node.attrs.id);
+            const { tr } = this.view.state;
+            this.view.dispatch(rids.length
+                ? tr.setNodeMarkup(this.getPos(), undefined, {
+                    rids,
+                    contents: notes
+                        .map(({ index }) => (index ? index : Math.max(...contents) + 1))
+                        .join(),
+                })
+                : tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
+            this.destroy();
+        };
     }
 }
 exports.InlineFootnoteView = InlineFootnoteView;

package/dist/es/commands.js

@@ -690,22 +690,35 @@ export const updateCommentAnnotationState = (state, dispatch) => {
         dispatch(tr);
     }
 };
-export const insertTableFootnote = (node, position, view) => {
+export const insertTableFootnote = (node, position, view, inlineFootnote) => {
     var _a;
     const { state, dispatch } = view;
+    const tr = state.tr;
     const footnote = state.schema.nodes.footnote.createAndFill({
         id: generateID(ObjectTypes.Footnote),
         kind: 'footnote',
     });
     const insertedAt = state.selection.to;
-    const inlineFootnotes = findChildrenByType(node, schema.nodes.inline_footnote);
-    const footnoteIndex = inlineFootnotes.filter(({ pos }) => position + pos <= insertedAt).length + 1;
-    const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
-        rids: [footnote.attrs.id],
-        contents: footnoteIndex === -1 ? inlineFootnotes.length : footnoteIndex,
-    });
-    const tr = state.tr;
-    tr.insert(insertedAt, inlineFootnoteNode);
+    let footnoteIndex;
+    if (inlineFootnote) {
+        const contents = inlineFootnote.node.attrs.contents.split(',').map(Number);
+        footnoteIndex = Math.max(...contents) + 1;
+        tr.setNodeMarkup(inlineFootnote.pos, undefined, {
+            rids: [...inlineFootnote.node.attrs.rids, footnote.attrs.id],
+            contents: inlineFootnote.node.attrs.contents + ',' + footnoteIndex,
+        });
+    }
+    else {
+        const inlineFootnotes = findChildrenByType(node, schema.nodes.inline_footnote);
+        footnoteIndex =
+            inlineFootnotes.filter(({ pos }) => position + pos <= insertedAt).length +
+                1;
+        const inlineFootnoteNode = state.schema.nodes.inline_footnote.create({
+            rids: [footnote.attrs.id],
+            contents: footnoteIndex === -1 ? inlineFootnotes.length : footnoteIndex,
+        });
+        tr.insert(insertedAt, inlineFootnoteNode);
+    }
     let insertionPos = position;
     const footnotesElement = findChildrenByType(node, schema.nodes.footnotes_element).pop();
     if (footnotesElement &&

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

@@ -191,9 +191,10 @@ export class ContextMenu {
                             else {
                                 const tablesFootnoteLabels = buildTableFootnoteLabels(this.node);
                                 const footnotesWithPos = findChildrenByType(footnotesElementWithPos.node, schema.nodes.footnote);
-                                const footnotes = footnotesWithPos.map((nodeWithPos) => ({
-                                    node: nodeWithPos.node,
-                                    index: tablesFootnoteLabels.get(nodeWithPos.node.attrs.id),
+                                const footnotes = footnotesWithPos
+                                    .map(({ node }) => ({
+                                    node: node,
+                                    index: tablesFootnoteLabels.get(node.attrs.id),
                                 }));
                                 const targetDom = this.view.domAtPos(this.view.state.selection.from);
                                 if (targetDom.node instanceof Element && this.props) {

package/dist/es/plugins/table-footnote.js

@@ -12,11 +12,11 @@ const isInlineFootnoteChange = (step, oldState, newState) => {
 export default () => {
     return new Plugin({
         appendTransaction(transactions, oldState, newState) {
-            const tableInlineFootnoteChange = transactions.find((tr) => tr.steps.find((s) => {
+            const tableInlineFootnoteChange = transactions.find((tr) => tr.steps.find((s, i) => {
                 var _a;
                 if (s instanceof ReplaceStep) {
                     const step = s;
-                    const $pos = oldState.doc.resolve(step.from);
+                    const $pos = tr.docs[i].resolve(step.from);
                     return (((_a = $pos.node($pos.depth - 2)) === null || _a === void 0 ? void 0 : _a.type) === schema.nodes.table &&
                         isInlineFootnoteChange(step, oldState, newState));
                 }

package/dist/es/views/inline_footnote.js

@@ -13,14 +13,38 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { getChangeClasses } from '../lib/track-changes-utils';
+import { TableFootnotesSelector, } from '@manuscripts/style-guide';
+import { schema, } from '@manuscripts/transform';
+import { findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
+import { insertTableFootnote } from '../commands';
+import { getChangeClasses, isDeleted, } from '../lib/track-changes-utils';
+import { buildTableFootnoteLabels } from '../plugins/footnotes/footnotes-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
+import ReactSubView from './ReactSubView';
 export class InlineFootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
+        this.findParentTableElement = () => findParentNodeClosestToPos(this.view.state.doc.resolve(this.getPos()), (node) => node.type === schema.nodes.table_element);
         this.handleClick = () => {
-            this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            if (isDeleted(this.node)) {
+                return;
+            }
+            const tableElement = this.findParentTableElement();
+            if (tableElement) {
+                const componentProps = {
+                    notes: this.getNotes(tableElement),
+                    onAdd: this.onAdd,
+                    onInsert: this.onUpdate,
+                    onCancel: this.destroy,
+                    inlineFootnote: this.node,
+                };
+                this.popperContainer = ReactSubView(Object.assign(Object.assign({}, this.props), { dispatch: this.view.dispatch }), TableFootnotesSelector, componentProps, this.node, this.getPos, this.view, 'table-footnote-editor');
+                this.props.popper.show(this.dom, this.popperContainer, 'bottom-end');
+            }
+            else {
+                this.props.history.push(Object.assign(Object.assign({}, this.props.history.location), { hash: '#' + this.node.attrs.rid }));
+            }
         };
         this.updateContents = () => {
             this.setDomAttrs(this.node, this.dom);
@@ -39,6 +63,49 @@ export class InlineFootnoteView extends BaseNodeView {
         this.createDOM = () => {
             return document.createElement('span');
         };
+        this.destroy = () => {
+            var _a;
+            this.props.popper.destroy();
+            (_a = this.popperContainer) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+        this.getNotes = (tableElement) => {
+            var _a;
+            const footnotesElement = (_a = findChildrenByType(tableElement.node, schema.nodes.footnotes_element).pop()) === null || _a === void 0 ? void 0 : _a.node;
+            let footnotes = [];
+            if (footnotesElement) {
+                const tablesFootnoteLabels = buildTableFootnoteLabels(tableElement.node);
+                footnotes = findChildrenByType(footnotesElement, schema.nodes.footnote)
+                    .map(({ node }) => ({
+                    node: node,
+                    index: tablesFootnoteLabels.get(node.attrs.id),
+                }));
+            }
+            return footnotes;
+        };
+        this.onAdd = () => {
+            const tableElement = this.findParentTableElement();
+            if (tableElement) {
+                insertTableFootnote(tableElement.node, tableElement.pos, this.view, {
+                    node: this.node,
+                    pos: this.getPos(),
+                });
+                this.destroy();
+            }
+        };
+        this.onUpdate = (notes) => {
+            const contents = this.node.attrs.contents.split(',');
+            const rids = notes.map((note) => note.node.attrs.id);
+            const { tr } = this.view.state;
+            this.view.dispatch(rids.length
+                ? tr.setNodeMarkup(this.getPos(), undefined, {
+                    rids,
+                    contents: notes
+                        .map(({ index }) => (index ? index : Math.max(...contents) + 1))
+                        .join(),
+                })
+                : tr.delete(this.getPos(), this.getPos() + this.node.nodeSize));
+            this.destroy();
+        };
     }
 }
 export default createNodeView(InlineFootnoteView);

package/dist/types/commands.d.ts

@@ -15,7 +15,7 @@
  */
 import { CommentAnnotation } from '@manuscripts/json-schema';
 import { FileAttachment } from '@manuscripts/style-guide';
-import { ManuscriptEditorState, ManuscriptEditorView, ManuscriptMarkType, ManuscriptNode, ManuscriptNodeType, ManuscriptTransaction } from '@manuscripts/transform';
+import { InlineFootnoteNode, ManuscriptEditorState, ManuscriptEditorView, ManuscriptMarkType, ManuscriptNode, ManuscriptNodeType, ManuscriptTransaction } from '@manuscripts/transform';
 import { ResolvedPos } from 'prosemirror-model';
 import { Command, NodeSelection, Selection, TextSelection, Transaction } from 'prosemirror-state';
 import { NodeWithPos } from 'prosemirror-utils';
@@ -57,4 +57,9 @@ export declare const deleteHighlightMarkers: (rid: string) => Command;
 export declare function addComment(state: ManuscriptEditorState, dispatch?: Dispatch): boolean;
 export declare function addComment(state: ManuscriptEditorState, dispatch?: Dispatch, viewNode?: ManuscriptNode, resolvePos?: ResolvedPos): boolean;
 export declare const updateCommentAnnotationState: (state: ManuscriptEditorState, dispatch?: Dispatch) => void;
-export declare const insertTableFootnote: (node: ManuscriptNode, position: number, view: EditorView) => void;
+interface NodeWithPosition {
+    node: InlineFootnoteNode;
+    pos: number;
+}
+export declare const insertTableFootnote: (node: ManuscriptNode, position: number, view: EditorView, inlineFootnote?: NodeWithPosition) => void;
+export {};

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

@@ -13,18 +13,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { FootnoteWithIndex } from '@manuscripts/style-guide';
 import { ManuscriptNodeView } from '@manuscripts/transform';
 import { History } from 'history';
+import { ContentNodeWithPos } from 'prosemirror-utils';
 import { BaseNodeProps, BaseNodeView } from './base_node_view';
+import { EditableBlockProps } from './editable_block';
 export interface InlineFootnoteProps extends BaseNodeProps {
     history: History;
 }
-export declare class InlineFootnoteView<PropsType extends InlineFootnoteProps> extends BaseNodeView<PropsType> implements ManuscriptNodeView {
+export declare class InlineFootnoteView<PropsType extends InlineFootnoteProps & EditableBlockProps> extends BaseNodeView<PropsType> implements ManuscriptNodeView {
+    protected popperContainer: HTMLDivElement;
+    findParentTableElement: () => ContentNodeWithPos | undefined;
     handleClick: () => void;
     updateContents: () => void;
     initialise: () => void;
     ignoreMutation: () => boolean;
     createDOM: () => HTMLSpanElement;
+    destroy: () => void;
+    getNotes: (tableElement: ContentNodeWithPos) => FootnoteWithIndex[];
+    onAdd: () => void;
+    onUpdate: (notes: FootnoteWithIndex[]) => void;
 }
-declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<InlineFootnoteView<any>>;
+declare const _default: (props: BaseNodeProps, dispatch?: import("../commands").Dispatch | undefined) => import("../types").NodeViewCreator<InlineFootnoteView<any>>;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.29",
+  "version": "1.7.31-LEAN-3144-0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,8 +31,8 @@
     "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.7",
     "@manuscripts/library": "^1.3.6",
-    "@manuscripts/style-guide": "1.8.4",
-    "@manuscripts/track-changes-plugin": "1.7.8",
+    "@manuscripts/style-guide": "1.8.4-LEAN-3144-4",
+    "@manuscripts/track-changes-plugin": "1.7.9",
     "@manuscripts/transform": "^2.1.10",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
@@ -112,4 +112,4 @@
     "@types/react": "^17.0.2",
     "prosemirror-tables": "^1.3.5"
   }
-}
+}

package/styles/AdvancedEditor.css

@@ -724,11 +724,13 @@ Next levels are shifted 'up' by 1
   text-decoration: none;
 }
 
+.ProseMirror .deleted.pending::before,
 .ProseMirror .deleted.pending {
   background: var(--pending-bg-color);
   color: var(--deleted-color);
   text-decoration: line-through;
 }
+.ProseMirror .deleted.accepted::before,
 .ProseMirror .deleted.accepted {
   background: var(--accepted-bg-color);
   color: var(--deleted-color);

package/styles/Editor.css

@@ -941,6 +941,7 @@
   cursor: pointer;
   vertical-align: super;
   font-size: 75%;
+  color: #0d79d0;
 }
 
 .ProseMirror .table-footer {