@manuscripts/body-editor 1.9.18 → 1.9.19-LEAN-3535.0

package/dist/cjs/lib/popper.js

@@ -22,9 +22,9 @@ exports.PopperManager = void 0;
 const popper_js_1 = __importDefault(require("popper.js"));
 class PopperManager {
     show(target, contents, placement = 'bottom', showArrow = true, modifiers = {}) {
-        if (this.activePopper) {
-            return this.destroy();
-        }
+        this.destroy();
+        this.clickEventHandler = this.clickEventHandler.bind(this);
+        document.body.addEventListener('click', this.clickEventHandler);
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
@@ -57,8 +57,15 @@ class PopperManager {
             });
         });
     }
+    clickEventHandler(event) {
+        const editorElement = document.querySelector('.manuscript-editor');
+        if (!(editorElement === null || editorElement === void 0 ? void 0 : editorElement.contains(event.target))) {
+            this.destroy();
+        }
+    }
     destroy() {
         if (this.activePopper) {
+            document.body.removeEventListener('click', this.clickEventHandler);
             this.removeContainerClass(this.activePopper.reference);
             this.activePopper.destroy();
             delete this.activePopper;

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

@@ -69,6 +69,7 @@ class SuggestionView {
             if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
                 return;
             }
+            console.log(dom);
             dom.addEventListener('click', this.listener);
         });
     }

package/dist/cjs/views/bibliography_element.js

