@manuscripts/body-editor 1.7.25-LEAN-3368-0 → 1.7.25

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.CLEAR_SUGGESTION_ID = exports.SET_SUGGESTION_ID = void 0;
+exports.selectedSuggestionKey = 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';
-exports.CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
+const 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(exports.CLEAR_SUGGESTION_ID)) {
+            if (tr.getMeta(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(exports.CLEAR_SUGGESTION_ID, true));
+                view.dispatch(view.state.tr.setMeta(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,9 +45,8 @@ class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
-        this.clickedElementId = null;
+        this.gutterButtons = () => [];
         this.showPopper = (id) => {
-            this.props.popper.destroy();
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const componentProps = {
                 items: Array.from(bib.bibliographyItems.values()),
@@ -61,52 +60,6 @@ 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);
@@ -141,6 +94,28 @@ 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);
@@ -148,14 +123,16 @@ 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');
@@ -165,9 +142,6 @@ 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');
@@ -183,6 +157,13 @@ 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,9 +14,15 @@
  * 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");
@@ -55,8 +61,24 @@ 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,7 +29,6 @@ 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");
@@ -43,28 +42,14 @@ class CitationEditableView extends citation_1.CitationView {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
         this.selectNode = () => {
-            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();
-                    }
-                }
+            if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
+                this.showPopper();
+                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();
         };
@@ -73,18 +58,7 @@ 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);
@@ -117,9 +91,6 @@ 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/cjs/views/link_editable.js

@@ -43,6 +43,10 @@ class LinkEditableView extends link_1.LinkView {
             if (!this.props.getCapabilities().editArticle) {
                 return;
             }
+            if (!this.popperContainer) {
+                this.popperContainer = document.createElement('div');
+                this.popperContainer.className = 'link-editor';
+            }
             const originalValue = {
                 href: this.node.attrs.href,
                 title: this.node.attrs.title,
@@ -54,7 +58,7 @@ class LinkEditableView extends link_1.LinkView {
                 handleRemove: this.handleRemove,
                 handleSave: this.handleSave,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, LinkForm_1.LinkForm, componentProps, this.node, this.getPos, this.view, 'link-editor');
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, LinkForm_1.LinkForm, componentProps, this.node, this.getPos, this.view);
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
         this.handleCancel = () => {

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';
-export const CLEAR_SUGGESTION_ID = 'CLEAR_SUGGESTION_ID';
+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 { ContextMenu } from '@manuscripts/style-guide';
-import { CHANGE_STATUS } from '@manuscripts/track-changes-plugin';
+import { CHANGE_OPERATION, CHANGE_STATUS, } from '@manuscripts/track-changes-plugin';
 import { buildComment, Decoder, } from '@manuscripts/transform';
+import { commentIcon, editIcon } from '../assets';
 import { sanitize } from '../lib/dompurify';
-import { getChangeClasses } from '../lib/track-changes-utils';
+import { getAttrsTrackingButton, getChangeClasses, } from '../lib/track-changes-utils';
 import { deleteNode, updateNode } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { commentAnnotation } from '../plugins/comment_annotation';
-import { CLEAR_SUGGESTION_ID, selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
+import { selectedSuggestionKey, SET_SUGGESTION_ID, } from '../plugins/selected-suggestion-ui';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
@@ -39,9 +39,8 @@ export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
         this.decoder = new Decoder(new Map());
-        this.clickedElementId = null;
+        this.gutterButtons = () => [];
         this.showPopper = (id) => {
-            this.props.popper.destroy();
             const bib = getBibliographyPluginState(this.view.state);
             const componentProps = {
                 items: Array.from(bib.bibliographyItems.values()),
@@ -55,52 +54,6 @@ 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);
@@ -135,6 +88,28 @@ 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);
@@ -142,14 +117,16 @@ 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');
@@ -159,9 +136,6 @@ export class BibliographyElementBlockView extends BlockView {
             else {
                 this.container.appendChild(wrapper);
             }
-            if (this.clickedElementId) {
-                this.showContextMenu(this.clickedElementId);
-            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');
@@ -177,6 +151,13 @@ 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,8 +14,11 @@
  * 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 } from '../lib/track-changes-utils';
+import { getChangeClasses, isDeleted, isPendingSetAttrs, } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { getCitation } from '../plugins/bibliography/bibliography-utils';
 import { BaseNodeView } from './base_node_view';
@@ -52,8 +55,24 @@ 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, ContextMenu, } from '@manuscripts/style-guide';
+import { CitationViewer, } from '@manuscripts/style-guide';
 import { buildComment, Decoder, schema, } from '@manuscripts/transform';
 import { TextSelection } from 'prosemirror-state';
 import { findChildren, findChildrenByType } from 'prosemirror-utils';
@@ -23,7 +23,6 @@ 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';
@@ -37,28 +36,14 @@ export class CitationEditableView extends CitationView {
         super(...arguments);
         this.decoder = new Decoder(new Map());
         this.selectNode = () => {
-            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();
-                    }
-                }
+            if (!isDeleted(this.node)) {
+                this.showPopper();
+                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();
         };
@@ -67,18 +52,7 @@ 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);
@@ -111,9 +85,6 @@ 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/es/views/link_editable.js

@@ -37,6 +37,10 @@ export class LinkEditableView extends LinkView {
             if (!this.props.getCapabilities().editArticle) {
                 return;
             }
+            if (!this.popperContainer) {
+                this.popperContainer = document.createElement('div');
+                this.popperContainer.className = 'link-editor';
+            }
             const originalValue = {
                 href: this.node.attrs.href,
                 title: this.node.attrs.title,
@@ -48,7 +52,7 @@ export class LinkEditableView extends LinkView {
                 handleRemove: this.handleRemove,
                 handleSave: this.handleSave,
             };
-            this.popperContainer = ReactSubView(this.props, LinkForm, componentProps, this.node, this.getPos, this.view, 'link-editor');
+            this.popperContainer = ReactSubView(this.props, LinkForm, componentProps, this.node, this.getPos, this.view);
             this.props.popper.show(this.dom, this.popperContainer, 'bottom');
         };
         this.handleCancel = () => {

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

@@ -19,7 +19,6 @@ 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,20 +23,16 @@ interface BibliographyElementViewProps extends BaseNodeProps {
 export declare class BibliographyElementBlockView<PropsType extends BibliographyElementViewProps & EditableBlockProps> extends BlockView<PropsType> {
     private container;
     private editor;
-    private contextMenu;
     private decoder;
-    private clickedElementId;
+    gutterButtons: () => HTMLElement[];
     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,6 +19,7 @@ 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,13 +18,10 @@ 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-LEAN-3368-0",
+  "version": "1.7.25",
   "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.2",
+    "@manuscripts/style-guide": "1.8.1",
     "@manuscripts/track-changes-plugin": "1.7.8",
     "@manuscripts/transform": "^2.1.6",
     "astrocite-eutils": "^0.16.4",
@@ -112,4 +112,4 @@
     "@types/react": "^17.0.2",
     "prosemirror-tables": "^1.3.5"
   }
-}
+}

package/styles/AdvancedEditor.css

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

package/styles/Editor.css

@@ -671,10 +671,6 @@
   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,10 +1,11 @@
 .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 {
@@ -135,8 +136,7 @@
 .popper .cross-reference-editor,
 .popper .citation-references,
 .popper .track-changes-review-panel,
-.popper .table-footnote-editor,
-.popper .context-menu {
+.popper .table-footnote-editor {
   background: #fff;
   border: 1px solid #e2e2e2;
   border-radius: 8px;
@@ -144,11 +144,6 @@
   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);