@manuscripts/body-editor 1.10.11-LEAN-3519.0 → 1.11.0

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertTableFootnote = exports.updateCommentAnnotationState = exports.addComment = exports.deleteHighlightMarkers = exports.insertHighlight = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.ifInTableBody = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
+exports.insertTableFootnote = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.ifInTableBody = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertSection = exports.insertGraphicalAbstract = exports.insertInlineFootnote = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertFileAsFigure = exports.insertGeneralFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -24,12 +24,13 @@ const prosemirror_schema_list_1 = require("prosemirror-schema-list");
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_transform_1 = require("prosemirror-transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
+const comments_1 = require("./lib/comments");
 const helpers_1 = require("./lib/helpers");
 const track_changes_utils_1 = require("./lib/track-changes-utils");
 const utils_1 = require("./lib/utils");
-const comment_annotation_1 = require("./plugins/comment_annotation");
+const comments_2 = require("./plugins/comments");
+const editor_props_1 = require("./plugins/editor-props");
 const footnotes_utils_1 = require("./plugins/footnotes/footnotes-utils");
-const highlight_1 = require("./plugins/highlight");
 const markActive = (type) => (state) => {
     const { from, $from, to, empty } = state.selection;
     return empty
@@ -128,12 +129,9 @@ exports.createBlock = createBlock;
 const insertGeneralFootnote = (tableNode, position, view, tableElementFooter) => {
     var _a;
     const { state, dispatch } = view;
-    const paragraph = state.schema.nodes.paragraph.create({
+    const generalNote = state.schema.nodes.paragraph.create({
         placeholder: 'Add general note here',
     });
-    const generalNote = state.schema.nodes.general_table_footnote.create({}, [
-        paragraph,
-    ]);
     const tableColGroup = (0, prosemirror_utils_1.findChildrenByType)(tableNode, transform_1.schema.nodes.table_colgroup)[0];
     const tr = state.tr;
     const pos = (tableElementFooter === null || tableElementFooter === void 0 ? void 0 : tableElementFooter.length)
@@ -662,83 +660,6 @@ const createAndFillFigcaptionElement = (state) => state.schema.nodes.figcaption.
     state.schema.nodes.caption_title.create(),
     state.schema.nodes.caption.create(),
 ]);
-const insertHighlight = (state, comment, dispatch) => {
-    const { from, to } = state.selection;
-    const fromNode = state.schema.nodes.highlight_marker.create({
-        id: comment._id,
-        tid: comment.target,
-        position: 'start',
-    });
-    const toNode = state.schema.nodes.highlight_marker.create({
-        id: comment._id,
-        tid: comment.target,
-        position: 'end',
-    });
-    const tr = state.tr
-        .insert(from, fromNode)
-        .insert(to + 1, toNode)
-        .setMeta(highlight_1.highlightKey, {
-        [highlight_1.SET_COMMENT]: Object.assign(Object.assign({}, comment), { selector: { from, to }, originalText: state.tr.doc.textBetween(from, to, '\n') }),
-    });
-    tr.setMeta('addToHistory', false);
-    if (dispatch) {
-        dispatch(tr);
-    }
-    return true;
-};
-exports.insertHighlight = insertHighlight;
-const deleteHighlightMarkers = (rid) => (state, dispatch) => {
-    var _a;
-    const markersToDelete = [];
-    (_a = highlight_1.highlightKey.getState(state)) === null || _a === void 0 ? void 0 : _a.highlights.forEach((highlight) => {
-        if (highlight.id === rid) {
-            markersToDelete.push(highlight.start - 1);
-            markersToDelete.push(highlight.end);
-        }
-    });
-    if (markersToDelete.length === 0) {
-        return false;
-    }
-    const { tr } = state;
-    markersToDelete
-        .sort((a, b) => b - a)
-        .forEach((pos) => {
-        tr.delete(pos, pos + 1);
-    });
-    tr.setMeta('track-changes-skip-tracking', true);
-    dispatch && dispatch(tr);
-    return true;
-};
-exports.deleteHighlightMarkers = deleteHighlightMarkers;
-function addComment(state, dispatch, viewNode, resolvePos) {
-    const { selection } = state;
-    const hasText = selection.content().size > 0;
-    const parent = getParentNode(selection);
-    if (!parent) {
-        return false;
-    }
-    if (viewNode && resolvePos) {
-        const viewNode = getParentNode(prosemirror_state_1.TextSelection.near(resolvePos));
-        if (!viewNode) {
-            return false;
-        }
-        if (hasText && parent.attrs.id === viewNode.attrs.id) {
-            return addHighlightComment(viewNode, state, dispatch);
-        }
-        else {
-            return addBlockComment(viewNode, state, dispatch);
-        }
-    }
-    else {
-        if (hasText) {
-            return addHighlightComment(parent, state, dispatch);
-        }
-        else {
-            return addBlockComment(parent, state, dispatch);
-        }
-    }
-}
-exports.addComment = addComment;
 const getParentNode = (selection) => {
     var _a;
     const parentNode = (0, utils_1.findParentNodeWithId)(selection);
@@ -748,61 +669,94 @@ const getParentNode = (selection) => {
     }
     return node;
 };
-const isAllowedType = (type) => type === transform_1.schema.nodes.section ||
+const isCommentingAllowed = (type) => type === transform_1.schema.nodes.section ||
+    type === transform_1.schema.nodes.citation ||
+    type === transform_1.schema.nodes.bibliography_item ||
     type === transform_1.schema.nodes.footnotes_section ||
     type === transform_1.schema.nodes.bibliography_section ||
     type === transform_1.schema.nodes.keyword_group ||
     type === transform_1.schema.nodes.paragraph ||
     type === transform_1.schema.nodes.figure_element ||
     type === transform_1.schema.nodes.table_element;
-const getNode = (node) => {
-    if (node.type === transform_1.schema.nodes.keywords) {
-        const keywordGroups = (0, prosemirror_utils_1.findChildrenByType)(node, transform_1.schema.nodes.keyword_group, true);
-        return keywordGroups.length ? keywordGroups[0].node : node;
+const addNodeComment = (node, state, dispatch) => {
+    if (!isCommentingAllowed(node.type)) {
+        return false;
     }
-    return node;
-};
-const addBlockComment = (node, state, dispatch) => {
-    const { attrs: { id }, type, } = getNode(node);
-    const comment = (0, transform_1.buildComment)(id);
-    const tr = state.tr.setMeta(comment_annotation_1.commentAnnotation, {
-        [highlight_1.SET_COMMENT]: comment,
-    });
-    tr.setMeta('addToHistory', false);
-    if (isAllowedType(type)) {
-        dispatch && dispatch(tr);
-        return true;
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const contribution = (0, json_schema_1.buildContribution)(props.userID);
+    const attrs = {
+        id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.CommentAnnotation),
+        contents: '',
+        target: node.attrs.id,
+        contributions: [contribution],
+    };
+    const comment = transform_1.schema.nodes.comment.create(attrs);
+    const comments = (0, prosemirror_utils_1.findChildrenByType)(state.doc, transform_1.schema.nodes.comments)[0];
+    const pos = comments.pos + 1;
+    const tr = state.tr.insert(pos, comment);
+    const key = (0, comments_1.getCommentKey)(attrs, undefined, node);
+    (0, comments_2.setCommentSelection)(tr, key, attrs.id, true);
+    if (dispatch) {
+        dispatch(tr);
     }
-    else {
+    return true;
+};
+exports.addNodeComment = addNodeComment;
+const addInlineComment = (state, dispatch) => {
+    const selection = state.selection;
+    const node = getParentNode(selection);
+    if (!node || !isCommentingAllowed(node.type)) {
         return false;
     }
-};
-const addHighlightComment = (node, state, dispatch) => {
-    const { attrs: { id }, type, } = node;
-    const comment = (0, transform_1.buildComment)(id);
-    if (type === transform_1.schema.nodes.paragraph) {
-        const { $anchor, $head } = state.selection;
-        const isAllTextSelected = ($anchor.textOffset === 0 && $head.textOffset === 0) ||
-            $anchor.textOffset === $head.textOffset;
-        if (isAllTextSelected) {
-            return addBlockComment(node, state, dispatch);
-        }
-        else {
-            return (0, exports.insertHighlight)(state, comment, dispatch);
-        }
+    const from = selection.from;
+    const to = selection.to;
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const contribution = (0, json_schema_1.buildContribution)(props.userID);
+    const attrs = {
+        id: (0, transform_1.generateID)(json_schema_1.ObjectTypes.CommentAnnotation),
+        contents: '',
+        target: node.attrs.id,
+        contributions: [contribution],
+        originalText: selectedText(),
+        selector: {
+            from,
+            to,
+        },
+    };
+    const comment = transform_1.schema.nodes.comment.create(attrs);
+    const comments = (0, prosemirror_utils_1.findChildrenByType)(state.doc, transform_1.schema.nodes.comments)[0];
+    const pos = comments.pos + 1;
+    const tr = state.tr.insert(pos, comment);
+    if (from === to) {
+        const point = transform_1.schema.nodes.highlight_marker.create({
+            id: comment.attrs.id,
+            tid: node.attrs.id,
+            position: 'point',
+        });
+        tr.insert(from, point);
     }
     else {
-        return (0, exports.insertHighlight)(state, comment, dispatch);
+        const start = transform_1.schema.nodes.highlight_marker.create({
+            id: comment.attrs.id,
+            tid: node.attrs.id,
+            position: 'start',
+        });
+        const end = transform_1.schema.nodes.highlight_marker.create({
+            id: comment.attrs.id,
+            tid: node.attrs.id,
+            position: 'end',
+        });
+        tr.insert(from, start).insert(to + 1, end);
     }
-};
-const updateCommentAnnotationState = (state, dispatch) => {
-    const tr = state.tr.setMeta(comment_annotation_1.commentAnnotation, {});
-    tr.setMeta('addToHistory', false);
+    const range = (0, comments_1.getCommentRange)(attrs);
+    const key = (0, comments_1.getCommentKey)(attrs, range, node);
+    (0, comments_2.setCommentSelection)(tr, key, attrs.id, true);
     if (dispatch) {
         dispatch(tr);
     }
+    return true;
 };
-exports.updateCommentAnnotationState = updateCommentAnnotationState;
+exports.addInlineComment = addInlineComment;
 const insertTableFootnote = (node, position, view, inlineFootnote) => {
     var _a;
     const { state, dispatch } = view;

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

@@ -28,10 +28,10 @@ const prosemirror_tables_1 = require("prosemirror-tables");
 const keys_1 = __importDefault(require("../keys"));
 const affiliations_1 = __importDefault(require("../plugins/affiliations"));
 const bibliography_1 = __importDefault(require("../plugins/bibliography"));
-const comment_annotation_1 = __importDefault(require("../plugins/comment_annotation"));
+const comments_1 = __importDefault(require("../plugins/comments"));
+const editor_props_1 = __importDefault(require("../plugins/editor-props"));
 const elements_1 = __importDefault(require("../plugins/elements"));
 const footnotes_1 = __importDefault(require("../plugins/footnotes"));
-const highlight_1 = __importDefault(require("../plugins/highlight"));
 const objects_1 = __importDefault(require("../plugins/objects"));
 const paragraphs_1 = __importDefault(require("../plugins/paragraphs"));
 const persist_1 = __importDefault(require("../plugins/persist"));
@@ -63,14 +63,14 @@ exports.default = (props) => {
         (0, bibliography_1.default)(props),
         (0, objects_1.default)(props),
         (0, affiliations_1.default)(),
-        (0, comment_annotation_1.default)(props),
+        (0, comments_1.default)(),
         (0, paragraphs_1.default)(),
         (0, placeholder_1.default)(),
         (0, prosemirror_tables_1.tableEditing)(),
-        (0, highlight_1.default)(props),
+        (0, selected_suggestion_1.default)(),
         (0, footnotes_1.default)(props),
         (0, table_footnote_1.default)(),
-        (0, selected_suggestion_1.default)(),
+        (0, editor_props_1.default)(props),
     ];
     if (props.collabProvider) {
         allPlugins.push((0, prosemirror_collab_1.collab)({ version: props.collabProvider.currentVersion }));

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.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
 __exportStar(require("./commands"), exports);
 var ManuscriptOutline_1 = require("./components/outline/ManuscriptOutline");
 Object.defineProperty(exports, "ManuscriptOutline", { enumerable: true, get: function () { return ManuscriptOutline_1.ManuscriptOutline; } });
@@ -43,13 +43,10 @@ Object.defineProperty(exports, "CollabProvider", { enumerable: true, get: functi
 var popper_1 = require("./lib/popper");
 Object.defineProperty(exports, "PopperManager", { enumerable: true, get: function () { return popper_1.PopperManager; } });
 __exportStar(require("./toolbar"), exports);
+__exportStar(require("./lib/comments"), exports);
+__exportStar(require("./plugins/comments"), exports);
 var selected_suggestion_1 = require("./plugins/selected-suggestion");
 Object.defineProperty(exports, "selectedSuggestionKey", { enumerable: true, get: function () { return selected_suggestion_1.selectedSuggestionKey; } });
-__exportStar(require("./plugins/highlight"), exports);
-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; } });
 __exportStar(require("./lib/utils"), exports);
 __exportStar(require("./lib/track-changes-utils"), exports);
 __exportStar(require("./useEditor"), exports);

package/dist/cjs/lib/comments.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCommentMarker = exports.getCommentRange = exports.getCommentKey = exports.isNodeComment = void 0;
+const isNodeComment = (comment) => !comment.range;
+exports.isNodeComment = isNodeComment;
+const getCommentKey = (comment, range, target) => {
+    if (!range) {
+        return target.attrs.id;
+    }
+    else if (!range.size) {
+        return `${target.attrs.id}-${range.pos}`;
+    }
+    else {
+        return comment.id;
+    }
+};
+exports.getCommentKey = getCommentKey;
+const getCommentRange = (comment) => {
+    if (!comment.selector) {
+        return;
+    }
+    return {
+        pos: comment.selector.from,
+        size: comment.selector.to - comment.selector.from,
+    };
+};
+exports.getCommentRange = getCommentRange;
+const createCommentMarker = (tagName, key, count) => {
+    const element = document.createElement(tagName);
+    element.id = getMarkerID(key);
+    element.dataset.key = key;
+    element.classList.add('comment-marker');
+    if (count && count > 1) {
+        element.dataset.count = String(count);
+    }
+    element.innerHTML = `
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.0625 2.9375V7.3125L1.4375 11.6875H12.8125C13.7794 11.6875 14.5625 10.9044 14.5625 9.9375V2.9375C14.5625 1.97062 13.7794 1.1875 12.8125 1.1875H5.8125C4.84562 1.1875 4.0625 1.97062 4.0625 2.9375Z"
+          fill="#FFFCDB" stroke="#FFBD26" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.6875 4.6875H11.9375" stroke="#FFBD26" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M6.6875 8.1875H9.3125" stroke="#FFBD26" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+    `;
+    return element;
+};
+exports.createCommentMarker = createCommentMarker;
+const getMarkerID = (id) => {
+    return `${id}-comment-marker`;
+};

package/dist/cjs/lib/context-menu.js

@@ -27,7 +27,6 @@ const footnotes_utils_1 = require("../plugins/footnotes/footnotes-utils");
 const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
 const popper_1 = require("./popper");
 const track_changes_utils_1 = require("./track-changes-utils");
-const utils_1 = require("./utils");
 const popper = new popper_1.PopperManager();
 const listTypes = [transform_1.schema.nodes.ordered_list, transform_1.schema.nodes.bullet_list];
 const readonlyTypes = [transform_1.schema.nodes.keywords, transform_1.schema.nodes.bibliography_element];
@@ -144,7 +143,7 @@ class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
-            var _a;
+            var _a, _b;
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -165,12 +164,12 @@ class ContextMenu {
                     }
                 }));
             }
-            const { setComment } = this.actions;
-            if (setComment) {
+            const { addComment } = this.actions;
+            if (addComment) {
                 menu.appendChild(this.createMenuSection((section) => {
                     section.appendChild(this.createMenuItem('Comment', () => {
-                        const { state, dispatch } = this.view;
-                        (0, commands_1.addComment)(state, dispatch, this.node, this.resolvePos());
+                        const target = this.getCommentTarget();
+                        (0, commands_1.addNodeComment)(target, this.view.state, this.view.dispatch);
                         popper.destroy();
                     }));
                 }));
@@ -180,9 +179,9 @@ class ContextMenu {
                 const tableElementFooter = (0, prosemirror_utils_1.findChildrenByType)(this.node, transform_1.schema.nodes.table_element_footer);
                 let isDeletedOrRejected = false;
                 const hasGeneralNote = tableElementFooter.length &&
-                    (0, utils_1.getChildOfType)(tableElementFooter[0].node, transform_1.schema.nodes.general_table_footnote, true);
+                    ((_a = tableElementFooter[0].node.firstChild) === null || _a === void 0 ? void 0 : _a.type) === transform_1.schema.nodes.paragraph;
                 if (hasGeneralNote) {
-                    const generalFootnote = (_a = tableElementFooter[0]) === null || _a === void 0 ? void 0 : _a.node.firstChild;
+                    const generalFootnote = (_b = tableElementFooter[0]) === null || _b === void 0 ? void 0 : _b.node.firstChild;
                     if (generalFootnote) {
                         isDeletedOrRejected =
                             (0, track_changes_utils_1.isDeleted)(generalFootnote) || (0, track_changes_utils_1.isRejectedInsert)(generalFootnote);
@@ -379,6 +378,18 @@ class ContextMenu {
         this.trimTitle = (title, max) => {
             return title.length > max ? title.substring(0, max) + '…' : title;
         };
+        this.getCommentTarget = () => {
+            if (this.node.type === transform_1.schema.nodes.section_title) {
+                const $pos = this.resolvePos();
+                const parent = $pos.parent;
+                if (parent.type === transform_1.schema.nodes.keywords) {
+                    const groups = (0, prosemirror_utils_1.findChildrenByType)(parent, transform_1.schema.nodes.keyword_group);
+                    return groups.length ? groups[0].node : this.node;
+                }
+                return parent;
+            }
+            return this.node;
+        };
         this.node = node;
         this.view = view;
         this.getPos = getPos;

package/dist/cjs/menus.js

@@ -215,8 +215,8 @@ const getEditorMenus = (editor) => {
             {
                 id: 'insert-comment',
                 label: 'Comment',
-                isEnabled: isCommandValid(commands_1.addComment),
-                run: doCommand(commands_1.addComment),
+                isEnabled: isCommandValid(commands_1.addInlineComment),
+                run: doCommand(commands_1.addInlineComment),
             },
         ],
     };

package/dist/cjs/plugins/comments.js

@@ -0,0 +1,209 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clearCommentSelection = exports.setCommentSelection = exports.commentsKey = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_utils_1 = require("prosemirror-utils");
+const prosemirror_view_1 = require("prosemirror-view");
+const comments_1 = require("../lib/comments");
+exports.commentsKey = new prosemirror_state_1.PluginKey('comments');
+const COMMENT_SELECTION = 'comment-selection';
+const EMPTY_SELECTION = {};
+exports.default = () => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.commentsKey,
+        state: {
+            init: (_, state) => {
+                return buildPluginState(state.doc);
+            },
+            apply: (tr, value) => {
+                if (tr.docChanged || tr.getMeta(COMMENT_SELECTION)) {
+                    const selection = tr.getMeta(COMMENT_SELECTION) || value.selection;
+                    return buildPluginState(tr.doc, selection === EMPTY_SELECTION ? undefined : selection);
+                }
+                return value;
+            },
+        },
+        props: {
+            decorations: (state) => { var _a; return (_a = exports.commentsKey.getState(state)) === null || _a === void 0 ? void 0 : _a.decorations; },
+            handleClick: (view, pos, e) => {
+                const state = view.state;
+                const com = exports.commentsKey.getState(state);
+                const target = e.target;
+                const marker = target.closest('[data-key]');
+                if (!marker && !(com === null || com === void 0 ? void 0 : com.selection)) {
+                    return;
+                }
+                const tr = state.tr;
+                if (marker) {
+                    const key = marker.dataset.key;
+                    (0, exports.setCommentSelection)(tr, key, undefined, false);
+                }
+                else {
+                    (0, exports.clearCommentSelection)(tr);
+                }
+                view.dispatch(tr);
+            },
+        },
+    });
+};
+const setCommentSelection = (tr, key, id, isNew) => {
+    tr.setMeta(COMMENT_SELECTION, {
+        key,
+        id,
+        isNew,
+    });
+    tr.setMeta('origin', exports.commentsKey);
+    return tr;
+};
+exports.setCommentSelection = setCommentSelection;
+const clearCommentSelection = (tr) => {
+    tr.setMeta(COMMENT_SELECTION, EMPTY_SELECTION);
+    tr.setMeta('origin', exports.commentsKey);
+    return tr;
+};
+exports.clearCommentSelection = clearCommentSelection;
+const findCommentRanges = (doc) => {
+    const nodes = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.highlight_marker);
+    const ranges = new Map();
+    let start;
+    for (const { node, pos } of nodes) {
+        const attrs = node.attrs;
+        const position = attrs.position;
+        if (position === 'point') {
+            ranges.set(attrs.id, {
+                pos: pos + 1,
+                size: 0,
+            });
+        }
+        else if (position === 'start') {
+            start = pos + 1;
+        }
+        else if (position === 'end' && start) {
+            ranges.set(attrs.id, {
+                pos: start,
+                size: pos - start,
+            });
+            start = undefined;
+        }
+    }
+    return ranges;
+};
+const findComments = (doc) => {
+    const nodes = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.comment);
+    const commentsByTarget = new Map();
+    for (const { node } of nodes) {
+        const attrs = node.attrs;
+        const targetID = attrs.target;
+        const comments = commentsByTarget.get(targetID) || [];
+        commentsByTarget.set(targetID, [...comments, attrs]);
+    }
+    return commentsByTarget;
+};
+const buildPluginState = (doc, selection) => {
+    const commentsByTarget = findComments(doc);
+    const ranges = findCommentRanges(doc);
+    const decorations = [];
+    const allComments = [];
+    doc.descendants((node, pos) => {
+        const id = node.attrs.id;
+        const comments = commentsByTarget.get(id);
+        if (!comments || !comments.length) {
+            return;
+        }
+        const target = {
+            node,
+            pos,
+        };
+        const nodeComments = [];
+        const highlightComments = [];
+        const pointComments = [];
+        for (const attrs of comments) {
+            const id = attrs.id;
+            const range = ranges.get(id);
+            const key = (0, comments_1.getCommentKey)(attrs, range, node);
+            const comment = {
+                key,
+                attrs,
+                target,
+                range,
+            };
+            allComments.push(comment);
+            if (!comment.range) {
+                nodeComments.push(comment);
+            }
+            else if (comment.range.size) {
+                highlightComments.push(comment);
+            }
+            else {
+                pointComments.push(comment);
+            }
+        }
+        for (const comment of highlightComments) {
+            const key = comment.key;
+            const range = comment.range;
+            decorations.push(createHighlightDecoration(key, range, selection));
+        }
+        if (pointComments.length) {
+            groupByKey(pointComments).forEach((comments, key) => {
+                const count = comments.length;
+                const pos = comments[0].range.pos;
+                decorations.push(createMarkerDecoration(key, 'span', pos, count, selection));
+            });
+        }
+        if (nodeComments.length) {
+            const count = nodeComments.length;
+            const key = nodeComments[0].key;
+            const tagName = node.isAtom ? 'span' : 'div';
+            const dpos = getDecorationPos(node, pos);
+            decorations.push(createMarkerDecoration(key, tagName, dpos, count, selection));
+        }
+    });
+    return {
+        decorations: prosemirror_view_1.DecorationSet.create(doc, decorations),
+        comments: new Map(allComments.map((c) => [c.attrs.id, c])),
+        commentsByKey: groupByKey(allComments),
+        selection,
+    };
+};
+const groupByKey = (comments) => {
+    const map = new Map();
+    for (const comment of comments) {
+        const key = comment.key;
+        const value = map.get(key) || [];
+        map.set(key, [...value, comment]);
+    }
+    return map;
+};
+const getDecorationPos = (node, pos) => {
+    switch (node.type) {
+        case transform_1.schema.nodes.keywords:
+            return pos + 2;
+        default:
+            return pos + 1;
+    }
+};
+const createHighlightDecoration = (key, range, selection) => {
+    const classNames = ['highlight'];
+    if (key === (selection === null || selection === void 0 ? void 0 : selection.key)) {
+        classNames.push('selected-comment');
+    }
+    return prosemirror_view_1.Decoration.inline(range.pos, range.pos + range.size, {
+        nodeName: 'span',
+        class: classNames.join(' '),
+        'data-key': key,
+    });
+};
+const createMarkerDecoration = (key, tagName, pos, count, selection) => {
+    const isSelected = (selection === null || selection === void 0 ? void 0 : selection.key) === key;
+    const toDOM = () => {
+        const marker = (0, comments_1.createCommentMarker)(tagName, key, count);
+        if (isSelected) {
+            marker.classList.add('selected-comment');
+        }
+        return marker;
+    };
+    return prosemirror_view_1.Decoration.widget(pos, toDOM, {
+        key: `${key}-${count}-${isSelected}`,
+    });
+};