@manuscripts/body-editor 3.9.11 → 3.9.13

package/dist/cjs/views/bibliography_element.js

@@ -24,6 +24,7 @@ const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const ReferencesEditor_1 = require("../components/references/ReferencesEditor");
 const comments_1 = require("../lib/comments");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const doc_1 = require("../lib/doc");
 const dompurify_1 = require("../lib/dompurify");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
@@ -39,31 +40,50 @@ class BibliographyElementBlockView extends block_view_1.default {
         super(...arguments);
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleCommentMarkerInteraction = (marker) => {
+            const key = marker.dataset.key;
+            const tr = this.view.state.tr;
+            (0, comments_2.setCommentSelection)(tr, key, undefined, false);
+            this.view.dispatch(tr);
+        };
+        this.handleBibItemInteraction = (item) => {
+            if (!this.props.getCapabilities().seeReferencesButtons) {
+                return;
+            }
+            this.showContextMenu(item);
+            const node = (0, view_1.findChildByID)(this.view, item.id);
+            if (node) {
+                const tr = this.view.state.tr;
+                tr.setSelection(prosemirror_state_1.NodeSelection.create(this.view.state.doc, node.pos));
+                this.view.dispatch(tr);
+            }
+        };
         this.handleClick = (event) => {
             const element = event.target;
             const marker = element.closest('.comment-marker');
             if (marker) {
-                const key = marker.dataset.key;
-                const tr = this.view.state.tr;
-                (0, comments_2.setCommentSelection)(tr, key, undefined, false);
-                this.view.dispatch(tr);
+                this.handleCommentMarkerInteraction(marker);
                 return;
             }
-            if (this.props.getCapabilities().seeReferencesButtons) {
-                const item = element.closest('.bib-item');
-                if (item) {
-                    this.showContextMenu(item);
-                    const node = (0, view_1.findChildByID)(this.view, item.id);
-                    if (!node) {
-                        return;
-                    }
-                    const view = this.view;
-                    const tr = view.state.tr;
-                    tr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, node.pos));
-                    view.dispatch(tr);
-                }
+            const item = element.closest('.bib-item');
+            if (item) {
+                this.handleBibItemInteraction(item);
             }
         };
