@manuscripts/body-editor 1.7.3 → 1.7.5

package/dist/cjs/assets.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.commentIcon = exports.editIcon = void 0;
+exports.editAttrsTrackingIcon = exports.commentIcon = exports.editIcon = void 0;
 exports.editIcon = `
   <svg
     width="14"
@@ -78,3 +78,27 @@ exports.commentIcon = `
     />
   </svg>
 `;
+exports.editAttrsTrackingIcon = `
+ <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2L14 4L9 9L6 10L7 7L12 2Z"
+      stroke="#353535"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13 10V11.5C13 12.328 12.328 13 11.5 13H4.5C3.672 13 3 12.328 3 11.5V4.5C3 3.672 3.672 3 4.5 3H6"
+      stroke="#353535"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;

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

@@ -36,10 +36,9 @@ const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
 const placeholder_1 = __importDefault(require("../plugins/placeholder"));
 const sections_1 = __importDefault(require("../plugins/sections"));
+const selected_suggestion_ui_1 = __importDefault(require("../plugins/selected-suggestion-ui"));
 const tables_cursor_fix_1 = __importDefault(require("../plugins/tables-cursor-fix"));
 const toc_1 = __importDefault(require("../plugins/toc"));
-const track_changes_ui_1 = __importDefault(require("../plugins/track-changes-ui"));
-const tracking_mark_1 = __importDefault(require("../plugins/tracking-mark"));
 const rules_1 = __importDefault(require("../rules"));
 exports.default = (props) => {
     const plugins = props.plugins || [];
@@ -62,8 +61,7 @@ exports.default = (props) => {
         (0, placeholder_1.default)(),
         (0, prosemirror_tables_1.tableEditing)(),
         (0, highlight_1.default)(props),
-        (0, track_changes_ui_1.default)(props),
-        (0, tracking_mark_1.default)(),
+        (0, selected_suggestion_ui_1.default)(props),
         (0, footnotes_1.default)(),
     ];
     if (props.collabProvider) {

package/dist/cjs/index.js

@@ -29,7 +29,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineManuscript = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.SET_SUGGESTION_ID = exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineManuscript = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./citation-sources"), exports);
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
@@ -51,6 +51,8 @@ var comment_annotation_1 = require("./plugins/comment_annotation");
 Object.defineProperty(exports, "commentScroll", { enumerable: true, get: function () { return comment_annotation_1.commentScroll; } });
 Object.defineProperty(exports, "isThereSelector", { enumerable: true, get: function () { return comment_annotation_1.isThereSelector; } });
 Object.defineProperty(exports, "isHighlightComment", { enumerable: true, get: function () { return comment_annotation_1.isHighlightComment; } });
+var selected_suggestion_ui_1 = require("./plugins/selected-suggestion-ui");
+Object.defineProperty(exports, "SET_SUGGESTION_ID", { enumerable: true, get: function () { return selected_suggestion_ui_1.SET_SUGGESTION_ID; } });
 __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/track-changes-utils"), exports);
 __exportStar(require("./useEditor"), exports);

package/dist/cjs/lib/track-changes-utils.js

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getActualAttrs = exports.isTracked = exports.getChangeClasses = exports.isPendingSetAttrs = exports.isPending = exports.isPendingInsert = exports.isDeleted = exports.isRejectedInsert = void 0;
+exports.getAttrsTrackingButton = exports.getActualAttrs = exports.isTracked = exports.getChangeClasses = exports.isPendingSetAttrs = exports.isPending = exports.isPendingInsert = exports.isDeleted = exports.isRejectedInsert = void 0;
+const assets_1 = require("../assets");
 function isRejectedInsert(node) {
     if (node.attrs.dataTracked) {
         const changes = node.attrs.dataTracked;
@@ -56,10 +57,10 @@ function isPendingSetAttrs(node) {
     return false;
 }
 exports.isPendingSetAttrs = isPendingSetAttrs;
-function getChangeClasses(node) {
+function getChangeClasses(dataTracked) {
     const classes = [];
-    if (node.attrs.dataTracked) {
-        const changes = node.attrs.dataTracked;
+    if (dataTracked) {
+        const changes = dataTracked;
         const operationClasses = new Map([
             ['insert', 'inserted'],
             ['delete', 'deleted'],
@@ -90,3 +91,11 @@ function getActualAttrs(node) {
     return attrs;
 }
 exports.getActualAttrs = getActualAttrs;
+const getAttrsTrackingButton = (changeID) => {
+    const el = document.createElement('button');
+    el.className = 'attrs-popper-button';
+    el.value = changeID;
+    el.innerHTML = assets_1.editAttrsTrackingIcon;
+    return el;
+};
+exports.getAttrsTrackingButton = getAttrsTrackingButton;

package/dist/cjs/plugins/comment_annotation.js

@@ -130,7 +130,8 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
         element.classList.add(location === 'point' ? 'point-comment' : 'inline-citation');
     }
     element.classList.add('block-comment-button', elementClass);
-    element.onclick = () => {
+    element.onclick = (e) => {
+        e.stopPropagation();
         setSelectedComment(commentId);
         (0, exports.commentScroll)(commentId, 'inspector');
     };

package/dist/cjs/plugins/highlight/findHighlightMarkers.js

@@ -5,13 +5,7 @@ const transform_1 = require("@manuscripts/transform");
 function findHighlightMarkers(doc) {
     const markers = [];
     let current;
-    const commentIds = [];
     doc.descendants((node, pos) => {
-        if (node.type.name === transform_1.schema.nodes.comments.name) {
-            node.content.forEach(({ attrs }) => {
-                commentIds.push(attrs.id);
-            });
-        }
         if ((0, transform_1.isHighlightMarkerNode)(node)) {
             const { position, tid, id } = node.attrs;
             if (position === 'start') {
@@ -27,6 +21,6 @@ function findHighlightMarkers(doc) {
             }
         }
     });
-    return markers.filter((marker) => commentIds.includes(marker.id));
+    return markers;
 }
 exports.findHighlightMarkers = findHighlightMarkers;

package/dist/cjs/plugins/selected-suggestion-ui.js

@@ -0,0 +1,129 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const prosemirror_view_1 = require("prosemirror-view");
+class SuggestionView {
+    constructor(view) {
+        this.listener = (e) => {
+            const changeId = e.currentTarget.getAttribute('data-track-id');
+            this.view.dispatch(this.view.state.tr.setMeta(exports.SET_SUGGESTION_ID, changeId));
+        };
+        this.view = view;
+        this.addEventListener(view);
+        this.update(view, undefined);
+    }
+    update(view, prevState) {
+        var _a, _b;
+        this.view = view;
+        if (!prevState) {
+            return;
+        }
+        const oldChanges = ((_a = track_changes_plugin_1.trackChangesPluginKey.getState(prevState)) === null || _a === void 0 ? void 0 : _a.changeSet.changes) || [];
+        const newChangeSet = (_b = track_changes_plugin_1.trackChangesPluginKey.getState(view.state)) === null || _b === void 0 ? void 0 : _b.changeSet;
+        if (newChangeSet && !(0, lodash_1.isEqual)(oldChanges, newChangeSet.changes)) {
+            this.addEventListener(view);
+            oldChanges.map((change) => {
+                var _a;
+                if (!newChangeSet.get(change.id) ||
+                    ((_a = newChangeSet.get(change.id)) === null || _a === void 0 ? void 0 : _a.dataTracked.status) === 'rejected') {
+                    const dom = view.dom.querySelector(`[data-track-id="${change.id}"]`);
+                    dom === null || dom === void 0 ? void 0 : dom.removeEventListener('click', this.listener);
+                }
+            });
+        }
+    }
+    destroy() {
+        this.view.dom
+            .querySelectorAll('[data-track-status="pending"], [data-track-status="accepted"]')
+            .forEach((dom) => {
+            var _a, _b;
+            if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
+                return;
+            }
+            dom.removeEventListener('click', this.listener);
+        });
+    }
+    addEventListener(view) {
+        view.dom
+            .querySelectorAll('[data-track-status="pending"], [data-track-status="accepted"]')
+            .forEach((dom) => {
+            var _a, _b;
+            if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
+                return;
+            }
+            dom.addEventListener('click', this.listener);
+        });
+    }
+}
+const getTrackChangesData = (node) => {
+    var _a;
+    const trackChangesMark = node.marks.find((mark) => (mark.type.name === 'tracked_insert' ||
+        mark.type.name === 'tracked_delete') &&
+        mark.attrs.dataTracked);
+    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.selectedSuggestionKey = new prosemirror_state_1.PluginKey('selected_suggestion');
+exports.default = (props) => new prosemirror_state_1.Plugin({
+    key: exports.selectedSuggestionKey,
+    view: (view) => new SuggestionView(view),
+    state: {
+        init: () => prosemirror_view_1.DecorationSet.empty,
+        apply: (tr, value, _, state) => {
+            const suggestionId = tr.getMeta(exports.SET_SUGGESTION_ID);
+            if (suggestionId) {
+                return buildSelectedSuggestionDecoration(suggestionId, state, props);
+            }
+            if (tr.getMeta(CLEAR_SUGGESTION_ID) ||
+                tr.getMeta('track-changes-refresh-changes')) {
+                props.setEditorSelectedSuggestion(undefined);
+                return prosemirror_view_1.DecorationSet.empty;
+            }
+            return value;
+        },
+    },
+    props: {
+        handleClick(view, pos) {
+            const nodeClicked = view.state.doc.nodeAt(pos);
+            const trackChangesData = nodeClicked && getTrackChangesData(nodeClicked);
+            if (!trackChangesData) {
+                view.dispatch(view.state.tr.setMeta(CLEAR_SUGGESTION_ID, true));
+                props.setEditorSelectedSuggestion(undefined);
+            }
+        },
+        decorations: (state) => exports.selectedSuggestionKey.getState(state),
+    },
+});
+const buildSelectedSuggestionDecoration = (suggestionId, state, props) => {
+    var _a;
+    const change = (_a = track_changes_plugin_1.trackChangesPluginKey
+        .getState(state)) === null || _a === void 0 ? void 0 : _a.changeSet.get(suggestionId);
+    const decorations = [];
+    if (change) {
+        const decoration = change.type === 'text-change' ? prosemirror_view_1.Decoration.inline : prosemirror_view_1.Decoration.node;
+        decorations.push(decoration(change.from, change.to, {
+            class: 'selected-suggestion',
+        }));
+        props.setEditorSelectedSuggestion(change.id);
+    }
+    return prosemirror_view_1.DecorationSet.create(state.doc, decorations);
+};

package/dist/cjs/views/affiliation.js

@@ -39,10 +39,12 @@ class AffiliationView extends base_node_view_1.BaseNodeView {
                 this.dom.setAttribute('style', 'order: ' + (order || (pluginState === null || pluginState === void 0 ? void 0 : pluginState.affiliations.length) + 1));
             }
             if ((_a = attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                this.dom.setAttribute('data-track-id', attrs.dataTracked[0].id);
                 this.dom.setAttribute('data-track-status', attrs.dataTracked[0].status);
                 this.dom.setAttribute('data-track-op', attrs.dataTracked[0].operation);
             }
             else {
+                this.dom.removeAttribute('data-track-id');
                 this.dom.removeAttribute('data-track-status');
                 this.dom.removeAttribute('data-track-type');
             }
@@ -54,7 +56,6 @@ class AffiliationView extends base_node_view_1.BaseNodeView {
             this.updateContents();
         };
         this.ignoreMutation = () => true;
-        this.stopEvent = () => true;
         this.formatAddress = (affiliation) => {
             const { department, institution, addressLine1, city, county, country, postCode, } = affiliation;
             return [

package/dist/cjs/views/bibliography_element.js

@@ -32,9 +32,10 @@ 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 tracking_mark_1 = require("../plugins/tracking-mark");
+const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -61,11 +62,13 @@ class BibliographyElementBlockView extends block_view_1.default {
         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);
+            const selectedSuggestion = selected_suggestion_ui_1.selectedSuggestionKey.getState(this.view.state);
             const commentElementMap = new Map();
             const dataTrackedMap = new Map();
+            let selectedBibItemSuggestion;
             this.node.descendants((node, pos) => {
+                const nodePosition = this.getPos() + pos + 2;
                 if (commentsDecorationSet) {
-                    const nodePosition = this.getPos() + pos + 2;
                     const commentWidget = commentsDecorationSet.find(nodePosition, nodePosition);
                     if (commentWidget.length) {
                         const commentElement = commentWidget[0].type.toDOM();
@@ -77,6 +80,10 @@ class BibliographyElementBlockView extends block_view_1.default {
                     const lastChange = dataTracked[dataTracked.length - 1];
                     dataTrackedMap.set(node.attrs.id, lastChange);
                 }
+                if ((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.length) &&
+                    (selectedSuggestion === null || selectedSuggestion === void 0 ? void 0 : selectedSuggestion.find(nodePosition, nodePosition + node.nodeSize).length)) {
+                    selectedBibItemSuggestion = node.attrs.id;
+                }
             });
             const can = this.props.getCapabilities();
             const wrapper = document.createElement('div');
@@ -114,13 +121,16 @@ class BibliographyElementBlockView extends block_view_1.default {
                 }
                 const dataTracked = dataTrackedMap.get(element.id);
                 if (dataTracked) {
-                    element.classList.add('attrs-track-mark');
-                    const decoration = (0, tracking_mark_1.getMarkDecoration)(dataTracked);
-                    decoration.style && element.setAttribute('style', decoration.style);
+                    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, tracking_mark_1.getAttrsTrackingButton)(dataTracked.id));
+                        element.appendChild((0, track_changes_utils_1.getAttrsTrackingButton)(dataTracked.id));
                     }
+                    this.addClickListenerToBibItem(element, dataTracked);
+                }
+                if (selectedBibItemSuggestion &&
+                    selectedBibItemSuggestion === element.id) {
+                    element.classList.add('selected-suggestion');
                 }
                 wrapper.append(element);
             }
@@ -146,6 +156,13 @@ 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

@@ -47,7 +47,10 @@ class CitationView extends base_node_view_1.BaseNodeView {
         this.updateContents = () => {
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             const citation = this.getCitation();
-            const classes = ['citation', ...(0, track_changes_utils_1.getChangeClasses)(this.node)];
+            const classes = [
+                'citation',
+                ...(0, track_changes_utils_1.getChangeClasses)(this.node.attrs.dataTracked),
+            ];
             const element = document.createElement('span');
             element.className = classes.join(' ');
             const text = bib.renderedCitations.get(citation._id);

package/dist/cjs/views/contributors.js

@@ -8,6 +8,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const affiliations_1 = require("../plugins/affiliations");
+const selected_suggestion_ui_1 = require("../plugins/selected-suggestion-ui");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -31,12 +32,17 @@ class ContributorsView extends block_view_1.default {
         };
         this.buildAuthors = () => {
             var _a;
+            const selectedSuggestion = selected_suggestion_ui_1.selectedSuggestionKey.getState(this.view.state);
+            let selectedAuthor;
             const authors = [];
             const authorsWrapper = document.createElement('div');
             authorsWrapper.classList.add('contributors-list');
-            (_a = this.node.content) === null || _a === void 0 ? void 0 : _a.forEach((node) => {
+            (_a = this.node.content) === null || _a === void 0 ? void 0 : _a.forEach((node, offset) => {
                 if ((0, transform_1.isContributorNode)(node)) {
                     authors.push(node);
+                    if (selectedSuggestion === null || selectedSuggestion === void 0 ? void 0 : selectedSuggestion.find(this.getPos() + offset + 2, this.getPos() + offset + node.nodeSize + 2).length) {
+                        selectedAuthor = node.attrs.id;
+                    }
                 }
             });
             authors
@@ -46,11 +52,11 @@ class ContributorsView extends block_view_1.default {
                     return;
                 }
                 const jointAuthors = this.isJointFirstAuthor(authors, i);
-                authorsWrapper.appendChild(this.buildAuthor(author, jointAuthors));
+                authorsWrapper.appendChild(this.buildAuthor(author, jointAuthors, selectedAuthor));
             });
             this.container.appendChild(authorsWrapper);
         };
-        this.buildAuthor = (node, isJointFirstAuthor) => {
+        this.buildAuthor = (node, isJointFirstAuthor, selectedAuthor) => {
             var _a;
             const pluginState = affiliations_1.affiliationsKey.getState(this.view.state);
             const attrs = node.attrs;
@@ -60,10 +66,12 @@ class ContributorsView extends block_view_1.default {
             container.setAttribute('id', attrs.id);
             container.setAttribute('contenteditable', 'false');
             if ((_a = attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                container.setAttribute('data-track-id', attrs.dataTracked[0].id);
                 container.setAttribute('data-track-status', attrs.dataTracked[0].status);
                 container.setAttribute('data-track-op', attrs.dataTracked[0].operation);
             }
             else {
+                container.removeAttribute('data-track-id');
                 container.removeAttribute('data-track-status');
                 container.removeAttribute('data-track-type');
             }
@@ -100,6 +108,9 @@ class ContributorsView extends block_view_1.default {
             if (displayAttr.isCorresponding) {
                 container.appendChild(this.createNote('*', 'Corresponding author'));
             }
+            if (selectedAuthor && selectedAuthor === attrs.id) {
+                container.classList.add('selected-suggestion');
+            }
             return container;
         };
         this.initials = (given) => given

package/dist/cjs/views/cross_reference.js

@@ -36,7 +36,10 @@ class CrossReferenceView extends base_node_view_1.BaseNodeView {
             });
         };
         this.updateContents = () => {
-            const nodeClasses = ['cross-reference', ...(0, track_changes_utils_1.getChangeClasses)(this.node)];
+            const nodeClasses = [
+                'cross-reference',
+                ...(0, track_changes_utils_1.getChangeClasses)(this.node.attrs.dataTracked),
+            ];
             this.dom.className = nodeClasses.join(' ');
             this.dom.textContent = this.node.attrs.customLabel || this.node.attrs.label;
             this.dom.addEventListener('click', this.handleClick);

package/dist/cjs/views/keyword.js

@@ -45,10 +45,14 @@ class KeywordView extends base_node_view_1.BaseNodeView {
             this.contentDOM = document.createElement('span');
         };
         this.updateContents = () => {
-            const keyword = document.createElement('span');
-            const classes = ['keyword', ...(0, track_changes_utils_1.getChangeClasses)(this.node)];
-            keyword.classList.add(...classes);
-            keyword.appendChild(this.contentDOM);
+            var _a;
+            const classes = [
+                'keyword',
+                ...(0, track_changes_utils_1.getChangeClasses)(this.node.attrs.dataTracked),
+            ];
+            this.dom.className = classes.join(' ');
+            this.dom.innerHTML = '';
+            this.dom.appendChild(this.contentDOM);
             const can = this.props.getCapabilities();
             if (can.editArticle) {
                 const svg = new DOMParser()
@@ -56,10 +60,16 @@ class KeywordView extends base_node_view_1.BaseNodeView {
                     .querySelector('svg');
                 svg.classList.add('delete-keyword');
                 svg.addEventListener('click', this.showConfirmationDialog);
-                keyword.appendChild(svg);
+                this.dom.appendChild(svg);
+            }
+            if ((_a = this.node.attrs.dataTracked) === null || _a === void 0 ? void 0 : _a.length) {
+                this.dom.setAttribute('data-track-id', this.node.attrs.dataTracked[0].id);
+                this.dom.setAttribute('data-track-status', this.node.attrs.dataTracked[0].status);
+            }
+            else {
+                this.dom.removeAttribute('data-track-id');
+                this.dom.removeAttribute('data-track-status');
             }
-            this.dom.innerHTML = '';
-            this.dom.appendChild(keyword);
         };
         this.showConfirmationDialog = () => {
             var _a;

package/dist/es/assets.js

@@ -75,3 +75,27 @@ export const commentIcon = `
     />
   </svg>
 `;
+export const editAttrsTrackingIcon = `
+ <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 2L14 4L9 9L6 10L7 7L12 2Z"
+      stroke="#353535"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13 10V11.5C13 12.328 12.328 13 11.5 13H4.5C3.672 13 3 12.328 3 11.5V4.5C3 3.672 3.672 3 4.5 3H6"
+      stroke="#353535"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;

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

@@ -31,10 +31,9 @@ import paragraphs from '../plugins/paragraphs';
 import persist from '../plugins/persist';
 import placeholder from '../plugins/placeholder';
 import sections from '../plugins/sections';
+import selected_suggestion_ui from '../plugins/selected-suggestion-ui';
 import table_editing_fix from '../plugins/tables-cursor-fix';
 import toc from '../plugins/toc';
-import track_changes_ui from '../plugins/track-changes-ui';
-import tracking_mark from '../plugins/tracking-mark';
 import rules from '../rules';
 export default (props) => {
     const plugins = props.plugins || [];
@@ -57,8 +56,7 @@ export default (props) => {
         placeholder(),
         tableEditing(),
         highlights(props),
-        track_changes_ui(props),
-        tracking_mark(),
+        selected_suggestion_ui(props),
         footnotes(),
     ];
     if (props.collabProvider) {

package/dist/es/index.js

@@ -25,6 +25,7 @@ export { PopperManager } from './lib/popper';
 export * from './toolbar';
 export * from './plugins/highlight';
 export { commentScroll, isThereSelector, isHighlightComment, } from './plugins/comment_annotation';
+export { SET_SUGGESTION_ID } from './plugins/selected-suggestion-ui';
 export * from './lib/utils';
 export * from './lib/track-changes-utils';
 export * from './useEditor';

package/dist/es/lib/track-changes-utils.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { editAttrsTrackingIcon } from '../assets';
 export function isRejectedInsert(node) {
     if (node.attrs.dataTracked) {
         const changes = node.attrs.dataTracked;
@@ -48,10 +49,10 @@ export function isPendingSetAttrs(node) {
     }
     return false;
 }
-export function getChangeClasses(node) {
+export function getChangeClasses(dataTracked) {
     const classes = [];
-    if (node.attrs.dataTracked) {
-        const changes = node.attrs.dataTracked;
+    if (dataTracked) {
+        const changes = dataTracked;
         const operationClasses = new Map([
             ['insert', 'inserted'],
             ['delete', 'deleted'],
@@ -79,3 +80,10 @@ export function getActualAttrs(node) {
     }
     return attrs;
 }
+export const getAttrsTrackingButton = (changeID) => {
+    const el = document.createElement('button');
+    el.className = 'attrs-popper-button';
+    el.value = changeID;
+    el.innerHTML = editAttrsTrackingIcon;
+    return el;
+};

package/dist/es/plugins/comment_annotation.js

@@ -124,7 +124,8 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
         element.classList.add(location === 'point' ? 'point-comment' : 'inline-citation');
     }
     element.classList.add('block-comment-button', elementClass);
-    element.onclick = () => {
+    element.onclick = (e) => {
+        e.stopPropagation();
         setSelectedComment(commentId);
         commentScroll(commentId, 'inspector');
     };

package/dist/es/plugins/highlight/findHighlightMarkers.js

@@ -1,14 +1,8 @@
-import { isHighlightMarkerNode, schema } from '@manuscripts/transform';
+import { isHighlightMarkerNode } from '@manuscripts/transform';
 export function findHighlightMarkers(doc) {
     const markers = [];
     let current;
-    const commentIds = [];
     doc.descendants((node, pos) => {
-        if (node.type.name === schema.nodes.comments.name) {
-            node.content.forEach(({ attrs }) => {
-                commentIds.push(attrs.id);
-            });
-        }
         if (isHighlightMarkerNode(node)) {
             const { position, tid, id } = node.attrs;
             if (position === 'start') {
@@ -24,5 +18,5 @@ export function findHighlightMarkers(doc) {
             }
         }
     });
-    return markers.filter((marker) => commentIds.includes(marker.id));
+    return markers;
 }