@manuscripts/body-editor 1.7.25 → 1.7.26

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/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/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",
   "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.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",
     "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

@@ -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);