@manuscripts/body-editor 1.10.8-LEAN-3591.1 → 1.10.9

package/dist/cjs/commands.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 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,13 +24,12 @@ 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 comments_2 = require("./plugins/comments");
-const editor_props_1 = require("./plugins/editor-props");
+const comment_annotation_1 = require("./plugins/comment_annotation");
 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
@@ -660,6 +659,83 @@ 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);
@@ -669,94 +745,61 @@ const getParentNode = (selection) => {
     }
     return node;
 };
-const isCommentingAllowed = (type) => type === transform_1.schema.nodes.section ||
-    type === transform_1.schema.nodes.citation ||
-    type === transform_1.schema.nodes.bibliography_item ||
+const isAllowedType = (type) => type === transform_1.schema.nodes.section ||
     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 addNodeComment = (node, state, dispatch) => {
-    if (!isCommentingAllowed(node.type)) {
-        return false;
+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 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);
-    }
-    return true;
+    return node;
 };
-exports.addNodeComment = addNodeComment;
-const addInlineComment = (state, dispatch) => {
-    const selection = state.selection;
-    const node = getParentNode(selection);
-    if (!node || !isCommentingAllowed(node.type)) {
+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;
+    }
+    else {
         return false;
     }
-    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);
+};
+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);
+        }
     }
     else {
-        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);
+        return (0, exports.insertHighlight)(state, comment, dispatch);
     }
-    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);
+};
+const updateCommentAnnotationState = (state, dispatch) => {
+    const tr = state.tr.setMeta(comment_annotation_1.commentAnnotation, {});
+    tr.setMeta('addToHistory', false);
     if (dispatch) {
         dispatch(tr);
     }
-    return true;
 };
-exports.addInlineComment = addInlineComment;
+exports.updateCommentAnnotationState = updateCommentAnnotationState;
 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 comments_1 = __importDefault(require("../plugins/comments"));
-const editor_props_1 = __importDefault(require("../plugins/editor-props"));
+const comment_annotation_1 = __importDefault(require("../plugins/comment_annotation"));
 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, comments_1.default)(),
+        (0, comment_annotation_1.default)(props),
         (0, paragraphs_1.default)(),
         (0, placeholder_1.default)(),
         (0, prosemirror_tables_1.tableEditing)(),
-        (0, selected_suggestion_1.default)(),
+        (0, highlight_1.default)(props),
         (0, footnotes_1.default)(props),
         (0, table_footnote_1.default)(),
-        (0, editor_props_1.default)(props),
+        (0, selected_suggestion_1.default)(),
     ];
     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.selectedSuggestionKey = exports.PopperManager = exports.CollabProvider = exports.LevelSelector = exports.OutlineItemIcon = exports.ManuscriptOutline = void 0;
+exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = 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,10 +43,13 @@ 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/context-menu.js

@@ -164,12 +164,12 @@ class ContextMenu {
                     }
                 }));
             }
-            const { addComment } = this.actions;
-            if (addComment) {
+            const { setComment } = this.actions;
+            if (setComment) {
                 menu.appendChild(this.createMenuSection((section) => {
                     section.appendChild(this.createMenuItem('Comment', () => {
-                        const target = this.getCommentTarget();
-                        (0, commands_1.addNodeComment)(target, this.view.state, this.view.dispatch);
+                        const { state, dispatch } = this.view;
+                        (0, commands_1.addComment)(state, dispatch, this.node, this.resolvePos());
                         popper.destroy();
                     }));
                 }));
@@ -378,18 +378,6 @@ 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.addInlineComment),
-                run: doCommand(commands_1.addInlineComment),
+                isEnabled: isCommandValid(commands_1.addComment),
+                run: doCommand(commands_1.addComment),
             },
         ],
     };

