@manuscripts/body-editor 3.16.3 → 3.17.1

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/cjs/views/image_element.js

@@ -18,8 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageElementView = exports.figurePositions = void 0;
-const style_guide_1 = require("@manuscripts/style-guide");
+exports.ImageElementView = void 0;
 const transform_1 = require("@manuscripts/transform");
 const icons_1 = require("../icons");
 const media_1 = require("../lib/media");
@@ -27,13 +26,6 @@ const navigation_utils_1 = require("../lib/navigation-utils");
 const position_menu_1 = require("../lib/position-menu");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
-const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-var figurePositions;
-(function (figurePositions) {
-    figurePositions["left"] = "half-left";
-    figurePositions["right"] = "half-right";
-    figurePositions["default"] = "";
-})(figurePositions || (exports.figurePositions = figurePositions = {}));
 class ImageElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -48,46 +40,6 @@ class ImageElementView extends block_view_1.default {
             this.setExtLink({ extLink: result.id });
             this.updateContents();
         };
-        this.showPositionMenu = () => {
-            const firstFigure = this.getFirstFigure();
-            if (!firstFigure) {
-                return;
-            }
-            this.props.popper.destroy();
-            const options = [
-                {
-                    label: 'Left',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.left);
-                    },
-                    icon: 'ImageLeft',
-                    selected: this.figurePosition === figurePositions.left,
-                },
-                {
-                    label: 'Default',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.default);
-                    },
-                    icon: 'ImageDefault',
-                    selected: !this.figurePosition,
-                },
-                {
-                    label: 'Right',
-                    action: () => {
-                        this.props.popper.destroy();
-                        this.updateAllFiguresPosition(figurePositions.right);
-                    },
-                    icon: 'ImageRight',
-                    selected: this.figurePosition === figurePositions.right,
-                },
-            ];
-            const componentProps = {
-                actions: options,
-            };
-            this.props.popper.show(this.positionMenuWrapper, (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'position-menu']), 'left', false);
-        };
         this.removeExtLink = () => {
             this.setExtLink({ extLink: '' });
         };
@@ -133,18 +85,6 @@ class ImageElementView extends block_view_1.default {
     addTools() {
         this.addPositionMenu();
     }
-    addPositionMenu() {
-        if (this.props.getCapabilities()?.editArticle) {
-            const existingMenu = this.container.querySelector('.position-menu');
-            if (existingMenu) {
-                existingMenu.remove();
-            }
-            const firstFigure = this.getFirstFigure();
-            this.figurePosition = firstFigure?.attrs.type || figurePositions.default;
-            this.positionMenuWrapper = (0, position_menu_1.createPositionMenuWrapper)(this.figurePosition, this.showPositionMenu, this.props);
-            this.container.prepend(this.positionMenuWrapper);
-        }
-    }
     getFirstFigure() {
         if (this.node.type === transform_1.schema.nodes.image_element) {
             const figureNode = this.node.firstChild;
@@ -182,6 +122,12 @@ class ImageElementView extends block_view_1.default {
         }
         return figures;
     }
+    addPositionMenu() {
+        if (!this.positionMenu) {
+            this.positionMenu = new position_menu_1.HorizontalPositionMenu(this, this.updateAllFiguresPosition.bind(this), this.container, () => this.getFirstFigure());
+        }
+        this.positionMenu.create();
+    }
     updateAllFiguresPosition(position) {
         const figures = this.getAllFigures();
         const { tr } = this.view.state;
@@ -192,7 +138,6 @@ class ImageElementView extends block_view_1.default {
             });
         });
         this.view.dispatch(tr);