@@ -45,9 +45,7 @@ const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 class BibliographyElementBlockView extends block_view_1.default {
     constructor() {
         super(...arguments);
-        this.clickedElementId = null;
         this.showPopper = (id) => {
-            this.props.popper.destroy();
             const bib = (0, bibliography_1.getBibliographyPluginState)(this.view.state);
             if (!bib) {
                 return;
@@ -71,8 +69,6 @@ class BibliographyElementBlockView extends block_view_1.default {
             this.props.setComment((0, transform_1.buildComment)(citationId));
         };
         this.showContextMenu = (elementId) => {
-            this.props.popper.destroy();
-            this.clickedElementId = null;
             const can = this.props.getCapabilities();
             const element = document.getElementById(elementId);
             const componentProps = {
@@ -95,7 +91,6 @@ class BibliographyElementBlockView extends block_view_1.default {
         };
         this.onClickHandler = (elementId, dataTracked) => {
             var _a;
-            this.clickedElementId = elementId;
             const isSelectedSuggestion = !!((_a = selected_suggestion_ui_1.selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
             const { tr, doc } = this.view.state;
@@ -107,11 +102,9 @@ class BibliographyElementBlockView extends block_view_1.default {
                 if (isSelectedSuggestion) {
                     tr.setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, true);
                 }
-                else {
-                    this.showContextMenu(elementId);
-                }
             }
             this.view.dispatch(tr);
+            this.showContextMenu(elementId);
         };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
             this.props.popper.destroy();
@@ -164,7 +157,9 @@ class BibliographyElementBlockView extends block_view_1.default {
                     element.classList.add('selected-suggestion');
                 }
                 if (can.seeReferencesButtons) {
-                    element.addEventListener('click', () => this.onClickHandler(element.id, dataTracked));
+                    element.addEventListener('click', () => {
+                        this.onClickHandler(element.id, dataTracked);
+                    });
                 }
                 wrapper.append(element);
             }
@@ -175,9 +170,6 @@ class BibliographyElementBlockView extends block_view_1.default {
             else {
                 this.container.appendChild(wrapper);
             }
-            if (this.clickedElementId) {
-                this.showContextMenu(this.clickedElementId);
-            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');

package/dist/cjs/views/citation.js

@@ -27,6 +27,7 @@ class CitationView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.wasUpdated = false;
         this.initialise = () => {
             if (!this.node.type.spec.toDOM) {
                 throw Error(`Node view ${this.node.type} doesn't have toDOM method`);
@@ -59,6 +60,13 @@ class CitationView extends base_node_view_1.BaseNodeView {
             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']);
+            if (!this.wasUpdated) {
+                this.dom.addEventListener('click', () => this.onClickHandler());
+            }
+            this.wasUpdated = true;
+            this.props.popper.update();
+        };
+        this.onClickHandler = () => {
         };
     }
 }

package/dist/cjs/views/citation_editable.js

@@ -47,17 +47,18 @@ class CitationEditableView extends citation_1.CitationView {
                 element.classList.contains('comment-icon') ||
                 ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('comment-icon')));
         };
-        this.selectNode = () => {
+        this.onClickHandler = () => {
             var _a;
             const can = this.props.getCapabilities();
             const dataTracked = this.node.attrs.dataTracked;
             const isSelectedSuggestion = !!((_a = selected_suggestion_ui_1.selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
-            this.dom.classList.add('ProseMirror-selectednode');
+            const { tr, doc } = this.view.state;
+            tr.setSelection(prosemirror_state_1.NodeSelection.create(doc, this.getPos()));
             if (dataTracked && !isSelectedSuggestion) {
-                this.view.dispatch(this.view.state.tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked[0].id));
+                tr.setMeta(selected_suggestion_ui_1.SET_SUGGESTION_ID, dataTracked[0].id);
             }
-            else if (can.seeReferencesButtons && !(0, track_changes_utils_1.isDeleted)(this.node)) {
+            if (can.seeReferencesButtons && !(0, track_changes_utils_1.isDeleted)(this.node)) {
                 const attrs = (0, track_changes_utils_1.getActualAttrs)(this.node);
                 if (!attrs.rids.length) {
                     this.showPopper();
@@ -66,10 +67,7 @@ class CitationEditableView extends citation_1.CitationView {
                     this.showContextMenu();
                 }
             }
-        };
-        this.deselectNode = () => {
-            this.dom.classList.remove('ProseMirror-selectednode');
-            this.props.popper.destroy();
+            this.view.dispatch(tr);
         };
         this.destroy = () => {
             var _a;
@@ -77,7 +75,6 @@ class CitationEditableView extends citation_1.CitationView {
             this.props.popper.destroy();
         };
         this.showContextMenu = () => {
-            this.props.popper.destroy();
             const componentProps = {
                 actions: [
                     { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
@@ -85,7 +82,9 @@ class CitationEditableView extends citation_1.CitationView {
                 ],
             };
             this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
-            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+            setTimeout(() => {
+                this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+            }, 0);
         };
         this.showPopper = () => {
             this.props.popper.destroy();

package/dist/cjs/views/contributors.js

@@ -179,7 +179,6 @@ class ContributorsView extends block_view_1.default {
         };
         this.onClickHandler = (elementId, dataTracked) => {
             var _a;
-            this.props.popper.destroy();
             const isSelectedSuggestion = !!((_a = selected_suggestion_ui_1.selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
             const { tr, doc } = this.view.state;
@@ -192,11 +191,11 @@ class ContributorsView extends block_view_1.default {
                     tr.setMeta(selected_suggestion_ui_1.CLEAR_SUGGESTION_ID, true);
                 }
             }
+            this.view.dispatch(tr);
             if (!((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.operation) === track_changes_plugin_1.CHANGE_OPERATION.delete &&
                 (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.status) !== track_changes_plugin_1.CHANGE_STATUS.rejected)) {
                 this.showContextMenu(elementId);
             }
-            this.view.dispatch(tr);
         };
         this.showContextMenu = (elementId) => {
             this.props.popper.destroy();

package/dist/es/lib/popper.js

@@ -16,9 +16,9 @@
 import Popper from 'popper.js';
 export class PopperManager {
     show(target, contents, placement = 'bottom', showArrow = true, modifiers = {}) {
-        if (this.activePopper) {
-            return this.destroy();
-        }
+        this.destroy();
+        this.clickEventHandler = this.clickEventHandler.bind(this);
+        document.body.addEventListener('click', this.clickEventHandler);
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
@@ -51,8 +51,15 @@ export class PopperManager {
             });
         });
     }
+    clickEventHandler(event) {
+        const editorElement = document.querySelector('.manuscript-editor');
+        if (!(editorElement === null || editorElement === void 0 ? void 0 : editorElement.contains(event.target))) {
+            this.destroy();
+        }
+    }
     destroy() {
         if (this.activePopper) {
+            document.body.removeEventListener('click', this.clickEventHandler);
             this.removeContainerClass(this.activePopper.reference);
             this.activePopper.destroy();
             delete this.activePopper;

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

@@ -66,6 +66,7 @@ class SuggestionView {
             if ((_b = (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains('keyword')) {
                 return;
             }
+            console.log(dom);
             dom.addEventListener('click', this.listener);
         });
     }

package/dist/es/views/bibliography_element.js

@@ -39,9 +39,7 @@ import ReactSubView from './ReactSubView';
 export class BibliographyElementBlockView extends BlockView {
     constructor() {
         super(...arguments);
-        this.clickedElementId = null;
         this.showPopper = (id) => {
-            this.props.popper.destroy();
             const bib = getBibliographyPluginState(this.view.state);
             if (!bib) {
                 return;
@@ -65,8 +63,6 @@ export class BibliographyElementBlockView extends BlockView {
             this.props.setComment(buildComment(citationId));
         };
         this.showContextMenu = (elementId) => {
-            this.props.popper.destroy();
-            this.clickedElementId = null;
             const can = this.props.getCapabilities();
             const element = document.getElementById(elementId);
             const componentProps = {
@@ -89,7 +85,6 @@ export class BibliographyElementBlockView extends BlockView {
         };
         this.onClickHandler = (elementId, dataTracked) => {
             var _a;
-            this.clickedElementId = elementId;
             const isSelectedSuggestion = !!((_a = selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
             const { tr, doc } = this.view.state;
@@ -101,11 +96,9 @@ export class BibliographyElementBlockView extends BlockView {
                 if (isSelectedSuggestion) {
                     tr.setMeta(CLEAR_SUGGESTION_ID, true);
                 }
-                else {
-                    this.showContextMenu(elementId);
-                }
             }
             this.view.dispatch(tr);
+            this.showContextMenu(elementId);
         };
         this.updateContents = () => __awaiter(this, void 0, void 0, function* () {
             this.props.popper.destroy();
@@ -158,7 +151,9 @@ export class BibliographyElementBlockView extends BlockView {
                     element.classList.add('selected-suggestion');
                 }
                 if (can.seeReferencesButtons) {
-                    element.addEventListener('click', () => this.onClickHandler(element.id, dataTracked));
+                    element.addEventListener('click', () => {
+                        this.onClickHandler(element.id, dataTracked);
+                    });
                 }
                 wrapper.append(element);
             }
@@ -169,9 +164,6 @@ export class BibliographyElementBlockView extends BlockView {
             else {
                 this.container.appendChild(wrapper);
             }
-            if (this.clickedElementId) {
-                this.showContextMenu(this.clickedElementId);
-            }
         });
         this.createElement = () => {
             this.container = document.createElement('div');

package/dist/es/views/citation.js

@@ -24,6 +24,7 @@ export class CitationView extends BaseNodeView {
     constructor() {
         super(...arguments);
         this.ignoreMutation = () => true;
+        this.wasUpdated = false;
         this.initialise = () => {
             if (!this.node.type.spec.toDOM) {
                 throw Error(`Node view ${this.node.type} doesn't have toDOM method`);
@@ -56,6 +57,13 @@ export class CitationView extends BaseNodeView {
             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']);
+            if (!this.wasUpdated) {
+                this.dom.addEventListener('click', () => this.onClickHandler());
+            }
+            this.wasUpdated = true;
+            this.props.popper.update();
+        };
+        this.onClickHandler = () => {
         };
     }
 }

package/dist/es/views/citation_editable.js

@@ -15,7 +15,7 @@
  */
 import { ContextMenu } from '@manuscripts/style-guide';
 import { buildComment, schema, } from '@manuscripts/transform';
-import { TextSelection } from 'prosemirror-state';
+import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { findChildrenByType } from 'prosemirror-utils';
 import { CitationEditor, } from '../components/references/CitationEditor';
 import { CitationViewer, } from '../components/references/CitationViewer';
@@ -41,17 +41,18 @@ export class CitationEditableView extends CitationView {
                 element.classList.contains('comment-icon') ||
                 ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('comment-icon')));
         };
-        this.selectNode = () => {
+        this.onClickHandler = () => {
             var _a;
             const can = this.props.getCapabilities();
             const dataTracked = this.node.attrs.dataTracked;
             const isSelectedSuggestion = !!((_a = selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
-            this.dom.classList.add('ProseMirror-selectednode');
+            const { tr, doc } = this.view.state;
+            tr.setSelection(NodeSelection.create(doc, this.getPos()));
             if (dataTracked && !isSelectedSuggestion) {
-                this.view.dispatch(this.view.state.tr.setMeta(SET_SUGGESTION_ID, dataTracked[0].id));
+                tr.setMeta(SET_SUGGESTION_ID, dataTracked[0].id);
             }
-            else if (can.seeReferencesButtons && !isDeleted(this.node)) {
+            if (can.seeReferencesButtons && !isDeleted(this.node)) {
                 const attrs = getActualAttrs(this.node);
                 if (!attrs.rids.length) {
                     this.showPopper();
@@ -60,10 +61,7 @@ export class CitationEditableView extends CitationView {
                     this.showContextMenu();
                 }
             }
-        };
-        this.deselectNode = () => {
-            this.dom.classList.remove('ProseMirror-selectednode');
-            this.props.popper.destroy();
+            this.view.dispatch(tr);
         };
         this.destroy = () => {
             var _a;
@@ -71,7 +69,6 @@ export class CitationEditableView extends CitationView {
             this.props.popper.destroy();
         };
         this.showContextMenu = () => {
-            this.props.popper.destroy();
             const componentProps = {
                 actions: [
                     { label: 'Edit', action: this.handleEdit, icon: 'EditIcon' },
@@ -79,7 +76,9 @@ export class CitationEditableView extends CitationView {
                 ],
             };
             this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, 'context-menu');
-            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+            setTimeout(() => {
+                this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+            }, 0);
         };
         this.showPopper = () => {
             this.props.popper.destroy();

package/dist/es/views/contributors.js

@@ -173,7 +173,6 @@ export class ContributorsView extends BlockView {
         };
         this.onClickHandler = (elementId, dataTracked) => {
             var _a;
-            this.props.popper.destroy();
             const isSelectedSuggestion = !!((_a = selectedSuggestionKey
                 .getState(this.view.state)) === null || _a === void 0 ? void 0 : _a.find(this.getPos(), this.getPos() + this.node.nodeSize).length);
             const { tr, doc } = this.view.state;
@@ -186,11 +185,11 @@ export class ContributorsView extends BlockView {
                     tr.setMeta(CLEAR_SUGGESTION_ID, true);
                 }
             }
+            this.view.dispatch(tr);
             if (!((dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.operation) === CHANGE_OPERATION.delete &&
                 (dataTracked === null || dataTracked === void 0 ? void 0 : dataTracked.status) !== CHANGE_STATUS.rejected)) {
                 this.showContextMenu(elementId);
             }
-            this.view.dispatch(tr);
         };
         this.showContextMenu = (elementId) => {
             this.props.popper.destroy();

package/dist/types/lib/popper.d.ts

@@ -17,6 +17,7 @@ import Popper from 'popper.js';
 export declare class PopperManager {
     protected activePopper?: Popper;
     show(target: Element, contents: HTMLElement, placement?: Popper.Placement, showArrow?: boolean, modifiers?: Popper.Modifiers): void;
+    clickEventHandler(event: Event): void;
     destroy(): void;
     update(): void;
     private focusInput;

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

@@ -24,7 +24,6 @@ export declare class BibliographyElementBlockView<PropsType extends Bibliography
     private container;
     private editor;
     private contextMenu;
-    private clickedElementId;
     showPopper: (id: string) => void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;

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

@@ -17,8 +17,10 @@ import { ManuscriptNodeView } from '@manuscripts/transform';
 import { BaseNodeProps, BaseNodeView } from './base_node_view';
 export declare class CitationView<PropsType extends BaseNodeProps> extends BaseNodeView<PropsType> implements ManuscriptNodeView {
     ignoreMutation: () => boolean;
+    wasUpdated: boolean;
     initialise: () => this;
     updateContents: () => void;
+    onClickHandler: () => void;
 }
 declare const _default: (props: BaseNodeProps, dispatch?: import("..").Dispatch | undefined) => import("../types").NodeViewCreator<CitationView<any>>;
 export default _default;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "1.9.18",
+  "version": "1.9.19-LEAN-3535.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",