@manuscripts/body-editor 3.16.0 → 3.16.1

package/dist/cjs/views/figure_editable.js

@@ -198,6 +198,9 @@ class FigureEditableView extends figure_1.FigureView {
         this.addTools();
     }
     addTools() {
+        if (this.getPos() === undefined) {
+            return;
+        }
         this.manageReactTools();
         const existingDragHandlers = this.container.querySelectorAll('.drag-handler');
         existingDragHandlers.forEach((handler) => handler.remove());

package/dist/es/commands.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isDeleted, skipTracking, skipSelect } from '@manuscripts/track-changes-plugin';
+import { isDeleted, skipTracking, skipSelect, } from '@manuscripts/track-changes-plugin';
 import { generateNodeID, isElementNodeType, isListNode, isSectionNodeType, isTableElementNode, schema, } from '@manuscripts/transform';
 import { Fragment, NodeRange, Slice, } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
@@ -298,7 +298,7 @@ export const insertSupplement = (file, view, setSelection = true) => {
 export const insertSupplementWeblink = (url, title, view) => {
     const supplement = schema.nodes.supplement.createAndFill({
         id: generateNodeID(schema.nodes.supplement),
-        href: url
+        href: url,
     }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = upsertSupplementsSection(tr, supplement);
@@ -466,15 +466,52 @@ export const insertInlineCitation = (state, dispatch) => {
     }
     return true;
 };
+export const canInsertCrossReference = (state) => {
+    if (!canInsert(schema.nodes.cross_reference)(state)) {
+        return false;
+    }
+    const { from, to, empty, $from, $to } = state.selection;
+    if (empty) {
+        return true;
+    }
+    if (!$from.sameParent($to)) {
+        return false;
+    }
+    let overlaps = false;
+    state.doc.nodesBetween(from, to, (node) => {
+        if (node.isAtom && !node.isText) {
+            overlaps = true;
+            return false;
+        }
+        return !overlaps;
+    });
+    return !overlaps;
+};
 export const insertCrossReference = (state, dispatch) => {
+    if (!canInsertCrossReference(state)) {
+        return false;
+    }
+    const text = selectedText();
     const node = state.schema.nodes.cross_reference.create({
+        id: generateNodeID(schema.nodes.cross_reference),
         rids: [],
+        label: text,
     });
-    const pos = state.selection.to;
-    const tr = state.tr.insert(pos, node);
+    const { tr } = state;
+    let pos;
+    const isWrap = !state.selection.empty;
+    if (isWrap) {
+        pos = state.selection.from;
+        tr.replaceSelectionWith(node);
+    }
+    else {
+        pos = state.selection.to;
+        tr.insert(pos, node);
+    }
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, pos);
-        dispatch(tr.setSelection(selection).scrollIntoView());
+        tr.setSelection(selection).scrollIntoView();
+        dispatch(isWrap ? skipTracking(tr) : tr);
     }
     return true;
 };
@@ -963,10 +1000,7 @@ export const insertTransGraphicalAbstract = (category, insertAfterPos) => (state
     const node = schema.nodes.trans_graphical_abstract.createAndFill({
         lang,
         category: category.id,
-    }, [
-        schema.nodes.section_title.create(),
-        createAndFillFigureElement(state),
-    ]);
+    }, [schema.nodes.section_title.create(), createAndFillFigureElement(state)]);
     const tr = state.tr.insert(pos, node);
     if (node.lastChild) {
         expandAccessibilitySection(tr, node.lastChild);

package/dist/es/components/form/FormFooter.js

@@ -16,9 +16,9 @@ const Footer = styled.div `
 const StyledIconTextButton = styled(IconTextButton) `
   color: ${(props) => props.theme.colors.brand.default};
 `;
-const FormFooter = ({ onCancel, primaryAction, }) => {
+const FormFooter = ({ onCancel, primaryAction, cancelLabel = 'Close', }) => {
     return (React.createElement(Footer, null,
-        React.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, "Close"),
+        React.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, cancelLabel),
         primaryAction));
 };
 export default FormFooter;

package/dist/es/components/keyboard-shortcuts-modal/KeyboardShortcutsModal.js

@@ -41,7 +41,8 @@ const ShortcutTabs = styled(InspectorTabs) `
   min-height: 0;
 `;
 const ModalTabsWrapper = styled('div') `
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 3}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 3}px;
 `;
 const ShortcutTabPanel = styled(InspectorTabPanel).attrs({
     tabIndex: -1,
@@ -92,7 +93,8 @@ const Section = styled.section `
   }
 `;
 const SectionTitle = styled.h3 `
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 2}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 2}px;
   font-size: ${(props) => props.theme.font.size.large};
   font-weight: ${(props) => props.theme.font.weight.normal};
   line-height: ${(props) => props.theme.font.lineHeight.large};

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

