@manuscripts/body-editor 3.12.2 → 3.12.4

package/dist/es/components/references/ReferencesModal.js

@@ -1,4 +1,4 @@
-import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, } from '@manuscripts/style-guide';
+import { Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import { isEqual } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -13,10 +13,11 @@ const ReferencesSidebar = styled(ModalSidebar) `
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
 `;
-const ReferencesInnerWrapper = styled.div `
+const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
-`;
-const ReferenceButton = styled.div `
+  padding: 12px 0;
+`);
+const ReferenceButton = withNavigableListItem(styled.div `
   cursor: pointer;
   display: flex;
   justify-content: flex-start;
@@ -43,7 +44,7 @@ const ReferenceButton = styled.div `
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
-`;
+`);
 const IconContainer = styled.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
   position: relative;

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

@@ -38,7 +38,15 @@ const OptionWrapper = styled.div `
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+  background-color: ${(props) => {
+    if (props.selected) {
+        return props.theme.colors.background.selected;
+    }
+    if (props.focused) {
+        return props.theme.colors.background.fifth;
+    }
+    return 'transparent';
+}};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.fifth};
@@ -59,8 +67,8 @@ export const InsertTableDialog = ({ state, dispatch, }) => {
         value: index + 1,
         label: `${index + 1}`,
     }));
-    const OptionComponent = ({ innerProps, data, }) => {
-        return (React.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+    const OptionComponent = ({ innerProps, data, innerRef, isFocused, isSelected, }) => {
+        return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
     };
     const actions = {
         primary: {

package/dist/es/components/views/CrossReferenceItems.js

@@ -13,30 +13,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, } from '@manuscripts/style-guide';
+import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   padding: ${(props) => props.theme.grid.unit * 3}px
     ${(props) => props.theme.grid.unit * 4}px;
   display: flex;
   flex-direction: column;
   max-height: 60vh;
   overflow: hidden;
-`;
+`);
 const Actions = styled.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
 `;
-const Items = styled.div `
+const Items = withListNavigation(styled.div `
   flex: 1;
   overflow-y: auto;
-  margin: ${(props) => props.theme.grid.unit * 4}px 0;
-`;
-const CrossReferenceItem = styled.div `
-  position: relative;
+  padding: ${(props) => props.theme.grid.unit * 3}px;
+`);
+const CrossReferenceItem = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 4}px;
   background-color: ${(props) => props.isSelected
@@ -48,17 +47,12 @@ const CrossReferenceItem = styled.div `
     ? props.theme.colors.brand.medium
     : props.theme.colors.border.secondary};
   border-width: 1px 0;
-  margin-top: -1px;
   z-index: ${(props) => (props.isSelected ? '1' : '0')};
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &:hover {
     background-color: ${(props) => props.theme.colors.background.selected};
   }
-`;
+`);
 const Label = styled.span `
   color: ${(props) => props.theme.colors.text.primary};
 `;
