@manuscripts/body-editor 3.16.0 → 3.16.1

package/dist/cjs/commands.js

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectAllIsolating = exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
-exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = void 0;
+exports.ignoreAtomBlockNodeForward = exports.isAtEndOfTextBlock = exports.ignoreMetaNodeBackspaceCommand = exports.ignoreAtomBlockNodeBackward = exports.isTextSelection = exports.isAtStartOfTextBlock = exports.insertTransGraphicalAbstract = exports.insertTransAbstract = exports.insertTOCSection = exports.insertBibliographySection = exports.insertList = exports.insertKeywords = exports.insertAward = exports.insertAffiliation = exports.insertContributors = exports.insertGraphicalAbstract = exports.insertBackmatterSection = exports.insertAbstractSection = exports.insertSection = exports.insertHeadshotGrid = exports.insertBoxElement = exports.insertInlineFootnote = exports.insertFootnotesElement = exports.insertTableElementFooter = exports.insertInlineEquation = exports.insertCrossReference = exports.canInsertCrossReference = exports.insertInlineCitation = exports.insertLink = exports.insertSectionLabel = exports.findPosBeforeFirstSubsection = exports.insertBreak = exports.deleteBlock = exports.insertBlock = exports.insertAttachment = exports.updateSupplementWeblink = exports.insertSupplementWeblink = exports.insertSupplement = exports.insertTable = exports.insertEmbed = exports.insertFigure = exports.insertGeneralTableFootnote = exports.insertInlineTableFootnote = exports.createBlock = exports.createSelection = exports.canInsert = exports.blockActive = exports.isNodeSelection = exports.markActive = exports.addToStart = void 0;
+exports.paste = exports.copySelection = exports.exitEditorToContainer = exports.ignoreEnterInSubtitles = exports.insertHeroImage = exports.activateSearchReplace = exports.activateSearch = exports.autoComplete = exports.addColumns = exports.addHeaderRow = exports.addRows = exports.addInlineComment = exports.addNodeComment = exports.createAndFillTableElement = exports.selectAllIsolating = void 0;
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
@@ -315,7 +315,7 @@ exports.insertSupplement = insertSupplement;
 const insertSupplementWeblink = (url, title, view) => {
     const supplement = transform_1.schema.nodes.supplement.createAndFill({
         id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.supplement),
-        href: url
+        href: url,
     }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = (0, doc_1.upsertSupplementsSection)(tr, supplement);
@@ -493,15 +493,53 @@ const insertInlineCitation = (state, dispatch) => {
     return true;
 };
 exports.insertInlineCitation = insertInlineCitation;
+const canInsertCrossReference = (state) => {
+    if (!(0, exports.canInsert)(transform_1.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;
+};
+exports.canInsertCrossReference = canInsertCrossReference;
 const insertCrossReference = (state, dispatch) => {
+    if (!(0, exports.canInsertCrossReference)(state)) {
+        return false;
+    }
+    const text = selectedText();
     const node = state.schema.nodes.cross_reference.create({
+        id: (0, transform_1.generateNodeID)(transform_1.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 = prosemirror_state_1.NodeSelection.create(tr.doc, pos);
-        dispatch(tr.setSelection(selection).scrollIntoView());
+        tr.setSelection(selection).scrollIntoView();
+        dispatch(isWrap ? (0, track_changes_plugin_1.skipTracking)(tr) : tr);
     }
     return true;
 };
@@ -1009,10 +1047,7 @@ const insertTransGraphicalAbstract = (category, insertAfterPos) => (state, dispa
     const node = transform_1.schema.nodes.trans_graphical_abstract.createAndFill({
         lang,
         category: category.id,
-    }, [
-        transform_1.schema.nodes.section_title.create(),
-        createAndFillFigureElement(state),
-    ]);
+    }, [transform_1.schema.nodes.section_title.create(), createAndFillFigureElement(state)]);
     const tr = state.tr.insert(pos, node);
     if (node.lastChild) {
         (0, accessibility_element_1.expandAccessibilitySection)(tr, node.lastChild);

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

@@ -21,9 +21,9 @@ const Footer = styled_components_1.default.div `
 const StyledIconTextButton = (0, styled_components_1.default)(style_guide_1.IconTextButton) `
   color: ${(props) => props.theme.colors.brand.default};
 `;
-const FormFooter = ({ onCancel, primaryAction, }) => {
+const FormFooter = ({ onCancel, primaryAction, cancelLabel = 'Close', }) => {
     return (react_1.default.createElement(Footer, null,
-        react_1.default.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, "Close"),
+        react_1.default.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, cancelLabel),
         primaryAction));
 };
 exports.default = FormFooter;

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

@@ -79,7 +79,8 @@ const ShortcutTabs = (0, styled_components_1.default)(style_guide_1.InspectorTab
   min-height: 0;
 `;
 const ModalTabsWrapper = (0, styled_components_1.default)('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 = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({
     tabIndex: -1,
@@ -130,7 +131,8 @@ const Section = styled_components_1.default.section `
   }
 `;
 const SectionTitle = styled_components_1.default.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/cjs/components/views/CrossReferenceItems.js

@@ -53,73 +53,121 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceItems = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Container = (0, style_guide_1.withFocusTrap)(styled_components_1.default.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_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-`;
+const url_1 = require("../../lib/url");
+const node_type_icons_1 = require("../../node-type-icons");
+const FormFooter_1 = __importDefault(require("../form/FormFooter"));
 const Items = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   flex: 1;
   overflow-y: auto;
-  padding: ${(props) => props.theme.grid.unit * 3}px;
 `);
 const CrossReferenceItem = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.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_components_1.default.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_components_1.default.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_components_1.default.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_components_1.default.div `
   margin-bottom: ${(props) => props.theme.grid.unit * 4}px;
   color: ${(props) => props.theme.colors.text.tertiary};
 `;
+const GroupExpandableSection = (0, styled_components_1.default)(style_guide_1.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_components_1.default.div `
-  margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
 `;
-const CustomTextArea = (0, styled_components_1.default)(style_guide_1.TextArea) `
-  width: 100%;
-  height: 75px;
+const ItemIcon = styled_components_1.default.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_components_1.default.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_components_1.default.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 = (0, styled_components_1.default)(style_guide_1.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) {
@@ -128,7 +176,27 @@ const trimmedCaption = (caption, limit) => {
     const captionSearch = new RegExp(`^(.{${limit}}[^\\s]*).*`);
     return caption.replace(captionSearch, '$1…');
 };
-const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTargetId, currentCustomLabel, }) => {
+const getTargetIcon = (target, files) => {
+    if (target.type === transform_1.schema.nodes.supplement.name) {
+        if (target.href && (0, url_1.allowedHref)(target.href)) {
+            return react_1.default.createElement(style_guide_1.WebLinkIcon, { className: "file-icon" });
+        }
+        const fileName = files.find((f) => f.id === target.href)?.name ?? target.label ?? '';
+        return (0, style_guide_1.getFileIcon)(fileName) ?? react_1.default.createElement(style_guide_1.FileUnknownIcon, null);
+    }
+    return (0, node_type_icons_1.nodeTypeIcon)(transform_1.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',
+};
+const CrossReferenceItems = ({ targets, files, handleSelect, handleCancel, currentTargetId, currentCustomLabel, isEdit = false, }) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(true);
     const [selectedItem, setSelectedItem] = (0, react_1.useState)('');
     const customTextRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -136,21 +204,40 @@ const CrossReferenceItems = ({ targets, handleSelect, handleCancel, currentTarge
             setSelectedItem(currentTargetId);
         }
     }, [currentTargetId]);
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(Heading, null, "Insert Cross-reference"),
-        react_1.default.createElement(Items, null, targets.length ? (targets.map((target) => (react_1.default.createElement(CrossReferenceItem, { key: target.id, "$isSelected": selectedItem === target.id, onClick: () => setSelectedItem(target.id) },
-            react_1.default.createElement(DefaultLabelWrapper, null,
-                react_1.default.createElement(Label, null, target.label),
-                react_1.default.createElement(Caption, null, target.caption && ': ' + trimmedCaption(target.caption, 200))),
-            selectedItem === target.id && (react_1.default.createElement(CustomTextArea, { ref: customTextRef, placeholder: 'Or type custom text', defaultValue: currentTargetId &&
-                    currentTargetId === selectedItem &&
-                    currentCustomLabel
-                    ? currentCustomLabel
-                    : '' })))))) : (react_1.default.createElement(Empty, null, "No cross-reference targets available."))),
-        react_1.default.createElement(Actions, null,
-            react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: handleCancel }, "Cancel"),
-                react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: () => selectedItem &&
-                        handleSelect(selectedItem, customTextRef.current?.value || ''), disabled: !selectedItem }, "Insert")))));
+    const close = (0, react_1.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_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: close, shouldCloseOnOverlayClick: true },
+        react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "cross-reference-editor" },
+            react_1.default.createElement(style_guide_1.ModalHeader, null,
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: close })),
+            react_1.default.createElement(StyledModalBody, null,
+                react_1.default.createElement(Heading, null, isEdit ? 'Edit Cross-reference' : 'Insert Cross-reference'),
+                react_1.default.createElement(FieldLabel, { htmlFor: "cross-reference-custom-text" }, "Custom display text"),
+                react_1.default.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_1.default.createElement(Items, null, Object.keys(grouped).length ? (Object.entries(grouped).map(([type, group]) => (react_1.default.createElement(GroupExpandableSection, { key: type, title: GROUP_LABELS[type], icon: style_guide_1.ArrowDownIcon }, group.map((target) => {
+                    const icon = getTargetIcon(target, files);
+                    return (react_1.default.createElement(CrossReferenceItem, { key: target.id, "data-cy": "cross-reference-item", className: selectedItem === target.id ? 'active' : undefined, onClick: () => setSelectedItem(target.id) },
+                        react_1.default.createElement(DefaultLabelWrapper, null,
+                            icon ? react_1.default.createElement(ItemIcon, null, icon) : null,
+                            react_1.default.createElement(Label, null,
+                                target.label,
+                                target.caption && `:`),
+                            react_1.default.createElement(Caption, null, trimmedCaption(target.caption, 200)))));
+                }))))) : (react_1.default.createElement(Empty, null, "No cross-reference targets available.")))),
+            react_1.default.createElement(FormFooter_1.default, { onCancel: close, cancelLabel: "Cancel", primaryAction: react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: () => {
+                        if (selectedItem) {
+                            setIsOpen(false);
+                            const customLabel = customTextRef.current?.value;
+                            handleSelect(selectedItem, customLabel || '');
+                        }
+                    }, disabled: !selectedItem }, isEdit ? 'Update' : 'Insert') }))));
 };
 exports.CrossReferenceItems = CrossReferenceItems;

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

@@ -44,7 +44,7 @@ const editor_props_1 = require("../../plugins/editor-props");
 const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
 const DeleteSupplementDialog = ({ label, onDelete }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
-    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: 'Delete supplement', message: 'Are you sure you want to delete \u201C{label}\u201D?', actions: {
+    return (react_1.default.createElement(style_guide_1.Dialog, { isOpen: isOpen, category: style_guide_1.Category.confirmation, header: "Delete supplement", message: "Are you sure you want to delete \u201C{label}\u201D?", actions: {
             primary: {
                 action: () => {
                     onDelete();

package/dist/cjs/lib/supplements.js

@@ -15,11 +15,19 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteSupplementAtPos = exports.performDeleteSupplement = exports.getSupplementDisplayLabel = void 0;
+exports.deleteSupplementAtPos = exports.performDeleteSupplement = exports.getSupplementDisplayLabel = exports.getSupplementCaptionTitle = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_utils_1 = require("prosemirror-utils");
 const url_1 = require("./url");
+const getSupplementCaptionTitle = (node) => {
+    return node.firstChild?.textContent.trim() ?? '';
+};
+exports.getSupplementCaptionTitle = getSupplementCaptionTitle;
 const getSupplementDisplayLabel = (node, files) => {
+    const captionTitle = (0, exports.getSupplementCaptionTitle)(node);
+    if (captionTitle) {
+        return captionTitle;
+    }
     const href = node.attrs.href;
     if ((0, url_1.allowedHref)(href)) {
         return href;

package/dist/cjs/menus.js

@@ -333,6 +333,41 @@ const getEditorMenus = (editor) => {
             {
                 role: 'separator',
             },
+            {
+                id: 'insert-citation',
+                label: 'Citation',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+C',
+                    pc: 'CommandOrControl+Option+C',
+                },
+                isEnabled: (0, utils_1.isEditAllowed)(state) &&
+                    isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.citation)),
+                run: doCommand(commands_1.insertInlineCitation),
+                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.citation),
+            },
+            {
+                id: 'insert-cross-reference',
+                label: 'Cross-reference',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+R',
+                    pc: 'CommandOrControl+Option+R',
+                },
+                isEnabled: (0, utils_1.isEditAllowed)(state) && isCommandValid(commands_1.canInsertCrossReference),
+                run: doCommand(commands_1.insertCrossReference),
+                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.cross_reference),
+            },
+            {
+                id: 'insert-footnote',
+                label: 'Footnote',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+F',
+                    pc: 'CommandOrControl+Option+F',
+                },
+                isEnabled: (0, utils_1.isEditAllowed)(state) &&
+                    isCommandValid((0, commands_1.canInsert)(transform_1.schema.nodes.inline_footnote)),
+                run: doCommand(commands_1.insertInlineFootnote),
+                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.inline_footnote),
+            },
             {
                 id: 'insert-special-character',
                 label: 'Special Characters',

package/dist/cjs/plugins/objects.js

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

package/dist/cjs/toolbar.js

@@ -119,6 +119,12 @@ exports.toolbar = {
             isEnabled: isEnabled((0, commands_1.canInsert)(transform_1.schema.nodes.highlight_marker)),
             run: commands_1.addInlineComment,
         },
+        cross_reference: {
+            title: 'Insert cross-reference',
+            content: react_1.default.createElement(style_guide_1.ToolbarCrossReferenceIcon, null),
+            isEnabled: isEnabled(commands_1.canInsertCrossReference),
+            run: commands_1.insertCrossReference,
+        },
         citation: {
             title: 'Insert citation',
             content: react_1.default.createElement(style_guide_1.ToolbarCitationIcon, null),

package/dist/cjs/versions.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MATHJAX_VERSION = exports.VERSION = void 0;
-exports.VERSION = '3.16.0';
+exports.VERSION = '3.16.1';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/cross_reference.js

@@ -16,7 +16,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const doc_1 = require("../lib/doc");
 const navigation_utils_1 = require("../lib/navigation-utils");
+const supplements_1 = require("../lib/supplements");
 const objects_1 = require("../plugins/objects");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
@@ -49,8 +52,15 @@ class CrossReferenceView extends base_node_view_1.BaseNodeView {
         super.updateContents();
         const targets = objects_1.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 === transform_1.schema.nodes.supplement.name && target.href) {
+            const found = (0, doc_1.findNodeByID)(this.view.state.doc, target.id);
+            if (found) {
+                derivedLabel = (0, supplements_1.getSupplementDisplayLabel)(found.node, this.props.getFiles());
+            }
+        }
+        this.dom.textContent = attrs.label || derivedLabel;
         this.dom.addEventListener('click', this.handleClick);
     }
 }

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;