@@ -13,74 +13,122 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ButtonGroup, PrimaryButton, SecondaryButton, TextArea, withFocusTrap, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
-import React, { useEffect, useRef, useState } from 'react';
+import { CloseButton, ExpandableSection, PrimaryButton, withListNavigation, withNavigableListItem, FileUnknownIcon, getFileIcon, ArrowDownIcon, StyledModal, ModalContainer, ModalHeader, ModalBody, WebLinkIcon, } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-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;
-`;
+import { allowedHref } from '../../lib/url';
+import { nodeTypeIcon } from '../../node-type-icons';
+import FormFooter from '../form/FormFooter';
 const Items = withListNavigation(styled.div `
   flex: 1;
   overflow-y: auto;
-  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
-    ? props.theme.colors.background.selected
-    : props.theme.colors.background.primary};
+  padding: ${(props) => props.theme.grid.unit * 2}px;
+  background-color: ${(props) => props.theme.colors.background.primary};
   transition: background-color 0.1s;
-  border: solid
-    ${(props) => props.$isSelected
-    ? props.theme.colors.brand.medium
-    : props.theme.colors.border.secondary};
-  border-width: 1px 0;
-  z-index: ${(props) => (props.$isSelected ? '1' : '0')};
+  border: 1px solid ${(props) => props.theme.colors.border.secondary};
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
 
   &:hover {
-    background-color: ${(props) => props.theme.colors.background.selected};
+    background-color: #f2f2f2;
+  }
+
+  &.active {
+    background-color: #f2f2f2;
+    z-index: 1;
   }
 `);
 const Label = styled.span `
   color: ${(props) => props.theme.colors.text.primary};
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  min-width: fit-content;
 `;
 const Caption = styled.span `
   color: ${(props) => props.theme.colors.text.secondary};
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  overflow-wrap: break-word;
+  margin-left: 3.2px;
 `;
 const Heading = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
+  font-size: ${(props) => props.theme.font.size.medium};
   font-weight: ${(props) => props.theme.font.weight.bold};
+  color: ${(props) => props.theme.colors.text.primary};
+  margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
 `;
 const Empty = styled.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.text.tertiary};
 `;
+const GroupExpandableSection = styled(ExpandableSection) `
+  & > div:first-child {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    padding-left: 0;
+    gap: 10px;
+    font-weight: ${(props) => props.theme.font.weight.normal};
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`;
 const DefaultLabelWrapper = styled.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
 `;
-const CustomTextArea = styled(TextArea) `
-  width: 100%;
-  height: 75px;
+const ItemIcon = styled.span `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
   color: ${(props) => props.theme.colors.text.secondary};
-  background-color: ${(props) => props.theme.colors.background.primary} !important;
+  margin-right: ${(props) => props.theme.grid.unit * 2}px;
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+const FieldLabel = styled.label `
+  font-size: ${(props) => props.theme.font.size.normal};
+  color: ${(props) => props.theme.colors.text.secondary};
+  margin-top: ${(props) => props.theme.grid.unit * 4}px;
+  margin-bottom: ${(props) => props.theme.grid.unit}px;
+`;
+const CustomTextInput = styled.input `
+  color: ${(props) => props.theme.colors.text.secondary};
+  background-color: ${(props) => props.theme.colors.background.primary};
   border: 1px solid ${(props) => props.theme.colors.border.secondary};
   border-radius: ${(props) => props.theme.grid.radius.small};
   padding: ${(props) => props.theme.grid.unit * 2}px;
+  &:disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.colors.background.disabled};
+    color: ${(props) => props.theme.colors.text.muted};
+  }
+`;
+const StyledModalBody = styled(ModalBody) `
+  display: flex;
+  flex-direction: column;
+  padding: ${(props) => props.theme.grid.unit * 5}px
+    ${(props) => props.theme.grid.unit * 6}px;
+  max-height: 580px;
+  min-width: 600px;
+  max-width: 600px;
+  overflow: hidden;
 `;
 const trimmedCaption = (caption, limit) => {
     if (caption.length <= limit) {
@@ -89,7 +137,27 @@ const trimmedCaption = (caption, limit) => {
     const captionSearch = new RegExp(`^(.{${limit}}[^\\s]*).*`);
     return caption.replace(captionSearch, '$1…');
 };
-export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTargetId, currentCustomLabel, }) => {
+const getTargetIcon = (target, files) => {
+    if (target.type === schema.nodes.supplement.name) {
+        if (target.href && allowedHref(target.href)) {
+            return React.createElement(WebLinkIcon, { className: "file-icon" });
+        }
+        const fileName = files.find((f) => f.id === target.href)?.name ?? target.label ?? '';
+        return getFileIcon(fileName) ?? React.createElement(FileUnknownIcon, null);
+    }
+    return nodeTypeIcon(schema.nodes[target.type]);
+};
+const GROUP_LABELS = {
+    figure_element: 'Figures',
+    table_element: 'Tables',
+    equation_element: 'Equations',
+    listing_element: 'Listings',
+    box_element: 'Boxes',
+    embed: 'Media',
+    supplement: 'Supplementary files',
+};
+export const CrossReferenceItems = ({ targets, files, handleSelect, handleCancel, currentTargetId, currentCustomLabel, isEdit = false, }) => {
+    const [isOpen, setIsOpen] = useState(true);
     const [selectedItem, setSelectedItem] = useState('');
     const customTextRef = useRef(null);
     useEffect(() => {
@@ -97,20 +165,39 @@ export const CrossReferenceItems = ({ targets, handleSelect, handleCancel, curre
             setSelectedItem(currentTargetId);
         }
     }, [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, onClick: () => setSelectedItem(target.id) },
-            React.createElement(DefaultLabelWrapper, null,
-                React.createElement(Label, null, target.label),
-                React.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),
-            selectedItem === target.id && (React.createElement(CustomTextArea, { ref: customTextRef, placeholder: 'Or type custom text', defaultValue: currentTargetId &&
-                    currentTargetId === selectedItem &&
-                    currentCustomLabel
-                    ? currentCustomLabel
-                    : '' })))))) : (React.createElement(Empty, null, "No cross-reference targets available."))),
-        React.createElement(Actions, null,
-            React.createElement(ButtonGroup, null,
-                React.createElement(SecondaryButton, { onClick: handleCancel }, "Cancel"),
-                React.createElement(PrimaryButton, { onClick: () => selectedItem &&
-                        handleSelect(selectedItem, customTextRef.current?.value || ''), disabled: !selectedItem }, "Insert")))));
+    const close = useCallback(() => {
+        setIsOpen(false);
+        handleCancel();
+    }, [handleCancel]);
+    const grouped = targets.reduce((acc, t) => {
+        var _a;
+        ;
+        (acc[_a = t.type] ?? (acc[_a] = [])).push(t);
+        return acc;
+    }, {});
+    return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: close, shouldCloseOnOverlayClick: true },
+        React.createElement(ModalContainer, { "data-cy": "cross-reference-editor" },
+            React.createElement(ModalHeader, null,
+                React.createElement(CloseButton, { onClick: close })),
+            React.createElement(StyledModalBody, null,
+                React.createElement(Heading, null, isEdit ? 'Edit Cross-reference' : 'Insert Cross-reference'),
+                React.createElement(FieldLabel, { htmlFor: "cross-reference-custom-text" }, "Custom display text"),
+                React.createElement(CustomTextInput, { ref: customTextRef, id: "cross-reference-custom-text", "data-cy": "cross-reference-custom-text", type: "text", placeholder: 'Custom display text...', disabled: !selectedItem, defaultValue: currentCustomLabel ?? '' }),
+                React.createElement(Items, null, Object.keys(grouped).length ? (Object.entries(grouped).map(([type, group]) => (React.createElement(GroupExpandableSection, { key: type, title: GROUP_LABELS[type], icon: ArrowDownIcon }, group.map((target) => {
+                    const icon = getTargetIcon(target, files);
+                    return (React.createElement(CrossReferenceItem, { key: target.id, "data-cy": "cross-reference-item", className: selectedItem === target.id ? 'active' : undefined, onClick: () => setSelectedItem(target.id) },
+                        React.createElement(DefaultLabelWrapper, null,
+                            icon ? React.createElement(ItemIcon, null, icon) : null,
+                            React.createElement(Label, null,
+                                target.label,
+                                target.caption && `:`),
+                            React.createElement(Caption, null, trimmedCaption(target.caption, 200)))));
+                }))))) : (React.createElement(Empty, null, "No cross-reference targets available.")))),
+            React.createElement(FormFooter, { onCancel: close, cancelLabel: "Cancel", primaryAction: React.createElement(PrimaryButton, { onClick: () => {
+                        if (selectedItem) {
+                            setIsOpen(false);
+                            const customLabel = customTextRef.current?.value;
+                            handleSelect(selectedItem, customLabel || '');
+                        }
+                    }, disabled: !selectedItem }, isEdit ? 'Update' : 'Insert') }))));
 };

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