package/dist/cjs/plugins/comment_annotation.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addCommentToLeafNode = exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.commentAnnotation = void 0;
+const transform_1 = require("@manuscripts/transform");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_transform_1 = require("prosemirror-transform");
+const prosemirror_view_1 = require("prosemirror-view");
+const highlight_1 = require("./highlight");
+exports.commentAnnotation = new prosemirror_state_1.PluginKey('comment_annotation');
+const commentScroll = (id, direction, isHighlight) => {
+    const elementClass = isHighlight ? 'highlight-marker' : 'block-comment-button';
+    const commentIcon = document.querySelector(`[id="${id}"].${elementClass}`);
+    const commentCard = document.querySelectorAll(`.comments-group [id="${id}"]`);
+    if (commentIcon && commentCard.length > 0) {
+        const element = direction === 'editor' ? commentIcon : commentCard.item(0);
+        document
+            .querySelectorAll(`.selected-comment`)
+            .forEach((element) => element.classList.remove('selected-comment'));
+        commentIcon.classList.add('selected-comment');
+        commentCard.forEach((node) => node.classList.add('selected-comment'));
+        element === null || element === void 0 ? void 0 : element.scrollIntoView({
+            behavior: 'auto',
+            block: 'start',
+            inline: 'start',
+        });
+    }
+};
+exports.commentScroll = commentScroll;
+const isThereSelector = (selector) => !!(selector && Object.keys(selector).length);
+exports.isThereSelector = isThereSelector;
+const isHighlightComment = (comment) => comment.selector &&
+    (0, exports.isThereSelector)(comment.selector) &&
+    comment.selector.from !== comment.selector.to;
+exports.isHighlightComment = isHighlightComment;
+exports.default = (props) => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.commentAnnotation,
+        state: {
+            init: (tr) => {
+                if (tr.doc) {
+                    return commentsState(props.setSelectedComment, tr.doc);
+                }
+                else {
+                    return new prosemirror_view_1.DecorationSet();
+                }
+            },
+            apply: (tr, value, oldState, newState) => {
+                const meta = tr.getMeta(exports.commentAnnotation);
+                if (meta) {
+                    if (highlight_1.SET_COMMENT in meta) {
+                        props.setComment(meta[highlight_1.SET_COMMENT]);
+                        return value;
+                    }
+                }
+                const hasCommentChange = !!tr.steps.find((s) => {
+                    var _a, _b, _c, _d;
+                    if (s instanceof prosemirror_transform_1.ReplaceStep) {
+                        if (s.slice.size > 0) {
+                            return (((_a = newState.doc.nodeAt(s.from + 1)) === null || _a === void 0 ? void 0 : _a.type) ===
+                                transform_1.schema.nodes.comment ||
+                                ((_b = newState.doc.nodeAt(s.from)) === null || _b === void 0 ? void 0 : _b.type) ===
+                                    transform_1.schema.nodes.highlight_marker);
+                        }
+                        return (((_c = oldState.doc.nodeAt(s.from)) === null || _c === void 0 ? void 0 : _c.type) === transform_1.schema.nodes.comment ||
+                            ((_d = oldState.doc.nodeAt(s.from)) === null || _d === void 0 ? void 0 : _d.type) ===
+                                transform_1.schema.nodes.highlight_marker);
+                    }
+                });
+                if (hasCommentChange) {
+                    return commentsState(props.setSelectedComment, tr.doc);
+                }
+                return value;
+            },
+        },
+        props: {
+            decorations: (state) => {
+                const pluginState = exports.commentAnnotation.getState(state);
+                if (pluginState) {
+                    return pluginState;
+                }
+            },
+        },
+    });
+};
+const getNodePosition = (node, pos) => {
+    switch (node.type) {
+        case transform_1.schema.nodes.keywords:
+            return pos + 2;
+        default:
+            return pos + 1;
+    }
+};
+const commentsState = (setSelectedComment, doc) => {
+    const comments = [];
+    doc.descendants((node) => {
+        if (node.type === transform_1.schema.nodes.comments) {
+            node.descendants((comment) => {
+                comments.push(comment.attrs);
+            });
+            return false;
+        }
+    });
+    const commentsMap = comments.reduce((map, { id, target, selector }) => {
+        var _a;
+        if (!(0, exports.isHighlightComment)({ selector })) {
+            const commentId = (0, exports.isThereSelector)(selector) ? id : target;
+            map.set(commentId, {
+                id,
+                target,
+                location: (0, exports.isThereSelector)(selector) ? 'point' : 'block',
+                count: (((_a = map.get(commentId)) === null || _a === void 0 ? void 0 : _a.count) || 0) + 1,
+            });
+        }
+        return map;
+    }, new Map());
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        const id = node.attrs['id'] || node.attrs['rid'];
+        const targetComment = commentsMap.get(id);
+        if (targetComment) {
+            if (node.isAtom && node.type !== transform_1.schema.nodes.highlight_marker) {
+                decorations.push(prosemirror_view_1.Decoration.inline(pos, pos + node.nodeSize, {}, {
+                    toDOM: getCommentIcon(Object.assign(Object.assign({}, targetComment), { targetType: node.type, isAtom: node.isAtom }), setSelectedComment),
+                }));
+            }
+            else {
+                const position = getNodePosition(node, pos);
+                decorations.push(prosemirror_view_1.Decoration.widget(position, getCommentIcon(Object.assign(Object.assign({}, targetComment), { targetType: node.type }), setSelectedComment), { key: targetComment.id }));
+            }
+        }
+    });
+    return prosemirror_view_1.DecorationSet.create(doc, decorations);
+};
+const getCommentIcon = (comment, setSelectedComment) => () => {
+    const { id, targetType, target, count, location, isAtom } = comment;
+    const commentId = location === 'block' ? target : id;
+    const element = document.createElement(isAtom ? 'span' : 'div');
+    element.id = commentId;
+    let elementClass;
+    switch (targetType) {
+        case transform_1.schema.nodes.section:
+        case transform_1.schema.nodes.footnotes_section:
+        case transform_1.schema.nodes.bibliography_section:
+            elementClass = 'block-comment';
+            break;
+        case transform_1.schema.nodes.figure_element:
+            elementClass = 'figure-comment';
+            break;
+        case transform_1.schema.nodes.bibliography_item:
+            elementClass = 'bibliography-comment';
+            break;
+        default:
+            elementClass = 'inline-comment';
+    }
+    if (isAtom || location === 'point') {
+        element.classList.add('point-comment');
+    }
+    element.classList.add('block-comment-button', elementClass);
+    element.onclick = (e) => {
+        e.stopPropagation();
+        setSelectedComment(commentId);
+        (0, exports.commentScroll)(commentId, 'inspector');
+    };
+    const groupCommentIcon = (count > 1 &&
+        ` <svg class="group-comment-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="12" height="12" rx="6" fill="#F7B314"></rect>
+          <text x="6" y="8" fill="#FFF" font-size="9px" text-anchor="middle" font-weight="400">${count}</text>
+      </svg>`) ||
+        '';
+    element.innerHTML = `
+      <svg class="comment-icon" 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>
+      ${groupCommentIcon}
+  `;
+    return element;
+};
+const addCommentToLeafNode = (from, to, state, dom) => {
+    const commentsDecorationSet = exports.commentAnnotation.getState(state);
+    if (commentsDecorationSet) {
+        const commentWidget = commentsDecorationSet.find(from, to);
+        if (commentWidget.length) {
+            const commentElement = commentWidget[0].type.spec.toDOM();
+            dom.appendChild(commentElement);
+        }
+    }
+};
+exports.addCommentToLeafNode = addCommentToLeafNode;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findHighlightMarkers = void 0;
+const transform_1 = require("@manuscripts/transform");
+function findHighlightMarkers(doc) {
+    const markers = [];
+    let current;
+    doc.descendants((node, pos) => {
+        if ((0, transform_1.isHighlightMarkerNode)(node)) {
+            const { position, tid, id } = node.attrs;
+            if (position === 'start') {
+                current = {
+                    start: pos + 1,
+                    id,
+                    tid,
+                };
+            }
+            else if (position === 'end' && current) {
+                markers.push(Object.assign(Object.assign({}, current), { text: doc.textBetween(current.start, pos, '\n'), end: pos }));
+                current = undefined;
+            }
+        }
+    });
+    return markers;
+}
+exports.findHighlightMarkers = findHighlightMarkers;

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

