@manuscripts/body-editor 3.16.3 → 3.17.1

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

@@ -35,8 +35,15 @@ const readonlyTypes = [
     transform_1.schema.nodes.bibliography_section,
     transform_1.schema.nodes.footnotes_section,
 ];
-const isBoxElementSectionTitle = ($pos, node) => (0, transform_1.isSectionTitleNode)(node) &&
-    $pos.node($pos.depth - 1).type === transform_1.schema.nodes.box_element;
+const getBoxElementOfSectionTitle = ($pos, node) => {
+    if ((0, transform_1.isSectionTitleNode)(node)) {
+        const parent = $pos.node($pos.depth - 1);
+        if (parent.type === transform_1.schema.nodes.box_element) {
+            return parent;
+        }
+    }
+    return null;
+};
 const sectionLevel = (depth) => {
     switch (depth) {
         case 1:
@@ -157,18 +164,28 @@ class ContextMenu {
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
-            const isBox = isBoxElementSectionTitle($pos, this.node);
-            const type = isBox ? transform_1.schema.nodes.box_element : this.node.type;
-            if (type === transform_1.schema.nodes.figure_element ||
-                type === transform_1.schema.nodes.image_element) {
+            const boxParent = getBoxElementOfSectionTitle($pos, this.node);
+            const type = boxParent ? transform_1.schema.nodes.box_element : this.node.type;
+            const positionableTypes = [
+                transform_1.schema.nodes.figure_element,
+                transform_1.schema.nodes.image_element,
+                transform_1.schema.nodes.box_element,
+                transform_1.schema.nodes.pullquote_element,
+                transform_1.schema.nodes.table_element,
+            ];
+            let nodeBase = this.node;
+            if (positionableTypes.includes(type)) {
                 const figure = (0, utils_1.getMatchingChild)(this.node, (node) => node.type === transform_1.schema.nodes.figure);
                 if (figure) {
-                    const attrType = figure.attrs.type;
-                    const submenuOptions = (0, position_menu_1.createPositionOptions)(transform_1.schema.nodes.figure, figure, attrType, this.view, () => popper.destroy());
-                    const submenuLabel = 'Position';
-                    const submenu = this.createSubmenu(submenuLabel, submenuOptions);
-                    menu.appendChild(submenu);
+                    nodeBase = figure;
+                }
+                if (boxParent) {
+                    nodeBase = boxParent;
                 }
+                const submenuOptions = position_menu_1.HorizontalPositionMenu.createPositionOptions(transform_1.schema.nodes[nodeBase.type.name], nodeBase, nodeBase.attrs.type, this.view, () => popper.destroy());
+                const submenuLabel = 'Position';
+                const submenu = this.createSubmenu(submenuLabel, submenuOptions);
+                menu.appendChild(submenu);
             }
             if (type === transform_1.schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {

package/dist/cjs/lib/popper.js

@@ -22,9 +22,10 @@ class PopperManager {
     constructor() {
         this.isActive = () => !!this.activePopper;
     }
-    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true) {
+    show(target, contents, placement = 'bottom', showArrow = true, modifiers = [], autoFocus = true, autoCloseOnOutsideClick = true, onDestroy = undefined) {
         this.destroy();
         this.triggerElement = target;
+        this.destructionListener = onDestroy;
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
@@ -84,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);
             }
         });
@@ -94,6 +96,8 @@ class PopperManager {
     destroy() {
         if (this.activePopper) {
             this.removeContainerClass(this.activePopper.state.elements.reference);
+            this.destructionListener?.(this.activePopper);
+            this.destructionListener = undefined;
             this.activePopper.destroy();
             this.activePopper.state.elements.popper.remove();
             if (this.handleDocumentClick) {
@@ -111,6 +115,17 @@ class PopperManager {
             this.activePopper.update();
         }
     }
+    replaceContent(newContent) {
+        if (this.container && this.activePopper) {
+            const arrow = this.container.querySelector('.popper-arrow');
+            this.container.innerHTML = '';
+            if (arrow) {
+                this.container.appendChild(arrow);
+            }
+            this.container.appendChild(newContent);
+            this.activePopper.update();
+        }
+    }
     focusInput(container, autoFocus = true) {
         const input = container.querySelector('input');
         if (input) {

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

@@ -14,112 +14,187 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPositionMenuWrapper = exports.setElementPositionAlignment = exports.showPositionMenu = exports.createPopperMenuPositionOptions = exports.createPositionOptions = void 0;
+exports.HorizontalPositionMenu = exports.HorizontalPositions = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const icons_1 = require("../icons");
-const image_element_1 = require("../views/image_element");
-const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
+const ReactSubView_1 = require("../views/ReactSubView");
 const navigation_utils_1 = require("./navigation-utils");
 const view_1 = require("./view");
-const createPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    const createAction = (position) => () => {
-        onComplete?.();
-        (0, view_1.updateNodeAttrs)(view, nodeType, {
-            ...node.attrs,
-            type: position,
-        });
-    };
-    return [
-        {
-            title: 'Left',
-            action: createAction(image_element_1.figurePositions.left),
-            IconComponent: icons_1.imageLeftIcon,
-            iconName: 'ImageLeft',
-            selected: currentPosition === image_element_1.figurePositions.left,
-        },
-        {
-            title: 'Center',
-            action: createAction(image_element_1.figurePositions.default),
-            IconComponent: icons_1.imageDefaultIcon,
-            iconName: 'ImageDefault',
-            selected: !currentPosition,
-        },
-        {
-            title: 'Right',
-            action: createAction(image_element_1.figurePositions.right),
-            IconComponent: icons_1.imageRightIcon,
-            iconName: 'ImageRight',
-            selected: currentPosition === image_element_1.figurePositions.right,
-        },
-    ];
-};
-exports.createPositionOptions = createPositionOptions;
-const createPopperMenuPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    return (0, exports.createPositionOptions)(nodeType, node, currentPosition, view, onComplete).map((option) => ({
-        label: option.title,
-        action: option.action,
-        icon: option.iconName,
-        selected: option.selected,
-    }));
-};
-exports.createPopperMenuPositionOptions = createPopperMenuPositionOptions;
-const showPositionMenu = (nodeType, node, currentPosition, positionMenuWrapper, view, getPos, props) => {
-    props.popper.destroy();
-    const options = (0, exports.createPopperMenuPositionOptions)(nodeType, node, currentPosition, view, () => props.popper.destroy());
-    const componentProps = {
-        actions: options,
-    };
-    props.popper.show(positionMenuWrapper, (0, ReactSubView_1.default)(props, style_guide_1.ContextMenu, componentProps, node, getPos, view, [
-        'context-menu',
-        'position-menu',
-    ]), 'left', false);
-};
-exports.showPositionMenu = showPositionMenu;
-const setElementPositionAlignment = (element, position) => {
-    switch (position) {
-        case image_element_1.figurePositions.left:
-            element.setAttribute('data-alignment', 'left');
-            break;
-        case image_element_1.figurePositions.right:
-            element.setAttribute('data-alignment', 'right');
-            break;
-        default:
-            element.removeAttribute('data-alignment');
-            break;
+var HorizontalPositions;
+(function (HorizontalPositions) {
+    HorizontalPositions["left"] = "half-left";
+    HorizontalPositions["right"] = "half-right";
+    HorizontalPositions["default"] = "";
+})(HorizontalPositions || (exports.HorizontalPositions = HorizontalPositions = {}));
+class HorizontalPositionMenu {
+    constructor(parent, onChange, location, getPositionSource) {
+        this.menuOpen = false;
+        this.posMenuSelector = 'position-menu';
+        this.buttonClass = 'position-menu-button';
+        const preSource = getPositionSource?.() || parent.node;
+        if (typeof preSource.attrs.type === 'undefined') {
+            console.error("This node doesn't support horizontal alignment");
+            return;
+        }
+        this.getPositionSource = getPositionSource;
+        this.location = location || parent.dom;
+        this.onChange = onChange.bind(parent);
+        this.parent = parent;
+    }
+    static createPositionOptions(nodeType, node, currentPosition, view, onComplete) {
+        const createAction = (position) => () => {
+            onComplete?.();
+            (0, view_1.updateNodeAttrs)(view, nodeType, {
+                ...node.attrs,
+                type: position,
+            });
+        };
+        return [
+            {
+                title: 'Left',
+                action: createAction(HorizontalPositions.left),
+                IconComponent: icons_1.imageLeftIcon,
+                iconName: 'ImageLeft',
+                selected: currentPosition === HorizontalPositions.left,
+            },
+            {
+                title: 'Default',
+                action: createAction(HorizontalPositions.default),
+                IconComponent: icons_1.imageDefaultIcon,
+                iconName: 'ImageDefault',
+                selected: !currentPosition || currentPosition === HorizontalPositions.default,
+            },
+            {
+                title: 'Right',
+                action: createAction(HorizontalPositions.right),
+                IconComponent: icons_1.imageRightIcon,
+                iconName: 'ImageRight',
+                selected: currentPosition === HorizontalPositions.right,
+            },
+        ];
+    }
+    createPopperMenuPositionOptions(nodeType, node, currentPosition, view, onComplete) {
+        return HorizontalPositionMenu.createPositionOptions(nodeType, node, currentPosition, view, onComplete).map((option) => ({
+            label: option.title,
+            action: option.action,
+            icon: option.iconName,
+            selected: option.selected,
+        }));
     }
-};
-exports.setElementPositionAlignment = setElementPositionAlignment;
-const createPositionMenuWrapper = (currentPosition, onClick, props) => {
-    const can = props.getCapabilities();
-    const positionMenuWrapper = document.createElement('div');
-    positionMenuWrapper.classList.add('position-menu');
-    const positionMenuButton = document.createElement('div');
-    positionMenuButton.classList.add('position-menu-button');
-    let icon;
-    switch (currentPosition) {
-        case image_element_1.figurePositions.left:
-            icon = icons_1.imageLeftIcon;
-            break;
-        case image_element_1.figurePositions.right:
-            icon = icons_1.imageRightIcon;
-            break;
-        default:
-            icon = icons_1.imageDefaultIcon;
-            break;
+    createPositionMenuWrapper(currentPosition, props) {
+        const can = props.getCapabilities();
+        const positionMenuWrapper = document.createElement('div');
+        positionMenuWrapper.classList.add(this.posMenuSelector);
+        const positionMenuButton = document.createElement('div');
+        positionMenuButton.classList.add(this.buttonClass);
+        let icon;
+        switch (currentPosition) {
+            case HorizontalPositions.left:
+                icon = icons_1.imageLeftIcon;
+                break;
+            case HorizontalPositions.right:
+                icon = icons_1.imageRightIcon;
+                break;
+            default:
+                icon = icons_1.imageDefaultIcon;
+                break;
+        }
+        if (icon) {
+            positionMenuButton.innerHTML = icon;
+        }
+        const onClick = () => {
+            this.showPositionMenu();
+        };
+        if (can.editArticle) {
+            positionMenuButton.tabIndex = -1;
+            positionMenuButton.addEventListener('click', onClick);
+            positionMenuButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(onClick));
+        }
+        if (this.positionMenuWrapper) {
+            const button = this.positionMenuWrapper.querySelector('.' + this.buttonClass);
+            if (button) {
+                this.positionMenuWrapper.removeChild(button);
+                this.positionMenuWrapper.appendChild(positionMenuButton);
+            }
+        }
+        else {
+            positionMenuWrapper.appendChild(positionMenuButton);
+            this.positionMenuWrapper = positionMenuWrapper;
+            this.location.prepend(this.positionMenuWrapper);
+        }
     }
-    if (icon) {
-        positionMenuButton.innerHTML = icon;
+    getHorizontalPositionOptions(current, onPick, destroy) {
+        const componentProps = {
+            actions: [
+                {
+                    label: 'Left',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.left);
+                    },
+                    icon: 'ImageLeft',
+                    selected: current === HorizontalPositions.left,
+                },
+                {
+                    label: 'Default',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.default);
+                    },
+                    icon: 'ImageDefault',
+                    selected: !current,
+                },
+                {
+                    label: 'Right',
+                    action: () => {
+                        destroy();
+                        this.menuOpen = false;
+                        onPick(HorizontalPositions.right);
+                    },
+                    icon: 'ImageRight',
+                    selected: current === HorizontalPositions.right,
+                },
+            ],
+        };
+        return componentProps;
+    }
+    showPositionMenu(force = false) {
+        const p = this.parent;
+        if (this.menuOpen && !force) {
+            p.props.popper.destroy();
+            this.menuOpen = false;
+            return;
+        }
+        const posSource = this.getPositionSource
+            ? this.getPositionSource()
+            : this.parent.node;
+        const componentProps = this.getHorizontalPositionOptions(posSource?.attrs.type || HorizontalPositions.default, this.onChange, p.props.popper.destroy.bind(p.props.popper));
+        (0, ReactSubView_1.createSubViewAsync)(p.props, style_guide_1.ContextMenu, componentProps, p.node, p.getPos, p.view, ['context-menu', this.posMenuSelector]).then((content) => {
+            if (this.menuOpen && p.props.popper.isActive()) {
+                p.props.popper.replaceContent(content);
+            }
+            else {
+                p.props.popper.show(this.positionMenuWrapper, content, 'left', false, [], true, true, () => {
+                    this.menuOpen = false;
+                });
+                this.menuOpen = true;
+            }
+        });
     }
-    if (can.editArticle) {
-        positionMenuButton.tabIndex = 0;
-        positionMenuButton.addEventListener('click', onClick);
-        positionMenuButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(onClick));
+    create() {
+        if (!this.parent) {
+            return;
+        }
+        const p = this.parent;
+        if (p.props.getCapabilities()?.editArticle) {
+            const posSource = this.getPositionSource
+                ? this.getPositionSource()
+                : this.parent.node;
+            this.createPositionMenuWrapper(posSource?.attrs.type || HorizontalPositions.default, p.props);
+        }
     }
-    positionMenuWrapper.appendChild(positionMenuButton);
-    return positionMenuWrapper;
-};
-exports.createPositionMenuWrapper = createPositionMenuWrapper;
+}
+exports.HorizontalPositionMenu = HorizontalPositionMenu;

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/plugins/detect-inconsistency/index.js

@@ -25,10 +25,12 @@ exports.default = (props) => {
         key: exports.detectInconsistencyKey,
         state: {
             init: (_, state) => (0, detect_inconsistency_utils_1.buildPluginState)(state, props, false),
-            apply: (tr, value, newState) => {
-                const showDecorations = tr.getMeta(exports.detectInconsistencyKey) !== undefined
-                    ? tr.getMeta(exports.detectInconsistencyKey)
-                    : value.showDecorations;
+            apply: (tr, value, _, newState) => {
+                const metaValue = tr.getMeta(exports.detectInconsistencyKey);
+                const showDecorations = metaValue !== undefined ? metaValue : value.showDecorations;
+                if (!tr.docChanged && metaValue === undefined) {
+                    return value;
+                }
                 return (0, detect_inconsistency_utils_1.buildPluginState)(newState, props, showDecorations);
             },
         },

package/dist/cjs/plugins/persist.js

@@ -29,6 +29,9 @@ exports.default = () => {
                 }
                 ids.add(id);
             });
+            if (!tr.steps.length) {
+                return null;
+            }
             (0, track_changes_plugin_1.skipTracking)(tr);
             tr.setMeta('origin', 'persist');
             return tr;

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.16.3';
+exports.VERSION = '3.17.1';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/box_element.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxElementView = void 0;
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const position_menu_1 = require("../lib/position-menu");
 class BoxElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -29,9 +30,30 @@ class BoxElementView extends block_view_1.default {
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block box-element';
             this.contentDOM.setAttribute('id', this.node.attrs.id);
-            this.dom.appendChild(this.contentDOM);
+            this.container = document.createElement('div');
+            this.container.classList.add('container');
+            this.container.appendChild(this.contentDOM);
+            this.dom.appendChild(this.container);
         };
     }
+    updateContents() {
+        super.updateContents();
+        this.addTools();
+    }
+    addTools() {
+        this.addPositionMenu();
+    }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new position_menu_1.HorizontalPositionMenu(this, this.updateHorizontalPosition, this.container);
+        }
+        this.positionMenu.create();
+    }
+    updateHorizontalPosition(horizontalPosition) {
+        const tr = this.view.state.tr;
+        tr.setNodeAttribute(this.getPos(), 'type', horizontalPosition);
+        this.view.dispatch(tr);
+    }
 }
 exports.BoxElementView = BoxElementView;
 exports.default = (0, creators_1.createNodeView)(BoxElementView);

package/dist/cjs/views/caption_title.js

@@ -27,7 +27,7 @@ class CaptionTitleView extends base_node_view_1.BaseNodeView {
         };
     }
     createDOM() {
-        this.dom = document.createElement('label');
+        this.dom = document.createElement('div');
         this.dom.className = 'caption-title placeholder';
         this.contentDOM = this.dom;
     }

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;