@manuscripts/body-editor 3.7.24 → 3.7.25

package/dist/cjs/commands.js

@@ -16,7 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = void 0;
 const json_schema_1 = require("@manuscripts/json-schema");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
@@ -1296,6 +1296,15 @@ const ignoreEnterInSubtitles = (state) => {
     return false;
 };
 exports.ignoreEnterInSubtitles = ignoreEnterInSubtitles;
+const exitEditorToContainer = () => {
+    const editorContainer = document.getElementById('editor');
+    if (editorContainer) {
+        editorContainer.focus();
+        return true;
+    }
+    return false;
+};
+exports.exitEditorToContainer = exitEditorToContainer;
 const copySelection = (state, dispatch, view) => {
     const { selection } = state;
     const clipboard = navigator?.clipboard;

package/dist/cjs/components/LanguageDropdown/index.js

@@ -55,14 +55,24 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const languages_1 = require("./languages");
-const LanguageOptionItem = ({ language, isSelected, onSelect }) => (react_1.default.createElement(StyledLanguageOption, { key: language.code, onClick: (event) => onSelect(event, language.code) },
-    language.name,
-    language.nativeName && ` (${language.nativeName})`,
-    isSelected && (react_1.default.createElement(TickIconWrapper, null,
-        react_1.default.createElement(style_guide_1.TickIcon, null)))));
-const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, languages, }) => {
+const LanguageOptionItem = ({ language, isSelected, onSelect }) => {
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onSelect(event, language.code);
+        }
+    };
+    return (react_1.default.createElement(StyledLanguageOption, { key: language.code, onClick: (event) => onSelect(event, language.code), onKeyDown: handleKeyDown, tabIndex: 0, role: "submenuitem" },
+        language.name,
+        language.nativeName && ` (${language.nativeName})`,
+        isSelected && (react_1.default.createElement(TickIconWrapper, null,
+            react_1.default.createElement(style_guide_1.TickIcon, null)))));
+};
+const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, languages, menuItemRef, }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(!showButton);
     const dropdownRef = (0, react_1.useRef)(null);
+    const dropdownMenuRef = (0, react_1.useRef)(null);
+    const languageButtonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const handleClickOutside = (event) => {
             if (dropdownRef.current &&
@@ -79,10 +89,45 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen, onClose, onCloseParent]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen && dropdownMenuRef.current) {
+            const firstOption = dropdownMenuRef.current.querySelector('[role="submenuitem"]');
+            firstOption?.focus();
+        }
+    }, [isOpen]);
     const toggleDropdown = (event) => {
         event.stopPropagation();
         setIsOpen(!isOpen);
     };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            toggleDropdown(event);
