@manuscripts/body-editor 1.7.16 → 1.7.17-LEAN-3415-1

package/dist/cjs/plugins/affiliations.js

@@ -21,6 +21,7 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 exports.affiliationsKey = new prosemirror_state_1.PluginKey('affiliations');
+let id = 1;
 const buildPluginState = (doc) => {
     const contributors = [];
     const affiliations = [];
@@ -47,13 +48,13 @@ const buildPluginState = (doc) => {
     });
     const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
     return {
+        version: String(id++),
         indexedAffiliationIds,
         contributors,
         affiliations,
     };
 };
 exports.buildPluginState = buildPluginState;
-let count = 0;
 exports.default = () => {
     return new prosemirror_state_1.Plugin({
         key: exports.affiliationsKey,
@@ -98,19 +99,13 @@ exports.default = () => {
         props: {
             decorations: (state) => {
                 const decorations = [];
-                const allNodes = [];
-                state.doc.descendants((node, pos) => {
-                    if ((0, transform_1.isAffiliationNode)(node) || (0, transform_1.isContributorNode)(node)) {
-                        allNodes.push([node, pos]);
-                    }
+                const aff = exports.affiliationsKey.getState(state);
+                const nodes = [...aff.contributors, ...aff.affiliations];
+                nodes.forEach(([node, pos]) => {
+                    decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                        version: aff.version,
+                    }));
                 });
-                if (allNodes.length) {
-                    allNodes.forEach(([node, pos]) => {
-                        decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {}, {
-                            refresh: count++,
-                        }));
-                    });
-                }
                 return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
             },
         },

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

@@ -34,7 +34,6 @@ const lodash_1 = require("lodash");
 const prosemirror_view_1 = require("prosemirror-view");
 const isBibliographyElement = (node) => node.type === node.type.schema.nodes.bibliography_element;
 exports.isBibliographyElement = isBibliographyElement;
-let count = 0;
 const buildDecorations = (state, doc) => {
     const decorations = [];
     let hasMissingItems = false;
@@ -56,14 +55,14 @@ const buildDecorations = (state, doc) => {
             }));
         }
         decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
-            'data-updated': Date.now().toString(),
+            version: state.version,
         }));
     }
     if (hasMissingItems) {
         doc.descendants((node, pos) => {
             if ((0, exports.isBibliographyElement)(node)) {
-                decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {}, {
-                    missing: true,
+                decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                    missing: 'true',
                 }));
                 decorations.push(prosemirror_view_1.Decoration.widget(pos, () => {
                     const el = document.createElement('div');
@@ -76,8 +75,8 @@ const buildDecorations = (state, doc) => {
     }
     doc.descendants((node, pos) => {
         if ((0, exports.isBibliographyElement)(node)) {
-            decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {}, {
-                refresh: count++,
+            decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                version: state.version,
             }));
         }
     });

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

@@ -46,6 +46,7 @@ exports.default = (props) => {
         },
     });
 };