@@ -1,11 +1,11 @@
-import { Category, Dialog, } from '@manuscripts/style-guide';
+import { Category, Dialog } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
 import { getSupplementDisplayLabel, performDeleteSupplement, } from '../../lib/supplements';
 import { getEditorProps } from '../../plugins/editor-props';
 import ReactSubView from '../../views/ReactSubView';
 const DeleteSupplementDialog = ({ label, onDelete }) => {
     const [isOpen, setOpen] = useState(true);
-    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: 'Delete supplement', message: 'Are you sure you want to delete \u201C{label}\u201D?', actions: {
+    return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: "Delete supplement", message: "Are you sure you want to delete \u201C{label}\u201D?", actions: {
             primary: {
                 action: () => {
                     onDelete();

package/dist/es/lib/supplements.js

@@ -14,9 +14,16 @@
  * limitations under the License.
  */
 import { schema, } from '@manuscripts/transform';
-import { findChildrenByType, findParentNodeClosestToPos } from 'prosemirror-utils';
+import { findChildrenByType, findParentNodeClosestToPos, } from 'prosemirror-utils';
 import { allowedHref } from './url';
+export const getSupplementCaptionTitle = (node) => {
+    return node.firstChild?.textContent.trim() ?? '';
+};
 export const getSupplementDisplayLabel = (node, files) => {
+    const captionTitle = getSupplementCaptionTitle(node);
+    if (captionTitle) {
+        return captionTitle;
+    }
     const href = node.attrs.href;
     if (allowedHref(href)) {
         return href;

package/dist/es/menus.js

@@ -16,7 +16,7 @@
 import { getGroupCategories, schema, } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
-import { activateSearchReplace, addInlineComment, blockActive, canInsert, copySelection, insertAbstractSection, insertAffiliation, insertAward, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, insertEmbed, insertGraphicalAbstract, insertHeadshotGrid, insertHeroImage, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, paste, } from './commands';
+import { activateSearchReplace, addInlineComment, blockActive, canInsert, copySelection, insertAbstractSection, insertAffiliation, insertAward, insertBackmatterSection, insertBlock, insertBoxElement, insertContributors, insertCrossReference, canInsertCrossReference, insertEmbed, insertGraphicalAbstract, insertHeadshotGrid, insertHeroImage, insertInlineCitation, insertInlineEquation, insertInlineFootnote, insertKeywords, insertLink, insertList, insertSection, markActive, paste, } from './commands';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { ListMenuItem } from './components/toolbar/ListMenuItem';
 import { openInsertSpecialCharacterDialog } from './components/views/InsertSpecialCharacter';
@@ -330,6 +330,41 @@ export const getEditorMenus = (editor) => {
             {
                 role: 'separator',
             },
+            {
+                id: 'insert-citation',
+                label: 'Citation',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+C',
+                    pc: 'CommandOrControl+Option+C',
+                },
+                isEnabled: isEditAllowed(state) &&
+                    isCommandValid(canInsert(schema.nodes.citation)),
+                run: doCommand(insertInlineCitation),
+                isHidden: !templateAllows(state, schema.nodes.citation),
+            },
+            {
+                id: 'insert-cross-reference',
+                label: 'Cross-reference',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+R',
+                    pc: 'CommandOrControl+Option+R',
+                },
+                isEnabled: isEditAllowed(state) && isCommandValid(canInsertCrossReference),
+                run: doCommand(insertCrossReference),
+                isHidden: !templateAllows(state, schema.nodes.cross_reference),
+            },
+            {
+                id: 'insert-footnote',
+                label: 'Footnote',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+F',
+                    pc: 'CommandOrControl+Option+F',
+                },
+                isEnabled: isEditAllowed(state) &&
+                    isCommandValid(canInsert(schema.nodes.inline_footnote)),
+                run: doCommand(insertInlineFootnote),
+                isHidden: !templateAllows(state, schema.nodes.inline_footnote),
+            },
             {
                 id: 'insert-special-character',
                 label: 'Special Characters',

package/dist/es/plugins/objects.js

@@ -39,7 +39,7 @@ export default () => {
                         const { id } = node.attrs;
                         if (id) {
                             const target = targets.get(id);
-                            if (target) {
+                            if (target && target.label) {
                                 const caption = findChildren(node, (node) => node.type === schema.nodes.caption ||
                                     node.type === schema.nodes.caption_title, false)[0];
                                 if (caption) {

package/dist/es/toolbar.js

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddCommentIcon, FileImageIcon, LinkIcon, OutlineBlockQuoteIcon, OutlineEmbedIcon, OutlinePullQuoteIcon, ToolbarBoldIcon, ToolbarBoxedTextIcon, ToolbarCitationIcon, ToolbarEquationIcon, ToolbarFigureIcon, ToolbarIndentIcon, ToolbarItalicIcon, ToolbarOrderedListIcon, ToolbarSpecialCharactersIcon, ToolbarSubscriptIcon, ToolbarSuperscriptIcon, ToolbarTableIcon, ToolbarUnderlineIcon, ToolbarUnindentIcon, ToolbarUnorderedListIcon, } from '@manuscripts/style-guide';
+import { AddCommentIcon, FileImageIcon, LinkIcon, OutlineBlockQuoteIcon, OutlineEmbedIcon, OutlinePullQuoteIcon, ToolbarBoldIcon, ToolbarBoxedTextIcon, ToolbarCitationIcon, ToolbarCrossReferenceIcon, ToolbarEquationIcon, ToolbarFigureIcon, ToolbarIndentIcon, ToolbarItalicIcon, ToolbarOrderedListIcon, ToolbarSpecialCharactersIcon, ToolbarSubscriptIcon, ToolbarSuperscriptIcon, ToolbarTableIcon, ToolbarUnderlineIcon, ToolbarUnindentIcon, ToolbarUnorderedListIcon, } from '@manuscripts/style-guide';
 import { schema } from '@manuscripts/transform';
 import { toggleMark } from 'prosemirror-commands';
 import React from 'react';
-import { addInlineComment, blockActive, canInsert, insertBlock, insertBoxElement, insertEmbed, insertInlineCitation, insertLink, insertList, markActive, } from './commands';
+import { addInlineComment, blockActive, canInsert, canInsertCrossReference, insertBlock, insertBoxElement, insertCrossReference, insertEmbed, insertInlineCitation, insertLink, insertList, markActive, } from './commands';
 import { changeIndentation, isIndentationAllowed, } from './components/toolbar/helpers';
 import { openInsertTableDialog } from './components/toolbar/InsertTableDialog';
 import { openInsertSpecialCharacterDialog } from './components/views/InsertSpecialCharacter';
@@ -113,6 +113,12 @@ export const toolbar = {
             isEnabled: isEnabled(canInsert(schema.nodes.highlight_marker)),
             run: addInlineComment,
         },
+        cross_reference: {
+            title: 'Insert cross-reference',
+            content: React.createElement(ToolbarCrossReferenceIcon, null),
+            isEnabled: isEnabled(canInsertCrossReference),
+            run: insertCrossReference,
+        },
         citation: {
             title: 'Insert citation',
             content: React.createElement(ToolbarCitationIcon, null),

package/dist/es/versions.js

@@ -1,2 +1,2 @@
-export const VERSION = '3.16.0';
+export const VERSION = '3.16.1';
 export const MATHJAX_VERSION = '3.2.2';

package/dist/es/views/cross_reference.js

@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { schema, } from '@manuscripts/transform';
+import { findNodeByID } from '../lib/doc';
 import { handleEnterKey } from '../lib/navigation-utils';
+import { getSupplementDisplayLabel } from '../lib/supplements';
 import { objectsKey } from '../plugins/objects';
 import { BaseNodeView } from './base_node_view';
 import { createNodeView } from './creators';
@@ -46,8 +49,15 @@ export class CrossReferenceView extends BaseNodeView {
         super.updateContents();
         const targets = objectsKey.getState(this.view.state);
         const attrs = this.node.attrs;
-        const label = attrs.rids.length && targets.get(attrs.rids[0])?.label;
-        this.dom.textContent = attrs.label || label || '';
+        const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined;
+        let derivedLabel = target?.label || '';
+        if (target?.type === schema.nodes.supplement.name && target.href) {
+            const found = findNodeByID(this.view.state.doc, target.id);
+            if (found) {
+                derivedLabel = getSupplementDisplayLabel(found.node, this.props.getFiles());
+            }
+        }
+        this.dom.textContent = attrs.label || derivedLabel;
         this.dom.addEventListener('click', this.handleClick);
     }
 }