@manuscripts/body-editor 3.9.11 → 3.9.13

package/dist/es/plugins/accessibility_element.js

@@ -4,10 +4,18 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
 import { createToggleButton } from '../lib/utils';
 export const accessibilityElementKey = new PluginKey('accessibility-element');
 const nodeTypes = [schema.nodes.alt_text, schema.nodes.long_desc];
-const handleExpandButtonClick = (view, node) => {
+const handleExpandButtonClick = (view, node, event) => {
     const tr = view.state.tr;
     toggleAccessibilitySection(tr, node);
     view.dispatch(tr);
+    const isKeyboardEvent = event.type === 'keydown';
+    if (isKeyboardEvent) {
+        const parentElement = view.dom.querySelector(`[id="${node.attrs.id}"]`);
+        if (parentElement) {
+            const firstInput = parentElement.querySelector('.accessibility_element_input');
+            firstInput?.focus();
+        }
+    }
 };
 const isSelectionWithin = (node, pos, selection) => {
     if (!selection || !nodeTypes.includes(node.type)) {
@@ -24,7 +32,7 @@ const buildExpandButtonDecorations = (doc) => {
                 const container = document.createElement('div');
                 container.className =
                     'accessibility_element_expander_button_container';
-                container.appendChild(createToggleButton(() => handleExpandButtonClick(view, node), 'additional info'));
+                container.appendChild(createToggleButton((e) => handleExpandButtonClick(view, node, e), 'additional info'));
                 return container;
             }, {
                 key: node.attrs.id,

package/dist/es/plugins/add-subtitle.js

@@ -18,15 +18,21 @@ import { Plugin, TextSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { v4 as uuidv4 } from 'uuid';
 import { addAuthorIcon } from '../icons';
+import { handleEnterKey } from '../lib/navigation-utils';
 import { findInsertionPosition } from '../lib/utils';
 const createAddSubtitleButton = (handler) => {
     const button = document.createElement('span');
     button.className = 'add-subtitle';
     button.innerHTML = `${addAuthorIcon} <span class="add-subtitle-text">Add subtitle</span>`;
-    button.addEventListener('mousedown', (e) => {
-        e.preventDefault();
+    button.tabIndex = 0;
+    const activate = (event) => {
+        event.preventDefault();
         handler();
+    };
+    button.addEventListener('mousedown', (e) => {
+        activate(e);
     });
+    button.addEventListener('keydown', handleEnterKey(activate));
     return button;
 };
 export default (props) => new Plugin({

package/dist/es/plugins/alt-titles.js

@@ -131,11 +131,16 @@ export default () => {
                 else if (pState.title[0].textContent.length) {
                     const titleEnd = pState.title[0].nodeSize + pState.title[1];
                     decorations.push(Decoration.widget(titleEnd - 1, (view) => {
-                        return createToggleButton(() => {
+                        return createToggleButton((e) => {
                             const tr = view.state.tr.setMeta(altTitlesKey, {
                                 collapsed: false,
                             });
                             view.dispatch(skipTracking(tr));
+                            const isKeyboardEvent = e.type === 'keydown';
+                            if (isKeyboardEvent) {
+                                const altTitle = view.dom.querySelector('.alt-title-text');
+                                altTitle?.focus();
+                            }
                         }, 'alternative titles');
                     }, {
                         side: -1,

package/dist/es/plugins/comments.js

@@ -2,10 +2,28 @@ import { schema, } from '@manuscripts/transform';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { findChildrenByType } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { handleEnterKey } from '../lib/navigation-utils';
 import { createCommentMarker, getCommentKey, isReply, } from '../lib/comments';
 export const commentsKey = new PluginKey('comments');
 const COMMENT_SELECTION = 'comment-selection';
 const EMPTY_SELECTION = {};
+const handleCommentMarkerInteraction = (view, target) => {
+    const state = view.state;
+    const com = commentsKey.getState(state);
+    const marker = target?.closest('[data-key]');
+    if (!marker && !com?.selection) {
+        return false;
+    }
+    const tr = state.tr;
+    if (marker) {
+        const key = marker.dataset.key;
+        setCommentSelection(tr, key, undefined, false);
+    }
+    else {
+        clearCommentSelection(tr);
+    }
+    view.dispatch(tr);
+};
 export default () => {
     return new Plugin({
         key: commentsKey,
@@ -24,22 +42,16 @@ export default () => {
         props: {
             decorations: (state) => commentsKey.getState(state)?.decorations,
             handleClick: (view, pos, e) => {
-                const state = view.state;
-                const com = commentsKey.getState(state);
                 const target = e.target;
-                const marker = target.closest('[data-key]');
-                if (!marker && !com?.selection) {
-                    return;
-                }
-                const tr = state.tr;
-                if (marker) {
-                    const key = marker.dataset.key;
-                    setCommentSelection(tr, key, undefined, false);
-                }
-                else {
-                    clearCommentSelection(tr);
-                }
-                view.dispatch(tr);
+                return handleCommentMarkerInteraction(view, target);
+            },
+            handleDOMEvents: {
+                keydown: (view, e) => {
+                    return handleEnterKey(() => {
+                        const target = document.activeElement;
+                        handleCommentMarkerInteraction(view, target);
+                    })(e);
+                },
             },
         },
     });

package/dist/es/plugins/persistent-cursor.js

@@ -46,12 +46,10 @@ export default () => {
             },
             handleDOMEvents: {
                 focus(view, event) {
-                    const newTr = view.state.tr.setMeta(persistentCursor, { on: false });
-                    view.dispatch(newTr);
-                },
-                blur(view, event) {
-                    const newTr = view.state.tr.setMeta(persistentCursor, { on: true });
-                    view.dispatch(newTr);
+                    if (this.getState(view.state)?.on) {
+                        const newTr = view.state.tr.setMeta(persistentCursor, { on: false });
+                        view.dispatch(newTr);
+                    }
                 },
             },
         },

package/dist/es/plugins/section_category.js

@@ -3,6 +3,7 @@ import { Plugin, PluginKey } from 'prosemirror-state';
 import { findChildrenByType, findParentNodeOfTypeClosestToPos, } from 'prosemirror-utils';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { sectionCategoryIcon } from '../icons';
+import { handleEnterKey, createKeyboardInteraction, } from '../lib/navigation-utils';
 export const sectionCategoryKey = new PluginKey('section-category');
 export default (props) => new Plugin({
     key: sectionCategoryKey,
@@ -29,27 +30,51 @@ const createMenuItem = (props, contents, handler, isDisabled, isSelected) => {
         item.classList.add('disabled');
     }
     item.textContent = contents;
-    item.addEventListener('mousedown', (event) => {
-        handler(event);
-        props.popper.destroy();
-    });
+    item.setAttribute('tabindex', '0');
+    item.addEventListener('mousedown', handler);
+    item.addEventListener('keydown', handleEnterKey(handler));
     return item;
 };
 const createMenu = (props, currentCategory, categories, usedCategoryIDs, onSelect) => {
     const menu = document.createElement('div');
     menu.className = 'section-category menu';
+    const menuItems = [];
+    const removeKeydownListener = createKeyboardInteraction({
+        container: document,
+        navigation: {
+            getItems: () => menuItems,
+            arrowKeys: {
+                forward: 'ArrowDown',
+                backward: 'ArrowUp',
+            },
+            getCurrentElement: () => document.activeElement,
+        },
+    });
+    const destroy = () => {
+        removeKeydownListener();
+        props.popper.destroy();
+    };
     categories.forEach((category) => {
-        const item = createMenuItem(props, category.titles[0], () => onSelect(category), category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
+        const item = createMenuItem(props, category.titles[0], () => {
+            onSelect(category);
+            destroy();
+        }, category.isUnique && usedCategoryIDs.has(category.id), currentCategory === category);
+        menuItems.push(item);
         menu.appendChild(item);
     });
-    return menu;
+    return { menu, destroy };
 };
 const createButton = (props, view, pos, currentCategory, categories, usedCategoryIDs, canEdit = true, disabled) => {
+    let menuInstance = null;
     const handleSelect = (category) => {
         const tr = view.state.tr;
         tr.setNodeAttribute(pos, 'category', category.id);
         view.dispatch(tr);
     };
+    const openMenu = () => {
+        menuInstance = createMenu(props, currentCategory, categories, usedCategoryIDs, handleSelect);
+        props.popper.show(button, menuInstance.menu, 'bottom-end', false);
+    };
     const button = document.createElement('button');
     button.innerHTML = sectionCategoryIcon;
     button.classList.add('section-category-button');
@@ -62,9 +87,17 @@ const createButton = (props, view, pos, currentCategory, categories, usedCategor
         button.classList.add('disabled');
     }
     else if (canEdit) {
-        button.addEventListener('mousedown', () => {
-            const menu = createMenu(props, currentCategory, categories, usedCategoryIDs, handleSelect);
-            props.popper.show(button, menu, 'bottom-end', false);
+        button.addEventListener('click', openMenu);
+        createKeyboardInteraction({
+            container: button,
+            additionalKeys: {
+                Enter: openMenu,
+                Escape: (e) => {
+                    e.preventDefault();
+                    menuInstance?.destroy();
+                    menuInstance = null;
+                },
+            },
         });
     }
     return button;

package/dist/es/plugins/translations.js

@@ -20,24 +20,43 @@ import { insertTransAbstract, insertTransGraphicalAbstract } from '../commands';
 import { addAuthorIcon, translateIcon } from '../icons';
 import { getLanguage, getLanguageLabel } from '../lib/languages';
 import { templateAllows } from '../lib/template';
-const createMenuItem = (props, contents, handler, isSelected = false) => {
+import { handleEnterKey, createKeyboardInteraction, } from '../lib/navigation-utils';
+const createMenuItem = (props, contents, handler, isSelected = false, tabIndex) => {
     const item = document.createElement('div');
     item.className = `menu-item ${isSelected ? 'selected' : ''}`;
     item.textContent = contents;
-    item.addEventListener('mousedown', (event) => {
-        handler(event);
-        props.popper.destroy();
-    });
+    item.tabIndex = tabIndex;
+    item.addEventListener('mousedown', handler);
+    item.addEventListener('keydown', handleEnterKey(handler));
     return item;
 };
 const createLanguageMenu = (props, selectedCode, onSelect) => {
     const menu = document.createElement('div');
     menu.className = 'language menu';
-    props.languages.forEach((language) => {
-        const item = createMenuItem(props, getLanguageLabel(language), () => onSelect(language.code), selectedCode === language.code);
+    const menuItems = [];
+    const removeKeydownListener = createKeyboardInteraction({
+        container: document,
+        navigation: {
+            getItems: () => menuItems,
+            arrowKeys: {
+                forward: 'ArrowDown',
+                backward: 'ArrowUp',
+            },
+        },
+    });
+    const destroy = () => {
+        removeKeydownListener();
+        props.popper.destroy();
+    };
+    props.languages.forEach((language, index) => {
+        const item = createMenuItem(props, getLanguageLabel(language), () => {
+            onSelect(language.code);
+            destroy();
+        }, selectedCode === language.code, index === 0 ? 0 : -1);
+        menuItems.push(item);
         menu.appendChild(item);
     });
-    return menu;
+    return { menu, destroy };
 };
 export default (props) => new Plugin({
     props: {
@@ -64,10 +83,11 @@ export default (props) => new Plugin({
                     if (canEdit) {
                         widgets.push(Decoration.widget(pos + 1, (view) => {
                             const $span = document.createElement('span');
+                            $span.tabIndex = 0;
                             $span.className = 'add-trans-abstract';
                             $span.title = 'Add translation';
                             $span.innerHTML = `${addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`;
-                            $span.addEventListener('mousedown', (event) => {
+                            const handleActivate = (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 if (isGraphical && category) {
@@ -76,7 +96,9 @@ export default (props) => new Plugin({
                                 else {
                                     insertTransAbstract(view.state, view.dispatch, node.attrs.category, pos + node.nodeSize);
                                 }
-                            });
+                            };
+                            $span.addEventListener('mousedown', handleActivate);
+                            $span.addEventListener('keydown', handleEnterKey(handleActivate));
                             return $span;
                         }));
                     }
@@ -92,12 +114,14 @@ export default (props) => new Plugin({
                         $btn.className = 'language-selector-btn';
                         $btn.setAttribute('data-cy', 'language-selector-btn');
                         $btn.contentEditable = 'false';
+                        $btn.tabIndex = canEdit ? 0 : -1;
                         const code = node.attrs.lang || 'en';
                         const lang = getLanguage(code, props.languages);
                         const label = getLanguageLabel(lang);
                         $btn.innerHTML = `<span>${label}</span> ${translateIcon}`;
                         if (canEdit) {
-                            $btn.addEventListener('mousedown', (event) => {
+                            let menuInstance = null;
+                            const handleOpenMenu = (event) => {
                                 event.preventDefault();
                                 event.stopPropagation();
                                 props.popper.destroy();
@@ -105,9 +129,21 @@ export default (props) => new Plugin({
                                     const tr = view.state.tr.setNodeAttribute(pos, 'lang', code);
                                     view.dispatch(tr);
                                 };
-                                const menu = createLanguageMenu(props, code, handleSelect);
-                                props.popper.show($btn, menu, 'bottom-end', false);
+                                menuInstance = createLanguageMenu(props, code, handleSelect);
+                                props.popper.show($btn, menuInstance.menu, 'bottom-end', false);
+                            };
+                            createKeyboardInteraction({
+                                container: $btn,
+                                additionalKeys: {
+                                    Enter: handleOpenMenu,
+                                    Escape: (e) => {
+                                        e.preventDefault();
+                                        menuInstance?.destroy();
+                                        menuInstance = null;
+                                    },
+                                },
                             });
+                            $btn.addEventListener('mousedown', handleOpenMenu);
                         }
                         return $btn;
                     }));

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.9.11';
+export const VERSION = '3.9.13';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/accessibility_element.js

@@ -1,4 +1,6 @@
 import { schema } from '@manuscripts/transform';
+import { TextSelection } from 'prosemirror-state';
+import { createKeyboardInteraction } from '../lib/navigation-utils';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
 export class AccessibilityElementView extends BlockView {
@@ -23,6 +25,34 @@ export class AccessibilityElementView extends BlockView {
         super.createElement();
         this.contentDOM.className = 'accessibility_element_input';
         this.contentDOM.setAttribute('contenteditable', 'true');
+        this.contentDOM.tabIndex = this.node.type === schema.nodes.alt_text ? 0 : -1;
+        this.removeKeydownListener = createKeyboardInteraction({
+            container: this.contentDOM,
+            navigation: {
+                getItems: () => {
+                    const parentEl = this.dom.parentElement;
+                    if (!parentEl) {
+                        return [];
+                    }
+                    return Array.from(parentEl.querySelectorAll('.accessibility_element_input'));
+                },
+                arrowKeys: { forward: 'ArrowDown', backward: 'ArrowUp' },
+                getCurrentElement: () => this.contentDOM,
+            },
+            additionalKeys: {
+                Enter: (e) => {
+                    e.preventDefault();
+                    const pos = this.getPos();
+                    const tr = this.view.state.tr.setSelection(TextSelection.create(this.view.state.doc, pos + 1));
+                    this.view.dispatch(tr);
+                    this.view.focus();
+                },
+            },
+        });
+    }
+    destroy() {
+        this.removeKeydownListener?.();
+        super.destroy();
     }
 }
 export default createNodeView(AccessibilityElementView);

package/dist/es/views/alt_title.js

@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { TextSelection } from 'prosemirror-state';
+import { createKeyboardInteraction } from '../lib/navigation-utils';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
 export class AltTitleView extends BaseNodeView {
@@ -31,10 +33,37 @@ export class AltTitleView extends BaseNodeView {
             this.dom.setAttribute('data-type', this.node.attrs.type);
             this.contentDOM = document.createElement('div');
             this.contentDOM.classList.add('alt-title-text');
+            this.contentDOM.tabIndex = this.node.attrs.type === 'running' ? 0 : -1;
+            this.removeKeydownListener = createKeyboardInteraction({
+                container: this.contentDOM,
+                navigation: {
+                    getItems: () => {
+                        const allAltTitles = Array.from(this.view.dom.querySelectorAll('.alt-title-text'));
+                        return allAltTitles;
+                    },
+                    arrowKeys: { forward: 'ArrowDown', backward: 'ArrowUp' },
+                    getCurrentElement: () => this.contentDOM,
+                },
+                additionalKeys: {
+                    Enter: (e) => {
+                        e.preventDefault();
+                        const pos = this.getPos();
+                        if (typeof pos === 'number') {
+                            const tr = this.view.state.tr.setSelection(TextSelection.create(this.view.state.doc, pos + 1));
+                            this.view.dispatch(tr);
+                            this.view.focus();
+                        }
+                    },
+                },
+            });
             this.dom.appendChild(label);
             this.dom.appendChild(this.contentDOM);
             this.updateContents();
         };
     }
+    destroy() {
+        this.removeKeydownListener?.();
+        super.destroy();
+    }
 }
 export default createNodeView(AltTitleView);

package/dist/es/views/alt_titles_section.js

@@ -19,6 +19,7 @@ import { arrowDown } from '../icons';
 import { altTitlesKey } from '../plugins/alt-titles';
 import BlockView from './block_view';
 import { createNodeView } from './creators';
+import { handleEnterKey } from '../lib/navigation-utils';
 export class AltTitleSectionView extends BlockView {
     constructor() {
         super(...arguments);
@@ -41,7 +42,7 @@ export class AltTitleSectionView extends BlockView {
         button.classList.add('alt-titles-closing-button', 'button-reset');
         button.setAttribute('aria-label', 'Collapse alternative titles');
         button.innerHTML = arrowDown;
-        button.addEventListener('click', () => {
+        const handleCollapse = () => {
             const tr = this.view.state.tr.setMeta(altTitlesKey, {
                 collapsed: true,
             });
@@ -53,7 +54,14 @@ export class AltTitleSectionView extends BlockView {
                 tr.setSelection(TextSelection.create(tr.doc, titleEndPos));
             }
             this.view.dispatch(tr);
+            const toggleButton = this.view.dom.querySelector('.toggle-button-open');
+            toggleButton?.focus();
+        };
+        button.addEventListener('click', (e) => {
+            e.preventDefault();
+            handleCollapse();
         });
+        button.addEventListener('keydown', handleEnterKey(() => handleCollapse()));
         closingPanel.appendChild(button);
         return closingPanel;
     }

package/dist/es/views/attachment.js

@@ -117,7 +117,7 @@ export class AttachmentView extends BlockView {
                 stopPropagation: () => {
                 },
             };
-            this.props.onEditorClick(this.getPos(), this.node, this.getPos(), event);
+            this.props.onEditorClick(event);
         }
     }
 }

package/dist/es/views/bibliography_element.js

@@ -18,6 +18,7 @@ import { schema, } from '@manuscripts/transform';
 import { NodeSelection } from 'prosemirror-state';
 import { ReferencesEditor, } from '../components/references/ReferencesEditor';
 import { createCommentMarker, handleComment } from '../lib/comments';
+import { handleEnterKey } from '../lib/navigation-utils';
 import { findNodeByID } from '../lib/doc';
 import { sanitize } from '../lib/dompurify';
 import { addTrackChangesAttributes, addTrackChangesClassNames, } from '../lib/track-changes-utils';
@@ -33,31 +34,50 @@ export class BibliographyElementBlockView extends BlockView {
         super(...arguments);
         this.stopEvent = () => true;
         this.ignoreMutation = () => true;
+        this.handleCommentMarkerInteraction = (marker) => {
+            const key = marker.dataset.key;
+            const tr = this.view.state.tr;
+            setCommentSelection(tr, key, undefined, false);
+            this.view.dispatch(tr);
+        };
+        this.handleBibItemInteraction = (item) => {
+            if (!this.props.getCapabilities().seeReferencesButtons) {
+                return;
+            }
+            this.showContextMenu(item);
+            const node = findChildByID(this.view, item.id);
+            if (node) {
+                const tr = this.view.state.tr;
+                tr.setSelection(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;
-                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 = findChildByID(this.view, item.id);
-                    if (!node) {
-                        return;
-                    }
-                    const view = this.view;
-                    const tr = view.state.tr;
-                    tr.setSelection(NodeSelection.create(view.state.doc, node.pos));
-                    view.dispatch(tr);
-                }
+            const item = element.closest('.bib-item');
+            if (item) {
+                this.handleBibItemInteraction(item);
             }
         };
+        this.handleKeyDown = (event) => {
+            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');
@@ -164,6 +184,7 @@ export class BibliographyElementBlockView extends BlockView {
         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];
@@ -190,6 +211,7 @@ export class BibliographyElementBlockView extends BlockView {
                 }
             }
             const element = sanitize(`<div id="${id}" class="bib-item"><div class="csl-bib-body">${tempDiv.innerHTML}</div></div>`).firstElementChild;
+            element.tabIndex = 0;
             const comment = createCommentMarker('div', id);
             element.prepend(comment);
             addTrackChangesAttributes(node.attrs, element);

package/dist/es/views/citation.js

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

package/dist/es/views/citation_editable.js

@@ -21,6 +21,7 @@ import { CitationEditor, } from '../components/references/CitationEditor';
 import { CitationViewer, } from '../components/references/CitationViewer';
 import { handleComment } from '../lib/comments';
 import { Crossref } from '../lib/crossref';
+import { handleEnterKey } from '../lib/navigation-utils';
 import { isDeleted } from '../lib/track-changes-utils';
 import { deleteNode, findChildByID, updateNodeAttrs } from '../lib/view';
 import { getBibliographyPluginState } from '../plugins/bibliography';
@@ -41,12 +42,12 @@ export class CitationEditableView extends 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 (!isDeleted(this.node) && event.button === 0) {
+            else if (!isDeleted(this.node)) {
                 const attrs = this.node.attrs;
                 if (attrs.rids.length) {
                     this.showContextMenu();
@@ -191,6 +192,7 @@ export class CitationEditableView extends CitationView {
     createDOM() {
         super.createDOM();
         this.dom.addEventListener('mouseup', this.handleClick);
+        this.dom.addEventListener('keydown', handleEnterKey(() => this.handleClick()));
     }
     insertBibliographyNode(attrs) {
         const { doc, tr } = this.view.state;