@manuscripts/body-editor 1.7.34 → 1.7.36

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/views/affiliations.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AffiliationsView = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class AffiliationsView extends block_view_1.default {
@@ -18,6 +19,14 @@ class AffiliationsView extends block_view_1.default {
             this.dom.setAttribute('contenteditable', 'false');
             this.dom.appendChild(this.contentDOM);
         };
+        this.updateContents = () => {
+            this.dom.addEventListener('click', () => this.onClickHandler());
+        };
+        this.onClickHandler = () => {
+            const { tr, doc } = this.view.state;
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(doc, this.getPos()));
+            this.view.dispatch(tr);
+        };
     }
 }
 exports.AffiliationsView = AffiliationsView;

package/dist/cjs/views/citation_editable.js

@@ -74,6 +74,7 @@ class CitationEditableView extends citation_1.CitationView {
             this.props.popper.destroy();
         };
         this.showContextMenu = () => {
+            this.props.popper.destroy();
             const componentProps = {
                 actions: [
                     { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },

package/dist/cjs/views/contributors.js

@@ -20,7 +20,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContributorsView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
 const AuthorsModal_1 = require("../components/authors/AuthorsModal");
 const authors_1 = require("../lib/authors");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
@@ -41,12 +43,14 @@ class ContributorsView extends block_view_1.default {
             this.updateContents();
         };
         this.updateContents = () => {
-            this.updateClasses();
-            this.updateAttributes();
-            this.container.innerHTML = '';
-            this.buildAuthors();
-            this.createEditButton();
-            this.createLegend();
+            setTimeout(() => {
+                this.updateClasses();
+                this.updateAttributes();
+                this.container.innerHTML = '';
+                this.buildAuthors();
+                this.createEditButton();
+                this.createLegend();
+            }, 0);
         };
         this.buildAuthors = () => {
             var _a;
@@ -79,7 +83,9 @@ class ContributorsView extends block_view_1.default {
             const pluginState = affiliations_1.affiliationsKey.getState(this.view.state);
             const attrs = node.attrs;
             const displayAttr = (0, track_changes_utils_1.getActualAttrs)(node);
+            const containerWrapper = document.createElement('div');
             const container = document.createElement('button');
+            containerWrapper.classList.add('contributor-wrapper');
             container.classList.add('contributor');
             container.setAttribute('id', attrs.id);
             container.setAttribute('contenteditable', 'false');
@@ -95,9 +101,12 @@ class ContributorsView extends block_view_1.default {
             }
             const can = this.props.getCapabilities();
             const disableEditButton = !can.editMetadata;
-            const { isCorresponding, email } = displayAttr;
+            const { isCorresponding, email, id } = displayAttr;
             if (!disableEditButton) {
-                container.addEventListener('click', this.handleClick);
+                container.addEventListener('click', () => {
+                    const dataTracked = attrs.dataTracked;
+                    this.onClickHandler(id, dataTracked ? dataTracked[0] : undefined);
+                });
             }
             const name = (0, authors_1.authorLabel)(displayAttr);
             container.innerHTML =
@@ -125,7 +134,8 @@ class ContributorsView extends block_view_1.default {
             if (selectedAuthor && selectedAuthor === attrs.id) {
                 container.classList.add('selected-suggestion');
             }
-            return container;
+            containerWrapper.appendChild(container);
+            return containerWrapper;
         };
         this.isJointFirstAuthor = (authors, index) => {
             const author = index === 0 ? authors[index] : authors[index - 1];
@@ -147,7 +157,7 @@ class ContributorsView extends block_view_1.default {
             const can = this.props.getCapabilities();
             const button = (0, ReactSubView_1.default)(this.props, style_guide_1.SecondaryButton, {
                 mini: true,
-                onClick: this.handleClick,
+                onClick: () => this.handleEdit(''),
                 className: 'edit-authors-button',
                 disabled: !can.editMetadata,
                 children: 'Edit Authors',
@@ -167,17 +177,48 @@ class ContributorsView extends block_view_1.default {
                 }
             }
         };
-        this.handleClick = (e) => {
-            var _a, _b;
-            e.stopPropagation();
+        this.onClickHandler = (elementId, dataTracked) => {
+            var _a;
+            this.props.popper.destroy();
+            const isSelectedSuggestion = !!((_a = selected_suggestion_ui_1.selectedSuggestionKey
+                .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
+            const { tr, doc } = this.view.state;
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(doc, this.getPos()));
+            if (dataTracked && dataTracked.status !== track_changes_plugin_1.CHANGE_STATUS.rejected) {
+                tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked.id);
+            }
+            else {
+                if (isSelectedSuggestion) {
+                    tr.setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, true);
+                }
+            }
+            if (!((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.operation) === track_changes_plugin_1.CHANGE_OPERATION.delete &&
+                (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.status) !== track_changes_plugin_1.CHANGE_STATUS.rejected)) {
+                this.showContextMenu(elementId);
+            }
+            this.view.dispatch(tr);
+        };
+        this.showContextMenu = (elementId) => {
+            this.props.popper.destroy();
+            const element = document.getElementById(elementId);
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => this.handleEdit(elementId),
+                        icon: 'EditIcon',
+                    },
+                ],
+            };
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(element, this.contextMenu, 'right-start');
+        };
+        this.handleEdit = (id) => {
+            var _a;
+            this.props.popper.destroy();
             const contributors = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.contributor);
             const affiliations = (0, view_1.findChildrenAttrsByType)(this.view, transform_1.schema.nodes.affiliation);
-            let author = undefined;
-            const target = e.target;
-            if (target) {
-                const id = (_a = target.closest('.contributor')) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
-                author = contributors.filter((a) => a.id === id)[0];
-            }
+            const author = id ? contributors.filter((a) => a.id === id)[0] : undefined;
             const componentProps = {
                 author,
                 authors: contributors,
@@ -186,7 +227,7 @@ class ContributorsView extends block_view_1.default {
                 onDeleteAuthor: this.handleDeleteAuthor,
                 onSaveAffiliation: this.handleSaveAffiliation,
             };
-            (_b = this.popper) === null || _b === void 0 ? void 0 : _b.remove();
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = (0, ReactSubView_1.default)(this.props, AuthorsModal_1.AuthorsModal, componentProps, this.node, this.getPos, this.view);
             this.container.appendChild(this.popper);
         };
@@ -219,8 +260,6 @@ class ContributorsView extends block_view_1.default {
             const node = transform_1.schema.nodes.affiliation.create(attrs);
             this.view.dispatch(tr.insert(parent.pos + 1, node));
         };
-        this.ignoreMutation = () => true;
-        this.stopEvent = () => true;
     }
     createNote(text = '', title = '') {
         const el = document.createElement('span');

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/cjs/views/keyword_group.js

@@ -19,6 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeywordGroupView = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
 const AddKeywordInline_1 = require("../components/keywords/AddKeywordInline");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
@@ -44,6 +45,15 @@ class KeywordGroupView extends block_view_1.default {
                 this.element.appendChild(this.addingTools);
             }
         };
+        this.updateContents = () => {
+            this.dom.addEventListener('click', (event) => this.onClickHandler(event));
+        };
+        this.onClickHandler = (event) => {
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            const { tr, doc } = this.view.state;
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(doc, this.getPos()));
+            this.view.dispatch(tr);
+        };
     }
 }
 exports.KeywordGroupView = KeywordGroupView;

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/views/affiliations.js