+        }
+    };
+    const handleMenuKeyDown = (event) => {
+        if (!dropdownMenuRef.current)
+            return;
+        const menuItems = Array.from(dropdownMenuRef.current.querySelectorAll('[role="submenuitem"]'));
+        if (menuItems.length === 0)
+            return;
+        const currentIndex = menuItems.findIndex((item) => item === document.activeElement);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIndex = (currentIndex + 1) % menuItems.length;
+            menuItems[nextIndex]?.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIndex = currentIndex <= 0 ? menuItems.length - 1 : currentIndex - 1;
+            menuItems[prevIndex]?.focus();
+        }
+        else if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            setIsOpen(false);
+            setTimeout(() => languageButtonRef.current?.focus(), 0);
+        }
+    };
     const handleSelect = (event, languageCode) => {
         event.stopPropagation();
         onLanguageSelect(languageCode);
@@ -91,13 +136,16 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
         return (0, languages_1.getSelectedLanguageName)(languageCode, languages);
     };
     return (react_1.default.createElement(style_guide_1.DropdownContainer, { ref: dropdownRef },
-        showButton && (react_1.default.createElement(LanguageButton, { onClick: toggleDropdown },
+        showButton && (react_1.default.createElement(LanguageButton, { ref: (el) => {
+                languageButtonRef.current = el;
+                menuItemRef?.(el);
+            }, onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: 0, role: "menuitem" },
             react_1.default.createElement(ButtonContent, null,
                 react_1.default.createElement(ButtonLabel, null,
                     "Document language ",
                     react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null)),
                 react_1.default.createElement(SelectedLanguage, null, selectedLanguageDisplay || getDisplayName(currentLanguage))))),
-        isOpen && (react_1.default.createElement(DropdownMenu, { direction: "right", width: 231, height: 400, top: 18 },
+        isOpen && (react_1.default.createElement(DropdownMenu, { ref: dropdownMenuRef, direction: "right", width: 231, height: 400, top: 18, onKeyDown: handleMenuKeyDown, role: "menu" },
             !showButton && react_1.default.createElement(DropdownTitle, null, "Choose language"),
             languages.map((language) => (react_1.default.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
 };
@@ -140,6 +188,12 @@ const LanguageButton = styled_components_1.default.div `
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
 `;
 const ButtonContent = styled_components_1.default.span `
   display: flex;
@@ -196,5 +250,11 @@ const StyledLanguageOption = styled_components_1.default.div `
   &:hover {
     background-color: #f2fbfc;
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
 `;
 exports.default = LanguageDropdown;

package/dist/cjs/components/outline/DraggableTree.js

@@ -215,15 +215,30 @@ const DraggableTree = ({ tree, view, depth, can, }) => {
         const menu = new context_menu_1.ContextMenu(tree.node, view, () => tree.pos - 1);
         menu.showEditMenu(e.currentTarget);
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (items.length > 0) {
+                toggleOpen();
+            }
+            else {
+                const link = e.currentTarget.querySelector('a');
+                if (link) {
+                    link.click();
+                }
+            }
+        }
+    };
     dragRef(dropRef(ref));
     const dragClass = isDragging ? 'dragging' : '';
     const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
     const deletedClass = isDeletedItem ? 'deleted' : '';
     const heroImageClass = isHeroImage ? 'hero-image' : '';
     return (react_1.default.createElement(Outline_1.Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
-        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
-            items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
-            react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}` },
+        !isTop && node.type.name != 'manuscript' && (react_1.default.createElement(Outline_1.OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
+            items.length ? (react_1.default.createElement(Outline_1.OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen, tabIndex: -1 }, isOpen ? react_1.default.createElement(style_guide_1.TriangleExpandedIcon, null) : react_1.default.createElement(style_guide_1.TriangleCollapsedIcon, null))) : (react_1.default.createElement(Outline_1.OutlineItemNoArrow, null)),
+            react_1.default.createElement(Outline_1.OutlineItemLink, { to: `#${node.attrs.id}`, tabIndex: -1 },
                 react_1.default.createElement(Outline_1.OutlineItemIcon, null, (0, node_type_icons_1.nodeTypeIcon)(node.type)),
                 react_1.default.createElement(Outline_1.OutlineItemLinkText, { className: `outline-text-${node.type.name}` }, itemText(node))))),
         items.length ? (react_1.default.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (react_1.default.createElement(exports.DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));

package/dist/cjs/components/outline/ManuscriptOutline.js

@@ -54,6 +54,7 @@ const use_debounce_1 = require("../hooks/use-debounce");
 const DraggableTree_1 = require("./DraggableTree");
 const ManuscriptOutline = (props) => {
     const [values, setValues] = (0, react_1.useState)();
+    const containerRef = (0, react_1.useRef)(null);
     const debouncedProps = (0, use_debounce_1.useDebounce)(props, 500);
     (0, react_1.useEffect)(() => {
         const { doc, view } = debouncedProps;
@@ -69,6 +70,52 @@ const ManuscriptOutline = (props) => {
             setValues(undefined);
         }
     }, [debouncedProps, props.can]);
-    return values && values.view ? react_1.default.createElement(DraggableTree_1.DraggableTree, { ...values, depth: 0 }) : null;
+    const getOutlineItems = (0, react_1.useCallback)(() => {
+        if (!containerRef.current)
+            return [];
+        const allItems = Array.from(containerRef.current.querySelectorAll('[data-outline-item]'));
+        return allItems.filter((item) => {
+            let parent = item.parentElement;
+            while (parent && parent !== containerRef.current) {
+                if (parent.classList.contains('subtree') &&
+                    parent.classList.contains('collapsed')) {
+                    return false;
+                }
+                parent = parent.parentElement;
+            }
+            return true;
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const items = getOutlineItems();
+        items.forEach((item, index) => {
+            item.tabIndex = index === 0 ? 0 : -1;
+        });
+    }, [getOutlineItems, values]);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        const target = event.target;
+        if (!target.hasAttribute('data-outline-item')) {
+            return;
+        }
+        const items = getOutlineItems();
+        const currentIndex = items.indexOf(target);
+        if (currentIndex === -1)
+            return;
+        event.preventDefault();
+        let nextIndex;
+        if (event.key === 'ArrowDown') {
+            nextIndex = (currentIndex + 1) % items.length;
+        }
+        else {
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+        }
+        const nextItem = items[nextIndex];
+        nextItem?.focus();
+    }, [getOutlineItems]);
+    return values && values.view ? (react_1.default.createElement("div", { ref: containerRef, onKeyDown: handleKeyDown },
+        react_1.default.createElement(DraggableTree_1.DraggableTree, { ...values, depth: 0 }))) : null;
 };
 exports.ManuscriptOutline = ManuscriptOutline;

package/dist/cjs/components/outline/Outline.js

@@ -50,6 +50,12 @@ exports.OutlineItem = styled_components_1.default.div `
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
+
+  &:focus-visible {
+    background: ${(props) => props.theme.colors.background.fifth};
+    outline: 2px solid #bce7f6;
+    outline-offset: -2px;
+  }
 `;
 exports.OutlineItemArrow = styled_components_1.default.button `
   display: inline-block;

package/dist/cjs/components/toolbar/ListMenuItem.js

@@ -1,25 +1,107 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Label = exports.Block = exports.BlockItem = exports.StyleBlock = exports.ListContainer = exports.ListStyles = exports.ListMenuItem = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ListMenuItem = ({ menu, handleClick, }) => {
+const ListMenuItem = ({ menu, handleClick, closeAll, }) => {
+    const styleRefs = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        if (menu.isOpen && styleRefs.current.length > 0) {
+            styleRefs.current[0]?.focus();
+        }
+    }, [menu.isOpen]);
     if (!menu.submenu) {
         return null;
     }
     const styles = menu.submenu.map((m) => m.id);
+    const handleStyleClick = (s, i) => {
+        handleClick([i]);
+        closeAll();
+    };
+    const handleKeyDown = (e) => {
+        const items = styleRefs.current.filter(Boolean);
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                items[(currentIndex + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                items[(currentIndex - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Escape':
+                closeAll();
+                break;
+            case 'Enter': {
+                const el = document.activeElement;
+                el?.click();
+                break;
+            }
+        }
+    };
     return (react_1.default.createElement(style_guide_1.SubmenuContainer, null,
-        react_1.default.createElement(style_guide_1.SubmenuLabel, { menu: menu, handleClick: handleClick }),
-        menu.isOpen && (react_1.default.createElement(style_guide_1.NestedSubmenusContainer, null,
-            react_1.default.createElement(exports.ListStyles, { styles: styles, onClick: (s, i) => handleClick([i]) })))));
+        react_1.default.createElement(style_guide_1.SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }),
+        menu.isOpen && (react_1.default.createElement(style_guide_1.NestedSubmenusContainer, { onKeyDown: handleKeyDown },
+            react_1.default.createElement(exports.ListStyles, { styles: styles, onClick: handleStyleClick, styleRefs: styleRefs })))));
 };
 exports.ListMenuItem = ListMenuItem;
-const ListStyles = ({ styles, onClick, }) => {
-    return (react_1.default.createElement(exports.ListContainer, null, styles.map((style, index) => (react_1.default.createElement(exports.StyleBlock, { "data-cy": "submenu", key: index, onClick: () => onClick(style, index) }, styleItems[style].map((item, index) => (react_1.default.createElement(exports.BlockItem, { key: index },
+const ListStyles = ({ styles, onClick, styleRefs, }) => {
+    return (react_1.default.createElement(exports.ListContainer, null, styles.map((style, index) => (react_1.default.createElement(exports.StyleBlock, { "data-cy": "submenu", key: index, ref: (el) => {
+            if (styleRefs) {
+                styleRefs.current[index] = el;
+            }
+        }, onClick: () => onClick(style, index), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onClick(style, index);
+            }
+        }, tabIndex: 0 }, styleItems[style].map((item, index) => (react_1.default.createElement(exports.BlockItem, { key: index },
         react_1.default.createElement(exports.Label, { hide: item === '-' }, item),
         react_1.default.createElement(exports.Block, null)))))))));
 };
@@ -56,6 +138,11 @@ exports.StyleBlock = styled_components_1.default.div `
   &:active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+  }
 `;
 exports.BlockItem = styled_components_1.default.div `
   display: flex;

package/dist/cjs/components/toolbar/type-selector/OptionComponent.js

@@ -1,11 +1,45 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionComponent = void 0;
+exports.CustomControl = exports.OptionComponent = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const react_select_1 = require("react-select");
 const styled_components_1 = __importDefault(require("styled-components"));
 const helpers_1 = require("../helpers");
 const OptionContainer = styled_components_1.default.div `
@@ -15,6 +49,7 @@ const OptionContainer = styled_components_1.default.div `
   font-size: 14px;
   cursor: pointer;
   padding: 8px;
+  background: ${(props) => (props.isFocused ? '#f2fbfc' : 'transparent')};
 
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -22,10 +57,35 @@ const OptionContainer = styled_components_1.default.div `
 `;
 const OptionLabel = styled_components_1.default.span ``;
 const TickIconWrapper = styled_components_1.default.div ``;
-const OptionComponent = ({ innerProps, data, }) => {
-    return (react_1.default.createElement(OptionContainer, { ...innerProps, ref: null },
+const OptionComponent = ({ innerProps, data, isFocused, innerRef, }) => {
+    return (react_1.default.createElement(OptionContainer, { ...innerProps, isFocused: isFocused, ref: innerRef },
         react_1.default.createElement(OptionLabel, null, (0, helpers_1.titleCase)((0, helpers_1.optionName)(data.nodeType))),
         data.isSelected && (react_1.default.createElement(TickIconWrapper, null,
             react_1.default.createElement(style_guide_1.TickIcon, null)))));
 };
 exports.OptionComponent = OptionComponent;
+const CustomControl = (props) => {
+    const controlRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        if (controlRef.current) {
+            controlRef.current.setAttribute('data-toolbar-button', 'true');
+        }
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const { selectProps } = props;
+            if (selectProps.menuIsOpen) {
+                selectProps.onMenuClose?.();
+            }
+            else {
+                selectProps.onMenuOpen?.();
+            }
+        }
+    };
+    return (react_1.default.createElement(react_select_1.components.Control, { ...props, innerRef: controlRef, innerProps: {
+            ...props.innerProps,
+            onKeyDown: handleKeyDown,
+        } }));
+};
+exports.CustomControl = CustomControl;

package/dist/cjs/components/toolbar/type-selector/TypeSelector.js

@@ -87,7 +87,8 @@ const TypeSelector = ({ state, dispatch, view }) => {
         }, value: options.length === 1
             ? options[0]
             : (0, helpers_1.findSelectedOption)(options), options: options, components: {
+            Control: OptionComponent_1.CustomControl,
             Option: OptionComponent_1.OptionComponent,
-        }, classNamePrefix: "type-selector", styles: styles_1.customStyles, isDisabled: options.length <= 1 || !isInBody || !(0, utils_1.isEditAllowed)(state), isSearchable: false }));
+        }, classNamePrefix: "type-selector", styles: styles_1.customStyles, isDisabled: options.length <= 1 || !isInBody || !(0, utils_1.isEditAllowed)(state), isSearchable: false, tabIndex: -1 }));
 };
 exports.TypeSelector = TypeSelector;