-        this.figurePosition = position;
     }
     createDnDPlaceholder() {
         const can = this.props.getCapabilities();

package/dist/cjs/views/pullquote_element.js

@@ -27,6 +27,7 @@ const comments_1 = require("../plugins/comments");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const position_menu_1 = require("../lib/position-menu");
 class PullquoteElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -49,7 +50,10 @@ class PullquoteElementView extends block_view_1.default {
             this.contentDOM = document.createElement(this.elementType);
             this.contentDOM.className = 'block';
             this.contentDOM.classList.add('pullquote');
-            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);
             this.dom.addEventListener('click', this.handleClick);
         };
         this.actionGutterButtons = () => {
@@ -84,6 +88,24 @@ class PullquoteElementView extends block_view_1.default {
         tr.insert(this.getPos() + 1, transform_1.schema.nodes.quote_image.create());
         this.view.dispatch(tr);
     }
+    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.PullquoteElementView = PullquoteElementView;
 exports.default = (0, creators_1.createNodeOrElementView)(PullquoteElementView, 'aside');

package/dist/cjs/views/table_element.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableElementView = void 0;
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
+const position_menu_1 = require("../lib/position-menu");
 class TableElementView extends block_view_1.default {
     constructor() {
         super(...arguments);
@@ -29,9 +30,30 @@ class TableElementView extends block_view_1.default {
             this.contentDOM = document.createElement('figure');
             this.contentDOM.classList.add('block');
             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.TableElementView = TableElementView;
 exports.default = (0, creators_1.createNodeView)(TableElementView);

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

@@ -22,7 +22,7 @@ import { createElement } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { addNodeComment, createBlock, findPosBeforeFirstSubsection, insertGeneralTableFootnote, insertInlineTableFootnote, } from '../commands';
 import { PopperManager } from './popper';
-import { createPositionOptions } from './position-menu';
+import { HorizontalPositionMenu } from './position-menu';
 import { templateAllows } from './template';
 import { getMatchingChild, isChildOfNodeTypes, isSelectionInNode, } from './utils';
 const popper = new PopperManager();
@@ -32,8 +32,15 @@ const readonlyTypes = [
     schema.nodes.bibliography_section,
     schema.nodes.footnotes_section,
 ];
-const isBoxElementSectionTitle = ($pos, node) => isSectionTitleNode(node) &&
-    $pos.node($pos.depth - 1).type === schema.nodes.box_element;
+const getBoxElementOfSectionTitle = ($pos, node) => {
+    if (isSectionTitleNode(node)) {
+        const parent = $pos.node($pos.depth - 1);
+        if (parent.type === schema.nodes.box_element) {
+            return parent;
+        }
+    }
+    return null;
+};
 export const sectionLevel = (depth) => {
     switch (depth) {
         case 1:
@@ -153,18 +160,28 @@ export class ContextMenu {
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
-            const isBox = isBoxElementSectionTitle($pos, this.node);
-            const type = isBox ? schema.nodes.box_element : this.node.type;
-            if (type === schema.nodes.figure_element ||
-                type === schema.nodes.image_element) {
+            const boxParent = getBoxElementOfSectionTitle($pos, this.node);
+            const type = boxParent ? schema.nodes.box_element : this.node.type;
+            const positionableTypes = [
+                schema.nodes.figure_element,
+                schema.nodes.image_element,
+                schema.nodes.box_element,
+                schema.nodes.pullquote_element,
+                schema.nodes.table_element,
+            ];
+            let nodeBase = this.node;
+            if (positionableTypes.includes(type)) {
                 const figure = getMatchingChild(this.node, (node) => node.type === schema.nodes.figure);
                 if (figure) {
-                    const attrType = figure.attrs.type;
-                    const submenuOptions = createPositionOptions(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 = HorizontalPositionMenu.createPositionOptions(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 === schema.nodes.list) {
                 menu.appendChild(this.createMenuSection((section) => {

package/dist/es/lib/popper.js

@@ -19,9 +19,10 @@ export 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';
@@ -81,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);
             }
         });
@@ -91,6 +93,8 @@ export 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) {
@@ -108,6 +112,17 @@ export 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/es/lib/position-menu.js

@@ -15,100 +15,182 @@
  */
 import { ContextMenu } from '@manuscripts/style-guide';
 import { imageDefaultIcon, imageLeftIcon, imageRightIcon } from '../icons';
-import { figurePositions } from '../views/image_element';
-import ReactSubView from '../views/ReactSubView';
+import { createSubViewAsync } from '../views/ReactSubView';
 import { handleEnterKey } from './navigation-utils';
 import { updateNodeAttrs } from './view';
-export const createPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    const createAction = (position) => () => {
-        onComplete?.();
-        updateNodeAttrs(view, nodeType, {
-            ...node.attrs,
-            type: position,
-        });
-    };
-    return [
-        {
-            title: 'Left',
-            action: createAction(figurePositions.left),
-            IconComponent: imageLeftIcon,
-            iconName: 'ImageLeft',
-            selected: currentPosition === figurePositions.left,
-        },
-        {
-            title: 'Center',
-            action: createAction(figurePositions.default),
-            IconComponent: imageDefaultIcon,
-            iconName: 'ImageDefault',
-            selected: !currentPosition,
-        },
-        {
-            title: 'Right',
-            action: createAction(figurePositions.right),
-            IconComponent: imageRightIcon,
-            iconName: 'ImageRight',
-            selected: currentPosition === figurePositions.right,
-        },
-    ];
-};
-export const createPopperMenuPositionOptions = (nodeType, node, currentPosition, view, onComplete) => {
-    return createPositionOptions(nodeType, node, currentPosition, view, onComplete).map((option) => ({
-        label: option.title,
-        action: option.action,
-        icon: option.iconName,
-        selected: option.selected,
-    }));
-};
-export const showPositionMenu = (nodeType, node, currentPosition, positionMenuWrapper, view, getPos, props) => {
-    props.popper.destroy();
-    const options = createPopperMenuPositionOptions(nodeType, node, currentPosition, view, () => props.popper.destroy());
-    const componentProps = {
-        actions: options,
-    };
-    props.popper.show(positionMenuWrapper, ReactSubView(props, ContextMenu, componentProps, node, getPos, view, [
-        'context-menu',
-        'position-menu',
-    ]), 'left', false);
-};
-export const setElementPositionAlignment = (element, position) => {
-    switch (position) {
-        case figurePositions.left:
-            element.setAttribute('data-alignment', 'left');
-            break;
-        case figurePositions.right:
-            element.setAttribute('data-alignment', 'right');
-            break;
-        default:
-            element.removeAttribute('data-alignment');
-            break;
+export var HorizontalPositions;
+(function (HorizontalPositions) {
+    HorizontalPositions["left"] = "half-left";
+    HorizontalPositions["right"] = "half-right";
+    HorizontalPositions["default"] = "";
+})(HorizontalPositions || (HorizontalPositions = {}));
+export 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?.();
+            updateNodeAttrs(view, nodeType, {
+                ...node.attrs,
+                type: position,
+            });
+        };
+        return [
+            {
+                title: 'Left',
+                action: createAction(HorizontalPositions.left),
+                IconComponent: imageLeftIcon,
+                iconName: 'ImageLeft',
+                selected: currentPosition === HorizontalPositions.left,
+            },
+            {
+                title: 'Default',
+                action: createAction(HorizontalPositions.default),
+                IconComponent: imageDefaultIcon,
+                iconName: 'ImageDefault',
+                selected: !currentPosition || currentPosition === HorizontalPositions.default,
+            },
+            {
+                title: 'Right',
+                action: createAction(HorizontalPositions.right),
+                IconComponent: 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,
+        }));
     }
-};
-export 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 figurePositions.left:
-            icon = imageLeftIcon;
-            break;
-        case figurePositions.right:
-            icon = imageRightIcon;
-            break;
-        default:
-            icon = 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 = imageLeftIcon;
+                break;
+            case HorizontalPositions.right:
+                icon = imageRightIcon;
+                break;
+            default:
+                icon = imageDefaultIcon;
+                break;
+        }
+        if (icon) {
+            positionMenuButton.innerHTML = icon;
+        }
+        const onClick = () => {
+            this.showPositionMenu();
+        };
+        if (can.editArticle) {
+            positionMenuButton.tabIndex = -1;
+            positionMenuButton.addEventListener('click', onClick);
+            positionMenuButton.addEventListener('keydown', 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));
+        createSubViewAsync(p.props, 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', 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;
-};
+}