@manuscripts/body-editor 3.19.1 → 3.19.2

package/dist/cjs/components/cross-ref-check-modal/CrossRefWarningModal.js

@@ -52,53 +52,112 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossRefWarningModal = void 0;
-const react_1 = __importStar(require("react"));
 const style_guide_1 = require("@manuscripts/style-guide");
-const lodash_1 = require("lodash");
+const transform_1 = require("@manuscripts/transform");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+const node_type_icons_1 = require("../../node-type-icons");
 const styled_components_1 = __importDefault(require("styled-components"));
 const CrossRefWarningModal = ({ onClose, xrefs, onConfirm, selectAndScrollTo }) => {
     const [isOpen, setIsOpen] = (0, react_1.useState)(true);
+    const [deleteOption, setDeleteOption] = (0, react_1.useState)('delete-without-ref');
     const handleClose = () => {
         setIsOpen(false);
         onClose();
     };
-    return (react_1.default.createElement(Modal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: false, hideOverlay: true },
-        react_1.default.createElement(Container, { "data-cy": "cross-reference-warning-modal" },
-            react_1.default.createElement(style_guide_1.ModalHeader, null,
-                react_1.default.createElement(style_guide_1.CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+    const [showRef, setShowRef] = (0, react_1.useState)(false);
+    const [isScrolling, setIsScrolling] = (0, react_1.useState)(false);
+    const handleSelectAndScrollTo = ($pos) => {
+        setIsScrolling(true);
+        selectAndScrollTo($pos);
+    };
+    const toggleReferenceList = () => setShowRef(!showRef);
+    const onChangeDeleteOption = (e) => {
+        const { value } = e.target;
+        setDeleteOption(value);
+    };
+    const references = xrefs.flatMap((xrefGroup) => xrefGroup.xrefs.map((xref) => [...xref]));
+    const elementLabel = xrefs.length === 1 ? xrefs[0].label : `${xrefs.length} elements`;
+    const locationWord = references.length === 1 ? 'location' : 'locations';
+    const pronoun = xrefs.length === 1 ? 'it' : 'them';
+    return (react_1.default.createElement(Modal, { isOpen: isOpen, "$isScrolling": isScrolling, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: false, hideOverlay: true },
+        react_1.default.createElement(Container, { "$isScrolling": isScrolling, "data-cy": "cross-reference-warning-modal" },
             react_1.default.createElement(Body, null,
                 react_1.default.createElement(Title, null,
-                    react_1.default.createElement(style_guide_1.AttentionOrangeIcon, { width: 24, height: 22 }),
-                    " Delete referenced content?"),
-                react_1.default.createElement("p", null, "You are deleting content referenced elsewhere in the document:"),
-                react_1.default.createElement(ScrolableItems, null, xrefs.map((group, i) => (react_1.default.createElement(XrefGroupDisplay, { key: i, group: group, selectAndScrollTo: selectAndScrollTo })))),
-                react_1.default.createElement(Actions, null,
+                    react_1.default.createElement(style_guide_1.AttentionRedIcon, { width: 24, height: 24 }),
+                    "Confirm Deletion"),
+                react_1.default.createElement("p", null,
+                    react_1.default.createElement("b", null, elementLabel),
+                    " ",
+                    xrefs.length === 1 ? 'is' : 'are',
+                    " actively referenced in",
+                    ' ',
+                    react_1.default.createElement("b", null,
+                        references.length,
+                        " ",
+                        locationWord),
+                    ' ',
+                    "in your document. Deleting ",
+                    pronoun,
+                    " will break the following cross-references:"),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement(ToggleHeader, null,
+                        react_1.default.createElement(SecondaryBoldHeading, null, showRef
+                            ? 'Hide locations'
+                            : `Show ${references.length} location`),
+                        react_1.default.createElement(ToggleButton, { onClick: toggleReferenceList }, showRef ? react_1.default.createElement(style_guide_1.ArrowUpIcon, null) : react_1.default.createElement(ArrowDownIcon, null))),
+                    showRef && (react_1.default.createElement(ListWrapper, null, xrefs.length === 1 ? (react_1.default.createElement(XrefGroupDisplay, { label: xrefs[0].label, xrefs: xrefs[0].xrefs, selectAndScrollTo: handleSelectAndScrollTo })) : (react_1.default.createElement(XrefGroupsDisplay, { xrefsGroup: xrefs, selectAndScrollTo: handleSelectAndScrollTo }))))),
+                react_1.default.createElement(SelectorContainer, null,
+                    react_1.default.createElement(style_guide_1.RadioButton, { name: 'delete-option', id: 'delete-without-ref-option', value: 'delete-without-ref', label: 'Delete but keep referenced text', checked: deleteOption === 'delete-without-ref', onChange: onChangeDeleteOption }),
+                    react_1.default.createElement(style_guide_1.RadioButton, { name: 'delete-option', id: 'delete-with-ref-option', value: 'delete-with-ref', label: 'Delete & remove references', checked: deleteOption === 'delete-with-ref', onChange: onChangeDeleteOption })),
+                react_1.default.createElement(style_guide_1.ButtonGroup, null,
                     react_1.default.createElement(style_guide_1.TertiaryButton, { type: "button", onClick: () => handleClose() }, "Cancel"),
                     react_1.default.createElement(style_guide_1.PrimaryButton, { "$danger": true, type: "button", onClick: () => {
-                            onConfirm();
+                            onConfirm(deleteOption);
                             setIsOpen(false);
-                        } }, "Delete & remove citation"))))));
+                        } }, "Delete"))))));
 };
 exports.CrossRefWarningModal = CrossRefWarningModal;