package/dist/cjs/components/toolbar/type-selector/styles.js

@@ -7,9 +7,19 @@ exports.customStyles = exports.StyledSelect = void 0;
 const react_select_1 = __importDefault(require("react-select"));
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.StyledSelect = (0, styled_components_1.default)((react_select_1.default)) `
-  & > div:hover {
+  .type-selector__control:hover {
     border-color: ${(props) => props.theme.colors.border.secondary};
   }
+
+  .type-selector__control:focus-visible {
+    border-color: ${(props) => props.theme.colors.outline.focus} !important;
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.outline.focus} !important;
+    outline: none;
+
+    .type-selector__dropdown-indicator {
+      color: #6e6e6e;
+    }
+  }
 `;
 exports.customStyles = {
     control: (styles) => ({

package/dist/cjs/keys/misc.js

@@ -26,6 +26,7 @@ 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),
+    Escape: commands_1.exitEditorToContainer,
     'Mod-z': prosemirror_history_1.undo,
     'Mod-y': prosemirror_history_1.redo,
     'Shift-Mod-z': prosemirror_history_1.redo,

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

package/dist/es/commands.js

@@ -1236,6 +1236,14 @@ export const ignoreEnterInSubtitles = (state) => {
     }
     return false;
 };
+export const exitEditorToContainer = () => {
+    const editorContainer = document.getElementById('editor');
+    if (editorContainer) {
+        editorContainer.focus();
+        return true;
+    }
+    return false;
+};
 export const copySelection = (state, dispatch, view) => {
     const { selection } = state;
     const clipboard = navigator?.clipboard;

package/dist/es/components/LanguageDropdown/index.js

@@ -17,14 +17,24 @@ import { DropdownContainer, DropdownList, TickIcon, TriangleCollapsedIcon, } fro
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { getSelectedLanguageName } from './languages';
-const LanguageOptionItem = ({ language, isSelected, onSelect }) => (React.createElement(StyledLanguageOption, { key: language.code, onClick: (event) => onSelect(event, language.code) },
-    language.name,
-    language.nativeName && ` (${language.nativeName})`,
-    isSelected && (React.createElement(TickIconWrapper, null,
-        React.createElement(TickIcon, null)))));
-const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, languages, }) => {
+const LanguageOptionItem = ({ language, isSelected, onSelect }) => {
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            onSelect(event, language.code);
+        }
+    };
+    return (React.createElement(StyledLanguageOption, { key: language.code, onClick: (event) => onSelect(event, language.code), onKeyDown: handleKeyDown, tabIndex: 0, role: "submenuitem" },
+        language.name,
+        language.nativeName && ` (${language.nativeName})`,
+        isSelected && (React.createElement(TickIconWrapper, null,
+            React.createElement(TickIcon, null)))));
+};
+const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', showButton = false, selectedLanguageDisplay, onCloseParent, languages, menuItemRef, }) => {
     const [isOpen, setIsOpen] = useState(!showButton);
     const dropdownRef = useRef(null);
