@manuscripts/body-editor 3.15.1 → 3.16.1

package/dist/cjs/views/cross_reference_editable.js

@@ -19,10 +19,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceEditableView = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const CrossReferenceItems_1 = require("../components/views/CrossReferenceItems");
+const comments_1 = require("../lib/comments");
+const doc_1 = require("../lib/doc");
+const supplements_1 = require("../lib/supplements");
 const objects_1 = require("../plugins/objects");
 const creators_1 = require("./creators");
 const cross_reference_1 = require("./cross_reference");
@@ -37,14 +41,20 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             if (!can?.editArticle || rids.length) {
                 return;
             }
+            this.showPicker();
+        };
+        this.showPicker = () => {
+            const rids = this.node.attrs.rids;
             const componentProps = {
                 handleSelect: this.handleSelect,
                 targets: this.getTargets(),
+                files: this.props.getFiles(),
                 handleCancel: this.handleCancel,
                 currentTargetId: rids[0],
                 currentCustomLabel: this.node.attrs.label,
+                isEdit: rids.length > 0,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view);
             this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
@@ -56,15 +66,39 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             this.handleCancel();
         };
         this.getTargets = () => {
-            const excludedTypes = [transform_1.schema.nodes.image_element.name];
             const targets = objects_1.objectsKey.getState(this.view.state);
-            return Array.from(targets.values()).filter((t) => !excludedTypes.includes(t.type));
+            const files = this.props.getFiles();
+            const fileMap = new Map(files.map((f) => [f.id, f.name]));
+            const excludedTypes = [transform_1.schema.nodes.image_element.name];
+            const supplement = transform_1.schema.nodes.supplement.name;
+            return Array.from(targets.values()).reduce((acc, t) => {
+                if (excludedTypes.includes(t.type)) {
+                    return acc;
+                }
+                if (t.type === supplement && t.href) {
+                    const found = (0, doc_1.findNodeByID)(this.view.state.doc, t.id);
+                    const label = found
+                        ? (0, supplements_1.getSupplementDisplayLabel)(found.node, files)
+                        : (fileMap.get(t.href) ?? t.href);
+                    acc.push({ ...t, label, caption: '' });
+                }
+                else {
+                    acc.push(t);
+                }
+                return acc;
+            }, []);
         };
         this.handleCancel = () => {
             if (!this.node.attrs.rids.length) {
                 const { state } = this.view;
                 const pos = this.getPos();
-                const tr = state.tr.delete(pos, pos + this.node.nodeSize);
+                if (pos === undefined) {
+                    return;
+                }
+                const label = this.node.attrs.label;
+                const tr = label
+                    ? state.tr.replaceWith(pos, pos + this.node.nodeSize, state.schema.text(label))
+                    : state.tr.delete(pos, pos + this.node.nodeSize);
                 tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
                 (0, track_changes_plugin_1.skipTracking)(tr);
                 this.view.dispatch(tr);
@@ -85,6 +119,63 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             this.view.dispatch(tr.setSelection(selection));
             this.destroy();
         };
+        this.handleClick = () => {
+            if ((0, track_changes_plugin_1.isDeleted)(this.node)) {
+                return;
+            }
+            if (!this.node.attrs.rids.length) {
+                return;
+            }
+            this.showContextMenu();
+        };
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            const can = this.props.getCapabilities();
+            const targets = objects_1.objectsKey.getState(this.view.state);
+            const rid = this.node.attrs.rids[0];
+            const isOrphaned = !targets?.get(rid);
+            const actions = [
+                {
+                    label: 'Comment',
+                    icon: 'AddComment',
+                    action: () => {
+                        this.props.popper.destroy();
+                        (0, comments_1.handleComment)(this.node, this.view);
+                    },
+                },
+                {
+                    label: 'Go to content',
+                    icon: 'Scroll',
+                    action: () => this.navigateToTarget(),
+                    disabled: isOrphaned,
+                },
+            ];
+            if (can?.editArticle) {
+                actions.unshift({
+                    label: 'Edit',
+                    icon: 'Edit',
+                    action: () => this.handleEdit(),
+                    disabled: isOrphaned,
+                });
+            }
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, { actions }, this.node, this.getPos, this.view, ['context-menu']);
+            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+        };
+        this.navigateToTarget = () => {
+            this.props.popper.destroy();
+            const rids = this.node.attrs.rids;
+            if (!rids.length) {
+                return;
+            }
+            this.props.navigate({
+                pathname: this.props.location.pathname,
+                hash: '#' + rids[0],
+            });
+        };
+        this.handleEdit = () => {
+            this.props.popper.destroy();
+            this.showPicker();
+        };
     }
 }
 exports.CrossReferenceEditableView = CrossReferenceEditableView;

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/__tests__/plugins.test.js

@@ -12,6 +12,7 @@ import { defaultTheme } from '@manuscripts/style-guide';
 const userProfile = {
     _id: 'MPUserProfile:1',
     userID: 'MPUser:1',
+    connectID: 'connectID1'
 };
 const history = createMemoryHistory();
 const buildProps = (doc) => ({

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/testing/default-editor-data.js

@@ -35,6 +35,7 @@ export const defaultEditorProps = {
     getCurrentUser: () => ({
         _id: 'test-user-profile-1-id',
         userID: '',
+        connectID: '',
     }),
     history: createBrowserHistory(),
     theme: defaultTheme,