+let version = 1;
 const buildBibliographyPluginState = (doc, csl, $old) => {
     const nodes = [];
     doc.descendants((node, pos) => {
@@ -66,6 +67,7 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
     if ($old &&
         (0, lodash_1.isEqual)(citations, $old.citations) &&
         (0, lodash_1.isEqual)(bibliographyItemMap, $old.bibliographyItems)) {
+        $new.version = $old.version;
         $new.citationCounts = $old.citationCounts;
         $new.provider = $old.provider;
         $new.renderedCitations = $old.renderedCitations;
@@ -83,6 +85,7 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
             locale: csl.locale,
         });
         const citationTexts = provider.rebuildState((0, bibliography_utils_1.buildCitations)(nodes));
+        $new.version = String(version++);
         $new.citationCounts = citationCounts;
         $new.provider = provider;
         $new.renderedCitations = new Map(citationTexts.map((i) => [i[0], i[2]]));

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,8 +93,7 @@ exports.default = (props) => new prosemirror_state_1.Plugin({
             if (suggestionId) {
                 return buildSelectedSuggestionDecoration(suggestionId, state, props);
             }
-            if (tr.getMeta(CLEAR_SUGGESTION_ID) ||
-                tr.getMeta('track-changes-refresh-changes')) {
+            if (tr.getMeta(exports.CLEAR_SUGGESTION_ID)) {
                 props.setEditorSelectedSuggestion(undefined);
                 return prosemirror_view_1.DecorationSet.empty;
             }
@@ -106,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/ContextMenuWrapper.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenuWrapper = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const ContextMenuWrapper = (props) => {
+    return react_1.default.createElement(style_guide_1.ContextMenu, Object.assign({}, props));
+};
+exports.ContextMenuWrapper = ContextMenuWrapper;

package/dist/cjs/views/bibliography_element.js

@@ -30,13 +30,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = void 0;
 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 bibliography_1 = require("../plugins/bibliography");
 const comment_annotation_1 = require("../plugins/comment_annotation");
 const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
 const block_view_1 = __importDefault(require("./block_view"));
+const ContextMenuWrapper_1 = require("./ContextMenuWrapper");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 const ReferencesEditor_1 = require("./ReferencesEditor");
@@ -44,7 +44,7 @@ class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
-        this.gutterButtons = () => [];
+        this.elementWithContextMenu = null;
         this.showPopper = (id) => {
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const componentProps = {
@@ -59,7 +59,44 @@ class BibliographyElementBlockView extends block_view_1.default {
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleEdit = (citationId) => {
+            this.props.popper.destroy();
+            this.showPopper(citationId);
+        };
+        this.handleComment = (citationId) => {
+            this.props.setComment((0, transform_1.buildComment)(citationId));
+        };
+        this.showContextMenu = (element) => {
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => this.handleEdit(element.id),
+                        icon: 'EditIcon',
+                    },
+                    {
+                        label: 'Comment',
+                        action: () => this.handleComment(element.id),
+                        icon: 'AddComment',
+                    },
+                ],
+            };
+            this.editor = (0, ReactSubView_1.default)(this.props, ContextMenuWrapper_1.ContextMenuWrapper, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(element, this.editor, 'right-start');
+        };
+        this.onClickHandler = (element, dataTracked) => {
+            this.elementWithContextMenu = null;
+            this.props.popper.destroy();
+            this.elementWithContextMenu = element;
+            this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, true));
+            if (dataTracked && dataTracked.status !== track_changes_plugin_1.CHANGE_STATUS.rejected) {
+                this.view.dispatch(this.view.state.tr
+                    .setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, false)
+                    .setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked.id));
+            }
+        };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const commentsDecorationSet = comment_annotation_1.commentAnnotation.getState(this.view.state);
             const selectedSuggestion = selected_suggestion_ui_1.selectedSuggestionKey.getState(this.view.state);
@@ -93,28 +130,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);
@@ -122,16 +137,17 @@ 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, dataTracked), false);
+                }
+                if (element.id === ((_a = this.elementWithContextMenu) === null || _a === void 0 ? void 0 : _a.id)) {
+                    this.elementWithContextMenu = element;
+                }
                 wrapper.append(element);
             }
             const oldContent = this.container.querySelector('.contents');