-const XrefGroupDisplay = ({ group, selectAndScrollTo }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("h3", null, group.label),
-        react_1.default.createElement(ReferencesList, null, group.xrefs.map(([, pos], i) => {
-            return (react_1.default.createElement("li", { key: i },
-                react_1.default.createElement(style_guide_1.TextButton, { onClick: () => selectAndScrollTo(pos) }, `${(0, lodash_1.startCase)(pos.parent.type.name)} - ${pos.parent.textContent}`)));
-        }))));
+const XrefGroupDisplay = ({ label, xrefs, selectAndScrollTo }) => {
+    return (react_1.default.createElement(ReferencesList, null, xrefs.map(([xrefNode, pos], i) => {
+        const { leftHandText, rightHandText } = (0, utils_1.getSurroundingText)(pos, xrefNode);
+        const derivedLabel = xrefNode.attrs.label || label || '[cross-ref]';
+        return (react_1.default.createElement(ListItem, { key: i },
+            react_1.default.createElement(XRefTextContainer, null,
+                react_1.default.createElement(XRefAdjacentText, { "$direction": 'rtl' }, leftHandText),
+                react_1.default.createElement(XRefLabel, null, derivedLabel),
+                react_1.default.createElement(XRefAdjacentText, { "$direction": 'ltr' }, rightHandText)),
+            react_1.default.createElement(ScrollButton, { "$mini": true, onClick: () => selectAndScrollTo(pos) }, "Show")));
+    })));
+};
+const XrefGroupsDisplay = ({ xrefsGroup, selectAndScrollTo }) => {
+    return (react_1.default.createElement(ReferencesList, null, xrefsGroup.map(({ referenced, label, caption, xrefs }, i) => {
+        const icon = getReferencedIcon(referenced.type);
+        return (react_1.default.createElement("div", { key: i },
+            react_1.default.createElement(DarkSecondaryBoldHeading, null,
+                icon ? react_1.default.createElement(ItemIcon, null, icon) : null,
+                `${label}:`,
+                react_1.default.createElement(CaptionTitle, { "$direction": 'ltr' }, caption)),
+            react_1.default.createElement(XrefGroupDisplay, { label: label, xrefs: xrefs, selectAndScrollTo: selectAndScrollTo })));
+    })));
+};
+const getReferencedIcon = (type) => {
+    if (type === transform_1.schema.nodes.supplement) {
+        return react_1.default.createElement(style_guide_1.WebLinkIcon, { className: "file-icon" });
+    }
+    return (0, node_type_icons_1.nodeTypeIcon)(transform_1.schema.nodes[type.name]);
 };
 const Container = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
   position: absolute;