@@ -0,0 +1,85 @@
+"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.selectedHighlights = exports.getHighlightTarget = exports.hasHighlightTarget = exports.SET_COMMENT = exports.highlightKey = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const findHighlightMarkers_1 = require("./findHighlightMarkers");
+exports.highlightKey = new prosemirror_state_1.PluginKey('highlight');
+exports.SET_COMMENT = 'SET_COMMENT';
+const hasHighlightTarget = (comment) => comment.target.startsWith('MPHighlight:');
+exports.hasHighlightTarget = hasHighlightTarget;
+const getHighlightTarget = (comment, state) => {
+    var _a;
+    return (_a = exports.highlightKey
+        .getState(state)) === null || _a === void 0 ? void 0 : _a.highlights.find((item) => item.id === comment._id);
+};
+exports.getHighlightTarget = getHighlightTarget;
+const selectedHighlights = (state) => {
+    var _a;
+    const items = [];
+    const { selection } = state;
+    if (!(selection instanceof prosemirror_state_1.TextSelection)) {
+        return items;
+    }
+    const { $cursor } = selection;
+    if (!$cursor) {
+        return items;
+    }
+    const { pos } = $cursor;
+    (_a = exports.highlightKey.getState(state)) === null || _a === void 0 ? void 0 : _a.highlights.forEach((highlight) => {
+        if (highlight.start <= pos && highlight.end >= pos) {
+            items.push(highlight);
+        }
+    });
+    return items;
+};
+exports.selectedHighlights = selectedHighlights;
+const buildPluginState = (doc) => {
+    const highlights = (0, findHighlightMarkers_1.findHighlightMarkers)(doc);
+    const decorations = prosemirror_view_1.DecorationSet.create(doc, highlights.map((h) => prosemirror_view_1.Decoration.inline(h.start, h.end, {
+        nodeName: 'span',
+        class: 'highlight',
+    })));
+    return { highlights, decorations };
+};
+exports.default = (props) => {
+    return new prosemirror_state_1.Plugin({
+        key: exports.highlightKey,
+        state: {
+            init: (tr, state) => buildPluginState(state.doc),
+            apply: (tr, value) => {
+                const meta = tr.getMeta(exports.highlightKey);
+                if (meta && exports.SET_COMMENT in meta) {
+                    props.setComment(meta[exports.SET_COMMENT]);
+                }
+                else if (!tr.docChanged || tr.step.length === 0) {
+                    return value;
+                }
+                return buildPluginState(tr.doc);
+            },
+        },
+        props: {
+            decorations: (state) => {
+                const pluginState = exports.highlightKey.getState(state);
+                if (pluginState) {
+                    return pluginState.decorations;
+                }
+            },
+        },
+    });
+};

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });