@manuscripts/body-editor 1.8.4 → 1.8.5-LEAN-2974-0

package/dist/cjs/plugins/comment_annotation.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHighlightComment = exports.isThereSelector = exports.commentScroll = exports.commentAnnotation = void 0;
+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');
@@ -43,14 +44,26 @@ exports.default = (props) => {
                     return new prosemirror_view_1.DecorationSet();
                 }
             },
-            apply: (tr) => {
+            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;
                     }
                 }
-                return commentsState(props.setSelectedComment, tr.doc);
+                const hasCommentChange = !!tr.steps.find((s) => {
+                    var _a, _b;
+                    if (s instanceof prosemirror_transform_1.ReplaceStep) {
+                        return s.slice.size > 0
+                            ? ((_a = newState.doc.nodeAt(s.from + 1)) === null || _a === void 0 ? void 0 : _a.type) === transform_1.schema.nodes.comment
+                            : ((_b = oldState.doc.nodeAt(s.from)) === null || _b === void 0 ? void 0 : _b.type) === transform_1.schema.nodes.comment;
+                    }
+                });
+                if (hasCommentChange) {
+                    return commentsState(props.setSelectedComment, tr.doc);
+                }
+                return value;
             },
         },
         props: {
@@ -99,16 +112,23 @@ const commentsState = (setSelectedComment, doc) => {
         const id = node.attrs['id'] || node.attrs['rid'];
         const targetComment = commentsMap.get(id);
         if (targetComment) {
-            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 }));
+            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 } = comment;
+    const { id, targetType, target, count, location, isAtom } = comment;
     const commentId = location === 'block' ? target : id;
-    const element = document.createElement('div');
+    const element = document.createElement(isAtom ? 'span' : 'div');
     element.id = commentId;
     let elementClass;
     switch (targetType) {
@@ -126,8 +146,8 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
         default:
             elementClass = 'inline-comment';
     }
-    if (targetType === transform_1.schema.nodes.citation || location === 'point') {
-        element.classList.add(location === 'point' ? 'point-comment' : 'inline-citation');
+    if (isAtom || location === 'point') {
+        element.classList.add('point-comment');
     }
     element.classList.add('block-comment-button', elementClass);
     element.onclick = (e) => {
@@ -152,3 +172,14 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
   `;
     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/views/citation.js

@@ -21,6 +21,7 @@ const dompurify_1 = require("../lib/dompurify");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const bibliography_1 = require("../plugins/bibliography");
 const bibliography_utils_1 = require("../plugins/bibliography/bibliography-utils");
+const comment_annotation_1 = require("../plugins/comment_annotation");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 class CitationView extends base_node_view_1.BaseNodeView {
@@ -55,6 +56,7 @@ class CitationView extends base_node_view_1.BaseNodeView {
             this.dom.className = 'citation-wrapper';
             this.dom.innerHTML = '';
             this.dom.appendChild(element);
+            (0, comment_annotation_1.addCommentToLeafNode)(this.getPos(), this.getPos() + this.node.nodeSize, this.view.state, this.dom);
             this.setDomAttrs(this.node, this.dom, ['rids', 'contents', 'selectedText']);
         };
         this.getCitation = () => {

package/dist/cjs/views/citation_editable.js

@@ -42,6 +42,13 @@ class CitationEditableView extends citation_1.CitationView {
     constructor() {
         super(...arguments);
         this.decoder = new transform_1.Decoder(new Map());
+        this.stopEvent = (event) => {
+            var _a;
+            const element = event.target;
+            return !!(element.classList.contains('point-comment') ||
+                element.classList.contains('comment-icon') ||
+                ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('comment-icon')));
+        };
         this.selectNode = () => {
             var _a;
             const dataTracked = this.node.attrs.dataTracked;

package/dist/es/plugins/comment_annotation.js

@@ -1,5 +1,6 @@
 import { schema } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
+import { ReplaceStep } from 'prosemirror-transform';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { SET_COMMENT } from './highlight';
 export const commentAnnotation = new PluginKey('comment_annotation');
@@ -37,14 +38,26 @@ export default (props) => {
                     return new DecorationSet();
                 }
             },
-            apply: (tr) => {
+            apply: (tr, value, oldState, newState) => {
                 const meta = tr.getMeta(commentAnnotation);
                 if (meta) {
                     if (SET_COMMENT in meta) {
                         props.setComment(meta[SET_COMMENT]);
+                        return value;
                     }
                 }
-                return commentsState(props.setSelectedComment, tr.doc);
+                const hasCommentChange = !!tr.steps.find((s) => {
+                    var _a, _b;
+                    if (s instanceof ReplaceStep) {
+                        return s.slice.size > 0
+                            ? ((_a = newState.doc.nodeAt(s.from + 1)) === null || _a === void 0 ? void 0 : _a.type) === schema.nodes.comment
+                            : ((_b = oldState.doc.nodeAt(s.from)) === null || _b === void 0 ? void 0 : _b.type) === schema.nodes.comment;
+                    }
+                });
+                if (hasCommentChange) {
+                    return commentsState(props.setSelectedComment, tr.doc);
+                }
+                return value;
             },
         },
         props: {
@@ -93,16 +106,23 @@ const commentsState = (setSelectedComment, doc) => {
         const id = node.attrs['id'] || node.attrs['rid'];
         const targetComment = commentsMap.get(id);
         if (targetComment) {
-            const position = getNodePosition(node, pos);
-            decorations.push(Decoration.widget(position, getCommentIcon(Object.assign(Object.assign({}, targetComment), { targetType: node.type }), setSelectedComment), { key: targetComment.id }));
+            if (node.isAtom && node.type !== schema.nodes.highlight_marker) {
+                decorations.push(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(Decoration.widget(position, getCommentIcon(Object.assign(Object.assign({}, targetComment), { targetType: node.type }), setSelectedComment), { key: targetComment.id }));
+            }
         }
     });
     return DecorationSet.create(doc, decorations);
 };
 const getCommentIcon = (comment, setSelectedComment) => () => {
-    const { id, targetType, target, count, location } = comment;
+    const { id, targetType, target, count, location, isAtom } = comment;
     const commentId = location === 'block' ? target : id;
-    const element = document.createElement('div');
+    const element = document.createElement(isAtom ? 'span' : 'div');
     element.id = commentId;
     let elementClass;
     switch (targetType) {
@@ -120,8 +140,8 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
         default:
             elementClass = 'inline-comment';
     }
-    if (targetType === schema.nodes.citation || location === 'point') {
-        element.classList.add(location === 'point' ? 'point-comment' : 'inline-citation');
+    if (isAtom || location === 'point') {
+        element.classList.add('point-comment');
     }
     element.classList.add('block-comment-button', elementClass);
     element.onclick = (e) => {
@@ -146,3 +166,13 @@ const getCommentIcon = (comment, setSelectedComment) => () => {
   `;
     return element;
 };
+export const addCommentToLeafNode = (from, to, state, dom) => {
+    const commentsDecorationSet = commentAnnotation.getState(state);
+    if (commentsDecorationSet) {
+        const commentWidget = commentsDecorationSet.find(from, to);
+        if (commentWidget.length) {
+            const commentElement = commentWidget[0].type.spec.toDOM();
+            dom.appendChild(commentElement);
+        }
+    }
+};

package/dist/es/views/citation.js

@@ -18,6 +18,7 @@ import { sanitize } from '../lib/dompurify';
 import { getChangeClasses } from '../lib/track-changes-utils';
 import { getBibliographyPluginState } from '../plugins/bibliography';
 import { getCitation } from '../plugins/bibliography/bibliography-utils';
+import { addCommentToLeafNode } from '../plugins/comment_annotation';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class CitationView extends BaseNodeView {
@@ -52,6 +53,7 @@ export class CitationView extends BaseNodeView {
             this.dom.className = 'citation-wrapper';
             this.dom.innerHTML = '';
             this.dom.appendChild(element);
+            addCommentToLeafNode(this.getPos(), this.getPos() + this.node.nodeSize, this.view.state, this.dom);
             this.setDomAttrs(this.node, this.dom, ['rids', 'contents', 'selectedText']);
         };
         this.getCitation = () => {

package/dist/es/views/citation_editable.js

@@ -36,6 +36,13 @@ export class CitationEditableView extends CitationView {
     constructor() {
         super(...arguments);
         this.decoder = new Decoder(new Map());
+        this.stopEvent = (event) => {
+            var _a;
+            const element = event.target;
+            return !!(element.classList.contains('point-comment') ||
+                element.classList.contains('comment-icon') ||
+                ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('comment-icon')));
+        };
         this.selectNode = () => {
             var _a;
             const dataTracked = this.node.attrs.dataTracked;

package/dist/types/plugins/comment_annotation.d.ts

@@ -1,5 +1,5 @@
 import { CommentAnnotation } from '@manuscripts/json-schema';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
 export declare const commentAnnotation: PluginKey<DecorationSet>;
 export declare const commentScroll: (id: string, direction: 'editor' | 'inspector', isHighlight?: boolean) => void;
@@ -11,3 +11,4 @@ interface CommentAnnotationProps {
 }
 declare const _default: (props: CommentAnnotationProps) => Plugin<DecorationSet>;
 export default _default;
+export declare const addCommentToLeafNode: (from: number, to: number, state: EditorState, dom: HTMLElement) => void;

package/dist/types/types.d.ts

@@ -28,3 +28,9 @@ export interface SyncError {
 export type TrackableAttributes<T extends ManuscriptNode> = T['attrs'] & {
     dataTracked?: TrackedAttrs[];
 };
+export type WidgetDecoration = Decoration & {
+    type: {
+        toDOM: () => HTMLElement;
+        spec: Decoration['spec'];
+    };
+};

package/dist/types/views/citation_editable.d.ts

@@ -19,6 +19,7 @@ export declare class CitationEditableView extends CitationView<EditableBlockProp
     private decoder;
     private editor;
     private contextMenu;
+    stopEvent: (event: Event) => boolean;
     selectNode: () => void;
     deselectNode: () => void;
     destroy: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.8.4",
+  "version": "1.8.5-LEAN-2974-0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -32,7 +32,7 @@
     "@manuscripts/json-schema": "^2.2.7",
     "@manuscripts/library": "^1.3.6",
     "@manuscripts/style-guide": "^1.11.2",
-    "@manuscripts/track-changes-plugin": "1.7.9",
+    "@manuscripts/track-changes-plugin": "1.7.10",
     "@manuscripts/transform": "^2.2.1",
     "astrocite-eutils": "^0.16.4",
     "axios": "^1.6.7",
@@ -112,4 +112,4 @@
     "@types/react": "^17.0.2",
     "prosemirror-tables": "^1.3.5"
   }
-}
+}

package/styles/AdvancedEditor.css

@@ -483,13 +483,6 @@ Next levels are shifted 'up' by 1
   top: 6px;
 }
 
-.block-comment-button.inline-citation {
-  z-index: 1;
-  left: -1%;
-  top: -8%;
-  display: inline-flex;
-}
-
 .block-comment-button.point-comment {
   z-index: 1;
   left: 0;