+    const dropdownMenuRef = useRef(null);
+    const languageButtonRef = useRef(null);
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (dropdownRef.current &&
@@ -41,10 +51,45 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [isOpen, onClose, onCloseParent]);
+    useEffect(() => {
+        if (isOpen && dropdownMenuRef.current) {
+            const firstOption = dropdownMenuRef.current.querySelector('[role="submenuitem"]');
+            firstOption?.focus();
+        }
+    }, [isOpen]);
     const toggleDropdown = (event) => {
         event.stopPropagation();
         setIsOpen(!isOpen);
     };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === 'ArrowRight') {
+            event.preventDefault();
+            toggleDropdown(event);
+        }
+    };
+    const handleMenuKeyDown = (event) => {
+        if (!dropdownMenuRef.current)
+            return;
+        const menuItems = Array.from(dropdownMenuRef.current.querySelectorAll('[role="submenuitem"]'));
+        if (menuItems.length === 0)
+            return;
+        const currentIndex = menuItems.findIndex((item) => item === document.activeElement);
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const nextIndex = (currentIndex + 1) % menuItems.length;
+            menuItems[nextIndex]?.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const prevIndex = currentIndex <= 0 ? menuItems.length - 1 : currentIndex - 1;
+            menuItems[prevIndex]?.focus();
+        }
+        else if (event.key === 'Escape' || event.key === 'ArrowLeft') {
+            event.preventDefault();
+            setIsOpen(false);
+            setTimeout(() => languageButtonRef.current?.focus(), 0);
+        }
+    };
     const handleSelect = (event, languageCode) => {
         event.stopPropagation();
         onLanguageSelect(languageCode);
@@ -53,13 +98,16 @@ const LanguageDropdown = ({ onLanguageSelect, onClose, currentLanguage = 'en', s
         return getSelectedLanguageName(languageCode, languages);
     };
     return (React.createElement(DropdownContainer, { ref: dropdownRef },
-        showButton && (React.createElement(LanguageButton, { onClick: toggleDropdown },
+        showButton && (React.createElement(LanguageButton, { ref: (el) => {
+                languageButtonRef.current = el;
+                menuItemRef?.(el);
+            }, onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: 0, role: "menuitem" },
             React.createElement(ButtonContent, null,
                 React.createElement(ButtonLabel, null,
                     "Document language ",
                     React.createElement(TriangleCollapsedIcon, null)),
                 React.createElement(SelectedLanguage, null, selectedLanguageDisplay || getDisplayName(currentLanguage))))),
-        isOpen && (React.createElement(DropdownMenu, { direction: "right", width: 231, height: 400, top: 18 },
+        isOpen && (React.createElement(DropdownMenu, { ref: dropdownMenuRef, direction: "right", width: 231, height: 400, top: 18, onKeyDown: handleMenuKeyDown, role: "menu" },
             !showButton && React.createElement(DropdownTitle, null, "Choose language"),
             languages.map((language) => (React.createElement(LanguageOptionItem, { key: language.code, language: language, isSelected: currentLanguage === language.code, onSelect: handleSelect })))))));
 };
@@ -102,6 +150,12 @@ const LanguageButton = styled.div `
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
 `;
 const ButtonContent = styled.span `
   display: flex;
@@ -158,5 +212,11 @@ const StyledLanguageOption = styled.div `
   &:hover {
     background-color: #f2fbfc;
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
 `;
 export default LanguageDropdown;

package/dist/es/components/outline/DraggableTree.js

@@ -178,15 +178,30 @@ export const DraggableTree = ({ tree, view, depth, can, }) => {
         const menu = new ContextMenu(tree.node, view, () => tree.pos - 1);
         menu.showEditMenu(e.currentTarget);
     };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (items.length > 0) {
+                toggleOpen();
+            }
+            else {
+                const link = e.currentTarget.querySelector('a');
+                if (link) {
+                    link.click();
+                }
+            }
+        }
+    };
     dragRef(dropRef(ref));
     const dragClass = isDragging ? 'dragging' : '';
     const dropClass = isOver && dropSide ? `drop-${dropSide}` : '';
     const deletedClass = isDeletedItem ? 'deleted' : '';
     const heroImageClass = isHeroImage ? 'hero-image' : '';
     return (React.createElement(Outline, { ref: ref, className: `${dragClass} ${dropClass} ${deletedClass} ${heroImageClass}` },
-        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu },
-            items.length ? (React.createElement(OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
-            React.createElement(OutlineItemLink, { to: `#${node.attrs.id}` },
+        !isTop && node.type.name != 'manuscript' && (React.createElement(OutlineItem, { depth: isHeroImage ? 1 : depth, onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, tabIndex: -1, "data-outline-item": true },
+            items.length ? (React.createElement(OutlineItemArrow, { "aria-label": `${isOpen ? 'Collapse' : 'Expand'} ${node.type.name}`, onClick: toggleOpen, tabIndex: -1 }, isOpen ? React.createElement(TriangleExpandedIcon, null) : React.createElement(TriangleCollapsedIcon, null))) : (React.createElement(OutlineItemNoArrow, null)),
+            React.createElement(OutlineItemLink, { to: `#${node.attrs.id}`, tabIndex: -1 },
                 React.createElement(OutlineItemIcon, null, nodeTypeIcon(node.type)),
                 React.createElement(OutlineItemLinkText, { className: `outline-text-${node.type.name}` }, itemText(node))))),
         items.length ? (React.createElement("div", { className: `subtree ${isOpen ? '' : 'collapsed'}` }, items.map((subtree, index) => (React.createElement(DraggableTree, { key: subtree.node.attrs.id || 'subtree-' + index, tree: subtree, view: view, depth: !tree.parent ? depth : depth + 1, can: can }))))) : null));

package/dist/es/components/outline/ManuscriptOutline.js

@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDebounce } from '../hooks/use-debounce';
 import { buildTree, DraggableTree } from './DraggableTree';
 export const ManuscriptOutline = (props) => {
     const [values, setValues] = useState();
+    const containerRef = useRef(null);
     const debouncedProps = useDebounce(props, 500);
     useEffect(() => {
         const { doc, view } = debouncedProps;
@@ -33,5 +34,51 @@ export const ManuscriptOutline = (props) => {
             setValues(undefined);
         }
     }, [debouncedProps, props.can]);
-    return values && values.view ? React.createElement(DraggableTree, { ...values, depth: 0 }) : null;
+    const getOutlineItems = useCallback(() => {
+        if (!containerRef.current)
+            return [];
+        const allItems = Array.from(containerRef.current.querySelectorAll('[data-outline-item]'));
+        return allItems.filter((item) => {
+            let parent = item.parentElement;
+            while (parent && parent !== containerRef.current) {
+                if (parent.classList.contains('subtree') &&
+                    parent.classList.contains('collapsed')) {
+                    return false;
+                }
+                parent = parent.parentElement;
+            }
+            return true;
+        });
+    }, []);
+    useEffect(() => {
+        const items = getOutlineItems();
+        items.forEach((item, index) => {
+            item.tabIndex = index === 0 ? 0 : -1;
+        });
+    }, [getOutlineItems, values]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+            return;
+        }
+        const target = event.target;
+        if (!target.hasAttribute('data-outline-item')) {
+            return;
+        }
+        const items = getOutlineItems();
+        const currentIndex = items.indexOf(target);
+        if (currentIndex === -1)
+            return;
+        event.preventDefault();
+        let nextIndex;
+        if (event.key === 'ArrowDown') {
+            nextIndex = (currentIndex + 1) % items.length;
+        }
+        else {
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+        }
+        const nextItem = items[nextIndex];
+        nextItem?.focus();
+    }, [getOutlineItems]);
+    return values && values.view ? (React.createElement("div", { ref: containerRef, onKeyDown: handleKeyDown },
+        React.createElement(DraggableTree, { ...values, depth: 0 }))) : null;
 };

package/dist/es/components/outline/Outline.js

@@ -44,6 +44,12 @@ export const OutlineItem = styled.div `
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
   }
+
+  &:focus-visible {
+    background: ${(props) => props.theme.colors.background.fifth};
+    outline: 2px solid #bce7f6;
+    outline-offset: -2px;
+  }
 `;
 export const OutlineItemArrow = styled.button `
   display: inline-block;

package/dist/es/components/toolbar/ListMenuItem.js

@@ -1,18 +1,67 @@
 import { NestedSubmenusContainer, SubmenuContainer, SubmenuLabel, } from '@manuscripts/style-guide';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-export const ListMenuItem = ({ menu, handleClick, }) => {
+export const ListMenuItem = ({ menu, handleClick, closeAll, }) => {
+    const styleRefs = useRef([]);
+    useEffect(() => {
+        if (menu.isOpen && styleRefs.current.length > 0) {
+            styleRefs.current[0]?.focus();
+        }
+    }, [menu.isOpen]);
     if (!menu.submenu) {
         return null;
     }
     const styles = menu.submenu.map((m) => m.id);
+    const handleStyleClick = (s, i) => {
+        handleClick([i]);
+        closeAll();
+    };
+    const handleKeyDown = (e) => {
+        const items = styleRefs.current.filter(Boolean);
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.indexOf(document.activeElement);
+        if (currentIndex === -1) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                items[(currentIndex + 1) % items.length]?.focus();
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                items[(currentIndex - 1 + items.length) % items.length]?.focus();
+                break;
+            case 'Escape':
+                closeAll();
+                break;
+            case 'Enter': {
+                const el = document.activeElement;
+                el?.click();
+                break;
+            }
+        }
+    };
     return (React.createElement(SubmenuContainer, null,
-        React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick }),
-        menu.isOpen && (React.createElement(NestedSubmenusContainer, null,
-            React.createElement(ListStyles, { styles: styles, onClick: (s, i) => handleClick([i]) })))));
+        React.createElement(SubmenuLabel, { menu: menu, handleClick: handleClick, closeAll: closeAll }),
+        menu.isOpen && (React.createElement(NestedSubmenusContainer, { onKeyDown: handleKeyDown },
+            React.createElement(ListStyles, { styles: styles, onClick: handleStyleClick, styleRefs: styleRefs })))));
 };
-export const ListStyles = ({ styles, onClick, }) => {
-    return (React.createElement(ListContainer, null, styles.map((style, index) => (React.createElement(StyleBlock, { "data-cy": "submenu", key: index, onClick: () => onClick(style, index) }, styleItems[style].map((item, index) => (React.createElement(BlockItem, { key: index },
+export const ListStyles = ({ styles, onClick, styleRefs, }) => {
+    return (React.createElement(ListContainer, null, styles.map((style, index) => (React.createElement(StyleBlock, { "data-cy": "submenu", key: index, ref: (el) => {
+            if (styleRefs) {
+                styleRefs.current[index] = el;
+            }
+        }, onClick: () => onClick(style, index), onKeyDown: (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onClick(style, index);
+            }
+        }, tabIndex: 0 }, styleItems[style].map((item, index) => (React.createElement(BlockItem, { key: index },
         React.createElement(Label, { hide: item === '-' }, item),
         React.createElement(Block, null)))))))));
 };
@@ -48,6 +97,11 @@ export const StyleBlock = styled.div `
   &:active {
     border-color: ${(props) => props.theme.colors.border.primary};
   }
+
+  &:focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: -2px;
+  }
 `;
 export const BlockItem = styled.div `
   display: flex;