@@ -141,6 +157,9 @@ class BibliographyElementBlockView extends block_view_1.default {
             else {
                 this.container.appendChild(wrapper);
             }
+            if (this.elementWithContextMenu) {
+                this.showContextMenu(this.elementWithContextMenu);
+            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');
@@ -156,13 +175,6 @@ class BibliographyElementBlockView extends block_view_1.default {
         this.handleDelete = (item) => {
             return this.deleteNode(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");
@@ -45,6 +39,7 @@ class CitationView extends base_node_view_1.BaseNodeView {
             return this;
         };
         this.updateContents = () => {
+            11;
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const citation = this.getCitation();
             const classes = [
@@ -61,24 +56,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

@@ -28,8 +28,10 @@ const prosemirror_utils_1 = require("prosemirror-utils");
 const citation_sources_1 = require("../citation-sources");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 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 ContextMenuWrapper_1 = require("./ContextMenuWrapper");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 const createBibliographySection = (node) => transform_1.schema.nodes.bibliography_section.createAndFill({}, [
@@ -41,14 +43,28 @@ class CitationEditableView extends citation_1.CitationView {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
         this.selectNode = () => {
+            var _a;
             if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
-                this.showPopper();
-                this.dom.classList.add('ProseMirror-selectednode');
+                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);
+                if (dataTracked && !isSelectedSuggestion) {
+                    this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked[0].id));
+                }
+                else {
+                    const citation = this.getCitation();
+                    const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
+                    if (!rids.length) {
+                        this.showPopper();
+                    }
+                    else {
+                        this.showContextMenu();
+                    }
+                    this.dom.classList.add('ProseMirror-selectednode');
+                }
             }
         };
         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();
         };
@@ -57,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.editor = (0, ReactSubView_1.default)(this.props, ContextMenuWrapper_1.ContextMenuWrapper, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(this.dom, this.editor, 'right-start');
+        };
         this.showPopper = () => {
+            this.props.popper.destroy();
             const can = this.props.getCapabilities();
             const citation = this.getCitation();
             const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
@@ -90,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/plugins/affiliations.js

@@ -18,6 +18,7 @@ import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { getActualAttrs, isDeleted, isPendingInsert, } from '../lib/track-changes-utils';
 export const affiliationsKey = new PluginKey('affiliations');
+let id = 1;
 export const buildPluginState = (doc) => {
     const contributors = [];
     const affiliations = [];
@@ -44,12 +45,12 @@ export const buildPluginState = (doc) => {
     });
     const indexedAffiliationIds = new Map([...iAffiliations].map((id, i) => [id, i + 1]));
     return {
+        version: String(id++),
         indexedAffiliationIds,
         contributors,
         affiliations,
     };
 };
-let count = 0;
 export default () => {
     return new Plugin({
         key: affiliationsKey,
@@ -94,19 +95,13 @@ export default () => {
         props: {
             decorations: (state) => {
                 const decorations = [];
-                const allNodes = [];
-                state.doc.descendants((node, pos) => {
-                    if (isAffiliationNode(node) || isContributorNode(node)) {
-                        allNodes.push([node, pos]);
-                    }
+                const aff = affiliationsKey.getState(state);
+                const nodes = [...aff.contributors, ...aff.affiliations];
+                nodes.forEach(([node, pos]) => {
+                    decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                        version: aff.version,
+                    }));
                 });
-                if (allNodes.length) {
-                    allNodes.forEach(([node, pos]) => {
-                        decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
-                            refresh: count++,
-                        }));
-                    });
-                }
                 return DecorationSet.create(state.doc, decorations);
             },
         },

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

@@ -30,7 +30,6 @@ import { schema, } from '@manuscripts/transform';
 import { pickBy } from 'lodash';
 import { Decoration } from 'prosemirror-view';
 export const isBibliographyElement = (node) => node.type === node.type.schema.nodes.bibliography_element;
-let count = 0;
 export const buildDecorations = (state, doc) => {
     const decorations = [];
     let hasMissingItems = false;
@@ -52,14 +51,14 @@ export const buildDecorations = (state, doc) => {
             }));
         }
         decorations.push(Decoration.node(pos, pos + node.nodeSize, {
-            'data-updated': Date.now().toString(),
+            version: state.version,
         }));
     }
     if (hasMissingItems) {
         doc.descendants((node, pos) => {
             if (isBibliographyElement(node)) {
-                decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
-                    missing: true,
+                decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                    missing: 'true',
                 }));
                 decorations.push(Decoration.widget(pos, () => {
                     const el = document.createElement('div');
@@ -72,8 +71,8 @@ export const buildDecorations = (state, doc) => {
     }
     doc.descendants((node, pos) => {
         if (isBibliographyElement(node)) {
-            decorations.push(Decoration.node(pos, pos + node.nodeSize, {}, {
-                refresh: count++,
+            decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                version: state.version,
             }));
         }
     });

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

@@ -43,6 +43,7 @@ export default (props) => {
         },
     });
 };
+let version = 1;
 const buildBibliographyPluginState = (doc, csl, $old) => {
     const nodes = [];
     doc.descendants((node, pos) => {
@@ -63,6 +64,7 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
     if ($old &&
         isEqual(citations, $old.citations) &&
         isEqual(bibliographyItemMap, $old.bibliographyItems)) {
+        $new.version = $old.version;
         $new.citationCounts = $old.citationCounts;
         $new.provider = $old.provider;
         $new.renderedCitations = $old.renderedCitations;
@@ -80,6 +82,7 @@ const buildBibliographyPluginState = (doc, csl, $old) => {
             locale: csl.locale,
         });
         const citationTexts = provider.rebuildState(buildCitations(nodes));
+        $new.version = String(version++);
         $new.citationCounts = citationCounts;
         $new.provider = provider;
         $new.renderedCitations = new Map(citationTexts.map((i) => [i[0], i[2]]));

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,
@@ -90,8 +90,7 @@ export default (props) => new Plugin({
             if (suggestionId) {
                 return buildSelectedSuggestionDecoration(suggestionId, state, props);
             }
-            if (tr.getMeta(CLEAR_SUGGESTION_ID) ||
-                tr.getMeta('track-changes-refresh-changes')) {
+            if (tr.getMeta(CLEAR_SUGGESTION_ID)) {
                 props.setEditorSelectedSuggestion(undefined);
                 return DecorationSet.empty;
             }

package/dist/es/views/ContextMenuWrapper.js

@@ -0,0 +1,5 @@
+import { ContextMenu } from '@manuscripts/style-guide';
+import React from 'react';
+export const ContextMenuWrapper = (props) => {
+    return React.createElement(ContextMenu, Object.assign({}, props));
+};

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 { 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 { 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 { ContextMenuWrapper } from './ContextMenuWrapper';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 import { ReferencesEditor } from './ReferencesEditor';
@@ -38,7 +38,7 @@ export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
         this.decoder = new Decoder(new Map());
-        this.gutterButtons = () => [];
+        this.elementWithContextMenu = null;
         this.showPopper = (id) => {
             const bib = getBibliographyPluginState(this.view.state);
             const componentProps = {
@@ -53,7 +53,44 @@ export class BibliographyElementBlockView extends BlockView {
         };
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleEdit = (citationId) => {
+            this.props.popper.destroy();
+            this.showPopper(citationId);
+        };
+        this.handleComment = (citationId) => {
+            this.props.setComment(buildComment(citationId));
+        };
+        this.showContextMenu = (element) => {
+            const componentProps = {
+                actions: [
+                    {
+                        label: 'Edit',
+                        action: () => this.handleEdit(element.id),
+                        icon: 'EditIcon',
+                    },
+                    {
+                        label: 'Comment',
+                        action: () => this.handleComment(element.id),
+                        icon: 'AddComment',
+                    },
+                ],
+            };
+            this.editor = ReactSubView(this.props, ContextMenuWrapper, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(element, this.editor, 'right-start');
+        };
+        this.onClickHandler = (element, dataTracked) => {
+            this.elementWithContextMenu = null;
+            this.props.popper.destroy();
+            this.elementWithContextMenu = element;
+            this.view.dispatch(this.view.state.tr.setMeta(CLEAR_SUGGESTION_ID, true));
+            if (dataTracked && dataTracked.status !== CHANGE_STATUS.rejected) {
+                this.view.dispatch(this.view.state.tr
+                    .setMeta(CLEAR_SUGGESTION_ID, false)
+                    .setMeta(SET_SUGGESTION_ID, dataTracked.id));
+            }
+        };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const bib = getBibliographyPluginState(this.view.state);
             const commentsDecorationSet = commentAnnotation.getState(this.view.state);
             const selectedSuggestion = selectedSuggestionKey.getState(this.view.state);
@@ -87,28 +124,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);
@@ -116,16 +131,17 @@ 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, dataTracked), false);
+                }
+                if (element.id === ((_a = this.elementWithContextMenu) === null || _a === void 0 ? void 0 : _a.id)) {
+                    this.elementWithContextMenu = element;
+                }
                 wrapper.append(element);
             }
             const oldContent = this.container.querySelector('.contents');
@@ -135,6 +151,9 @@ export class BibliographyElementBlockView extends BlockView {
             else {
                 this.container.appendChild(wrapper);
             }
+            if (this.elementWithContextMenu) {
+                this.showContextMenu(this.elementWithContextMenu);
+            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');
@@ -150,13 +169,6 @@ export class BibliographyElementBlockView extends BlockView {
         this.handleDelete = (item) => {
             return this.deleteNode(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';
@@ -39,6 +36,7 @@ export class CitationView extends BaseNodeView {
             return this;
         };
         this.updateContents = () => {
+            11;
             const bib = getBibliographyPluginState(this.view.state);
             const citation = this.getCitation();
             const classes = [
@@ -55,24 +53,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

@@ -22,8 +22,10 @@ import { findChildren, findChildrenByType } from 'prosemirror-utils';
 import { crossref } from '../citation-sources';
 import { isDeleted } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
+import { selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
 import { CitationView } from './citation';
 import { CitationEditorWrapper } from './CitationEditorWrapper';
+import { ContextMenuWrapper } from './ContextMenuWrapper';
 import { createEditableNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 const createBibliographySection = (node) => schema.nodes.bibliography_section.createAndFill({}, [
@@ -35,14 +37,28 @@ export class CitationEditableView extends CitationView {
         super(...arguments);
         this.decoder = new Decoder(new Map());
         this.selectNode = () => {
+            var _a;
             if (!isDeleted(this.node)) {
-                this.showPopper();
-                this.dom.classList.add('ProseMirror-selectednode');
+                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);
+                if (dataTracked && !isSelectedSuggestion) {
+                    this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked[0].id));
+                }
+                else {
+                    const citation = this.getCitation();
+                    const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
+                    if (!rids.length) {
+                        this.showPopper();
+                    }
+                    else {
+                        this.showContextMenu();
+                    }
+                    this.dom.classList.add('ProseMirror-selectednode');
+                }
             }
         };
         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();
         };
@@ -51,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.editor = ReactSubView(this.props, ContextMenuWrapper, componentProps, this.node, this.getPos, this.view, 'context-menu');
+            this.props.popper.show(this.dom, this.editor, 'right-start');
+        };
         this.showPopper = () => {
+            this.props.popper.destroy();
             const can = this.props.getCapabilities();
             const citation = this.getCitation();
             const rids = citation.embeddedCitationItems.map((i) => i.bibliographyItem);
@@ -84,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/plugins/affiliations.d.ts

@@ -16,6 +16,7 @@
 import { AffiliationNode, ContributorNode, ManuscriptNode } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 interface PluginState {
+    version: string;
     indexedAffiliationIds: Map<string, number>;
     contributors: Array<[ContributorNode, number]>;
     affiliations: Array<[AffiliationNode, number]>;

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

@@ -22,6 +22,7 @@ import { PopperManager } from '../../lib/popper';
 import { CitationNodes } from './bibliography-utils';
 export declare const bibliographyKey: PluginKey<PluginState>;
 export interface PluginState {
+    version: string;
     citationNodes: CitationNodes;
     citations: CiteProc.Citation[];
     bibliographyItems: Map<string, BibliographyItem>;

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

@@ -0,0 +1,3 @@
+import { ContextMenuProps } from '@manuscripts/style-guide';
+import React from 'react';
+export declare const ContextMenuWrapper: React.FC<ContextMenuProps>;

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

@@ -24,15 +24,18 @@ export declare class BibliographyElementBlockView<PropsType extends Bibliography
     private container;
     private editor;
     private decoder;
-    gutterButtons: () => HTMLElement[];
+    private elementWithContextMenu;
     showPopper: (id: string) => void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;
+    private handleEdit;
+    private handleComment;
+    showContextMenu: (element: Element) => 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

@@ -21,7 +21,9 @@ export declare class CitationEditableView extends CitationView<EditableBlockProp
     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.16",
+  "version": "1.7.17-LEAN-3415-1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -31,7 +31,7 @@
     "@manuscripts/assets": "^0.6.4",
     "@manuscripts/json-schema": "^2.2.5",
     "@manuscripts/library": "^1.3.4",
-    "@manuscripts/style-guide": "^1.7.10",
+    "@manuscripts/style-guide": "1.7.10-LEAN-3415-1",
     "@manuscripts/track-changes-plugin": "^1.7.6",
     "@manuscripts/transform": "^2.1.5",
     "astrocite-eutils": "^0.16.4",

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;
 }
 

package/styles/popper.css

@@ -136,7 +136,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 +145,11 @@
   height: auto;
 }
 
+.popper .context-menu {
+  width: auto;
+  top: -16px;
+}
+
 .popper .conflict-dropdown {
   background: #fff;
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);