@manuscripts/body-editor 3.9.10 → 3.9.12

package/dist/cjs/commands.js

@@ -38,6 +38,7 @@ const comments_2 = require("./plugins/comments");
 const editor_props_1 = require("./plugins/editor-props");
 const search_replace_1 = require("./plugins/search-replace");
 const autocompletion_1 = require("./plugins/section_title/autocompletion");
+const persistent_cursor_1 = require("./plugins/persistent-cursor");
 const addToStart = (state, dispatch) => {
     const { selection } = state;
     const props = (0, editor_props_1.getEditorProps)(state);
@@ -1358,10 +1359,12 @@ const ignoreEnterInSubtitles = (state) => {
     return false;
 };
 exports.ignoreEnterInSubtitles = ignoreEnterInSubtitles;
-const exitEditorToContainer = () => {
+const exitEditorToContainer = (state, dispatch, view) => {
     const editorContainer = document.getElementById('editor');
-    if (editorContainer) {
+    if (editorContainer && dispatch && view) {
         editorContainer.focus();
+        const tr = view.state.tr.setMeta(persistent_cursor_1.persistentCursor, { on: true });
+        view.dispatch(tr);
         return true;
     }
     return false;

package/dist/cjs/components/keywords/AddKeywordInline.js

@@ -67,6 +67,12 @@ const NewKeywordButton = styled_components_1.default.button `
   margin: 0;
   padding: 0;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: 4px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+    border-radius: 3px;
+  }
 `;
 const CreateKeywordButtonWrapper = styled_components_1.default.div `
   position: absolute;
@@ -196,8 +202,13 @@ const AddKeywordInline = ({ viewProps, getUpdatedNode }) => {
         },
     };
     return (react_1.default.createElement(AddNewKeyword, { ref: nodeRef },
-        !isAddingNewKeyword && (react_1.default.createElement(NewKeywordButton, { onClick: () => {
+        !isAddingNewKeyword && (react_1.default.createElement(NewKeywordButton, { tabIndex: -1, className: "keyword-add", onClick: () => {
                 setIsAddingNewKeyword(true);
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    setIsAddingNewKeyword(true);
+                }
             } }, "New keyword...")),
         isAddingNewKeyword && react_1.default.createElement(KeywordInput, null),
         isAddingNewKeyword && isValidNewKeyword() && (react_1.default.createElement(CreateKeywordButtonElement, null)),

package/dist/cjs/components/views/FigureDropdown.js

@@ -42,6 +42,40 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const files_1 = require("../../lib/files");
 const get_media_type_1 = require("../../lib/get-media-type");
+const navigation_utils_1 = require("../../lib/navigation-utils");
+function useDropdownKeyboardNav(isOpen, containerRef, onEscape, onArrowLeft) {
+    (0, react_1.useEffect)(() => {
+        const container = containerRef.current;
+        if (!isOpen || !container) {
+            return;
+        }
+        const buttons = Array.from(container.querySelectorAll('button:not([disabled])'));
+        if (buttons.length === 0) {
+            return;
+        }
+        const removeKeydownListener = (0, navigation_utils_1.createKeyboardInteraction)({
+            container: container,
+            navigation: {
+                getItems: () => Array.from(container.querySelectorAll('button:not([disabled])')),
+                arrowKeys: {
+                    forward: 'ArrowDown',
+                    backward: 'ArrowUp',
+                },
+            },
+            additionalKeys: {
+                Enter: (e) => e.target.click(),
+                Escape: () => onEscape(),
+                ...(onArrowLeft ? { ArrowLeft: () => onArrowLeft() } : {}),
+            },
+        });
+        window.requestAnimationFrame(() => {
+            buttons[0]?.focus();
+        });
+        return () => {
+            removeKeydownListener();
+        };
+    }, [isOpen, containerRef, onEscape, onArrowLeft]);
+}
 function getSupplements(getFiles, getDoc, groupFiles, isEmbed) {
     return groupFiles(getDoc(), getFiles())
         .supplements.map((s) => s.file)
@@ -60,6 +94,7 @@ function getOtherFiles(getFiles, getDoc, groupFiles, isEmbed) {
 }
 const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach, onReplace, onReplaceEmbed, onDelete, isEmbed, hasSiblings, container, }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
+    const dropdownRef = (0, react_1.useRef)(null);
     const showDownload = onDownload && can.downloadFiles;
     const showUpload = onUpload && can.uploadFile;
     const showDetach = onDetach && can.detachFile;
@@ -83,12 +118,18 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
             container.classList.remove(activeClass);
         }
     }, [isOpen, container.classList]);
+    useDropdownKeyboardNav(isOpen, dropdownRef, toggleOpen);
     const isEmbedMode = !!onReplaceEmbed;
     const groupFiles = (0, files_1.memoGroupFiles)();
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
-        react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen },
+        react_1.default.createElement(OptionsButton, { className: 'options-button', onClick: toggleOpen, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    toggleOpen();
+                }
+            } },
             react_1.default.createElement(style_guide_1.DotsIcon, null)),
-        isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5 },
+        isOpen && (react_1.default.createElement(OptionsDropdownList, { direction: 'right', width: 128, top: 5, ref: dropdownRef },
             showReplace && isEmbedMode && (react_1.default.createElement(ListItemButton, { onClick: () => onReplaceEmbed && onReplaceEmbed() }, "Edit Link")),
             showReplace && !isEmbedMode && (react_1.default.createElement(NestedDropdown, { disabled: !showReplace, parentToggleOpen: toggleOpen, buttonText: replaceBtnText, moveLeft: true, list: react_1.default.createElement(react_1.default.Fragment, null,
                     getSupplements(getFiles, getDoc, groupFiles, isEmbed).map((file, index) => (react_1.default.createElement(ListItemButton, { key: file.id, id: index.toString(), onClick: () => onReplace && onReplace(file, true) },
@@ -107,11 +148,23 @@ const FigureOptions = ({ can, getDoc, getFiles, onDownload, onUpload, onDetach,
 exports.FigureOptions = FigureOptions;
 const NestedDropdown = ({ parentToggleOpen, buttonText, disabled, list, moveLeft }) => {
     const { isOpen, toggleOpen, wrapperRef } = (0, style_guide_1.useDropdown)();
+    const nestedListRef = (0, react_1.useRef)(null);
+    const handleArrowLeft = (0, react_1.useCallback)(() => {
+        toggleOpen();
+        const parentButton = wrapperRef.current?.querySelector('.nested-list-button');
+        parentButton?.focus();
+    }, [toggleOpen, wrapperRef]);
+    useDropdownKeyboardNav(isOpen, nestedListRef, handleArrowLeft, handleArrowLeft);
     return (react_1.default.createElement(DropdownWrapper, { ref: wrapperRef },
-        react_1.default.createElement(NestedListButton, { onClick: toggleOpen, disabled: disabled },
+        react_1.default.createElement(NestedListButton, { className: "nested-list-button", onClick: toggleOpen, disabled: disabled, onKeyDown: (e) => {
+                if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    toggleOpen();
+                }
+            } },
             react_1.default.createElement("div", null, buttonText),
             react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
-        isOpen && (react_1.default.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, onClick: (e) => {
+        isOpen && (react_1.default.createElement(NestedListDropdownList, { direction: 'right', moveLeft: moveLeft, width: 192, ref: nestedListRef, onClick: (e) => {
                 toggleOpen();
                 parentToggleOpen(e);
             } }, list))));
@@ -154,7 +207,8 @@ const ListItemButton = (0, styled_components_1.default)(style_guide_1.IconTextBu
   justify-content: space-between;
   align-items: center;
 
-  :hover {
+  :hover,
+  :focus-visible {
     background: #f2fbfc;
   }
 
@@ -173,7 +227,8 @@ const ListItemText = styled_components_1.default.div `
 const NestedListButton = (0, styled_components_1.default)(ListItemButton) `
   width: 100%;
   &:active,
-  &:focus {
+  &:focus,
+  &:focus-visible {
     background: #f2fbfc;
   }
   svg {
@@ -188,4 +243,8 @@ const UploadButton = (0, styled_components_1.default)(style_guide_1.IconTextButt
   border-top: 1px solid #f2f2f2;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   justify-content: flex-start;
+
+  &:focus-visible {
+    background: #f2fbfc;
+  }
 `;

package/dist/cjs/configs/ManuscriptsEditor.js

@@ -56,7 +56,7 @@ const createEditorView = (props, root, state, dispatch) => {
         handleScrollToSelection: helpers_1.handleScrollToSelectedTarget,
         transformCopied: copy_1.transformCopied,
         handleClickOn: (view, pos, node, nodePos, event) => {
-            props.onEditorClick(pos, node, nodePos, event);
+            props.onEditorClick(event);
             if (event?.target &&
                 event.target.classList.contains('table-context-menu-button')) {
                 return true;

package/dist/cjs/index.js

@@ -51,6 +51,7 @@ var popper_1 = require("./lib/popper");
 Object.defineProperty(exports, "PopperManager", { enumerable: true, get: function () { return popper_1.PopperManager; } });
 __exportStar(require("./toolbar"), exports);
 __exportStar(require("./lib/capabilities"), exports);
+__exportStar(require("./lib/navigation-utils"), exports);
 __exportStar(require("./lib/comments"), exports);
 __exportStar(require("./lib/files"), exports);
 __exportStar(require("./lib/footnotes"), exports);

package/dist/cjs/keys/misc.js

@@ -22,10 +22,11 @@ const prosemirror_inputrules_1 = require("prosemirror-inputrules");
 const prosemirror_tables_1 = require("prosemirror-tables");
 const commands_1 = require("../commands");
 const list_1 = require("./list");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const customKeymap = {
     Backspace: (0, prosemirror_commands_1.chainCommands)(prosemirror_inputrules_1.undoInputRule, commands_1.ignoreAtomBlockNodeBackward, commands_1.ignoreMetaNodeBackspaceCommand, (0, list_1.skipCommandTracking)(prosemirror_commands_1.joinBackward)),
     Delete: commands_1.ignoreAtomBlockNodeForward,
-    Tab: (0, prosemirror_tables_1.goToNextCell)(1),
+    Tab: (0, prosemirror_commands_1.chainCommands)((0, prosemirror_tables_1.goToNextCell)(1), navigation_utils_1.focusNearestElement),
     Escape: commands_1.exitEditorToContainer,
     'Mod-z': prosemirror_history_1.undo,
     'Mod-y': prosemirror_history_1.redo,

package/dist/cjs/keys/title.js

@@ -34,42 +34,6 @@ const insertParagraph = (dispatch, state, $anchor) => {
     tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos + 1)).scrollIntoView();
     dispatch(tr);
 };
-const enterNextBlock = (dispatch, state, $anchor, create) => {
-    const { schema: { nodes }, tr, } = state;
-    const pos = $anchor.after($anchor.depth - 1);
-    let selection = prosemirror_state_1.Selection.findFrom(tr.doc.resolve(pos), 1, true);
-    if (!selection && create) {
-        tr.insert(pos, nodes.paragraph.create());
-        selection = prosemirror_state_1.Selection.findFrom(tr.doc.resolve(pos), 1, true);
-    }
-    if (!selection) {
-        return false;
-    }
-    tr.setSelection(selection).scrollIntoView();
-    dispatch(tr);
-    return true;
-};
-const enterPreviousBlock = (dispatch, state, $anchor) => {
-    const { tr } = state;
-    const offset = $anchor.nodeBefore ? $anchor.nodeBefore.nodeSize : 0;
-    const $pos = tr.doc.resolve($anchor.pos - offset - 1);
-    const previous = prosemirror_state_1.Selection.findFrom($pos, -1, true);
-    if (!previous) {
-        return false;
-    }
-    tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, previous.from)).scrollIntoView();
-    dispatch(tr);
-    return true;
-};
-const exitBlock = (direction) => (state, dispatch) => {
-    const { selection: { $anchor }, } = state;
-    if (dispatch) {
-        return direction === 1
-            ? enterNextBlock(dispatch, state, $anchor)
-            : enterPreviousBlock(dispatch, state, $anchor);
-    }
-    return true;
-};
 const leaveTitle = (state, dispatch, view) => {
     const { selection } = state;
     if (!(0, commands_1.isTextSelection)(selection)) {
@@ -154,8 +118,6 @@ const keepCaption = (state) => {
 const titleKeymap = {
     Backspace: (0, prosemirror_commands_1.chainCommands)(protectTitles, exports.protectReferencesTitle, protectCaption),
     Enter: (0, prosemirror_commands_1.chainCommands)(commands_1.autoComplete, leaveTitle, leaveFigcaption),
-    Tab: exitBlock(1),
     Delete: (0, prosemirror_commands_1.chainCommands)(keepCaption, exports.protectReferencesTitle),
-    'Shift-Tab': exitBlock(-1),
 };
 exports.default = titleKeymap;

package/dist/cjs/lib/comments.js

@@ -35,6 +35,7 @@ const createCommentMarker = (tagName, key, count) => {
     element.id = getMarkerID(key);
     element.dataset.key = key;
     element.classList.add('comment-marker');
+    element.tabIndex = 0;
     if (count && count > 1) {
         element.dataset.count = String(count);
     }

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

@@ -19,6 +19,7 @@ exports.ContextMenu = exports.contextMenuBtnClass = exports.sectionLevel = void
 const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
+const navigation_utils_1 = require("./navigation-utils");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const react_1 = require("react");
 const server_1 = require("react-dom/server");
@@ -52,7 +53,9 @@ exports.contextMenuBtnClass = 'btn-context-menu';
 const contextSubmenuBtnClass = 'context-submenu-trigger';
 class ContextMenu {
     constructor(node, view, getPos) {
+        this.menuItems = [];
         this.showAddMenu = (target) => {
+            this.menuItems = [];
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -150,6 +153,7 @@ class ContextMenu {
             this.addPopperEventListeners();
         };
         this.showEditMenu = (target) => {
+            this.menuItems = [];
             const menu = document.createElement('div');
             menu.className = 'menu';
             const $pos = this.resolvePos();
@@ -160,7 +164,7 @@ class ContextMenu {
                 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);
+                    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);
@@ -278,16 +282,28 @@ class ContextMenu {
         this.createSubmenuTrigger = (contents) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
+            item.tabIndex = 0;
             const textNode = document.createTextNode(contents);
             item.innerHTML = (0, server_1.renderToStaticMarkup)((0, react_1.createElement)(style_guide_1.TriangleCollapsedIcon));
             item.prepend(textNode);
             item.classList.add(contextSubmenuBtnClass);
             item.addEventListener('mousedown', this.toggleSubmenu);
+            item.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)((e) => {
+                const target = e.target;
+                this.toggleSubmenu(e);
+                const submenuContent = target.nextElementSibling;
+                if (submenuContent?.classList.contains('show')) {
+                    const firstItem = submenuContent.querySelector('.menu-item');
+                    firstItem?.focus();
+                }
+            }));
+            this.menuItems.push(item);
             return item;
         };
         this.createMenuItem = (contents, handler, IconComponent = null, selected = false) => {
             const item = document.createElement('div');
             item.className = 'menu-item';
+            item.setAttribute('tabindex', '0');
             selected && item.classList.add('selected');
             if (IconComponent) {
                 if (typeof IconComponent === 'string') {
@@ -303,6 +319,8 @@ class ContextMenu {
                 event.preventDefault();
                 handler(event);
             });
+            item.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handler));
+            this.menuItems.push(item);
             return item;
         };
         this.createMenuSection = (createMenuItems, isSubmenu = false) => {
@@ -399,14 +417,62 @@ class ContextMenu {
                     popper.destroy();
                 });
             };
-            const keyListener = (event) => {
-                if (event.key === 'Escape') {
-                    window.removeEventListener('keydown', keyListener);
-                    popper.destroy();
-                }
-            };
             window.addEventListener('mousedown', mouseListener);
-            window.addEventListener('keydown', keyListener);
+            window.requestAnimationFrame(() => {
+                const popperContainer = popper.getContainer();
+                if (popperContainer) {
+                    (0, navigation_utils_1.createKeyboardInteraction)({
+                        container: popperContainer,
+                        navigation: {
+                            getItems: () => {
+                                const activeElement = document.activeElement;
+                                const openSubmenu = activeElement?.closest('.menu-section.menu.show');
+                                if (openSubmenu) {
+                                    return this.menuItems.filter((item) => openSubmenu.contains(item));
+                                }
+                                return this.menuItems.filter((item) => {
+                                    const menuSection = item.closest('.menu-section');
+                                    if (menuSection && menuSection.classList.contains('menu')) {
+                                        return menuSection.classList.contains('show');
+                                    }
+                                    return true;
+                                });
+                            },
+                            arrowKeys: {
+                                forward: 'ArrowDown',
+                                backward: 'ArrowUp',
+                            },
+                            getCurrentElement: () => document.activeElement,
+                        },
+                        additionalKeys: {
+                            ArrowRight: (event) => {
+                                const target = event.target;
+                                if (target.classList.contains(contextSubmenuBtnClass)) {
+                                    this.toggleSubmenu(event);
+                                    const submenuContent = target.nextElementSibling;
+                                    if (submenuContent?.classList.contains('show')) {
+                                        const firstItem = submenuContent.querySelector('.menu-item');
+                                        firstItem?.focus();
+                                    }
+                                }
+                            },
+                            ArrowLeft: (event) => {
+                                const target = event.target;
+                                const submenu = target.closest('.context-submenu');
+                                if (submenu) {
+                                    const trigger = submenu.querySelector(`.${contextSubmenuBtnClass}`);
+                                    if (trigger) {
+                                        const submenuContent = trigger.nextElementSibling;
+                                        submenuContent?.classList.toggle('show');
+                                        trigger.focus();
+                                    }
+                                }
+                            },
+                        },
+                    });
+                }
+                this.menuItems[0]?.focus();
+            });
         };
         this.trimTitle = (title, max) => {
             return title.length > max ? title.substring(0, max) + '…' : title;

package/dist/cjs/lib/media.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addInteractionHandlers = exports.createFileUploader = exports.createReactTools = exports.createFileHandlers = exports.createMediaPlaceholder = exports.MediaType = exports.createUnsupportedFormat = void 0;
 const transform_1 = require("@manuscripts/transform");
 const InsertEmbedDialog_1 = require("../components/toolbar/InsertEmbedDialog");
+const navigation_utils_1 = require("./navigation-utils");
 const FigureDropdown_1 = require("../components/views/FigureDropdown");
 const icons_1 = require("../icons");
 const ReactSubView_1 = __importDefault(require("../views/ReactSubView"));
@@ -57,9 +58,10 @@ const MediaLabels = {
     [MediaType.Figure]: 'figure',
     [MediaType.ExternalLink]: 'a file to link',
 };
-const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos) => {
+const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos, props) => {
     const element = document.createElement('div');
     element.classList.add('figure', 'placeholder');
+    element.tabIndex = 0;
     const instructions = document.createElement('div');
     instructions.classList.add('instructions');
     instructions.innerHTML = `
@@ -79,14 +81,29 @@ const createMediaPlaceholder = (mediaType = MediaType.Media, view, getPos) => {
   `;
     if (mediaType === MediaType.Media && view && getPos) {
         const embedLink = instructions.querySelector("[data-action='add-external-link']");
+        embedLink.tabIndex = 0;
         if (embedLink) {
             embedLink.addEventListener('click', (e) => {
                 e.stopPropagation();
                 e.preventDefault();
                 (0, InsertEmbedDialog_1.openEmbedDialog)(view, getPos());
             });
+            embedLink.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)((e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                (0, InsertEmbedDialog_1.openEmbedDialog)(view, getPos());
+            }));
         }
     }
+    const links = instructions.querySelectorAll(`[data-action='open-other-files'], [data-action='open-supplement-files'] `);
+    links.forEach((link) => {
+        link.tabIndex = 0;
+        link.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)((event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            props?.onEditorClick(event);
+        }));
+    });
     element.appendChild(instructions);
     return element;
 };
@@ -165,8 +182,7 @@ const createFileUploader = (handler, accept = '*/*') => {
 };
 exports.createFileUploader = createFileUploader;
 const addInteractionHandlers = (element, uploadFn, accept = '*/*') => {
-    const handlePlaceholderClick = (event) => {
-        const target = event.target;
+    const handlePlaceholderInteraction = (target) => {
         if (target.dataset && target.dataset.action) {
             return;
         }
@@ -181,7 +197,15 @@ const addInteractionHandlers = (element, uploadFn, accept = '*/*') => {
         });
         input.click();
     };
+    const handlePlaceholderClick = (event) => {
+        const target = event.target;
+        handlePlaceholderInteraction(target);
+    };
     element.addEventListener('click', handlePlaceholderClick);
+    element.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => {
+        const target = document.activeElement;
+        handlePlaceholderInteraction(target);
+    }));
     element.addEventListener('mouseenter', () => {
         element.classList.toggle('over', true);
     });

package/dist/cjs/lib/navigation-utils.js

@@ -0,0 +1,132 @@
+"use strict";
+/*!
+ * © 2025 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.focusNearestElement = void 0;
+exports.focusNextElement = focusNextElement;
+exports.handleEnterKey = handleEnterKey;
+exports.handleArrowNavigation = handleArrowNavigation;
+exports.createKeyboardInteraction = createKeyboardInteraction;
+exports.getCursorContainer = getCursorContainer;
+exports.findNearestTabbable = findNearestTabbable;
+const utils_1 = require("./utils");
+function focusNextElement(elements, currentIndex, direction) {
+    const nextIndex = direction === 'forward'
+        ? (currentIndex + 1) % elements.length
+        : (currentIndex - 1 + elements.length) % elements.length;
+    const nextElement = elements[nextIndex];
+    nextElement?.focus();
+}
+function handleEnterKey(action) {
+    return (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            action(event);
+        }
+    };
+}
+function handleArrowNavigation(event, elements, currentElement, keys) {
+    const { forward, backward } = keys;
+    if (event.key !== forward && event.key !== backward) {
+        return;
+    }
+    event.preventDefault();
+    if (elements.length === 0) {
+        return;
+    }
+    const currentIndex = elements.indexOf(currentElement);
+    if (currentIndex === -1) {
+        elements[0]?.focus();
+        return;
+    }
+    const direction = event.key === forward ? 'forward' : 'backward';
+    focusNextElement(elements, currentIndex, direction);
+}
+function createKeyboardInteraction(options) {
+    const { container, additionalKeys, navigation } = options;
+    const handleKeydown = (event) => {
+        const e = event;
+        const key = e.key;
+        const handler = additionalKeys?.[key];
+        if (handler) {
+            e.preventDefault();
+            handler(e);
+            return;
+        }
+        if (!navigation) {
+            return;
+        }
+        const { getItems, arrowKeys, getCurrentElement } = navigation;
+        const currentElement = getCurrentElement
+            ? getCurrentElement(e)
+            : e.target;
+        if (!currentElement) {
+            return;
+        }
+        const list = getItems();
+        if (!list.length) {
+            return;
+        }
+        handleArrowNavigation(e, list, currentElement, arrowKeys);
+    };
+    container.addEventListener('keydown', handleKeydown);
+    return () => {
+        container.removeEventListener('keydown', handleKeydown);
+    };
+}
+const focusNearestElement = (state, dispatch, view) => {
+    if (!view) {
+        return false;
+    }
+    const active = document.activeElement;
+    if (!active || !active.classList.contains('manuscript-editor')) {
+        return false;
+    }
+    const { from } = view.state.selection;
+    const coords = view.coordsAtPos(from);
+    const container = getCursorContainer(view);
+    const target = findNearestTabbable(container, coords.top);
+    if (!target) {
+        return false;
+    }
+    target.focus();
+    return true;
+};
+exports.focusNearestElement = focusNearestElement;
+function getCursorContainer(view) {
+    const scoped = (0, utils_1.findParentNodeWithIdValue)(view.state.selection);
+    if (scoped) {
+        const dom = view.nodeDOM(scoped.pos);
+        if (dom instanceof HTMLElement) {
+            return dom;
+        }
+    }
+    return view.dom;
+}
+function findNearestTabbable(container, verticalPosition) {
+    const tabbables = container.querySelectorAll('a[href], button, [tabindex]:not([tabindex="-1"])');
+    let target = null;
+    let minDistance = null;
+    tabbables.forEach((el) => {
+        const rect = el.getBoundingClientRect();
+        const distance = Math.abs(rect.top - verticalPosition);
+        if (minDistance === null || distance < minDistance) {
+            minDistance = distance;
+            target = el;
+        }
+    });
+    return target;
+}