@manuscripts/body-editor 3.16.2 → 3.17.0

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, onDestroy = undefined) {
         this.destroy();
         this.triggerElement = target;
+        this.destructionListener = onDestroy;
         window.requestAnimationFrame(() => {
             const container = document.createElement('div');
             container.className = 'popper';
@@ -94,6 +95,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 +114,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, () => {
+                    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/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.2';
+exports.VERSION = '3.17.0';
 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/equation.js

@@ -19,6 +19,7 @@ exports.EquationView = void 0;
 const math_1 = require("../lib/math");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
+const navigation_utils_1 = require("../lib/navigation-utils");
 class EquationView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
@@ -29,6 +30,7 @@ class EquationView extends base_node_view_1.BaseNodeView {
         this.createDOM = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('equation');
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.selectNode()));
         };
         this.ignoreMutation = () => true;
     }

package/dist/cjs/views/equation_editable.js

@@ -70,6 +70,8 @@ class EquationEditableView extends equation_1.EquationView {
                     Esc: () => {
                         this.props.popper.destroy();
                         this.view.focus();
+                        const tabbableView = this.dom.querySelector('[tabindex="0"]');
+                        tabbableView?.focus();
                     },
                 },
             });

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/inline_equation.js

@@ -19,6 +19,7 @@ exports.InlineEquationView = void 0;
 const math_1 = require("../lib/math");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
+const navigation_utils_1 = require("../lib/navigation-utils");
 class InlineEquationView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
@@ -27,6 +28,7 @@ class InlineEquationView extends base_node_view_1.BaseNodeView {
     initialise() {
         this.createDOM();
         this.updateContents();
+        this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.selectNode()));
     }
     updateContents() {
         super.updateContents();

package/dist/cjs/views/inline_equation_editable.js

@@ -70,6 +70,8 @@ class InlineEquationEditableView extends inline_equation_1.InlineEquationView {
                     Esc: () => {
                         this.props.popper.destroy();
                         this.view.focus();
+                        const tabbableView = this.dom.querySelector('[tabindex="0"]');
+                        tabbableView?.focus();
                     },
                 },
             });