@@ -105,7 +99,7 @@ export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, curre
     }, [currentTargetId]);
     return (React.createElement(Container, null,
         React.createElement(Heading, null, "Insert Cross-reference"),
-        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onMouseDown: () => setSelectedItem(target.id) },
+        React.createElement(Items, null, targets.length ? (targets.map((target) => (React.createElement(CrossReferenceItem, { key: target.id, isSelected: selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
             React.createElement(DefaultLabelWrapper, null,
                 React.createElement(Label, null, target.label),
                 React.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),

package/dist/es/components/views/FootnotesSelector.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, } from '@manuscripts/style-guide';
+import { AddedIcon, AddIcon, AddNewIcon, ButtonGroup, IconTextButton, PrimaryButton, SecondaryButton, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { isDeleted } from '../../lib/track-changes-utils';
@@ -29,10 +29,10 @@ const Actions = styled(ButtonGroup) `
   justify-content: space-between;
   padding: ${(props) => props.theme.grid.unit * 4}px;
 `;
-const Container = styled.div `
+const Container = withFocusTrap(styled.div `
   flex: 1;
   font-family: ${(props) => props.theme.font.family.sans};
-`;
+`);
 const AddNewFootnote = styled(ButtonGroup) `
   button {
     margin-right: ${(props) => props.theme.grid.unit * 8}px;
@@ -113,17 +113,17 @@ const Separator = styled.div `
   border-bottom: 1px solid #e2e2e2;
   margin: 4px 0;
 `;
-const NotesListContainer = styled.div `
+const NotesListContainer = withListNavigation(styled.div `
   padding: ${(props) => props.theme.grid.unit * 6}px
     ${(props) => props.theme.grid.unit * 5}px;
   flex: 1;
   overflow-y: auto;
-`;
-const FootnoteItemContainer = styled.div `
+`);
+const FootnoteItemContainer = withNavigableListItem(styled.div `
   cursor: pointer;
   padding: ${(props) => props.theme.grid.unit * 2}px 0;
   display: flex;
-`;
+`);
 const StatusIcon = styled.div `
   flex-shrink: 1;
   margin-right: ${(props) => props.theme.grid.unit * 3}px;

package/dist/es/components/views/InsertSpecialCharacter.js

@@ -1,4 +1,4 @@
-import { ButtonGroup, CloseButton, IconButton, IconButtonGroup, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
+import { ButtonGroup, CloseButton, IconButton, IconButtonGroup, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, PrimaryButton, SidebarContent, StyledModal, withNavigableListItem, withListNavigation, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import Select from 'react-select';
 import styled from 'styled-components';
@@ -39,8 +39,8 @@ const InsertSpecialCharacterDialog = ({ view }) => {
                     React.createElement(ButtonsContainer, null,
                         React.createElement(PrimaryButton, { onClick: handleClose }, "Close")))))));
 };
-const OptionComponent = ({ innerProps, data, }) => {
-    return (React.createElement(OptionWrapper, { ...innerProps, ref: null }, data.label));
+const OptionComponent = ({ innerProps, innerRef, data, isFocused, isSelected, }) => {
+    return (React.createElement(OptionWrapper, { ...innerProps, ref: innerRef, focused: isFocused, selected: isSelected }, data.label));
 };
 const Container = styled(ModalContainer) `
   padding: 8px;
@@ -64,7 +64,15 @@ const OptionWrapper = styled.div `
   padding-top: ${(props) => props.theme.grid.unit * 2}px;
   padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
-  background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
+  background-color: ${(props) => {
+    if (props.selected) {
+        return props.theme.colors.background.selected;
+    }
+    if (props.focused) {
+        return props.theme.colors.background.fifth;
+    }
+    return 'transparent';
+}};
 
   &:hover {
     background-color: ${(props) => props.theme.colors.background.fifth};
@@ -74,19 +82,20 @@ const CharactersSetContainer = styled.div `
   flex: 1;
   overflow-y: scroll;
   margin: 18px 0;
-  border: 1px solid #ddd;
+  padding: 8px;
 `;
-const CharactersSet = styled(IconButtonGroup) `
+const CharactersSet = withListNavigation(styled(IconButtonGroup) `
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(28px, max-content));
-  height: ${(props) => props.theme.grid.unit * 8}px;
-`;
-const Character = styled(IconButton) `
+  border: 1px solid #ddd;
+`);
+const Character = withNavigableListItem(styled(IconButton) `
   border-bottom: 1px solid #ddd;
   border-right: 1px solid #ddd;
   border-radius: unset;
 
-  :hover {
+  :hover,
+  :focus {
     background-color: #f0f0f0 !important;
   }
 
@@ -96,7 +105,12 @@ const Character = styled(IconButton) `
     border-bottom: 1px solid #ddd !important;
     border-right: 1px solid #ddd !important;
   }
-`;
+
+  &&:not([disabled]):focus-visible {
+    outline: 1px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+`);
 export const openInsertSpecialCharacterDialog = (view) => {
     if (!view) {
         return;

package/dist/es/components/views/LinkForm.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, } from '@manuscripts/style-guide';
+import { DeleteIcon, FormContainer, FormRow, Label, PrimaryButton, SecondaryButton, TextField, InputErrorText, withFocusTrap, } from '@manuscripts/style-guide';
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 import { allowedHref } from '../../lib/url';
@@ -44,6 +44,7 @@ const RemoveButton = styled(SecondaryButton) `
 export const Open = styled.a `
   display: inline-block;
   margin-left: ${(props) => props.theme.grid.unit * 2}px;
+  margin-top: 4px;
   text-transform: uppercase;
   color: inherit;
   font-size: ${(props) => props.theme.font.size.small};
@@ -53,7 +54,13 @@ export const Open = styled.a `
     content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
     margin-left: 4px;
   }
+
+  &&:not([disabled]):focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 3px;
+  }
 `;
+const Form = withFocusTrap(styled.form ``);
 export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
     const [href, setHref] = useState(value.href);
     const [text, setText] = useState(value.text);
@@ -93,7 +100,7 @@ export const LinkForm = ({ onCancel, onRemove, onSave, value, }) => {
             onSave({ href, text, title });
         }
     }, [href, text, title, onSave, validate]);
-    return (React.createElement("form", { onSubmit: handleSubmit, noValidate: true },
+    return (React.createElement(Form, { onSubmit: handleSubmit, noValidate: true },
         React.createElement(FormContainer, null,
             React.createElement(FormRow, null,
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },

package/dist/es/lib/popper.js

@@ -37,11 +37,13 @@ export class PopperManager {
                     this.triggerElement.focus();
                 }
             };
+            const isMenu = contents.classList.contains('context-menu') ||
+                contents.classList.contains('menu');
             createKeyboardInteraction({
                 container,
                 additionalKeys: {
                     Escape: closeAndRestoreFocus,
-                    Tab: closeAndRestoreFocus,
+                    Tab: isMenu ? closeAndRestoreFocus : undefined,
                 },
             });
             if (showArrow) {
@@ -113,7 +115,7 @@ export class PopperManager {
             return;
         }
         if (autoFocus) {
-            const button = container.querySelector('button:not([disabled])');
+            const button = container.querySelector('button:not([disabled]), [tabindex]:not([tabindex="-1"])');
             button?.focus();
         }
     }

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.12.2';
+export const VERSION = '3.12.4';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/cross_reference_editable.js

@@ -39,6 +39,7 @@ export class CrossReferenceEditableView extends CrossReferenceView {
                 currentCustomLabel: this.node.attrs.label,
             };
             this.popperContainer = ReactSubView(this.props, CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
+            this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
         this.destroy = () => {

package/dist/es/views/equation_editable.js

@@ -30,6 +30,12 @@ export class EquationEditableView extends EquationView {
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
+                extraKeys: {
+                    Esc: () => {
+                        this.props.popper.destroy();
+                        this.view.focus();
+                    },
+                },
             });
             input.on('changes', async () => {
                 const contents = input.getValue();

package/dist/es/views/footnote.js

@@ -35,15 +35,15 @@ export class FootnoteView extends BaseNodeView {
             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', handleEnterKey(this.handleClick));
+            this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false));
+            this.dom.addEventListener('keydown', handleEnterKey((e) => this.handleClick(e, true)));
             this.updateContents();
         };
-        this.handleClick = (event) => {
+        this.handleClick = (event, fromKeyboard = false) => {
             const element = event.target;
             const item = element.closest('.footnote');
             if (item) {
-                this.showContextMenu(item);
+                this.showContextMenu(item, fromKeyboard);
             }
         };
         this.handleMarkerClick = (e) => {
@@ -134,7 +134,7 @@ export class FootnoteView extends BaseNodeView {
         const fn = getFootnotesElementState(this.view.state, id);
         return { id, fn };
     }
-    showContextMenu(element) {
+    showContextMenu(element, autoFocus) {
         this.props.popper.destroy();
         const can = this.props.getCapabilities();
         const { id, fn } = this.getFootnoteState();
@@ -156,7 +156,7 @@ export class FootnoteView extends BaseNodeView {
             });
         }
         this.contextMenu = ReactSubView(this.props, ContextMenu, componentProps, this.node, this.getPos, this.view, ['context-menu', 'footnote-context-menu']);
-        this.props.popper.show(element, this.contextMenu, 'right-start');
+        this.props.popper.show(element, this.contextMenu, 'right-start', true, [], autoFocus);
     }
 }
 const getEffectiveChildCount = (node) => {

package/dist/es/views/inline_equation_editable.js

@@ -30,6 +30,12 @@ export class InlineEquationEditableView extends InlineEquationView {
                 mode: 'stex',
                 placeholder,
                 autofocus: true,
+                extraKeys: {
+                    Esc: () => {
+                        this.props.popper.destroy();
+                        this.view.focus();
+                    },
+                },
             });
             input.on('changes', async () => {
                 const contents = input.getValue();

package/dist/es/views/inline_footnote.js

@@ -98,6 +98,7 @@ export class InlineFootnoteView extends BaseNodeView {
                 onInsert: this.handleInsert,
             };
             this.popperContainer = ReactSubView(this.props, FootnotesSelector, props, this.node, this.getPos, this.view, ['footnote-editor']);
+            this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto', false);
         };
         this.initialise = () => {

package/dist/types/components/hooks/use-debounce.d.ts

@@ -14,3 +14,4 @@
  * limitations under the License.
  */
 export declare const useDebounce: <T>(value: T, delay: number) => T;
+export default function useDebounced<Input, Output>(fn: (arg: Input) => Promise<Output>, delay: number): (arg: Input) => Promise<Output>;

package/dist/types/components/references/ReferenceForm/styled-components.d.ts

@@ -36,4 +36,14 @@ export declare const DropdownIndicator: import("styled-components").StyledCompon
 export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {
     isOpen: boolean;
 }, never>;
-export declare const RemoveButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const RemoveButton: import("styled-components").StyledComponent<"button", any, {
+    type: "button" | "submit" | "reset";
+} & {
+    danger?: boolean;
+    disabled?: boolean;
+    mini?: boolean;
+} & {
+    defaultColor?: boolean;
+    size?: number;
+    iconColor?: string;
+}, "type">;

package/dist/types/components/references/ReferenceSearchResults.d.ts

@@ -15,8 +15,26 @@
  */
 import { BibliographyItemAttrs } from '@manuscripts/transform';
 import React from 'react';
-export declare const ReferenceSearchResultsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ReferenceSearchResult: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ReferenceSearchResultsContainer: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const ReferenceSearchResult: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any> | undefined;
+    forwardedAs?: string | React.ComponentType<any> | undefined;
+}, "ref"> & React.RefAttributes<HTMLElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const ReferenceSearchResults: React.FC<{
     items: BibliographyItemAttrs[];
     total: number;

package/dist/types/versions.d.ts

@@ -1,2 +1,2 @@
-export declare const VERSION = "3.12.2";
+export declare const VERSION = "3.12.4";
 export declare const MATHJAX_VERSION = "3.2.2";

package/dist/types/views/footnote.d.ts

@@ -26,8 +26,8 @@ export declare class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>>
         id: string;
         fn: import("../plugins/footnotes").FootnotesElementState | undefined;
     };
-    showContextMenu(element: HTMLElement): void;
-    handleClick: (event: Event) => void;
+    showContextMenu(element: HTMLElement, autoFocus: boolean): void;
+    handleClick: (event: Event, fromKeyboard?: boolean) => void;
     handleMarkerClick: (e?: Event) => void;
     handleDeleteClick: (e?: Event) => void;
     handleDelete: () => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.12.2",
+  "version": "3.12.4",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -37,7 +37,7 @@
     "@citation-js/plugin-pubmed": "0.3.0",
     "@citation-js/plugin-ris": "0.7.18",
     "@iarna/word-count": "1.1.2",
-    "@manuscripts/style-guide": "3.5.5",
+    "@manuscripts/style-guide": "3.5.6",
     "@manuscripts/track-changes-plugin": "2.3.8",
     "@manuscripts/transform": "4.3.27",
     "@popperjs/core": "2.11.8",

package/styles/popper.css

@@ -245,6 +245,7 @@
 
 .popper .cross-reference-editor {
   position: relative;
+  outline: none;
 }
 
 .popper .cross-reference-editor,
@@ -272,6 +273,7 @@
   box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
   height: auto;
   width: 600px;
+  outline: none;
 }
 
 .popper .track-attrs-popper {