@@ -1,3 +1,4 @@
+import { NodeSelection } from 'prosemirror-state';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 export class AffiliationsView extends BlockView {
@@ -12,6 +13,14 @@ export class AffiliationsView extends BlockView {
             this.dom.setAttribute('contenteditable', 'false');
             this.dom.appendChild(this.contentDOM);
         };
+        this.updateContents = () => {
+            this.dom.addEventListener('click', () => this.onClickHandler());
+        };
+        this.onClickHandler = () => {
+            const { tr, doc } = this.view.state;
+            tr.setSelection(NodeSelection.create(doc, this.getPos()));
+            this.view.dispatch(tr);
+        };
     }
 }
 export default createNodeView(AffiliationsView);

package/dist/es/views/citation_editable.js

@@ -68,6 +68,7 @@ export class CitationEditableView extends CitationView {
             this.props.popper.destroy();
         };
         this.showContextMenu = () => {
+            this.props.popper.destroy();
             const componentProps = {
                 actions: [
                     { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },

package/dist/es/views/contributors.js

@@ -13,14 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { SecondaryButton } from '@manuscripts/style-guide';
+import { ContextMenu, SecondaryButton, } from '@manuscripts/style-guide';
+import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
 import { isContributorNode, schema, } from '@manuscripts/transform';
+import { NodeSelection } from 'prosemirror-state';
 import { AuthorsModal, } from '../components/authors/AuthorsModal';
 import { authorLabel } from '../lib/authors';
 import { getActualAttrs } from '../lib/track-changes-utils';
 import { deleteNode, findChildByID, findChildByType, findChildrenAttrsByType, updateNodeAttrs, } from '../lib/view';
 import { affiliationsKey } from '../plugins/affiliations';
-import { selectedSuggestionKey } from '../plugins/selected-suggestion-ui';
+import { CLEAR_SUGGESTION_ID, selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -35,12 +37,14 @@ export class ContributorsView extends BlockView {
             this.updateContents();
         };
         this.updateContents = () => {
-            this.updateClasses();
-            this.updateAttributes();
-            this.container.innerHTML = '';
-            this.buildAuthors();
-            this.createEditButton();
-            this.createLegend();
+            setTimeout(() => {
+                this.updateClasses();
+                this.updateAttributes();
+                this.container.innerHTML = '';
+                this.buildAuthors();
+                this.createEditButton();
+                this.createLegend();
+            }, 0);
         };
         this.buildAuthors = () => {
             var _a;
@@ -73,7 +77,9 @@ export class ContributorsView extends BlockView {
             const pluginState = affiliationsKey.getState(this.view.state);
             const attrs = node.attrs;
             const displayAttr = getActualAttrs(node);
+            const containerWrapper = document.createElement('div');
             const container = document.createElement('button');
+            containerWrapper.classList.add('contributor-wrapper');
             container.classList.add('contributor');
             container.setAttribute('id', attrs.id);
             container.setAttribute('contenteditable', 'false');
@@ -89,9 +95,12 @@ export class ContributorsView extends BlockView {
             }
             const can = this.props.getCapabilities();
             const disableEditButton = !can.editMetadata;
-            const { isCorresponding, email } = displayAttr;
+            const { isCorresponding, email, id } = displayAttr;
             if (!disableEditButton) {
-                container.addEventListener('click', this.handleClick);
+                container.addEventListener('click', () => {
+                    const dataTracked = attrs.dataTracked;
+                    this.onClickHandler(id, dataTracked ? dataTracked[0] : undefined);
+                });
             }
             const name = authorLabel(displayAttr);
             container.innerHTML =
@@ -119,7 +128,8 @@ export class ContributorsView extends BlockView {
             if (selectedAuthor && selectedAuthor === attrs.id) {
                 container.classList.add('selected-suggestion');
             }
-            return container;
+            containerWrapper.appendChild(container);
+            return containerWrapper;
         };
         this.isJointFirstAuthor = (authors, index) => {
             const author = index === 0 ? authors[index] : authors[index - 1];
@@ -141,7 +151,7 @@ export class ContributorsView extends BlockView {
             const can = this.props.getCapabilities();
             const button = ReactSubView(this.props, SecondaryButton, {
                 mini: true,
-                onClick: this.handleClick,
+                onClick: () => this.handleEdit(''),
                 className: 'edit-authors-button',
                 disabled: !can.editMetadata,
                 children: 'Edit Authors',
@@ -161,17 +171,48 @@ export class ContributorsView extends BlockView {
                 }
             }
         };
-        this.handleClick = (e) => {
-            var _a, _b;
-            e.stopPropagation();
+        this.onClickHandler = (elementId, dataTracked) => {
+            var _a;
+            this.props.popper.destroy();
+            const isSelectedSuggestion = !!((_a = selectedSuggestionKey
+                .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
+            const { tr, doc } = this.view.state;
+            tr.setSelection(NodeSelection.create(doc, this.getPos()));
+            if (dataTracked && dataTracked.status !== CHANGE_STATUS.rejected) {
+                tr.setMeta(SET_SUGGESTION_ID, dataTracked.id);
+            }
+            else {
+                if (isSelectedSuggestion) {
+                    tr.setMeta(CLEAR_SUGGESTION_ID, true);
+                }
+            }
+            if (!((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.operation) === CHANGE_OPERATION.delete &&
+                (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.status) !== CHANGE_STATUS.rejected)) {
+                this.showContextMenu(elementId);
+            }
+            this.view.dispatch(tr);
+        };
+        this.showContextMenu = (elementId) => {
+            this.props.popper.destroy();
+            const element = document.getElementById(elementId);
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => this.handleEdit(elementId),
+                        icon: 'EditIcon',
+                    },
+                ],
+            };
+            this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(element, this.contextMenu, 'right-start');
+        };
+        this.handleEdit = (id) => {
+            var _a;
+            this.props.popper.destroy();
             const contributors = findChildrenAttrsByType(this.view, schema.nodes.contributor);
             const affiliations = findChildrenAttrsByType(this.view, schema.nodes.affiliation);
-            let author = undefined;
-            const target = e.target;
-            if (target) {
-                const id = (_a = target.closest('.contributor')) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
-                author = contributors.filter((a) => a.id === id)[0];
-            }
+            const author = id ? contributors.filter((a) => a.id === id)[0] : undefined;
             const componentProps = {
                 author,
                 authors: contributors,
@@ -180,7 +221,7 @@ export class ContributorsView extends BlockView {
                 onDeleteAuthor: this.handleDeleteAuthor,
                 onSaveAffiliation: this.handleSaveAffiliation,
             };
-            (_b = this.popper) === null || _b === void 0 ? void 0 : _b.remove();
+            (_a = this.popper) === null || _a === void 0 ? void 0 : _a.remove();
             this.popper = ReactSubView(this.props, AuthorsModal, componentProps, this.node, this.getPos, this.view);
             this.container.appendChild(this.popper);
         };
@@ -213,8 +254,6 @@ export class ContributorsView extends BlockView {
             const node = schema.nodes.affiliation.create(attrs);
             this.view.dispatch(tr.insert(parent.pos + 1, node));
         };
-        this.ignoreMutation = () => true;
-        this.stopEvent = () => true;
     }
     createNote(text = '', title = '') {
         const el = document.createElement('span');

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/es/views/keyword_group.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { NodeSelection } from 'prosemirror-state';
 import { AddKeywordInline } from '../components/keywords/AddKeywordInline';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
@@ -38,6 +39,15 @@ export class KeywordGroupView extends BlockView {
                 this.element.appendChild(this.addingTools);
             }
         };
+        this.updateContents = () => {
+            this.dom.addEventListener('click', (event) => this.onClickHandler(event));
+        };
+        this.onClickHandler = (event) => {
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            const { tr, doc } = this.view.state;
+            tr.setSelection(NodeSelection.create(doc, this.getPos()));
+            this.view.dispatch(tr);
+        };
     }
 }
 export default createNodeView(KeywordGroupView);

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/affiliations.d.ts

@@ -4,6 +4,8 @@ export declare class AffiliationsView<PropsType extends EditableBlockProps> exte
     ignoreMutation: () => boolean;
     stopEvent: () => boolean;
     createElement: () => void;
+    updateContents: () => void;
+    private onClickHandler;
 }
 declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<AffiliationsView<any>>;
 export default _default;

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

@@ -24,27 +24,28 @@ export interface ContributorsProps extends EditableBlockProps {
     selectAuthorForEditing: (authorId: string) => void;
 }
 export declare class ContributorsView<PropsType extends ContributorsProps> extends BlockView<PropsType> {
+    contextMenu: HTMLElement;
     container: HTMLElement;
     inner: HTMLElement;
     popper?: HTMLElement;
     initialise: () => void;
     updateContents: () => void;
     buildAuthors: () => void;
-    buildAuthor: (node: ContributorNode, isJointFirstAuthor: boolean, selectedAuthor?: string) => HTMLButtonElement;
+    buildAuthor: (node: ContributorNode, isJointFirstAuthor: boolean, selectedAuthor?: string) => HTMLDivElement;
     createNote(text?: string, title?: string): HTMLSpanElement;
     isJointFirstAuthor: (authors: ContributorNode[], index: number) => boolean;
     createElement: () => void;
     createDOM: () => void;
     createEditButton: () => void;
     createLegend: () => void;
-    handleClick: (e: Event) => void;
+    private onClickHandler;
+    showContextMenu: (elementId: string) => void;
+    handleEdit: (id: string) => void;
     handleSaveAuthor: (author: ContributorAttrs) => void;
     handleDeleteAuthor: (author: ContributorAttrs) => void;
     handleSaveAffiliation: (affiliation: AffiliationAttrs) => void;
     insertAuthorNode: (attrs: ContributorAttrs) => void;
     insertAffiliationNode: (attrs: AffiliationAttrs) => void;
-    ignoreMutation: () => boolean;
-    stopEvent: () => boolean;
 }
 declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<ContributorsView<any>>;
 export default _default;

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/dist/types/views/keyword_group.d.ts

@@ -21,6 +21,8 @@ export declare class KeywordGroupView extends BlockView<EditableBlockProps> {
     ignoreMutation: () => boolean;
     stopEvent: () => boolean;
     createElement: () => void;
+    updateContents: () => void;
+    private onClickHandler;
 }
 declare const _default: (props: import("./base_node_view").BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<KeywordGroupView>;
 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.34",
+  "version": "1.7.36",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,9 +31,9 @@
     "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.7",
     "@manuscripts/library": "^1.3.6",
-    "@manuscripts/style-guide": "1.8.4",
+    "@manuscripts/style-guide": "1.8.5",
     "@manuscripts/track-changes-plugin": "1.7.9",
-    "@manuscripts/transform": "2.1.12",
+    "@manuscripts/transform": "2.1.13",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
     "mathjax-full": "^3.2.2",

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);
@@ -780,12 +782,6 @@ Next levels are shifted 'up' by 1
   color: var(--deleted-color);
 }
 
-.contributor[data-track-op='delete']:not([data-track-status='rejected']),
-.contributor[data-track-op='delete']:not([data-track-status='rejected']) .name,
-.affiliation[data-track-op='delete']:not([data-track-status='rejected']) {
-  pointer-events: none;
-}
-
 .contributor[data-track-op='delete']:not([data-track-status='rejected']) {
   color: var(--deleted-color);
 }
@@ -803,29 +799,52 @@ Next levels are shifted 'up' by 1
 .contributors {
   white-space: initial;
   margin-top: 24px;
-  align-items: center;
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
+  gap: 0 .5em;
 }
 .contributors-list {
+  display: flex;
+  max-width: 100%;
   flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: 0 .25em;
 }
-
 .contributors .tools-panel {
   position: initial;
+  display: flex;
   flex: 1;
+  align-items: center;
+}
+.contributor-wrapper {
+  display: flex;
+}
+.contributor-wrapper:after {
+  content: ', ';
+  color: #353535;
+}
+.contributor-wrapper:last-child::after {
+  content: '';
+  margin-right: 0;
+}
+.contributor-wrapper .contributor-comment {
+  left: 0;
+  top: -8px;
+  width: auto;
+  height: auto; 
 }
-
 .contributor {
+  position: relative;
   display: inline-flex;
   background: transparent;
   border: 0;
-  font-family: 'PT Sans', sans-serif;
   font-size: 1rem;
   text-decoration: none;
   color: inherit;
   outline: none;
-  padding: 0;
+  padding: 4px;
+  /* margin: 0 6px; */
 }
 
 .contributor:not(:disabled):hover {
@@ -841,16 +860,6 @@ Next levels are shifted 'up' by 1
   cursor: pointer !important;
 }
 
-.contributor:after {
-  content: ', ';
-  color: #353535;
-  margin-right: 5px;
-}
-.contributor:last-child::after {
-  content: '';
-  margin-right: 0;
-}
-
 .contributors-legend {
   margin: 16px 0 0 0;
 }
@@ -862,11 +871,7 @@ Next levels are shifted 'up' by 1
   vertical-align: top;
 }
 
-.contributors .tools-panel {
-  align-items: center;
-  display: flex;
-  margin-left: 8px;
-}
+
 
 .contributor-note {
   display: inline-block;
@@ -895,4 +900,4 @@ Next levels are shifted 'up' by 1
 
 * {
   scroll-behavior: smooth;
-}
+}

package/styles/Editor.css

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