@manuscripts/body-editor 3.17.0 → 3.17.1

package/dist/cjs/lib/popper.js

@@ -22,7 +22,7 @@ class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, onDestroy = undefined) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, autoCloseOnOutsideClick = true, onDestroy = undefined) {
         this.destroy();
         this.triggerElement = target;
         this.destructionListener = onDestroy;
@@ -85,9 +85,10 @@ class PopperManager {
                     this.destroy();
                 }
             };
-            if (contents.classList.contains('context-menu') ||
+            if ((contents.classList.contains('context-menu') ||
                 contents.classList.contains('language') ||
-                contents.classList.contains('section-category')) {
+                contents.classList.contains('section-category')) &&
+                autoCloseOnOutsideClick) {
                 window.addEventListener('click', this.handleDocumentClick);
             }
         });

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

@@ -177,7 +177,7 @@ class HorizontalPositionMenu {
                 p.props.popper.replaceContent(content);
             }
             else {
-                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, () => {
+                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, true, () => {
                     this.menuOpen = false;
                 });
                 this.menuOpen = true;

package/dist/cjs/lib/view.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveBibliographyItem = exports.insertBibliographyItems = exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
+exports.isSelectionInsideNode = exports.saveBibliographyItem = exports.insertBibliographyItems = exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const utils = __importStar(require("prosemirror-utils"));
@@ -144,3 +144,12 @@ const saveBibliographyItem = (view, attrs) => {
     (0, exports.insertBibliographyItems)(view, attrs);
 };
 exports.saveBibliographyItem = saveBibliographyItem;
+const isSelectionInsideNode = (view, node, pos) => {
+    const { from, to, empty } = view.state.selection;
+    const end = pos + node.nodeSize;
+    if (empty) {
+        return from > pos && from < end;
+    }
+    return from >= pos && to <= end;
+};
+exports.isSelectionInsideNode = isSelectionInsideNode;

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.17.0';
+exports.VERSION = '3.17.1';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/footnote.js

@@ -23,6 +23,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const isEqual_1 = __importDefault(require("lodash/isEqual"));
+const xor_1 = __importDefault(require("lodash/xor"));
 const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const DeleteFootnoteDialog_1 = require("../components/views/DeleteFootnoteDialog");
@@ -32,25 +33,31 @@ const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 const navigation_utils_1 = require("../lib/navigation-utils");
+const view_1 = require("../lib/view");
 class FootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
+        this.isMenuShown = false;
+        this.previousActionsLabels = [];
         this.initialise = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('footnote');
             this.dom.tabIndex = 0;
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
-            this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false));
-            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)((e) => this.handleClick(e, true)));
-            this.updateContents();
-        };
-        this.handleClick = (event, fromKeyboard = false) => {
-            const element = event.target;
-            const item = element.closest('.footnote');
-            if (item) {
-                this.showContextMenu(item, fromKeyboard);
+            if (!this.view.editable) {
+                const actions = this.getContextMenuActions();
+                if (actions.length > 0) {
+                    this.dom.addEventListener('mousedown', () => this.showContextMenu(actions, true));
+                }
             }
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => {
+                const actions = this.getContextMenuActions();
+                if (actions.length > 0) {
+                    this.showContextMenu(actions, true);
+                }
+            }));
+            this.updateContents();
         };
         this.handleMarkerClick = (e) => {
             e?.preventDefault();
@@ -134,35 +141,53 @@ class FootnoteView extends base_node_view_1.BaseNodeView {
         this.dom.innerHTML = '';
         this.dom.appendChild(marker);
         this.contentDOM && this.dom.appendChild(this.contentDOM);
+        const selectionInsideNode = (0, view_1.isSelectionInsideNode)(this.view, this.node, this.getPos());
+        const actions = this.getContextMenuActions();
+        const hasActions = actions.length > 0;
+        const currentLabels = actions.map(({ label }) => label);
+        const changedLabels = (0, xor_1.default)(currentLabels, this.previousActionsLabels);
+        if (selectionInsideNode &&
+            hasActions &&
+            (!this.isMenuShown || changedLabels.length > 0)) {
+            this.showContextMenu(actions, false);
+            this.previousActionsLabels = actions.map(({ label }) => label);
+        }
+        else if ((!hasActions || !selectionInsideNode) && this.isMenuShown) {
+            this.props.popper.destroy();
+            this.isMenuShown = false;
+            this.previousActionsLabels = [];
+        }
     }
     getFootnoteState() {
         const id = this.node.attrs.id;
         const fn = (0, footnotes_1.getFootnotesElementState)(this.view.state, id);
         return { id, fn };
     }
-    showContextMenu(element, autoFocus) {
+    showContextMenu(actions, autoFocus) {
+        this.isMenuShown = true;
         this.props.popper.destroy();
+        this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, { actions }, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
+        this.props.popper.show(this.dom, this.contextMenu, 'right-start', true, [], autoFocus, false);
+    }
+    getContextMenuActions() {
         const can = this.props.getCapabilities();
         const { id, fn } = this.getFootnoteState();
-        const componentProps = {
-            actions: [],
-        };
+        const actions = [];
         if (!fn?.unusedFootnoteIDs.has(id)) {
-            componentProps.actions.push({
-                label: 'Go to footnote Refernce',
+            actions.push({
+                label: 'Go to footnote Reference',
                 action: () => this.handleMarkerClick(),
                 icon: 'Scroll',
             });
         }
         if (can.editArticle && !(0, track_changes_plugin_1.isDeleted)(this.node)) {
-            componentProps.actions.push({
+            actions.push({
                 label: 'Delete',
                 action: () => this.handleDeleteClick(),
                 icon: 'Delete',
             });
         }
-        this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start', true, [], autoFocus);
+        return actions;
     }
 }
 exports.FootnoteView = FootnoteView;

package/dist/cjs/views/general_table_footnote.js

@@ -27,27 +27,27 @@ const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
+const navigation_utils_1 = require("../lib/navigation-utils");
+const view_1 = require("../lib/view");
 class GeneralTableFootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
+        this.isMenuShown = false;
         this.initialise = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('footnote', 'general-table-footnote');
-            this.dom.addEventListener('mousedown', this.handleClick);
+            this.dom.tabIndex = 0;
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => {
+                const can = this.props.getCapabilities();
+                const canShowMenu = can.editArticle && !(0, track_changes_plugin_1.isDeleted)(this.node);
+                if (canShowMenu) {
+                    this.showContextMenu(true);
+                }
+            }));
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
             this.updateContents();
         };
-        this.handleClick = (e) => {
-            const element = e.target;
-            const can = this.props.getCapabilities();
-            if (can.editArticle) {
-                const item = element.closest('.general-table-footnote');
-                if (item) {
-                    this.showContextMenu(item);
-                }
-            }
-        };
         this.handleDeleteClick = () => {
             const componentProps = {
                 header: 'Delete table general note',
@@ -80,21 +80,31 @@ class GeneralTableFootnoteView extends base_node_view_1.BaseNodeView {
         super.updateContents();
         this.dom.innerHTML = '';
         this.contentDOM && this.dom.appendChild(this.contentDOM);
+        const selectionInsideNode = (0, view_1.isSelectionInsideNode)(this.view, this.node, this.getPos());
+        const can = this.props.getCapabilities();
+        const canShowMenu = can.editArticle && !(0, track_changes_plugin_1.isDeleted)(this.node);
+        if (canShowMenu && selectionInsideNode && !this.isMenuShown) {
+            this.showContextMenu(false);
+        }
+        else if ((!canShowMenu || !selectionInsideNode) && this.isMenuShown) {
+            this.props.popper.destroy();
+            this.isMenuShown = false;
+        }
     }
-    showContextMenu(element) {
+    showContextMenu(autoFocus = false) {
+        this.isMenuShown = true;
         this.props.popper.destroy();
         const componentProps = {
-            actions: [],
+            actions: [
+                {
+                    label: 'Delete',
+                    action: () => this.handleDeleteClick(),
+                    icon: 'Delete',
+                },
+            ],
         };
-        if (!(0, track_changes_plugin_1.isDeleted)(this.node)) {
-            componentProps.actions.push({
-                label: 'Delete',
-                action: () => this.handleDeleteClick(),
-                icon: 'Delete',
-            });
-        }
         this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start');
+        this.props.popper.show(this.dom, this.contextMenu, 'right-start', false, [], autoFocus, false);
     }
 }
 exports.GeneralTableFootnoteView = GeneralTableFootnoteView;

package/dist/es/lib/popper.js

@@ -19,7 +19,7 @@ export class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, onDestroy = undefined) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, autoCloseOnOutsideClick = true, onDestroy = undefined) {
         this.destroy();
         this.triggerElement = target;
         this.destructionListener = onDestroy;
@@ -82,9 +82,10 @@ export class PopperManager {
                     this.destroy();
                 }
             };
-            if (contents.classList.contains('context-menu') ||
+            if ((contents.classList.contains('context-menu') ||
                 contents.classList.contains('language') ||
-                contents.classList.contains('section-category')) {
+                contents.classList.contains('section-category')) &&
+                autoCloseOnOutsideClick) {
                 window.addEventListener('click', this.handleDocumentClick);
             }
         });

package/dist/es/lib/position-menu.js

@@ -174,7 +174,7 @@ export class HorizontalPositionMenu {
                 p.props.popper.replaceContent(content);
             }
             else {
-                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, () => {
+                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, true, () => {
                     this.menuOpen = false;
                 });
                 this.menuOpen = true;

package/dist/es/lib/view.js

@@ -100,3 +100,11 @@ export const saveBibliographyItem = (view, attrs) => {
     }
     insertBibliographyItems(view, attrs);
 };
+export const isSelectionInsideNode = (view, node, pos) => {
+    const { from, to, empty } = view.state.selection;
+    const end = pos + node.nodeSize;
+    if (empty) {
+        return from > pos && from < end;
+    }
+    return from >= pos && to <= end;
+};

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.17.0';
+export const VERSION = '3.17.1';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/footnote.js

@@ -17,6 +17,7 @@ import { ContextMenu } from '@manuscripts/style-guide';
 import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin';
 import { schema } from '@manuscripts/transform';
 import isEqual from 'lodash/isEqual';
+import xor from 'lodash/xor';
 import { NodeSelection } from 'prosemirror-state';
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 import { DeleteFootnoteDialog, } from '../components/views/DeleteFootnoteDialog';
@@ -26,25 +27,31 @@ import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 import { handleEnterKey } from '../lib/navigation-utils';
+import { isSelectionInsideNode } from '../lib/view';
 export class FootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
+        this.isMenuShown = false;
+        this.previousActionsLabels = [];
         this.initialise = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('footnote');
             this.dom.tabIndex = 0;
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
-            this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false));
-            this.dom.addEventListener('keydown', handleEnterKey((e) => this.handleClick(e, true)));
-            this.updateContents();
-        };
-        this.handleClick = (event, fromKeyboard = false) => {
-            const element = event.target;
-            const item = element.closest('.footnote');
-            if (item) {
-                this.showContextMenu(item, fromKeyboard);
+            if (!this.view.editable) {
+                const actions = this.getContextMenuActions();
+                if (actions.length > 0) {
+                    this.dom.addEventListener('mousedown', () => this.showContextMenu(actions, true));
+                }
             }
+            this.dom.addEventListener('keydown', handleEnterKey(() => {
+                const actions = this.getContextMenuActions();
+                if (actions.length > 0) {
+                    this.showContextMenu(actions, true);
+                }
+            }));
+            this.updateContents();
         };
         this.handleMarkerClick = (e) => {
             e?.preventDefault();
@@ -128,35 +135,53 @@ export class FootnoteView extends BaseNodeView {
         this.dom.innerHTML = '';
         this.dom.appendChild(marker);
         this.contentDOM && this.dom.appendChild(this.contentDOM);
+        const selectionInsideNode = isSelectionInsideNode(this.view, this.node, this.getPos());
+        const actions = this.getContextMenuActions();
+        const hasActions = actions.length > 0;
+        const currentLabels = actions.map(({ label }) => label);
+        const changedLabels = xor(currentLabels, this.previousActionsLabels);
+        if (selectionInsideNode &&
+            hasActions &&
+            (!this.isMenuShown || changedLabels.length > 0)) {
+            this.showContextMenu(actions, false);
+            this.previousActionsLabels = actions.map(({ label }) => label);
+        }
+        else if ((!hasActions || !selectionInsideNode) && this.isMenuShown) {
+            this.props.popper.destroy();
+            this.isMenuShown = false;
+            this.previousActionsLabels = [];
+        }
     }
     getFootnoteState() {
         const id = this.node.attrs.id;
         const fn = getFootnotesElementState(this.view.state, id);
         return { id, fn };
     }
-    showContextMenu(element, autoFocus) {
+    showContextMenu(actions, autoFocus) {
+        this.isMenuShown = true;
         this.props.popper.destroy();
+        this.contextMenu = ReactSubView(this.props, ContextMenu, { actions }, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
+        this.props.popper.show(this.dom, this.contextMenu, 'right-start', true, [], autoFocus, false);
+    }
+    getContextMenuActions() {
         const can = this.props.getCapabilities();
         const { id, fn } = this.getFootnoteState();
-        const componentProps = {
-            actions: [],
-        };
+        const actions = [];
         if (!fn?.unusedFootnoteIDs.has(id)) {
-            componentProps.actions.push({
-                label: 'Go to footnote Refernce',
+            actions.push({
+                label: 'Go to footnote Reference',
                 action: () => this.handleMarkerClick(),
                 icon: 'Scroll',
             });
         }
         if (can.editArticle && !isDeleted(this.node)) {
-            componentProps.actions.push({
+            actions.push({
                 label: 'Delete',
                 action: () => this.handleDeleteClick(),
                 icon: 'Delete',
             });
         }
-        this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start', true, [], autoFocus);
+        return actions;
     }
 }
 const getEffectiveChildCount = (node) => {

package/dist/es/views/general_table_footnote.js

@@ -21,27 +21,27 @@ import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 import ReactSubView from './ReactSubView';
 import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin';
+import { handleEnterKey } from '../lib/navigation-utils';
+import { isSelectionInsideNode } from '../lib/view';
 export class GeneralTableFootnoteView extends BaseNodeView {
     constructor() {
         super(...arguments);
+        this.isMenuShown = false;
         this.initialise = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('footnote', 'general-table-footnote');
-            this.dom.addEventListener('mousedown', this.handleClick);
+            this.dom.tabIndex = 0;
+            this.dom.addEventListener('keydown', handleEnterKey(() => {
+                const can = this.props.getCapabilities();
+                const canShowMenu = can.editArticle && !isDeleted(this.node);
+                if (canShowMenu) {
+                    this.showContextMenu(true);
+                }
+            }));
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
             this.updateContents();
         };
-        this.handleClick = (e) => {
-            const element = e.target;
-            const can = this.props.getCapabilities();
-            if (can.editArticle) {
-                const item = element.closest('.general-table-footnote');
-                if (item) {
-                    this.showContextMenu(item);
-                }
-            }
-        };
         this.handleDeleteClick = () => {
             const componentProps = {
                 header: 'Delete table general note',
@@ -74,21 +74,31 @@ export class GeneralTableFootnoteView extends BaseNodeView {
         super.updateContents();
         this.dom.innerHTML = '';
         this.contentDOM && this.dom.appendChild(this.contentDOM);
+        const selectionInsideNode = isSelectionInsideNode(this.view, this.node, this.getPos());
+        const can = this.props.getCapabilities();
+        const canShowMenu = can.editArticle && !isDeleted(this.node);
+        if (canShowMenu && selectionInsideNode && !this.isMenuShown) {
+            this.showContextMenu(false);
+        }
+        else if ((!canShowMenu || !selectionInsideNode) && this.isMenuShown) {
+            this.props.popper.destroy();
+            this.isMenuShown = false;
+        }
     }
-    showContextMenu(element) {
+    showContextMenu(autoFocus = false) {
+        this.isMenuShown = true;
         this.props.popper.destroy();
         const componentProps = {
-            actions: [],
+            actions: [
+                {
+                    label: 'Delete',
+                    action: () => this.handleDeleteClick(),
+                    icon: 'Delete',
+                },
+            ],
         };
-        if (!isDeleted(this.node)) {
-            componentProps.actions.push({
-                label: 'Delete',
-                action: () => this.handleDeleteClick(),
-                icon: 'Delete',
-            });
-        }
         this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start');
+        this.props.popper.show(this.dom, this.contextMenu, 'right-start', false, [], autoFocus, false);
     }
 }
 export default createNodeView(GeneralTableFootnoteView);

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

@@ -20,7 +20,7 @@ export declare class PopperManager {
     private triggerElement?;
     private container?;
     private destructionListener?;
-    show(target: Element, contents: HTMLElement, placement?: Placement, showArrow?: boolean, modifiers?: Array<Partial<StrictModifiers>>, autoFocus?: boolean, onDestroy?: ((i: Instance) => void) | undefined): void;
+    show(target: Element, contents: HTMLElement, placement?: Placement, showArrow?: boolean, modifiers?: Array<Partial<StrictModifiers>>, autoFocus?: boolean, autoCloseOnOutsideClick?: boolean, onDestroy?: ((i: Instance) => void) | undefined): void;
     destroy(): void;
     getContainer(): HTMLElement | undefined;
     update(): void;

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

@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BibliographyItemAttrs, ManuscriptEditorView, ManuscriptNodeType } from '@manuscripts/transform';
+import { BibliographyItemAttrs, ManuscriptEditorView, ManuscriptNode, ManuscriptNodeType } from '@manuscripts/transform';
 import { Attrs } from 'prosemirror-model';
 import * as utils from 'prosemirror-utils';
+import { EditorView } from 'prosemirror-view';
 export declare const findChildByID: (view: ManuscriptEditorView, id: string) => utils.NodeWithPos | undefined;
 export declare const findChildByType: (view: ManuscriptEditorView, type: ManuscriptNodeType) => utils.NodeWithPos | undefined;
 export declare const findChildrenByType: (view: ManuscriptEditorView, type: ManuscriptNodeType) => utils.NodeWithPos[];
@@ -24,3 +25,4 @@ export declare const updateNodeAttrs: (view: ManuscriptEditorView, type: Manuscr
 export declare const deleteNode: (view: ManuscriptEditorView, id: string) => void;
 export declare const insertBibliographyItems: (view: ManuscriptEditorView, items: BibliographyItemAttrs[]) => void;
 export declare const saveBibliographyItem: (view: ManuscriptEditorView, attrs: BibliographyItemAttrs[]) => void;
+export declare const isSelectionInsideNode: (view: EditorView, node: ManuscriptNode, pos: number) => boolean;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.17.0";
+export declare const VERSION = "3.17.1";
 export declare const MATHJAX_VERSION = "3.2.2";

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

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ContextMenuProps } from '@manuscripts/style-guide';
 import { FootnoteNode } from '@manuscripts/transform';
 import { Transaction } from 'prosemirror-state';
 import { Trackable } from '../types';
@@ -20,14 +21,16 @@ import { BaseNodeView } from './base_node_view';
 export declare class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     dialog: HTMLElement;
     contextMenu: HTMLDivElement;
+    isMenuShown: boolean;
+    previousActionsLabels: string[];
     initialise: () => void;
     updateContents(): void;
     getFootnoteState(): {
         id: string;
         fn: import("../plugins/footnotes").FootnotesElementState | undefined;
     };
-    showContextMenu(element: HTMLElement, autoFocus: boolean): void;
-    handleClick: (event: Event, fromKeyboard?: boolean) => void;
+    showContextMenu(actions: ContextMenuProps['actions'], autoFocus: boolean): void;
+    getContextMenuActions(): import("@manuscripts/style-guide").Actions[];
     handleMarkerClick: (e?: Event) => void;
     handleDeleteClick: (e?: Event) => void;
     handleDelete: () => void;

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

@@ -19,10 +19,10 @@ import { BaseNodeView } from './base_node_view';
 export declare class GeneralTableFootnoteView extends BaseNodeView<Trackable<GeneralTableFootnoteNode>> {
     dialog: HTMLElement;
     contextMenu: HTMLDivElement;
+    isMenuShown: boolean;
     initialise: () => void;
     updateContents(): void;
-    handleClick: (e: Event) => void;
-    showContextMenu(element: HTMLElement): void;
+    showContextMenu(autoFocus?: boolean): void;
     handleDeleteClick: () => void;
     handleDelete: () => void;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.17.0",
+  "version": "3.17.1",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -43,7 +43,7 @@
     "@iarna/word-count": "1.1.2",
     "@manuscripts/style-guide": "3.7.1",
     "@manuscripts/track-changes-plugin": "2.4.0",
-    "@manuscripts/transform": "4.5.1",
+    "@manuscripts/transform": "4.5.2",
     "@popperjs/core": "2.11.8",
     "citeproc": "2.4.63",
     "codemirror": "5.65.19",

package/src/lib/popper.ts

@@ -36,6 +36,7 @@ export class PopperManager {
     showArrow = true,
     modifiers: Array<Partial<StrictModifiers>> = [],
     autoFocus = true,
+    autoCloseOnOutsideClick = true,
     onDestroy: ((i: Instance) => void) | undefined = undefined
   ) {
     // destroy any existing popper first
@@ -114,9 +115,10 @@ export class PopperManager {
       // add EventListener for checking if click was done outside of editor
       // only if popper has class 'context-menu'
       if (
-        contents.classList.contains('context-menu') ||
-        contents.classList.contains('language') ||
-        contents.classList.contains('section-category')
+        (contents.classList.contains('context-menu') ||
+          contents.classList.contains('language') ||
+          contents.classList.contains('section-category')) &&
+        autoCloseOnOutsideClick
       ) {
         window.addEventListener('click', this.handleDocumentClick)
       }

package/src/lib/position-menu.ts

@@ -261,6 +261,7 @@ export class HorizontalPositionMenu {
           false,
           [],
           true,
+          true,
           () => {
             this.menuOpen = false
           }

package/src/lib/view.ts

@@ -27,6 +27,7 @@ import * as utils from 'prosemirror-utils'
 
 import { isHidden } from './track-changes-utils'
 import { sanitizeAttrsChange } from '@manuscripts/track-changes-plugin'
+import { EditorView } from 'prosemirror-view'
 
 const metaNodeTypes = [
   schema.nodes.bibliography_item,
@@ -163,3 +164,19 @@ export const saveBibliographyItem = (
 
   insertBibliographyItems(view, attrs)
 }
+
+export const isSelectionInsideNode = (
+  view: EditorView,
+  node: ManuscriptNode,
+  pos: number
+) => {
+  const { from, to, empty } = view.state.selection
+  const end = pos + node.nodeSize
+
+  // Treat a cursor as "inside" only when it is strictly within the node range.
+  if (empty) {
+    return from > pos && from < end
+  }
+
+  return from >= pos && to <= end
+}

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.17.0';
+export const VERSION = '3.17.1';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/footnote.ts

@@ -19,6 +19,7 @@ import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
 import { FootnoteNode, ManuscriptNode, schema } from '@manuscripts/transform'
 
 import isEqual from 'lodash/isEqual'
+import xor from 'lodash/xor'
 import { NodeSelection, Transaction } from 'prosemirror-state'
 import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
 
@@ -33,10 +34,13 @@ import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 import ReactSubView from './ReactSubView'
 import { handleEnterKey } from '../lib/navigation-utils'
+import { isSelectionInsideNode } from '../lib/view'
 
 export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
   dialog: HTMLElement
   contextMenu: HTMLDivElement
+  isMenuShown: boolean = false
+  previousActionsLabels: string[] = []
 
   public initialise = () => {
     this.dom = document.createElement('div')
@@ -44,10 +48,24 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     this.dom.tabIndex = 0
     this.contentDOM = document.createElement('div')
     this.contentDOM.classList.add('footnote-text')
-    this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false))
+    if (!this.view.editable) {
+      // when the editor is in the viewing mode we can't depend on the selection to show context-menu so we use mousedown
+      // as in that case will not have the same listener from prosemirror-view to interfere with it
+      const actions = this.getContextMenuActions()
+      if (actions.length > 0) {
+        this.dom.addEventListener('mousedown', () =>
+          this.showContextMenu(actions, true)
+        )
+      }
+    }
     this.dom.addEventListener(
       'keydown',
-      handleEnterKey((e) => this.handleClick(e, true))
+      handleEnterKey(() => {
+        const actions = this.getContextMenuActions()
+        if (actions.length > 0) {
+          this.showContextMenu(actions, true)
+        }
+      })
     )
     this.updateContents()
   }
@@ -73,6 +91,29 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     this.dom.innerHTML = ''
     this.dom.appendChild(marker)
     this.contentDOM && this.dom.appendChild(this.contentDOM)
+
+    const selectionInsideNode = isSelectionInsideNode(
+      this.view,
+      this.node,
+      this.getPos()
+    )
+
+    const actions = this.getContextMenuActions()
+    const hasActions = actions.length > 0
+    const currentLabels = actions.map(({ label }) => label)
+    const changedLabels = xor(currentLabels, this.previousActionsLabels)
+    if (
+      selectionInsideNode &&
+      hasActions &&
+      (!this.isMenuShown || changedLabels.length > 0)
+    ) {
+      this.showContextMenu(actions, false)
+      this.previousActionsLabels = actions.map(({ label }) => label)
+    } else if ((!hasActions || !selectionInsideNode) && this.isMenuShown) {
+      this.props.popper.destroy()
+      this.isMenuShown = false
+      this.previousActionsLabels = []
+    }
   }
 
   getFootnoteState() {
@@ -81,55 +122,50 @@ export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
     return { id, fn }
   }
 
-  showContextMenu(element: HTMLElement, autoFocus: boolean) {
+  showContextMenu(actions: ContextMenuProps['actions'], autoFocus: boolean) {
+    this.isMenuShown = true
     this.props.popper.destroy()
-
-    const can = this.props.getCapabilities()
-    const { id, fn } = this.getFootnoteState()
-
-    const componentProps: ContextMenuProps = {
-      actions: [],
-    }
-    if (!fn?.unusedFootnoteIDs.has(id)) {
-      componentProps.actions.push({
-        label: 'Go to footnote Refernce',
-        action: () => this.handleMarkerClick(),
-        icon: 'Scroll',
-      })
-    }
-    if (can.editArticle && !isDeleted(this.node)) {
-      componentProps.actions.push({
-        label: 'Delete',
-        action: () => this.handleDeleteClick(),
-        icon: 'Delete',
-      })
-    }
-
     this.contextMenu = ReactSubView(
       this.props,
       ContextMenu,
-      componentProps,
+      { actions },
       this.node,
       this.getPos,
       this.view,
       ['context-menu', 'footnote-context-menu']
     )
     this.props.popper.show(
-      element,
+      this.dom,
       this.contextMenu,
       'right-start',
       true,
       [],
-      autoFocus
+      autoFocus,
+      false
     )
   }
 
-  handleClick = (event: Event, fromKeyboard = false) => {
-    const element = event.target as HTMLElement
-    const item = element.closest('.footnote')
-    if (item) {
-      this.showContextMenu(item as HTMLElement, fromKeyboard)
+  getContextMenuActions() {
+    const can = this.props.getCapabilities()
+    const { id, fn } = this.getFootnoteState()
+    const actions: ContextMenuProps['actions'] = []
+
+    if (!fn?.unusedFootnoteIDs.has(id)) {
+      actions.push({
+        label: 'Go to footnote Reference',
+        action: () => this.handleMarkerClick(),
+        icon: 'Scroll',
+      })
+    }
+    if (can.editArticle && !isDeleted(this.node)) {
+      actions.push({
+        label: 'Delete',
+        action: () => this.handleDeleteClick(),
+        icon: 'Delete',
+      })
     }
+
+    return actions
   }
 
   handleMarkerClick = (e?: Event) => {

package/src/views/general_table_footnote.ts

@@ -30,17 +30,30 @@ import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 import ReactSubView from './ReactSubView'
 import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { isSelectionInsideNode } from '../lib/view'
 
 export class GeneralTableFootnoteView extends BaseNodeView<
   Trackable<GeneralTableFootnoteNode>
 > {
   dialog: HTMLElement
   contextMenu: HTMLDivElement
+  isMenuShown: boolean = false
 
   public initialise = () => {
     this.dom = document.createElement('div')
     this.dom.classList.add('footnote', 'general-table-footnote')
-    this.dom.addEventListener('mousedown', this.handleClick)
+    this.dom.tabIndex = 0
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => {
+        const can = this.props.getCapabilities()
+        const canShowMenu = can.editArticle && !isDeleted(this.node)
+        if (canShowMenu) {
+          this.showContextMenu(true)
+        }
+      })
+    )
     this.contentDOM = document.createElement('div')
     this.contentDOM.classList.add('footnote-text')
     this.updateContents()
@@ -50,32 +63,34 @@ export class GeneralTableFootnoteView extends BaseNodeView<
     super.updateContents()
     this.dom.innerHTML = ''
     this.contentDOM && this.dom.appendChild(this.contentDOM)
-  }
 
-  handleClick = (e: Event) => {
-    const element = e.target as HTMLElement
+    const selectionInsideNode = isSelectionInsideNode(
+      this.view,
+      this.node,
+      this.getPos()
+    )
     const can = this.props.getCapabilities()
-
-    if (can.editArticle) {
-      const item = element.closest('.general-table-footnote')
-      if (item) {
-        this.showContextMenu(item as HTMLElement)
-      }
+    const canShowMenu = can.editArticle && !isDeleted(this.node)
+    if (canShowMenu && selectionInsideNode && !this.isMenuShown) {
+      this.showContextMenu(false)
+    } else if ((!canShowMenu || !selectionInsideNode) && this.isMenuShown) {
+      this.props.popper.destroy()
+      this.isMenuShown = false
     }
   }
 
-  showContextMenu(element: HTMLElement) {
+  showContextMenu(autoFocus = false) {
+    this.isMenuShown = true
     this.props.popper.destroy()
 
     const componentProps: ContextMenuProps = {
-      actions: [],
-    }
-    if (!isDeleted(this.node)) {
-      componentProps.actions.push({
-        label: 'Delete',
-        action: () => this.handleDeleteClick(),
-        icon: 'Delete',
-      })
+      actions: [
+        {
+          label: 'Delete',
+          action: () => this.handleDeleteClick(),
+          icon: 'Delete',
+        },
+      ],
     }
 
     this.contextMenu = ReactSubView(
@@ -87,7 +102,15 @@ export class GeneralTableFootnoteView extends BaseNodeView<
       this.view,
       ['context-menu', 'footnote-context-menu']
     )
-    this.props.popper.show(element, this.contextMenu, 'right-start')
+    this.props.popper.show(
+      this.dom,
+      this.contextMenu,
+      'right-start',
+      false,
+      [],
+      autoFocus,
+      false
+    )
   }
 
   handleDeleteClick = () => {