@manuscripts/body-editor 1.7.25 → 1.7.26-LEAN-3143-0

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
+exports.deleteIcon = exports.alertIcon = exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -118,3 +118,49 @@ exports.alertIcon = `
     />
   </svg>
 `;
+exports.deleteIcon = `
+  <svg 
+    width="13" 
+    height="15" 
+    viewBox="0 0 13 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
+    fill="#C9C9C9"
+  />
+  <rect 
+    y="2" 
+    width="13" 
+    height="3" 
+    rx="1.5" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
+    fill="white"
+  />
+</svg>`;

package/dist/cjs/components/views/DeleteFootnoteDialog.js

@@ -0,0 +1,45 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DeleteFootnoteDialog = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const DeleteFootnoteDialog = ({ footnoteType, footnoteMessage, handleDelete, }) => {
+    const [isOpen, setOpen] = (0, react_1.useState)(true);
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+            secondary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+        }, category: style_guide_1.Category.confirmation, header: `Delete ${footnoteType}`, message: `${footnoteMessage}` }));
+};
+exports.DeleteFootnoteDialog = DeleteFootnoteDialog;

package/dist/cjs/configs/editor-plugins.js

@@ -68,7 +68,7 @@ exports.default = (props) => {
         (0, prosemirror_tables_1.tableEditing)(),
         (0, highlight_1.default)(props),
         (0, selected_suggestion_ui_1.default)(props),
-        (0, footnotes_1.default)(),
+        (0, footnotes_1.default)(props),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

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

@@ -14,6 +14,9 @@
  * 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.uncitedFootnoteWidget = exports.buildPluginState = exports.footnotesKey = void 0;
 const transform_1 = require("@manuscripts/transform");
@@ -22,7 +25,10 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const prosemirror_view_1 = require("prosemirror-view");
 const assets_1 = require("../../assets");
+const DeleteFootnoteDialog_1 = require("../../components/views/DeleteFootnoteDialog");
+const track_changes_utils_1 = require("../../lib/track-changes-utils");
 const utils_1 = require("../../lib/utils");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
 const placeholder_1 = require("../placeholder");
 const footnotes_utils_1 = require("./footnotes-utils");
 exports.footnotesKey = new prosemirror_state_1.PluginKey('footnotes');
@@ -68,7 +74,60 @@ const uncitedFootnoteWidget = () => () => {
     return element;
 };
 exports.uncitedFootnoteWidget = uncitedFootnoteWidget;
-exports.default = () => {
+const getInlineFootnote = (view, id) => {
+    let inlineFootnote = null;
+    let footnotePosition = null;
+    view.state.doc.descendants((node, pos) => {
+        var _a;
+        const footnote = node;
+        if ((_a = footnote.attrs.rids) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+            inlineFootnote = footnote;
+            footnotePosition = pos;
+            return false;
+        }
+    });
+    return { node: inlineFootnote, pos: footnotePosition };
+};
+const deleteFootnoteWidget = (node, pos, props, footnoteType, footnoteMessage, id) => (view) => {
+    const deleteBtn = document.createElement('span');
+    deleteBtn.className = 'delete-icon';
+    deleteBtn.innerHTML = assets_1.deleteIcon;
+    deleteBtn.addEventListener('click', () => {
+        const handleDelete = () => {
+            const tr = view.state.tr;
+            if (node.type === transform_1.schema.nodes.table_element_footer) {
+                node.content.forEach((item) => {
+                    if (item.type === transform_1.schema.nodes.paragraph) {
+                        tr.delete(pos, pos + item.nodeSize + 1);
+                    }
+                });
+                if (!node.childCount) {
+                    tr.setSelection(prosemirror_state_1.TextSelection.near(view.state.doc.resolve(0))).delete(pos, pos + node.nodeSize + 1);
+                }
+            }
+            if (node.type === transform_1.schema.nodes.footnote) {
+                const inlineFootnotes = getInlineFootnote(view, id);
+                tr.setSelection(prosemirror_state_1.TextSelection.near(view.state.doc.resolve(0))).delete(pos, pos + node.nodeSize + 1);
+                if (inlineFootnotes.node) {
+                    const pos = inlineFootnotes.pos;
+                    const nodeSize = inlineFootnotes.node.nodeSize;
+                    if (pos && nodeSize) {
+                        tr.delete(pos, pos + nodeSize);
+                    }
+                }
+            }
+            view.dispatch(tr);
+        };
+        const componentProps = {
+            footnoteType: footnoteType,
+            footnoteMessage: footnoteMessage,
+            handleDelete: handleDelete,
+        };
+        (0, ReactSubView_1.default)(Object.assign(Object.assign({}, props), { dispatch: view.dispatch }), DeleteFootnoteDialog_1.DeleteFootnoteDialog, componentProps, node, () => pos, view);
+    });
+    return deleteBtn;
+};
+exports.default = (props) => {
     return new prosemirror_state_1.Plugin({
         key: exports.footnotesKey,
         state: {
@@ -101,6 +160,7 @@ exports.default = () => {
             decorations: (state) => {
                 const decorations = [];
                 const isInTableElementFooter = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table_element_footer)(state.selection);
+                const isInTableElement = (0, prosemirror_utils_1.hasParentNodeOfType)(transform_1.schema.nodes.table_element)(state.selection);
                 if (isInTableElementFooter) {
                     const parent = (0, utils_1.findParentNodeWithIdValue)(state.selection);
                     if (parent) {
@@ -131,6 +191,40 @@ exports.default = () => {
                             decorations.push(prosemirror_view_1.Decoration.widget(pos + node.nodeSize - 1, (0, exports.uncitedFootnoteWidget)()));
                         }
                     }
+                    if (isInTableElement) {
+                        const isGeneralFootnote = node.type === transform_1.schema.nodes.paragraph;
+                        const isTableFootnote = node.type === transform_1.schema.nodes.footnote;
+                        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 (isTableFootnote) {
+                            decorations.push(prosemirror_view_1.Decoration.widget(pos + 2, deleteFootnoteWidget(node, pos, props, footnote.type, footnote.message, node.attrs.id), {
+                                key: node.attrs.id,
+                            }));
+                        }
+                        else if (isGeneralFootnote &&
+                            (parent === null || parent === void 0 ? void 0 : parent.type) === transform_1.schema.nodes.table_element_footer) {
+                            decorations.push(prosemirror_view_1.Decoration.widget(pos + 2, deleteFootnoteWidget(parent, pos, props, footnote.type, footnote.message, parent.attrs.id), {
+                                key: parent.attrs.id,
+                            }));
+                        }
+                        if ((0, track_changes_utils_1.isDeleted)(node)) {
+                            decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                                class: 'deleted-footnote',
+                            }));
+                        }
+                    }
                     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/cjs/plugins/selected-suggestion-ui.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectedSuggestionKey = exports.SET_SUGGESTION_ID = void 0;
+exports.selectedSuggestionKey = exports.CLEAR_SUGGESTION_ID = exports.SET_SUGGESTION_ID = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const lodash_1 = require("lodash");
 const prosemirror_state_1 = require("prosemirror-state");
@@ -81,7 +81,7 @@ const getTrackChangesData = (node) => {
     return (_a = trackChangesMark === null || trackChangesMark === void 0 ? void 0 : trackChangesMark.attrs) === null || _a === void 0 ? void 0 : _a.dataTracked;
 };
 exports.SET_SUGGESTION_ID = 'SET_SELECTED_SUGGESTION_ID';
-const CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
+exports.CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
 exports.selectedSuggestionKey = new prosemirror_state_1.PluginKey('selected_suggestion');
 exports.default = (props) => new prosemirror_state_1.Plugin({
     key: exports.selectedSuggestionKey,
@@ -93,7 +93,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
             if (suggestionId) {
                 return buildSelectedSuggestionDecoration(suggestionId, state, props);
             }
-            if (tr.getMeta(CLEAR_SUGGESTION_ID)) {
+            if (tr.getMeta(exports.CLEAR_SUGGESTION_ID)) {
                 props.setEditorSelectedSuggestion(undefined);
                 return prosemirror_view_1.DecorationSet.empty;
             }
@@ -105,7 +105,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
             const nodeClicked = view.state.doc.nodeAt(pos);
             const trackChangesData = nodeClicked && getTrackChangesData(nodeClicked);
             if (!trackChangesData) {
-                view.dispatch(view.state.tr.setMeta(CLEAR_SUGGESTION_ID, true));
+                view.dispatch(view.state.tr.setMeta(exports.CLEAR_SUGGESTION_ID, true));
                 props.setEditorSelectedSuggestion(undefined);
             }
         },

package/dist/cjs/views/bibliography_element.js

@@ -28,9 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = 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 assets_1 = require("../assets");
 const dompurify_1 = require("../lib/dompurify");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const view_1 = require("../lib/view");
@@ -45,8 +45,9 @@ class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
-        this.gutterButtons = () => [];
+        this.clickedElementId = null;
         this.showPopper = (id) => {
+            this.props.popper.destroy();
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const componentProps = {
                 items: Array.from(bib.bibliographyItems.values()),
@@ -60,6 +61,52 @@ class BibliographyElementBlockView extends block_view_1.default {
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleEdit = (citationId) => {
+            this.showPopper(citationId);
+        };
+        this.handleComment = (citationId) => {
+            this.props.setComment((0, transform_1.buildComment)(citationId));
+        };
+        this.showContextMenu = (elementId) => {
+            this.props.popper.destroy();
+            this.clickedElementId = null;
+            const can = this.props.getCapabilities();
+            const element = document.getElementById(elementId);
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editCitationsAndRefs) {
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(elementId),
+                    icon: 'EditIcon',
+                });
+            }
+            componentProps.actions.push({
+                label: 'Comment',
+                action: () => this.handleComment(elementId),
+                icon: 'AddComment',
+            });
+            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.onClickHandler = (elementId, dataTracked) => {
+            var _a;
+            this.clickedElementId = elementId;
+            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);
+            if (dataTracked && dataTracked.status !== track_changes_plugin_1.CHANGE_STATUS.rejected) {
+                this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked.id));
+            }
+            else {
+                if (isSelectedSuggestion) {
+                    this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, true));
+                }
+                else {
+                    this.showContextMenu(elementId);
+                }
+            }
+        };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const commentsDecorationSet = comment_annotation_1.commentAnnotation.getState(this.view.state);
@@ -94,28 +141,6 @@ class BibliographyElementBlockView extends block_view_1.default {
                 const id = meta.entry_ids[i];
                 const fragment = bibliography[i];
                 const element = (0, dompurify_1.sanitize)(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${fragment}</div></div>`).firstElementChild;
-                const doubleButton = document.createElement('div');
-                const editButton = document.createElement('button');
-                const commentButton = document.createElement('button');
-                doubleButton.className = 'bibliography-double-button';
-                editButton.className = 'bibliography-edit-button';
-                commentButton.className = 'bibliography-comment-button';
-                commentButton.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    this.props.setComment((0, transform_1.buildComment)(element.id));
-                });
-                editButton.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    this.showPopper(element.id);
-                });
-                editButton.innerHTML = assets_1.editIcon;
-                commentButton.innerHTML = assets_1.commentIcon;
-                doubleButton.append(editButton, commentButton);
-                if (can.seeReferencesButtons &&
-                    !element.querySelector('.bibliography-double-button')) {
-                    element.appendChild(doubleButton);
-                }
-                editButton.disabled = !can.editCitationsAndRefs;
                 const commentElement = commentElementMap.get(element.id);
                 if (commentElement) {
                     element.appendChild(commentElement);
@@ -123,16 +148,14 @@ class BibliographyElementBlockView extends block_view_1.default {
                 const dataTracked = dataTrackedMap.get(element.id);
                 if (dataTracked) {
                     element.classList.add('attrs-track-mark', ...(0, track_changes_utils_1.getChangeClasses)([dataTracked]));
-                    if (dataTracked.status === track_changes_plugin_1.CHANGE_STATUS.pending &&
-                        dataTracked.operation === track_changes_plugin_1.CHANGE_OPERATION.set_node_attributes) {
-                        element.appendChild((0, track_changes_utils_1.getAttrsTrackingButton)(dataTracked.id));
-                    }
-                    this.addClickListenerToBibItem(element, dataTracked);
                 }
                 if (selectedBibItemSuggestion &&
                     selectedBibItemSuggestion === element.id) {
                     element.classList.add('selected-suggestion');
                 }
+                if (can.seeReferencesButtons) {
+                    element.addEventListener('click', () => this.onClickHandler(element.id, dataTracked));
+                }
                 wrapper.append(element);
             }
             const oldContent = this.container.querySelector('.contents');
@@ -142,6 +165,9 @@ class BibliographyElementBlockView extends block_view_1.default {
             else {
                 this.container.appendChild(wrapper);
             }
+            if (this.clickedElementId) {
+                this.showContextMenu(this.clickedElementId);
+            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');
@@ -157,13 +183,6 @@ class BibliographyElementBlockView extends block_view_1.default {
         this.handleDelete = (item) => {
             (0, view_1.deleteNode)(this.view, item._id);
         };
-        this.addClickListenerToBibItem = (element, dataTracked) => {
-            if (dataTracked.status !== track_changes_plugin_1.CHANGE_STATUS.rejected) {
-                element.addEventListener('click', () => {
-                    this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked.id));
-                });
-            }
-        };
     }
 }
 exports.BibliographyElementBlockView = BibliographyElementBlockView;

package/dist/cjs/views/citation.js

@@ -14,15 +14,9 @@
  * 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.CitationView = void 0;
 const prosemirror_model_1 = require("prosemirror-model");
-const react_1 = require("react");
-const react_dom_1 = __importDefault(require("react-dom"));
-const TrackChangesReview_1 = require("../components/track-changes/TrackChangesReview");
 const dompurify_1 = require("../lib/dompurify");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const bibliography_1 = require("../plugins/bibliography");
@@ -61,24 +55,8 @@ class CitationView extends base_node_view_1.BaseNodeView {
             this.dom.className = 'citation-wrapper';
             this.dom.innerHTML = '';
             this.dom.appendChild(element);
-            if ((0, track_changes_utils_1.isPendingSetAttrs)(this.node) &&
-                !(0, track_changes_utils_1.isDeleted)(this.node) &&
-                citation.embeddedCitationItems.length) {
-                this.dom.appendChild(this.renderTrackChangesReview());
-            }
             this.setDomAttrs(this.node, this.dom, ['rids', 'contents', 'selectedText']);
         };
-        this.renderTrackChangesReview = () => {
-            const { popper } = this.props;
-            const el = document.createElement('span');
-            el.classList.add('track-changes-review');
-            react_dom_1.default.render((0, react_1.createElement)(TrackChangesReview_1.TrackChangesReview, {
-                node: this.node,
-                popper,
-                target: el,
-            }), el);
-            return el;
-        };
         this.getCitation = () => {
             const citation = (0, bibliography_utils_1.getCitation)(this.node);
             if (!citation) {

package/dist/cjs/views/citation_editable.js

@@ -29,6 +29,7 @@ const citation_sources_1 = require("../citation-sources");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const view_1 = require("../lib/view");
 const bibliography_1 = require("../plugins/bibliography");
+const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
 const citation_1 = require("./citation");
 const CitationEditorWrapper_1 = require("./CitationEditorWrapper");
 const creators_1 = require("./creators");
@@ -42,14 +43,28 @@ class CitationEditableView extends citation_1.CitationView {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
         this.selectNode = () => {
-            if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
-                this.showPopper();
-                this.dom.classList.add('ProseMirror-selectednode');
+            var _a;
+            const dataTracked = this.node.attrs.dataTracked;
+            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);
+            this.dom.classList.add('ProseMirror-selectednode');
+            if (dataTracked && !isSelectedSuggestion) {
+                this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked[0].id));
+            }
+            else {
+                if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
+                    const citation = this.getCitation();
+                    const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
+                    if (!rids.length) {
+                        this.showPopper();
+                    }
+                    else {
+                        this.showContextMenu();
+                    }
+                }
             }
         };
         this.deselectNode = () => {
-            var _a;
-            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
             this.dom.classList.remove('ProseMirror-selectednode');
             this.props.popper.destroy();
         };
@@ -58,7 +73,18 @@ class CitationEditableView extends citation_1.CitationView {
             (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
             this.props.popper.destroy();
         };
+        this.showContextMenu = () => {
+            const componentProps = {
+                actions: [
+                    { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
+                    { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
+                ],
+            };
+            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(this.dom, this.contextMenu, 'right-start', false);
+        };
         this.showPopper = () => {
+            this.props.popper.destroy();
             const can = this.props.getCapabilities();
             const citation = this.getCitation();
             const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
@@ -91,6 +117,9 @@ class CitationEditableView extends citation_1.CitationView {
             }
             this.props.popper.show(this.dom, this.editor, 'right');
         };
+        this.handleEdit = () => {
+            this.showPopper();
+        };
         this.handleCancel = () => {
             const selection = prosemirror_state_1.TextSelection.create(this.view.state.tr.doc, this.getPos() + 1);
             this.view.dispatch(this.view.state.tr.setSelection(selection));

package/dist/es/assets.js

@@ -115,3 +115,49 @@ export const alertIcon = `
     />
   </svg>
 `;
+export const deleteIcon = `
+  <svg 
+    width="13" 
+    height="15" 
+    viewBox="0 0 13 15" 
+    fill="none" 
+    xmlns="http://www.w3.org/2000/svg"
+  >
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z" 
+    fill="#C9C9C9"
+  />
+  <rect 
+    y="2" 
+    width="13" 
+    height="3" 
+    rx="1.5" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z" 
+    fill="#C9C9C9"
+  />
+  <path 
+    fill-rule="evenodd" 
+    clip-rule="evenodd" 
+    d="M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z" 
+    fill="white"
+  />
+</svg>`;

package/dist/es/components/views/DeleteFootnoteDialog.js

@@ -0,0 +1,18 @@
+import { Category, Dialog } from '@manuscripts/style-guide';
+import React, { useState } from 'react';
+export const DeleteFootnoteDialog = ({ footnoteType, footnoteMessage, handleDelete, }) => {
+    const [isOpen, setOpen] = useState(true);
+    return (React.createElement(Dialog, { isOpen: isOpen, actions: {
+            primary: {
+                action: () => setOpen(false),
+                title: 'Cancel',
+            },
+            secondary: {
+                action: () => {
+                    setOpen(false);
+                    handleDelete();
+                },
+                title: 'Delete',
+            },
+        }, category: Category.confirmation, header: `Delete ${footnoteType}`, message: `${footnoteMessage}` }));
+};

package/dist/es/configs/editor-plugins.js

@@ -63,7 +63,7 @@ export default (props) => {
         tableEditing(),
         highlights(props),
         selected_suggestion_ui(props),
-        footnotes(),
+        footnotes(props),
     ];
     if (props.collabProvider) {
         allPlugins.push(collab({ version: props.collabProvider.currentVersion }));

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

@@ -15,11 +15,14 @@
  */
 import { isFootnoteNode, isInlineFootnoteNode, schema, } from '@manuscripts/transform';
 import { isEqual } from 'lodash';
-import { NodeSelection, Plugin, PluginKey } from 'prosemirror-state';
+import { NodeSelection, Plugin, PluginKey, TextSelection, } from 'prosemirror-state';
 import { hasParentNodeOfType } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
-import { alertIcon } from '../../assets';
+import { alertIcon, deleteIcon } from '../../assets';
+import { DeleteFootnoteDialog, } from '../../components/views/DeleteFootnoteDialog';
+import { isDeleted } from '../../lib/track-changes-utils';
 import { findParentNodeWithIdValue } from '../../lib/utils';
+import ReactSubView from '../../views/ReactSubView';
 import { placeholderWidget } from '../placeholder';
 import { findTableInlineFootnoteIds } from './footnotes-utils';
 export const footnotesKey = new PluginKey('footnotes');
@@ -63,7 +66,60 @@ export const uncitedFootnoteWidget = () => () => {
     element.innerHTML = alertIcon;
     return element;
 };
-export default () => {
+const getInlineFootnote = (view, id) => {
+    let inlineFootnote = null;
+    let footnotePosition = null;
+    view.state.doc.descendants((node, pos) => {
+        var _a;
+        const footnote = node;
+        if ((_a = footnote.attrs.rids) === null || _a === void 0 ? void 0 : _a.includes(id)) {
+            inlineFootnote = footnote;
+            footnotePosition = pos;
+            return false;
+        }
+    });
+    return { node: inlineFootnote, pos: footnotePosition };
+};
+const deleteFootnoteWidget = (node, pos, props, footnoteType, footnoteMessage, id) => (view) => {
+    const deleteBtn = document.createElement('span');
+    deleteBtn.className = 'delete-icon';
+    deleteBtn.innerHTML = deleteIcon;
+    deleteBtn.addEventListener('click', () => {
+        const handleDelete = () => {
+            const tr = view.state.tr;
+            if (node.type === schema.nodes.table_element_footer) {
+                node.content.forEach((item) => {
+                    if (item.type === schema.nodes.paragraph) {
+                        tr.delete(pos, pos + item.nodeSize + 1);
+                    }
+                });
+                if (!node.childCount) {
+                    tr.setSelection(TextSelection.near(view.state.doc.resolve(0))).delete(pos, pos + node.nodeSize + 1);
+                }
+            }
+            if (node.type === schema.nodes.footnote) {
+                const inlineFootnotes = getInlineFootnote(view, id);
+                tr.setSelection(TextSelection.near(view.state.doc.resolve(0))).delete(pos, pos + node.nodeSize + 1);
+                if (inlineFootnotes.node) {
+                    const pos = inlineFootnotes.pos;
+                    const nodeSize = inlineFootnotes.node.nodeSize;
+                    if (pos && nodeSize) {
+                        tr.delete(pos, pos + nodeSize);
+                    }
+                }
+            }
+            view.dispatch(tr);
+        };
+        const componentProps = {
+            footnoteType: footnoteType,
+            footnoteMessage: footnoteMessage,
+            handleDelete: handleDelete,
+        };
+        ReactSubView(Object.assign(Object.assign({}, props), { dispatch: view.dispatch }), DeleteFootnoteDialog, componentProps, node, () => pos, view);
+    });
+    return deleteBtn;
+};
+export default (props) => {
     return new Plugin({
         key: footnotesKey,
         state: {
@@ -96,6 +152,7 @@ export default () => {
             decorations: (state) => {
                 const decorations = [];
                 const isInTableElementFooter = hasParentNodeOfType(schema.nodes.table_element_footer)(state.selection);
+                const isInTableElement = hasParentNodeOfType(schema.nodes.table_element)(state.selection);
                 if (isInTableElementFooter) {
                     const parent = findParentNodeWithIdValue(state.selection);
                     if (parent) {
@@ -126,6 +183,40 @@ export default () => {
                             decorations.push(Decoration.widget(pos + node.nodeSize - 1, uncitedFootnoteWidget()));
                         }
                     }
+                    if (isInTableElement) {
+                        const isGeneralFootnote = node.type === schema.nodes.paragraph;
+                        const isTableFootnote = node.type === schema.nodes.footnote;
+                        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 (isTableFootnote) {
+                            decorations.push(Decoration.widget(pos + 2, deleteFootnoteWidget(node, pos, props, footnote.type, footnote.message, node.attrs.id), {
+                                key: node.attrs.id,
+                            }));
+                        }
+                        else if (isGeneralFootnote &&
+                            (parent === null || parent === void 0 ? void 0 : parent.type) === schema.nodes.table_element_footer) {
+                            decorations.push(Decoration.widget(pos + 2, deleteFootnoteWidget(parent, pos, props, footnote.type, footnote.message, parent.attrs.id), {
+                                key: parent.attrs.id,
+                            }));
+                        }
+                        if (isDeleted(node)) {
+                            decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                                class: 'deleted-footnote',
+                            }));
+                        }
+                    }
                     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/es/plugins/selected-suggestion-ui.js

@@ -78,7 +78,7 @@ const getTrackChangesData = (node) => {
     return (_a = trackChangesMark === null || trackChangesMark === void 0 ? void 0 : trackChangesMark.attrs) === null || _a === void 0 ? void 0 : _a.dataTracked;
 };
 export const SET_SUGGESTION_ID = 'SET_SELECTED_SUGGESTION_ID';
-const CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
+export const CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
 export const selectedSuggestionKey = new PluginKey('selected_suggestion');
 export default (props) => new Plugin({
     key: selectedSuggestionKey,

package/dist/es/views/bibliography_element.js

@@ -22,15 +22,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
+import { ContextMenu } from '@manuscripts/style-guide';
+import { CHANGE_STATUS } from '@manuscripts/track-changes-plugin';
 import { buildComment, Decoder, } from '@manuscripts/transform';
-import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
-import { getAttrsTrackingButton, getChangeClasses, } from '../lib/track-changes-utils';
+import { getChangeClasses } from '../lib/track-changes-utils';
 import { deleteNode, updateNode } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { commentAnnotation } from '../plugins/comment_annotation';
-import { selectedSuggestionKey, SET_SUGGESTION_ID, } 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';
@@ -39,8 +39,9 @@ export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
         this.decoder = new Decoder(new Map());
-        this.gutterButtons = () => [];
+        this.clickedElementId = null;
         this.showPopper = (id) => {
+            this.props.popper.destroy();
             const bib = getBibliographyPluginState(this.view.state);
             const componentProps = {
                 items: Array.from(bib.bibliographyItems.values()),
@@ -54,6 +55,52 @@ export class BibliographyElementBlockView extends BlockView {
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleEdit = (citationId) => {
+            this.showPopper(citationId);
+        };
+        this.handleComment = (citationId) => {
+            this.props.setComment(buildComment(citationId));
+        };
+        this.showContextMenu = (elementId) => {
+            this.props.popper.destroy();
+            this.clickedElementId = null;
+            const can = this.props.getCapabilities();
+            const element = document.getElementById(elementId);
+            const componentProps = {
+                actions: [],
+            };
+            if (can.editCitationsAndRefs) {
+                componentProps.actions.push({
+                    label: 'Edit',
+                    action: () => this.handleEdit(elementId),
+                    icon: 'EditIcon',
+                });
+            }
+            componentProps.actions.push({
+                label: 'Comment',
+                action: () => this.handleComment(elementId),
+                icon: 'AddComment',
+            });
+            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.onClickHandler = (elementId, dataTracked) => {
+            var _a;
+            this.clickedElementId = elementId;
+            const isSelectedSuggestion = !!((_a = selectedSuggestionKey
+                .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
+            if (dataTracked && dataTracked.status !== CHANGE_STATUS.rejected) {
+                this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked.id));
+            }
+            else {
+                if (isSelectedSuggestion) {
+                    this.view.dispatch(this.view.state.tr.setMeta(CLEAR_SUGGESTION_ID, true));
+                }
+                else {
+                    this.showContextMenu(elementId);
+                }
+            }
+        };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
             const bib = getBibliographyPluginState(this.view.state);
             const commentsDecorationSet = commentAnnotation.getState(this.view.state);
@@ -88,28 +135,6 @@ export class BibliographyElementBlockView extends BlockView {
                 const id = meta.entry_ids[i];
                 const fragment = bibliography[i];
                 const element = sanitize(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${fragment}</div></div>`).firstElementChild;
-                const doubleButton = document.createElement('div');
-                const editButton = document.createElement('button');
-                const commentButton = document.createElement('button');
-                doubleButton.className = 'bibliography-double-button';
-                editButton.className = 'bibliography-edit-button';
-                commentButton.className = 'bibliography-comment-button';
-                commentButton.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    this.props.setComment(buildComment(element.id));
-                });
-                editButton.addEventListener('click', (e) => {
-                    e.preventDefault();
-                    this.showPopper(element.id);
-                });
-                editButton.innerHTML = editIcon;
-                commentButton.innerHTML = commentIcon;
-                doubleButton.append(editButton, commentButton);
-                if (can.seeReferencesButtons &&
-                    !element.querySelector('.bibliography-double-button')) {
-                    element.appendChild(doubleButton);
-                }
-                editButton.disabled = !can.editCitationsAndRefs;
                 const commentElement = commentElementMap.get(element.id);
                 if (commentElement) {
                     element.appendChild(commentElement);
@@ -117,16 +142,14 @@ export class BibliographyElementBlockView extends BlockView {
                 const dataTracked = dataTrackedMap.get(element.id);
                 if (dataTracked) {
                     element.classList.add('attrs-track-mark', ...getChangeClasses([dataTracked]));
-                    if (dataTracked.status === CHANGE_STATUS.pending &&
-                        dataTracked.operation === CHANGE_OPERATION.set_node_attributes) {
-                        element.appendChild(getAttrsTrackingButton(dataTracked.id));
-                    }
-                    this.addClickListenerToBibItem(element, dataTracked);
                 }
                 if (selectedBibItemSuggestion &&
                     selectedBibItemSuggestion === element.id) {
                     element.classList.add('selected-suggestion');
                 }
+                if (can.seeReferencesButtons) {
+                    element.addEventListener('click', () => this.onClickHandler(element.id, dataTracked));
+                }
                 wrapper.append(element);
             }
             const oldContent = this.container.querySelector('.contents');
@@ -136,6 +159,9 @@ export class BibliographyElementBlockView extends BlockView {
             else {
                 this.container.appendChild(wrapper);
             }
+            if (this.clickedElementId) {
+                this.showContextMenu(this.clickedElementId);
+            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');
@@ -151,13 +177,6 @@ export class BibliographyElementBlockView extends BlockView {
         this.handleDelete = (item) => {
             deleteNode(this.view, item._id);
         };
-        this.addClickListenerToBibItem = (element, dataTracked) => {
-            if (dataTracked.status !== CHANGE_STATUS.rejected) {
-                element.addEventListener('click', () => {
-                    this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked.id));
-                });
-            }
-        };
     }
 }
 export default createNodeView(BibliographyElementBlockView);

package/dist/es/views/citation.js

@@ -14,11 +14,8 @@
  * limitations under the License.
  */
 import { DOMSerializer } from 'prosemirror-model';
-import { createElement } from 'react';
-import ReactDOM from 'react-dom';
-import { TrackChangesReview } from '../components/track-changes/TrackChangesReview';
 import { sanitize } from '../lib/dompurify';
-import { getChangeClasses, isDeleted, isPendingSetAttrs, } from '../lib/track-changes-utils';
+import { getChangeClasses } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { getCitation } from '../plugins/bibliography/bibliography-utils';
 import { BaseNodeView } from './base_node_view';
@@ -55,24 +52,8 @@ export class CitationView extends BaseNodeView {
             this.dom.className = 'citation-wrapper';
             this.dom.innerHTML = '';
             this.dom.appendChild(element);
-            if (isPendingSetAttrs(this.node) &&
-                !isDeleted(this.node) &&
-                citation.embeddedCitationItems.length) {
-                this.dom.appendChild(this.renderTrackChangesReview());
-            }
             this.setDomAttrs(this.node, this.dom, ['rids', 'contents', 'selectedText']);
         };
-        this.renderTrackChangesReview = () => {
-            const { popper } = this.props;
-            const el = document.createElement('span');
-            el.classList.add('track-changes-review');
-            ReactDOM.render(createElement(TrackChangesReview, {
-                node: this.node,
-                popper,
-                target: el,
-            }), el);
-            return el;
-        };
         this.getCitation = () => {
             const citation = getCitation(this.node);
             if (!citation) {

package/dist/es/views/citation_editable.js

@@ -15,7 +15,7 @@
  */
 import { ObjectTypes, } from '@manuscripts/json-schema';
 import { findMatchingBibliographyItem } from '@manuscripts/library';
-import { CitationViewer, } from '@manuscripts/style-guide';
+import { CitationViewer, ContextMenu, } from '@manuscripts/style-guide';
 import { buildComment, Decoder, schema, } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
 import { findChildren, findChildrenByType } from 'prosemirror-utils';
@@ -23,6 +23,7 @@ import { crossref } from '../citation-sources';
 import { isDeleted } from '../lib/track-changes-utils';
 import { deleteNode, updateNodeAttrs } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
+import { selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
 import { CitationView } from './citation';
 import { CitationEditorWrapper } from './CitationEditorWrapper';
 import { createEditableNodeView } from './creators';
@@ -36,14 +37,28 @@ export class CitationEditableView extends CitationView {
         super(...arguments);
         this.decoder = new Decoder(new Map());
         this.selectNode = () => {
-            if (!isDeleted(this.node)) {
-                this.showPopper();
-                this.dom.classList.add('ProseMirror-selectednode');
+            var _a;
+            const dataTracked = this.node.attrs.dataTracked;
+            const isSelectedSuggestion = !!((_a = selectedSuggestionKey
+                .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
+            this.dom.classList.add('ProseMirror-selectednode');
+            if (dataTracked && !isSelectedSuggestion) {
+                this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked[0].id));
+            }
+            else {
+                if (!isDeleted(this.node)) {
+                    const citation = this.getCitation();
+                    const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
+                    if (!rids.length) {
+                        this.showPopper();
+                    }
+                    else {
+                        this.showContextMenu();
+                    }
+                }
             }
         };
         this.deselectNode = () => {
-            var _a;
-            (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
             this.dom.classList.remove('ProseMirror-selectednode');
             this.props.popper.destroy();
         };
@@ -52,7 +67,18 @@ export class CitationEditableView extends CitationView {
             (_a = this.editor) === null || _a === void 0 ? void 0 : _a.remove();
             this.props.popper.destroy();
         };
+        this.showContextMenu = () => {
+            const componentProps = {
+                actions: [
+                    { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
+                    { label: 'Comment', action: this.handleComment, icon: 'AddComment' },
+                ],
+            };
+            this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+        };
         this.showPopper = () => {
+            this.props.popper.destroy();
             const can = this.props.getCapabilities();
             const citation = this.getCitation();
             const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
@@ -85,6 +111,9 @@ export class CitationEditableView extends CitationView {
             }
             this.props.popper.show(this.dom, this.editor, 'right');
         };
+        this.handleEdit = () => {
+            this.showPopper();
+        };
         this.handleCancel = () => {
             const selection = TextSelection.create(this.view.state.tr.doc, this.getPos() + 1);
             this.view.dispatch(this.view.state.tr.setSelection(selection));

package/dist/types/assets.d.ts

@@ -17,3 +17,4 @@ export declare const editIcon = "\n  <svg\n    width=\"14\"\n    height=\"14\"\n
 export declare const commentIcon = "\n<svg\n    width=\"20\"\n    height=\"15\"\n    viewBox=\"0 0 20 15\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M7.94841 4.18311C7.98238 3.9602 8 3.73191 8 3.49951C8 3.22073 7.97465 2.94787 7.92613 2.68311H13.5C14.8854 2.68311 16.25 3.6425 16.25 5.09977V9.02453L19.1086 12.9949C19.2731 13.2233 19.2958 13.5245 19.1675 13.775C19.0392 14.0255 18.7814 14.1831 18.5 14.1831H5.5C4.11463 14.1831 2.75 13.2237 2.75 11.7664V7.93729C2.9939 7.97821 3.24446 7.99951 3.5 7.99951C3.75553 7.99951 4.00609 7.97821 4.25 7.93729V11.7664C4.25 12.1508 4.67537 12.6831 5.5 12.6831H17.0358L14.8913 9.70467C14.7994 9.57703 14.75 9.42372 14.75 9.26644V5.09977C14.75 4.71538 14.3246 4.18311 13.5 4.18311H7.94841Z\"\n      fill=\"#FFBD26\"\n    />\n    <path\n      d=\"M11.5 6.99951H8.5\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M12 9.99951H7\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M3.5 1L3.5 6\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M6 3.5L1 3.5\"\n      stroke=\"#FFBD26\"\n      stroke-width=\"1.5\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n";
 export declare const editAttrsTrackingIcon = "\n <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M12 2L14 4L9 9L6 10L7 7L12 2Z\"\n      stroke=\"#353535\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n    <path\n      d=\"M13 10V11.5C13 12.328 12.328 13 11.5 13H4.5C3.672 13 3 12.328 3 11.5V4.5C3 3.672 3.672 3 4.5 3H6\"\n      stroke=\"#353535\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n";
 export declare const alertIcon = "\n  <svg\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 12 12\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fill-rule=\"evenodd\"\n      clip-rule=\"evenodd\"\n      d=\"M6 12C2.68629 12 1.18852e-06 9.31371 1.47821e-06 6C1.7679e-06 2.68629 2.68629 1.39444e-07 6 4.29138e-07C9.31371 7.18831e-07 12 2.68629 12 6C12 9.31371 9.31371 12 6 12ZM6.74998 2.99996L6.75 6.37462C6.75 6.78819 6.41522 7.12243 6.00166 7.12334C5.58681 7.12426 5.25001 6.78821 5.25001 6.37335L5.25 3.00082C5.25 2.58629 5.58629 2.25037 6.00082 2.25083C6.4147 2.25128 6.74998 2.58607 6.74998 2.99996ZM6.75 8.99263C6.75 9.46884 6.47288 9.75 5.99853 9.75C5.52419 9.75 5.25 9.47179 5.25 8.99558C5.25 8.51937 5.52421 8.25 5.99855 8.25C6.47289 8.25 6.75 8.51642 6.75 8.99263Z\"\n      fill=\"#FE8F1F\"\n    />\n  </svg>\n";
+export declare const deleteIcon = "\n  <svg \n    width=\"13\" \n    height=\"15\" \n    viewBox=\"0 0 13 15\" \n    fill=\"none\" \n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n  <path \n    fill-rule=\"evenodd\" \n    clip-rule=\"evenodd\" \n    d=\"M2.00001 3C2 3.00135 2 3.00269 2 3.00404V13.004C2 13.5563 2.44772 14.004 3 14.004H10C10.5523 14.004 11 13.5563 11 13.004V3.00404C11 3.00269 11 3.00135 11 3C11.5978 3.34581 12 3.99215 12 4.73244V13.004C12 14.1086 11.1046 15.004 10 15.004H3C1.89543 15.004 1 14.1086 1 13.004V4.73244C1 3.99215 1.4022 3.34581 2.00001 3Z\" \n    fill=\"#C9C9C9\"\n  />\n  <path \n    fill-rule=\"evenodd\" \n    clip-rule=\"evenodd\" \n    d=\"M4.5 0C3.67157 0 3 0.671573 3 1.5V3.5C3 4.32843 3.67157 5 4.5 5H8.5C9.32843 5 10 4.32843 10 3.5V1.5C10 0.671573 9.32843 0 8.5 0H4.5ZM9 1.5C9 1.22386 8.77614 1 8.5 1H4.5C4.22386 1 4 1.22386 4 1.5C4 1.77614 4.22386 2 4.5 2H8.5C8.77614 2 9 1.77614 9 1.5Z\" \n    fill=\"#C9C9C9\"\n  />\n  <rect \n    y=\"2\" \n    width=\"13\" \n    height=\"3\" \n    rx=\"1.5\" \n    fill=\"#C9C9C9\"\n  />\n  <path \n    fill-rule=\"evenodd\" \n    clip-rule=\"evenodd\" \n    d=\"M8 7.5C8 7.22386 8.22386 7 8.5 7C8.77614 7 9 7.22386 9 7.5V11.5C9 11.7761 8.77614 12 8.5 12C8.22386 12 8 11.7761 8 11.5V7.5Z\" \n    fill=\"#C9C9C9\"\n  />\n  <path \n    fill-rule=\"evenodd\" \n    clip-rule=\"evenodd\" \n    d=\"M4 7.5C4 7.22386 4.22386 7 4.5 7C4.77614 7 5 7.22386 5 7.5V11.5C5 11.7761 4.77614 12 4.5 12C4.22386 12 4 11.7761 4 11.5V7.5Z\" \n    fill=\"#C9C9C9\"\n  />\n  <path \n    fill-rule=\"evenodd\" \n    clip-rule=\"evenodd\" \n    d=\"M11.5 3C11.7761 3 12 3.22386 12 3.5C12 3.77614 11.7761 4 11.5 4L1.5 4C1.22386 4 1 3.77614 1 3.5C1 3.22386 1.22386 3 1.5 3L11.5 3Z\" \n    fill=\"white\"\n  />\n</svg>";

package/dist/types/components/views/DeleteFootnoteDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface DeleteFootnoteDialogProps {
+    footnoteType: string;
+    footnoteMessage: string;
+    handleDelete: () => void;
+}
+export declare const DeleteFootnoteDialog: React.FC<DeleteFootnoteDialogProps>;

package/dist/types/configs/editor-plugins.d.ts

@@ -22,7 +22,7 @@ import { Plugin } from 'prosemirror-state';
 import { CollabProvider } from '../classes/collabProvider';
 import { PopperManager } from '../lib/popper';
 import { CSLProps } from './ManuscriptsEditor';
-interface PluginProps {
+export interface PluginProps {
     getManuscript: () => Manuscript;
     setComment: (comment?: CommentAnnotation) => void;
     setSelectedComment: (id?: string) => void;

package/dist/types/plugins/footnotes/index.d.ts

@@ -15,6 +15,7 @@
  */
 import { InlineFootnoteNode, ManuscriptNode } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
+import { PluginProps } from '../../configs/editor-plugins';
 interface PluginState {
     nodes: [InlineFootnoteNode, number][];
     labels: Map<string, string>;
@@ -22,5 +23,5 @@ interface PluginState {
 export declare const footnotesKey: PluginKey<PluginState>;
 export declare const buildPluginState: (doc: ManuscriptNode) => PluginState;
 export declare const uncitedFootnoteWidget: () => () => HTMLSpanElement;
-declare const _default: () => Plugin<PluginState>;
+declare const _default: (props: PluginProps) => Plugin<PluginState>;
 export default _default;

package/dist/types/plugins/selected-suggestion-ui.d.ts

@@ -19,6 +19,7 @@ interface SelectedSuggestionProps {
     setEditorSelectedSuggestion: (id?: string) => void;
 }
 export declare const SET_SUGGESTION_ID = "SET_SELECTED_SUGGESTION_ID";
+export declare const CLEAR_SUGGESTION_ID = "CLEAR_SUGGESTION_ID";
 export declare const selectedSuggestionKey: PluginKey<DecorationSet>;
 declare const _default: (props: SelectedSuggestionProps) => Plugin<DecorationSet>;
 export default _default;

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

@@ -23,16 +23,20 @@ interface BibliographyElementViewProps extends BaseNodeProps {
 export declare class BibliographyElementBlockView<PropsType extends BibliographyElementViewProps & EditableBlockProps> extends BlockView<PropsType> {
     private container;
     private editor;
+    private contextMenu;
     private decoder;
-    gutterButtons: () => HTMLElement[];
+    private clickedElementId;
     showPopper: (id: string) => void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;
+    private handleEdit;
+    private handleComment;
+    showContextMenu: (elementId: string) => void;
+    private onClickHandler;
     updateContents: () => Promise<void>;
     createElement: () => void;
     private handleSave;
     private handleDelete;
-    private addClickListenerToBibItem;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<BibliographyElementBlockView<any>>;
 export default _default;

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

@@ -19,7 +19,6 @@ export declare class CitationView<PropsType extends BaseNodeProps> extends BaseN
     ignoreMutation: () => boolean;
     initialise: () => this;
     updateContents: () => void;
-    renderTrackChangesReview: () => HTMLSpanElement;
     getCitation: () => import("@manuscripts/json-schema/dist/types").Citation;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<CitationView<any>>;

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

@@ -18,10 +18,13 @@ import { EditableBlockProps } from './editable_block';
 export declare class CitationEditableView extends CitationView<EditableBlockProps> {
     private decoder;
     private editor;
+    private contextMenu;
     selectNode: () => void;
     deselectNode: () => void;
     destroy: () => void;
+    showContextMenu: () => void;
     showPopper: () => void;
+    private handleEdit;
     private handleCancel;
     private handleSave;
     private handleUncite;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.7.25",
+  "version": "1.7.26-LEAN-3143-0",
   "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.6",
     "@manuscripts/library": "^1.3.5",
-    "@manuscripts/style-guide": "1.8.1",
+    "@manuscripts/style-guide": "1.8.2",
     "@manuscripts/track-changes-plugin": "1.7.8",
-    "@manuscripts/transform": "^2.1.6",
+    "@manuscripts/transform": "2.1.9-LEAN-3321",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
     "mathjax-full": "^3.2.2",
@@ -112,4 +112,4 @@
     "@types/react": "^17.0.2",
     "prosemirror-tables": "^1.3.5"
   }
-}
+}

package/styles/AdvancedEditor.css

@@ -741,6 +741,7 @@ Next levels are shifted 'up' by 1
 .citation-wrapper {
   position: relative;
 }
+
 .track-changes-review {
   display: none;
   height: 36px;

package/styles/Editor.css

@@ -671,6 +671,10 @@
   cursor: ns-resize;
   opacity: 0;
   transition: 0.2s all;
+}
+
+.ProseMirror .block-section_title .block-gutter,
+.ProseMirror .block-paragraph .block-gutter {
   margin-top: 16px;
 }
 
@@ -954,8 +958,18 @@
 .ProseMirror .table-footnotes-element {
   counter-reset: table_footnote;
 }
-
-.ProseMirror .table-footnotes-element > div:not(:has(.unctied-table-footnote)) p::before  {
+.table-footer .delete-icon {
+  display: none;
+  position: absolute;
+  right: -20px;
+  top: -13px;
+  cursor: pointer;
+  z-index: 1;
+}
+.table-footer .delete-icon:hover svg path {
+  fill: #353535;
+}
+.ProseMirror .table-footer .table-footnotes-element > div:not(:has(.unctied-table-footnote)) p::before  {
   counter-increment: table_footnote;
   content: counter(table_footnote);
   display: inline-block;
@@ -975,9 +989,17 @@
   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-footer .footnote-selected {
+  position: relative;
+}
+
 .ProseMirror .table-footnotes-element .footnote-selected {
   border: 1px solid #bce7f6;
 }
@@ -1028,4 +1050,4 @@
 }
 .highlight {
   background-color: #ffeebf !important;
-}
+}

package/styles/popper.css

@@ -1,11 +1,10 @@
 .popper {
   color: #353535;
   font-family: 'PT Sans', sans-serif;
-  min-width: 100px;
+  /* min-width: 100px; */
   position: absolute;
   width: auto;
   z-index: 5;
-  /*opacity: 0.9;*/
 }
 
 .popper-arrow {
@@ -136,7 +135,8 @@
 .popper .cross-reference-editor,
 .popper .citation-references,
 .popper .track-changes-review-panel,
-.popper .table-footnote-editor {
+.popper .table-footnote-editor,
+.popper .context-menu {
   background: #fff;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
@@ -144,6 +144,11 @@
   height: auto;
 }
 
+.popper .context-menu {
+  width: auto;
+  top: -12px;
+}
+
 .popper .conflict-dropdown {
   background: #fff;
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);