package/dist/es/components/toolbar/type-selector/OptionComponent.js

@@ -1,5 +1,6 @@
 import { TickIcon } from '@manuscripts/style-guide';
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
+import { components } from 'react-select';
 import styled from 'styled-components';
 import { optionName, titleCase } from '../helpers';
 const OptionContainer = styled.div `
@@ -9,6 +10,7 @@ const OptionContainer = styled.div `
   font-size: 14px;
   cursor: pointer;
   padding: 8px;
+  background: ${(props) => (props.isFocused ? '#f2fbfc' : 'transparent')};
 
   &:hover {
     background: ${(props) => props.theme.colors.background.fifth};
@@ -16,9 +18,33 @@ const OptionContainer = styled.div `
 `;
 const OptionLabel = styled.span ``;
 const TickIconWrapper = styled.div ``;
-export const OptionComponent = ({ innerProps, data, }) => {
-    return (React.createElement(OptionContainer, { ...innerProps, ref: null },
+export const OptionComponent = ({ innerProps, data, isFocused, innerRef, }) => {
+    return (React.createElement(OptionContainer, { ...innerProps, isFocused: isFocused, ref: innerRef },
         React.createElement(OptionLabel, null, titleCase(optionName(data.nodeType))),
         data.isSelected && (React.createElement(TickIconWrapper, null,
             React.createElement(TickIcon, null)))));
 };
+export const CustomControl = (props) => {
+    const controlRef = useRef(null);
+    useLayoutEffect(() => {
+        if (controlRef.current) {
+            controlRef.current.setAttribute('data-toolbar-button', 'true');
+        }
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            const { selectProps } = props;
+            if (selectProps.menuIsOpen) {
+                selectProps.onMenuClose?.();
+            }
+            else {
+                selectProps.onMenuOpen?.();
+            }
+        }
+    };
+    return (React.createElement(components.Control, { ...props, innerRef: controlRef, innerProps: {
+            ...props.innerProps,
+            onKeyDown: handleKeyDown,
+        } }));
+};

package/dist/es/components/toolbar/type-selector/TypeSelector.js

@@ -5,7 +5,7 @@ import { findClosestParentElement } from '../../../lib/hierarchy';
 import { isDeleted } from '../../../lib/track-changes-utils';
 import { isEditAllowed } from '../../../lib/utils';
 import { demoteSectionToParagraph, findSelectedOption, optionName, promoteParagraphToSection, titleCase, } from '../helpers';
-import { OptionComponent } from './OptionComponent';
+import { CustomControl, OptionComponent } from './OptionComponent';
 import { customStyles, StyledSelect } from './styles';
 const buildOptions = (state) => {
     const { doc, selection: { $from, $to }, schema, } = state;
@@ -81,6 +81,7 @@ export const TypeSelector = ({ state, dispatch, view }) => {
         }, value: options.length === 1
             ? options[0]
             : findSelectedOption(options), options: options, components: {
+            Control: CustomControl,
             Option: OptionComponent,
-        }, classNamePrefix: "type-selector", styles: customStyles, isDisabled: options.length <= 1 || !isInBody || !isEditAllowed(state), isSearchable: false }));
+        }, classNamePrefix: "type-selector", styles: customStyles, isDisabled: options.length <= 1 || !isInBody || !isEditAllowed(state), isSearchable: false, tabIndex: -1 }));
 };