-  top: 1rem;
-  left: 50%;
-  right: 0;
-  max-height: calc(50vh - 2rem);
+  top: ${({ $isScrolling }) => ($isScrolling ? '1rem' : '30%')};
+  left: ${({ $isScrolling }) => $isScrolling ? 'calc(100% - 556px - 0rem)' : '50%'};
+  max-height: calc(60vh - 2rem);
   min-height: 280px;
-  transform: translate(-50%, 0);
-  max-width: 480px;
+  transform: ${({ $isScrolling }) => $isScrolling ? 'translate(0, 0)' : 'translate(-50%, 0)'};
+  max-width: 556px;
   transition:
     top 0.2s,
+    left 0.2s,
     transform 0.2s;
 `;
 const Modal = (0, styled_components_1.default)(style_guide_1.StyledModal) `
@@ -126,6 +185,8 @@ const Modal = (0, styled_components_1.default)(style_guide_1.StyledModal) `
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.2);
+    opacity: ${({ $isScrolling }) => ($isScrolling ? 0.15 : 1)};
+    transform: opacity 0.2s;
   }
   h3 {
     font-size: 16px;
@@ -135,11 +196,11 @@ const Modal = (0, styled_components_1.default)(style_guide_1.StyledModal) `
     margin: 0.5em 0;
   }
 `;
-const Body = styled_components_1.default.div `
+const Body = (0, style_guide_1.withFocusTrap)(styled_components_1.default.div `
   margin: 1.5rem;
   display: flex;
   flex-flow: column;
-`;
+`);
 const Title = styled_components_1.default.h2 `
   font-size: 18px;
   font-weight: 700;
@@ -148,35 +209,124 @@ const Title = styled_components_1.default.h2 `
   color: #353535;
   svg {
     vertical-align: text-top;
+    margin-right: 8px;
   }
 `;
-const ReferencesList = styled_components_1.default.ul `
-  padding: 8px;
-  margin-left: 0;
-  list-style: none;
+const ToggleHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 3px 6px 8px;
+  border-radius: 4px 4px 0 0;
+  border: 1px solid #e2e2e2;
   background: #f2f2f2;
+`;
+const ListWrapper = styled_components_1.default.div `
   border: 1px solid #e2e2e2;
-  border-radius: 3px;
-
-  ${style_guide_1.TextButton} {
-    margin-left: 0;
-    text-decoration: underline;
-    &:hover {
-      text-decoration: none;
-    }
-    display: block;
-    max-width: 100%;
-    overflow: hidden;
-    color: #353535;
-    text-overflow: ellipsis;
+  border-top: none;
+  max-height: 21vh;
+  min-height: 100px;
+  overflow-y: auto;
+  padding: 12px;
+`;
+const ToggleButton = (0, styled_components_1.default)(style_guide_1.IconButton) `
+  height: 24px;
+  &&:not([disabled]):focus-visible {
+    outline: 2px solid ${(props) => props.theme.colors.outline.focus};
+    outline-offset: 2px;
+  }
+  svg {
+    width: 12px;
+    height: 7px;
   }
 `;
-const Actions = styled_components_1.default.footer `
-  text-align: right;
-  padding-top: 1rem;
+const SecondaryHeading = styled_components_1.default.div `
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  color: #6e6e6e;
+  user-select: none;
 `;
-const ScrolableItems = styled_components_1.default.div `
-  max-height: 16vh;
-  min-height: 100px;
-  overflow-y: auto;
+const SecondaryBoldHeading = (0, styled_components_1.default)(SecondaryHeading) `
+  font-weight: 700;
+  color: #6e6e6e;
+`;
+const DarkSecondaryBoldHeading = (0, styled_components_1.default)(SecondaryBoldHeading) `
+  display: flex;
+  padding: 0 4px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  color: #353535;
+  background: #f2f2f2;
+`;
+const ItemIcon = styled_components_1.default.span `
+  display: flex;
+  padding-right: 8px;
+  svg {
+    align-self: center;
+  }
+`;
+const ReferencesList = styled_components_1.default.ul `
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+const ListItem = styled_components_1.default.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: solid 1px #e2e2e2;
+  &:last-child {
+    border-bottom: none;
+    padding: 0;
+  }
+`;
+const ScrollButton = (0, styled_components_1.default)(style_guide_1.TertiaryButton) `
+  margin: 0;
+  padding: 4px;
+  font-size: 14px;
+  line-height: 24px;
+  text-decoration-line: underline;
+`;
+const XRefTextContainer = styled_components_1.default.div `
+  display: flex;
+  color: #6e6e6e;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+const XRefLabel = styled_components_1.default.span `
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+  mix-blend-mode: darken;
+`;
+const XRefAdjacentText = styled_components_1.default.span `
+  display: block;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: ${(props) => props.$direction};
+`;
+const CaptionTitle = (0, styled_components_1.default)(XRefAdjacentText) `
+  max-width: 120px;
+  margin-left: 4px;
+`;
+const SelectorContainer = styled_components_1.default.div `
+  display: flex;
+  gap: 24px;
+  padding: 8px 12px 4px 12px;
+  margin: 24px 0;
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+`;
+const ArrowDownIcon = (0, styled_components_1.default)(style_guide_1.ArrowUpIcon) `
+  transform: rotate(180deg);
 `;

package/dist/cjs/components/cross-ref-check-modal/openModal.js

@@ -27,8 +27,14 @@ const openCrossRefWarningModal = (view, xrefGroups, onConfirm, onClose, selectAn
     const props = (0, editor_props_1.getEditorProps)(state);
     const componentProps = {
         xrefs: xrefGroups,
-        onConfirm,
-        onClose,
+        onConfirm: (deleteOption) => {
+            dialog.unmount();
+            onConfirm(deleteOption);
+        },
+        onClose: () => {
+            dialog.unmount();
+            onClose();
+        },
         selectAndScrollTo,
     };
     const dialog = (0, ReactSubView_1.default)(props, CrossRefWarningModal_1.CrossRefWarningModal, componentProps, state.doc, () => 0, view);

package/dist/cjs/lib/utils.js

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLastTitleNode = exports.filterBlockNodes = exports.findInsertionPosition = exports.getInsertPos = exports.createToggleButton = exports.isEditAllowed = exports.isBodyLocked = exports.cleanItemValues = exports.shouldRenderField = exports.hasParent = exports.isNotNull = exports.createHeader = exports.isSelectionInBody = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = void 0;
+exports.getSurroundingText = exports.getLastTitleNode = exports.filterBlockNodes = exports.findInsertionPosition = exports.getInsertPos = exports.createToggleButton = exports.isEditAllowed = exports.isBodyLocked = exports.cleanItemValues = exports.shouldRenderField = exports.hasParent = exports.isNotNull = exports.createHeader = exports.isSelectionInBody = exports.isSelectionInNode = exports.isChildOfNodeTypes = exports.findParentElement = exports.findParentSection = exports.findParentNodeWithIdValue = exports.findParentNodeWithId = exports.getChildOfType = exports.getMatchingDescendant = exports.getMatchingChild = void 0;
 exports.iterateChildren = iterateChildren;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_model_1 = require("prosemirror-model");
@@ -220,3 +220,14 @@ const getLastTitleNode = (state) => {
     return titleNode;
 };
 exports.getLastTitleNode = getLastTitleNode;
+const getSurroundingText = (pos, node) => {
+    const nodeContent = (0, prosemirror_utils_1.findChildren)(pos.node(), (child) => child.attrs.id === node.attrs.id)[0];
+    const content = pos.node().content;
+    const MAX_LENGTH = 40;
+    const nodeStart = nodeContent.pos;
+    const nodeEnd = nodeContent.pos + node.nodeSize;
+    const leftHandText = content.textBetween(nodeStart > MAX_LENGTH ? nodeStart - MAX_LENGTH : 0, nodeStart);
+    const rightHandText = content.textBetween(nodeEnd, Math.min(nodeEnd + MAX_LENGTH, content.size));
+    return { leftHandText, rightHandText };
+};
+exports.getSurroundingText = getSurroundingText;

package/dist/cjs/plugins/cross-references.js

@@ -18,6 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SELECTED_CROSS_REF_CLASS = exports.DELETE_WITHOUT_REF = void 0;
 const transform_1 = require("@manuscripts/transform");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
 const isEqual_1 = __importDefault(require("lodash/isEqual"));
@@ -25,8 +26,11 @@ const prosemirror_state_1 = require("prosemirror-state");
 const prosemirror_view_1 = require("prosemirror-view");
 const openModal_1 = require("../components/cross-ref-check-modal/openModal");
 const objects_1 = require("./objects");
+exports.DELETE_WITHOUT_REF = 'delete-without-ref';
+exports.SELECTED_CROSS_REF_CLASS = 'selected-cross-reference';
 let modalActive = false;
 let modalElement = null;
+let scrollTargetEl = null;
 exports.default = () => {
     let view = null;
     return new prosemirror_state_1.Plugin({
@@ -45,7 +49,10 @@ exports.default = () => {
             if (!view ||
                 !tr.docChanged ||
                 tr.getMeta(track_changes_plugin_1.trackChangesPluginKey) ||
-                tr.getMeta('addToHistory') === false) {
+                tr.getMeta(track_changes_plugin_1.TrackChangesAction.refreshChanges) ||
+                tr.getMeta('addToHistory') === false ||
+                tr.getMeta('collab$') ||
+                tr.getMeta(exports.DELETE_WITHOUT_REF)) {
                 return true;
             }
             if (modalActive) {
@@ -64,6 +71,9 @@ exports.default = () => {
                     modalElement.remove();
                     modalElement = null;
                 }
+                if (scrollTargetEl) {
+                    scrollTargetEl.classList.remove(exports.SELECTED_CROSS_REF_CLASS);
+                }
             };
             const deletedIds = new Set(xrefGroups.map((g) => g.referenced.attrs.id));
             const onClose = () => {
@@ -154,12 +164,13 @@ function createXrefGroups(targets, stateDoc, resultDoc) {
         const xrefs = xrefsByRid.get(id);
         if (xrefs?.length) {
             const label = targets.get(referenced.attrs.id)?.label || '';
-            xrefGroups.push({ referenced, label, xrefs });
+            const caption = targets.get(referenced.attrs.id)?.caption || '';
+            xrefGroups.push({ referenced, label, caption, xrefs });
         }
     }
     return xrefGroups;
 }
-const onConfirmCreator = (view, cleanup, deletedIds, tr) => () => {
+const onConfirmCreator = (view, cleanup, deletedIds, tr) => (deleteOption) => {
     cleanup();
     if (!view) {
         return;
@@ -173,18 +184,23 @@ const onConfirmCreator = (view, cleanup, deletedIds, tr) => () => {
         }
         newTr.step(step);
     }
-    const xrefPositions = [];
-    newTr.doc.descendants((node, pos) => {
-        if (node.type === transform_1.schema.nodes.cross_reference) {
-            const rids = node.attrs.rids;
-            if (rids.some((rid) => deletedIds.has(rid))) {
-                xrefPositions.push({ from: pos, to: pos + node.nodeSize });
+    if (deleteOption === 'delete-with-ref') {
+        const xrefPositions = [];
+        newTr.doc.descendants((node, pos) => {
+            if (node.type === transform_1.schema.nodes.cross_reference) {
+                const rids = node.attrs.rids;
+                if (rids.some((rid) => deletedIds.has(rid))) {
+                    xrefPositions.push({ from: pos, to: pos + node.nodeSize });
+                }
             }
+        });
+        for (let i = xrefPositions.length - 1; i >= 0; i--) {
+            const { from, to } = xrefPositions[i];
+            newTr.delete(from, to);
         }
-    });
-    for (let i = xrefPositions.length - 1; i >= 0; i--) {
-        const { from, to } = xrefPositions[i];
-        newTr.delete(from, to);
+    }
+    else {
+        newTr.setMeta(exports.DELETE_WITHOUT_REF, true);
     }
     view.dispatch(newTr);
 };
@@ -194,7 +210,6 @@ const selectAndScrollToCreator = (view) => ($pos) => {
     }
     const selTr = view.state.tr;
     selTr.setSelection(prosemirror_state_1.NodeSelection.create(view.state.doc, $pos.pos));
-    view.focus();
     view.dispatch(selTr);
     let scrollable = view.dom.parentElement;
     while (scrollable != null &&
@@ -217,4 +232,12 @@ const selectAndScrollToCreator = (view) => ($pos) => {
         modalElement?.classList.remove('modal-bottom');
         scrollable.scrollTo({ top: scrollTo, behavior: 'smooth' });
     }
+    const dom = view.nodeDOM($pos.pos);
+    if (dom && dom instanceof HTMLElement) {
+        dom.classList.add(exports.SELECTED_CROSS_REF_CLASS);
+        if (scrollTargetEl && scrollTargetEl !== dom) {
+            scrollTargetEl?.classList.remove(exports.SELECTED_CROSS_REF_CLASS);
+        }
+        scrollTargetEl = dom;
+    }
 };

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.19.1';
+exports.VERSION = '3.19.2';
 exports.MATHJAX_VERSION = '3.2.2';

package/dist/cjs/views/ReactSubView.js

@@ -26,6 +26,7 @@ const client_1 = require("react-dom/client");
 const styled_components_1 = require("styled-components");
 function createSubView(props, Component, componentProps, node, getPos, view, classNames = []) {
     const container = document.createElement('div');
+    container.unmount = () => root.unmount();
     const Wrapped = createView(props, Component, componentProps, node, getPos, view, classNames, container);
     const root = (0, client_1.createRoot)(container);
     root.render(react_1.default.createElement(Wrapped, null));

package/dist/cjs/views/cross_reference.js

@@ -53,10 +53,21 @@ class CrossReferenceView extends base_node_view_1.BaseNodeView {
         const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined;
         const isSupplement = target?.type === transform_1.schema.nodes.supplement.name;
         const derivedLabel = isSupplement
-            ? target?.caption || target?.label || ''
-            : target?.label || '';
+            ? target?.caption || target?.label || '[cross-ref]'
+            : target?.label || '[cross-ref]';
         this.dom.textContent = attrs.label || derivedLabel;
         this.dom.addEventListener('click', this.handleClick);
+        if (this.isOrphaned()) {
+            this.dom.classList.add('orphaned-cross-reference');
+        }
+        else {
+            this.dom.classList.remove('orphaned-cross-reference');
+        }
+    }
+    isOrphaned() {
+        const targets = objects_1.objectsKey.getState(this.view.state);
+        const rid = this.node.attrs.rids[0];
+        return !targets?.get(rid);
     }
 }
 exports.CrossReferenceView = CrossReferenceView;

package/dist/cjs/views/cross_reference_editable.js

@@ -117,9 +117,7 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
         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 isOrphaned = this.isOrphaned();
             const actions = [
                 {
                     label: 'Comment',
@@ -141,7 +139,6 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
                     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']);