+        this.handleKeyDown = (event) => {
+            (0, navigation_utils_1.handleEnterKey)(() => {
+                const target = document.activeElement;
+                const marker = target?.closest('.comment-marker');
+                if (marker) {
+                    this.handleCommentMarkerInteraction(marker);
+                    return;
+                }
+                const bibItem = target?.closest('.bib-item');
+                if (bibItem) {
+                    this.handleBibItemInteraction(bibItem);
+                }
+            })(event);
+        };
         this.createElement = () => {
             this.container = document.createElement('div');
             this.container.classList.add('block');
@@ -170,6 +190,7 @@ class BibliographyElementBlockView extends block_view_1.default {
         const wrapper = document.createElement('div');
         wrapper.classList.add('contents');
         wrapper.addEventListener('click', this.handleClick);
+        wrapper.addEventListener('keydown', this.handleKeyDown);
         const [meta, bibliography] = bib.engine.makeBibliography();
         for (let i = 0; i < bibliography.length; i++) {
             const id = meta.entry_ids[i][0];
@@ -196,6 +217,7 @@ class BibliographyElementBlockView extends block_view_1.default {
                 }
             }
             const element = (0, dompurify_1.sanitize)(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${tempDiv.innerHTML}</div></div>`).firstElementChild;
+            element.tabIndex = 0;
             const comment = (0, comments_1.createCommentMarker)('div', id);
             element.prepend(comment);
             (0, track_changes_utils_1.addTrackChangesAttributes)(node.attrs, element);

package/dist/cjs/views/citation.js

@@ -32,6 +32,7 @@ class CitationView extends base_node_view_1.BaseNodeView {
     createDOM() {
         this.dom = document.createElement('span');
         this.dom.classList.add('citation');
+        this.dom.tabIndex = 0;
     }
     updateContents() {
         super.updateContents();

package/dist/cjs/views/citation_editable.js

@@ -27,6 +27,7 @@ const CitationEditor_1 = require("../components/references/CitationEditor");
 const CitationViewer_1 = require("../components/references/CitationViewer");
 const comments_1 = require("../lib/comments");
 const crossref_1 = require("../lib/crossref");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const view_1 = require("../lib/view");
 const bibliography_1 = require("../plugins/bibliography");
@@ -47,12 +48,12 @@ class CitationEditableView extends citation_1.CitationView {
                 element.classList.contains('comment-icon') ||
                 element.parentElement?.classList.contains('comment-icon'));
         };
-        this.handleClick = (event) => {
+        this.handleClick = () => {
             if (!this.can.seeReferencesButtons ||
                 this.dom.classList.contains('inconsistency-highlight')) {
                 this.showPopper();
             }
-            else if (!(0, track_changes_utils_1.isDeleted)(this.node) && event.button === 0) {
+            else if (!(0, track_changes_utils_1.isDeleted)(this.node)) {
                 const attrs = this.node.attrs;
                 if (attrs.rids.length) {
                     this.showContextMenu();
@@ -197,6 +198,7 @@ class CitationEditableView extends citation_1.CitationView {
     createDOM() {
         super.createDOM();
         this.dom.addEventListener('mouseup', this.handleClick);
+        this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.handleClick()));
     }
     insertBibliographyNode(attrs) {
         const { doc, tr } = this.view.state;

package/dist/cjs/views/contributors.js

@@ -25,6 +25,7 @@ const prosemirror_state_1 = require("prosemirror-state");
 const AuthorsModal_1 = require("../components/authors/AuthorsModal");
 const authors_1 = require("../lib/authors");
 const comments_1 = require("../lib/comments");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const utils_1 = require("../lib/utils");
 const view_1 = require("../lib/view");
@@ -51,11 +52,26 @@ class ContributorsView extends block_view_1.default {
             const can = this.props.getCapabilities();
             if (can.editMetadata) {
                 wrapper.addEventListener('click', this.handleClick);
+                this.removeKeydownListener = (0, navigation_utils_1.createKeyboardInteraction)({
+                    container: wrapper,
+                    navigation: {
+                        getItems: () => {
+                            return Array.from(wrapper.querySelectorAll('.contributor'));
+                        },
+                        arrowKeys: { forward: 'ArrowRight', backward: 'ArrowLeft' },
+                    },
+                    additionalKeys: {
+                        Enter: (e) => {
+                            e.preventDefault();
+                            this.handleClick(e);
+                        },
+                    },
+                });
             }
             const authors = affs.contributors;
             authors.sort(authors_1.authorComparator).forEach((author, i) => {
                 const jointAuthors = this.isJointFirstAuthor(authors, i);
-                wrapper.appendChild(this.buildAuthor(author, jointAuthors));
+                wrapper.appendChild(this.buildAuthor(author, jointAuthors, i));
                 if (i !== authors.length - 1) {
                     const separator = document.createElement('span');
                     separator.classList.add('separator');
@@ -65,13 +81,14 @@ class ContributorsView extends block_view_1.default {
             });
             this.container.appendChild(wrapper);
         };
-        this.buildAuthor = (attrs, isJointFirstAuthor) => {
+        this.buildAuthor = (attrs, isJointFirstAuthor, index) => {
             const state = this.view.state;
             const affs = affiliations_1.affiliationsKey.getState(state)?.indexedAffiliationIds;
             const container = document.createElement('span');
             container.classList.add('contributor');
             container.setAttribute('id', attrs.id);
             container.setAttribute('contenteditable', 'false');
+            container.tabIndex = index === 0 ? 0 : -1;
             (0, track_changes_utils_1.addTrackChangesAttributes)(attrs, container);
             const name = (0, authors_1.authorLabel)(attrs);
             container.innerHTML =
@@ -275,6 +292,10 @@ class ContributorsView extends block_view_1.default {
         note.classList.add('contributor-note');
         return note;
     }
+    destroy() {
+        this.removeKeydownListener?.();
+        super.destroy();
+    }
 }
 exports.ContributorsView = ContributorsView;
 exports.default = (0, creators_1.createNodeView)(ContributorsView);

package/dist/cjs/views/cross_reference.js

@@ -16,6 +16,7 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceView = void 0;
+const navigation_utils_1 = require("../lib/navigation-utils");
 const objects_1 = require("../plugins/objects");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
@@ -40,6 +41,8 @@ class CrossReferenceView extends base_node_view_1.BaseNodeView {
         this.createDOM = () => {
             this.dom = document.createElement('span');
             this.dom.className = 'cross-reference';
+            this.dom.tabIndex = 0;
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.handleClick()));
         };
     }
     updateContents() {

package/dist/cjs/views/editable_block.js

@@ -19,6 +19,7 @@ exports.EditableBlock = void 0;
 const transform_1 = require("@manuscripts/transform");
 const context_menu_1 = require("../lib/context-menu");
 const utils_1 = require("../lib/utils");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const EditableBlock = (Base) => {
     return class extends Base {
         constructor() {
@@ -28,7 +29,12 @@ const EditableBlock = (Base) => {
             };
         }
         gutterButtons() {
-            return [this.createAddButton(), this.createEditButton()].filter(utils_1.isNotNull);
+            const buttons = [this.createAddButton(), this.createEditButton()].filter(utils_1.isNotNull);
+            buttons.forEach((btn) => (btn.tabIndex = -1));
+            if (buttons.length > 0) {
+                buttons[0].tabIndex = 0;
+            }
+            return buttons;
         }
         actionGutterButtons() {
             return [];
@@ -56,10 +62,24 @@ const EditableBlock = (Base) => {
             button.setAttribute('role', 'button');
             button.setAttribute('aria-label', `Add an element below`);
             button.setAttribute('data-balloon-pos', 'down-left');
-            button.addEventListener('mousedown', (event) => {
+            const handleClick = (event) => {
                 event.preventDefault();
                 const menu = this.createMenu();
                 menu.showAddMenu(event.currentTarget);
+            };
+            button.addEventListener('mousedown', handleClick);
+            (0, navigation_utils_1.createKeyboardInteraction)({
+                container: button,
+                additionalKeys: {
+                    Enter: handleClick,
+                    ArrowRight: () => {
+                        const parent = button.parentElement;
+                        const editButton = parent?.querySelector('.edit-block');
+                        if (editButton) {
+                            editButton.focus();
+                        }
+                    },
+                },
             });
             return button;
         }
@@ -72,10 +92,24 @@ const EditableBlock = (Base) => {
             button.setAttribute('role', 'button');
             button.setAttribute('aria-label', 'Open menu');
             button.setAttribute('data-balloon-pos', 'down-left');
-            button.addEventListener('mousedown', (event) => {
+            const handleClick = (event) => {
                 event.preventDefault();
                 const menu = this.createMenu();
                 menu.showEditMenu(event.currentTarget);
+            };
+            button.addEventListener('mousedown', handleClick);
+            (0, navigation_utils_1.createKeyboardInteraction)({
+                container: button,
+                additionalKeys: {
+                    Enter: handleClick,
+                    ArrowLeft: () => {
+                        const parent = button.parentElement;
+                        const addButton = parent?.querySelector('.add-block');
+                        if (addButton) {
+                            addButton.focus();
+                        }
+                    },
+                },
             });
             return button;
         }

package/dist/cjs/views/embed.js

@@ -164,7 +164,7 @@ class EmbedView extends block_view_1.default {
         const href = this.node.attrs.href;
         let object;
         if (!href) {
-            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
+            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos, this.props);
         }
         else if (this.isUploadedFile()) {
             const files = this.props.getFiles();
@@ -178,14 +178,14 @@ class EmbedView extends block_view_1.default {
                     : (0, media_1.createUnsupportedFormat)(file.name, this.props.getCapabilities().editArticle);
             }
             else {
-                object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
+                object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos, this.props);
             }
         }
         else if (this.isEmbedLink()) {
             object = await this.createEmbedPreview();
         }
         else {
-            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos);
+            object = (0, media_1.createMediaPlaceholder)(media_1.MediaType.Media, this.view, this.getPos, this.props);
         }
         const can = this.props.getCapabilities();
         if (can.uploadFile && object.classList.contains('placeholder')) {

package/dist/cjs/views/figure_editable.js

@@ -52,7 +52,7 @@ class FigureEditableView extends figure_1.FigureView {
             return img;
         };
         this.createPlaceholder = () => {
-            return (0, media_1.createMediaPlaceholder)(media_1.MediaType.Figure);
+            return (0, media_1.createMediaPlaceholder)(media_1.MediaType.Figure, this.view, this.getPos, this.props);
         };
     }
     initialise() {

package/dist/cjs/views/figure_element.js

@@ -19,6 +19,7 @@ exports.FigureElementView = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const creators_1 = require("./creators");
 const image_element_1 = require("./image_element");
 class FigureElementView extends image_element_1.ImageElementView {
@@ -74,6 +75,8 @@ class FigureElementView extends image_element_1.ImageElementView {
                 title: 'Add figure',
             });
             this.addFigureBtn.addEventListener('click', () => this.addFigure());
+            this.addFigureBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.addFigure()));
+            this.addFigureBtn.tabIndex = 0;
             this.container.prepend(this.addFigureBtn);
         }
     }

package/dist/cjs/views/footnote.js

@@ -31,15 +31,18 @@ const track_changes_utils_1 = require("../lib/track-changes-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const navigation_utils_1 = require("../lib/navigation-utils");
 class FootnoteView extends base_node_view_1.BaseNodeView {
     constructor() {
         super(...arguments);
         this.initialise = () => {
             this.dom = document.createElement('div');
             this.dom.classList.add('footnote');
+            this.dom.tabIndex = 0;
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('footnote-text');
             this.dom.addEventListener('mousedown', this.handleClick);
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(this.handleClick));
             this.updateContents();
         };
         this.handleClick = (event) => {

package/dist/cjs/views/hero_image.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeroImageView = void 0;
 const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class HeroImageView extends block_view_1.default {
@@ -48,13 +49,15 @@ class HeroImageView extends block_view_1.default {
         heroImageToggleBtn.classList.add('toggle-btn', 'button-reset');
         heroImageToggleBtn.innerHTML = icons_1.arrowUp;
         heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
-        heroImageToggleBtn.onclick = () => {
+        const handleToggle = () => {
             this.collapsed = !this.collapsed;
             if (this.contentDOM) {
                 this.contentDOM.style.display = this.collapsed ? 'none' : '';
             }
             heroImageToggleBtn.classList.toggle('collapsed', this.collapsed);
         };
+        heroImageToggleBtn.onclick = handleToggle;
+        heroImageToggleBtn.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle));
         panel.appendChild(label);
         panel.appendChild(heroImageToggleBtn);
         return panel;

package/dist/cjs/views/image_element.js

@@ -23,6 +23,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const transform_1 = require("@manuscripts/transform");
 const icons_1 = require("../icons");
 const media_1 = require("../lib/media");
+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");
@@ -200,14 +201,16 @@ class ImageElementView extends block_view_1.default {
         label.innerText = 'Link';
         const container = document.createElement('div');
         container.classList.add('ext-link-editor-placeholder-container');
-        const placeholder = (0, media_1.createMediaPlaceholder)(media_1.MediaType.ExternalLink);
+        const placeholder = (0, media_1.createMediaPlaceholder)(media_1.MediaType.ExternalLink, this.view, this.getPos, this.props);
         const closeButton = document.createElement('button');
         closeButton.classList.add('close-button');
         closeButton.setAttribute('aria-label', 'Close');
-        closeButton.addEventListener('click', () => {
+        const handleClose = () => {
             this.setIsEditingExtLink(false);
             this.updateContents();
-        });
+        };
+        closeButton.addEventListener('click', handleClose);
+        closeButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleClose));
         container.append(placeholder, closeButton);
         this.extLinkEditorContainer.append(label, container);
         if (can.uploadFile) {
@@ -222,10 +225,13 @@ class ImageElementView extends block_view_1.default {
         button.appendChild(buttonText);
         button.setAttribute('aria-label', 'Add linked file');
         button.classList.add('icon-button');
-        button.addEventListener('click', () => {
+        button.tabIndex = 0;
+        const handleAdd = () => {
             this.setIsEditingExtLink(true);
             this.updateContents();
-        });
+        };
+        button.addEventListener('click', handleAdd);
+        button.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleAdd));
         this.extLinkEditorContainer.appendChild(button);
     }
     createLinkedFile() {
@@ -240,10 +246,12 @@ class ImageElementView extends block_view_1.default {
         removeButton.classList.add('icon-button', 'remove-button');
         removeButton.setAttribute('aria-label', 'Remove link');
         removeButton.innerHTML = icons_1.deleteIcon;
-        removeButton.addEventListener('click', () => {
+        const handleRemove = () => {
             this.isEditingExtLink = false;
             this.removeExtLink();
-        });
+        };
+        removeButton.addEventListener('click', handleRemove);
+        removeButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleRemove));
         div.appendChild(removeButton);
         this.extLinkEditorContainer.appendChild(div);
     }

package/dist/cjs/views/inline_footnote.js

@@ -23,6 +23,7 @@ const style_guide_1 = require("@manuscripts/style-guide");
 const prosemirror_state_1 = require("prosemirror-state");
 const commands_1 = require("../commands");
 const FootnotesSelector_1 = require("../components/views/FootnotesSelector");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const footnotes_1 = require("../lib/footnotes");
 const track_changes_utils_1 = require("../lib/track-changes-utils");
 const base_node_view_1 = require("./base_node_view");
@@ -108,7 +109,9 @@ class InlineFootnoteView extends base_node_view_1.BaseNodeView {
         this.initialise = () => {
             this.dom = this.createDOM();
             this.dom.classList.add('footnote-marker');
+            this.dom.tabIndex = 0;
             this.dom.addEventListener('click', this.handleClick);
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.handleClick()));
             this.updateContents();
         };
         this.selectNode = () => {

package/dist/cjs/views/keyword.js

@@ -21,9 +21,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeywordView = void 0;
 const prosemirror_state_1 = require("prosemirror-state");
 const DeleteKeywordDialog_1 = require("../components/keywords/DeleteKeywordDialog");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
+const track_changes_utils_1 = require("../lib/track-changes-utils");
 const deleteIcon = '<svg width="8px" height="8px" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">\n' +
     '    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n' +
     '        <g fill="#6E6E6E">\n' +
@@ -42,6 +44,8 @@ class KeywordView extends base_node_view_1.BaseNodeView {
         this.createDOM = () => {
             this.dom = document.createElement('span');
             this.dom.classList.add('keyword');
+            this.dom.tabIndex = this.isFirstKeyword() ? 0 : -1;
+            this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.showConfirmationDialog()));
             this.contentDOM = document.createElement('span');
         };
         this.showConfirmationDialog = () => {
@@ -63,6 +67,17 @@ class KeywordView extends base_node_view_1.BaseNodeView {
             }
         };
     }
+    isFirstKeyword() {
+        const pos = this.getPos();
+        const parent = this.view.state.doc.resolve(pos).parent;
+        for (let i = 0; i < parent.childCount; i++) {
+            const child = parent.child(i);
+            if (!(0, track_changes_utils_1.isDeleted)(child)) {
+                return child === this.node;
+            }
+        }
+        return false;
+    }
     updateContents() {
         super.updateContents();
         this.dom.innerHTML = '';

package/dist/cjs/views/keyword_group.js

@@ -20,6 +20,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KeywordGroupView = void 0;
 const AddKeywordInline_1 = require("../components/keywords/AddKeywordInline");
+const navigation_utils_1 = require("../lib/navigation-utils");
+const track_changes_utils_1 = require("../lib/track-changes-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
@@ -36,6 +38,13 @@ class KeywordGroupView extends block_view_1.default {
             this.contentDOM.setAttribute('id', this.node.attrs.id);
             this.contentDOM.setAttribute('contenteditable', 'false');
             this.element.appendChild(this.contentDOM);
+            this.removeKeydownListener = (0, navigation_utils_1.createKeyboardInteraction)({
+                container: this.element,
+                navigation: {
+                    getItems: () => Array.from(this.element.querySelectorAll('.keyword:not(.deleted), .keyword-add')),
+                    arrowKeys: { forward: 'ArrowRight', backward: 'ArrowLeft' },
+                },
+            });
             if (this.props.getCapabilities().editArticle) {
                 this.addingTools = (0, ReactSubView_1.default)(this.props, AddKeywordInline_1.AddKeywordInline, { getUpdatedNode: () => this.node }, this.node, this.getPos, this.view, ['keywords-editor']);
             }
@@ -44,6 +53,35 @@ class KeywordGroupView extends block_view_1.default {
             }
         };
     }
+    updateContents() {
+        super.updateContents();
+        this.setKeywordsTabIndices();
+    }
+    setKeywordsTabIndices() {
+        const container = this.contentDOM;
+        if (!container) {
+            return;
+        }
+        let firstFocusableFound = false;
+        for (let i = 0; i < this.node.childCount; i++) {
+            const child = this.node.child(i);
+            const keyword = container.querySelector(`.keyword[id="${child.attrs.id}"]`);
+            if (!keyword) {
+                continue;
+            }
+            if (!(0, track_changes_utils_1.isDeleted)(child) && !firstFocusableFound) {
+                keyword.tabIndex = 0;
+                firstFocusableFound = true;
+            }
+            else {
+                keyword.tabIndex = -1;
+            }
+        }
+    }
+    destroy() {
+        this.removeKeydownListener?.();
+        super.destroy();
+    }
 }
 exports.KeywordGroupView = KeywordGroupView;
 exports.default = (0, creators_1.createNodeView)(KeywordGroupView);

package/dist/cjs/views/quote_image_editable.js

@@ -26,6 +26,7 @@ class QuoteImageEditableView extends figure_editable_1.FigureEditableView {
         this.createPlaceholder = () => {
             const element = document.createElement('div');
             element.classList.add('figure', 'placeholder');
+            element.tabIndex = 0;
             const instructions = document.createElement('div');
             instructions.classList.add('instructions');
             instructions.innerHTML = `${icons_1.plusIcon}<div>Drag or click here to upload image</div>`;

package/dist/cjs/views/supplements.js

@@ -20,6 +20,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SupplementsView = void 0;
 const icons_1 = require("../icons");
+const navigation_utils_1 = require("../lib/navigation-utils");
 const block_view_1 = __importDefault(require("./block_view"));
 const creators_1 = require("./creators");
 class SupplementsView extends block_view_1.default {
@@ -31,11 +32,13 @@ class SupplementsView extends block_view_1.default {
             this.toggleButton = document.createElement('button');
             this.toggleButton.classList.add('supplements-toggle-btn', 'button-reset');
             this.toggleButton.innerHTML = icons_1.arrowUp;
-            this.toggleButton.onclick = () => {
+            const handleToggle = () => {
                 this.collapsed = !this.collapsed;
                 this.toggleContent();
                 this.toggleButton?.classList.toggle('collapsed', this.collapsed);
             };
+            this.toggleButton.onclick = handleToggle;
+            this.toggleButton.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(handleToggle));
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('supplements-content');
             this.contentDOM.classList.add('block');

package/dist/es/commands.js

@@ -34,6 +34,7 @@ import { setCommentSelection } from './plugins/comments';
 import { getEditorProps } from './plugins/editor-props';
 import { searchReplaceKey } from './plugins/search-replace';
 import { checkForCompletion } from './plugins/section_title/autocompletion';
+import { persistentCursor } from './plugins/persistent-cursor';
 export const addToStart = (state, dispatch) => {
     const { selection } = state;
     const props = getEditorProps(state);
@@ -1296,10 +1297,12 @@ export const ignoreEnterInSubtitles = (state) => {
     }
     return false;
 };
-export const exitEditorToContainer = () => {
+export const exitEditorToContainer = (state, dispatch, view) => {
     const editorContainer = document.getElementById('editor');
-    if (editorContainer) {
+    if (editorContainer && dispatch && view) {
         editorContainer.focus();
+        const tr = view.state.tr.setMeta(persistentCursor, { on: true });
+        view.dispatch(tr);
         return true;
     }
     return false;

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

@@ -28,6 +28,12 @@ const NewKeywordButton = styled.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.div `
   position: absolute;
@@ -157,8 +163,13 @@ export const AddKeywordInline = ({ viewProps, getUpdatedNode }) => {
         },
     };
     return (React.createElement(AddNewKeyword, { ref: nodeRef },
-        !isAddingNewKeyword && (React.createElement(NewKeywordButton, { onClick: () => {
+        !isAddingNewKeyword && (React.createElement(NewKeywordButton, { tabIndex: -1, className: "keyword-add", onClick: () => {
                 setIsAddingNewKeyword(true);
+            }, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    setIsAddingNewKeyword(true);
+                }
             } }, "New keyword...")),
         isAddingNewKeyword && React.createElement(KeywordInput, null),
         isAddingNewKeyword && isValidNewKeyword() && (React.createElement(CreateKeywordButtonElement, null)),