package/dist/es/components/toolbar/type-selector/styles.js

@@ -1,9 +1,19 @@
 import Select from 'react-select';
 import styled from 'styled-components';
 export const StyledSelect = styled((Select)) `
-  & > div:hover {
+  .type-selector__control:hover {
     border-color: ${(props) => props.theme.colors.border.secondary};
   }
+
+  .type-selector__control:focus-visible {
+    border-color: ${(props) => props.theme.colors.outline.focus} !important;
+    box-shadow: 0 0 0 1px ${(props) => props.theme.colors.outline.focus} !important;
+    outline: none;
+
+    .type-selector__dropdown-indicator {
+      color: #6e6e6e;
+    }
+  }
 `;
 export const customStyles = {
     control: (styles) => ({

package/dist/es/keys/misc.js

@@ -18,12 +18,13 @@ import { chainCommands, createParagraphNear, exitCode, joinBackward, joinDown, j
 import { redo, undo } from 'prosemirror-history';
 import { undoInputRule } from 'prosemirror-inputrules';
 import { goToNextCell } from 'prosemirror-tables';
-import { activateSearch, activateSearchReplace, addToStart, autoComplete, ignoreAtomBlockNodeBackward, ignoreAtomBlockNodeForward, ignoreEnterInSubtitles, ignoreMetaNodeBackspaceCommand, insertBlock, insertBreak, insertCrossReference, insertInlineCitation, insertInlineEquation, insertSection, selectAllIsolating, } from '../commands';
+import { activateSearch, activateSearchReplace, addToStart, autoComplete, exitEditorToContainer, ignoreAtomBlockNodeBackward, ignoreAtomBlockNodeForward, ignoreEnterInSubtitles, ignoreMetaNodeBackspaceCommand, insertBlock, insertBreak, insertCrossReference, insertInlineCitation, insertInlineEquation, insertSection, selectAllIsolating, } from '../commands';
 import { skipCommandTracking } from './list';
 const customKeymap = {
     Backspace: chainCommands(undoInputRule, ignoreAtomBlockNodeBackward, ignoreMetaNodeBackspaceCommand, skipCommandTracking(joinBackward)),
     Delete: ignoreAtomBlockNodeForward,
     Tab: goToNextCell(1),
+    Escape: exitEditorToContainer,
     'Mod-z': undo,
     'Mod-y': redo,
     'Shift-Mod-z': redo,

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.7.24';
+export const VERSION = '3.7.25';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/types/commands.d.ts

@@ -84,5 +84,6 @@ export declare const activateSearch: (state: ManuscriptEditorState, dispatch?: D
 export declare const activateSearchReplace: (state: ManuscriptEditorState, dispatch?: Dispatch) => boolean;
 export declare const insertHeroImage: () => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const ignoreEnterInSubtitles: (state: ManuscriptEditorState) => boolean;
+export declare const exitEditorToContainer: EditorAction;
 export declare const copySelection: (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;
 export declare const paste: (format: "html" | "text") => (state: ManuscriptEditorState, dispatch?: Dispatch, view?: EditorView) => boolean;

package/dist/types/components/LanguageDropdown/index.d.ts

@@ -24,6 +24,7 @@ interface LanguageDropdownProps {
     selectedLanguageDisplay?: string;
     onCloseParent?: () => void;
     languages: Language[];
+    menuItemRef?: (el: HTMLDivElement | null) => void;
 }
 declare const LanguageDropdown: React.FC<LanguageDropdownProps>;
 export default LanguageDropdown;

package/dist/types/components/toolbar/ListMenuItem.d.ts

@@ -4,6 +4,7 @@ export declare const ListMenuItem: React.FC<MenuComponentProps>;
 export interface ListSubmenuItemsProps {
     styles: string[];
     onClick: (style: string, index: number) => void;
+    styleRefs?: React.MutableRefObject<(HTMLDivElement | null)[]>;
 }
 export declare const ListStyles: React.FC<ListSubmenuItemsProps>;
 export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/types/components/toolbar/type-selector/OptionComponent.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-import { OptionProps } from 'react-select';
+import { ControlProps, OptionProps } from 'react-select';
 import { Option } from './TypeSelector';
 export declare const OptionComponent: React.FC<OptionProps<Option, false>>;
+export declare const CustomControl: (props: ControlProps<Option, false>) => React.JSX.Element;

package/dist/types/components/toolbar/type-selector/styles.d.ts

@@ -1,6 +1,6 @@
 import { CSSObjectWithLabel } from 'react-select';
 import { Option } from './TypeSelector';
-export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>, "onChange" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose" | "value"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<Option, false, import("react-select").GroupBase<Option>>>) => import("react").ReactElement, any, {}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: Omit<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>, "onChange" | "value" | "inputValue" | "menuIsOpen" | "onInputChange" | "onMenuOpen" | "onMenuClose"> & Partial<import("react-select/dist/declarations/src/Select").PublicBaseSelectProps<Option, false, import("react-select").GroupBase<Option>>> & import("react-select/dist/declarations/src/useStateManager").StateManagerAdditionalProps<Option> & import("react").RefAttributes<import("react-select/dist/declarations/src/Select").default<Option, false, import("react-select").GroupBase<Option>>>) => import("react").ReactElement, any, {}, never>;
 export declare const customStyles: {
     control: (styles: CSSObjectWithLabel) => CSSObjectWithLabel;
     indicatorSeparator: () => CSSObjectWithLabel;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.7.24";
+export declare const VERSION = "3.7.25";
 export declare const MATHJAX_VERSION = "3.2.2";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.7.24",
+  "version": "3.7.25",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -38,7 +38,7 @@
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
     "@manuscripts/json-schema": "2.2.12",
-    "@manuscripts/style-guide": "3.3.12",
+    "@manuscripts/style-guide": "3.3.13",
     "@manuscripts/track-changes-plugin": "2.2.3",
     "@manuscripts/transform": "4.3.12",
     "@popperjs/core": "2.11.8",

package/styles/Editor.css

@@ -1,6 +1,13 @@
 :root {
   --body-side-margin: 65px;
 }
+
+/* Focus styling for editor container when accessed via Escape key */
+#editor:focus {
+  outline: 2px solid #3dadff !important;
+  outline-offset: 2px;
+}
+
 .ProseMirror.manuscript-editor {
   font-size: 16px;
   line-height: 1.5;
@@ -985,10 +992,6 @@
   filter: brightness(80%);
 }
 
-.ProseMirror [tabindex]:focus {
-  outline: none;
-}
-
 .ProseMirror .manuscript-toc {
   white-space: normal;
 }