@manuscripts/body-editor 3.19.0 → 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/components/references/ReferenceForm/ReferenceForm.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReferenceForm = void 0;
+exports.ReferenceForm = exports.validateReference = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const formik_1 = require("formik");
 const react_1 = __importStar(require("react"));
@@ -61,7 +61,22 @@ const bibliographyItemTypeOptions = references_1.bibliographyItemTypes.map((i) =
     label: i[1],
     value: i[0],
 }));
-const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSave, actionsRef, }) => {
+const validateReference = (values) => {
+    const errors = {};
+    if (values.type === 'literal') {
+        if (!values.literal?.trim()) {
+            errors.literal = 'Literal is required for unstructured references';
+        }
+    }
+    else {
+        if (!values.title?.trim()) {
+            errors.title = 'Title is required';
+        }
+    }
+    return errors;
+};
+exports.validateReference = validateReference;
+const ReferenceForm = ({ values, onChange, onSave, actionsRef, }) => {
     const fieldsRef = (0, react_1.useRef)(null);
     const formRef = (0, react_1.useRef)(null);
     const [newAuthorIndex, setNewAuthorIndex] = (0, react_1.useState)();
@@ -71,52 +86,19 @@ const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSav
             fieldsRef.current.scrollTop = 0;
         }
     }, [values]);
-    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
-    const validateReference = (values) => {
-        const errors = {};
-        if (values.type === 'literal') {
-            if (!values.literal?.trim()) {
-                errors.literal = 'Literal is required for unstructured references';
-            }
-        }
-        else {
-            if (!values.title?.trim()) {
-                errors.title = 'Title is required';
-            }
-        }
-        return errors;
-    };
     if (actionsRef && !actionsRef.current) {
         actionsRef.current = {
             reset: () => {
                 formRef.current?.resetForm();
             },
+            submit: () => {
+                formRef.current?.submitForm();
+            },
+            isDirty: () => formRef.current?.dirty ?? false,
         };
     }
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, innerRef: formRef, validate: validateReference }, (formik) => {
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, innerRef: formRef, validate: exports.validateReference }, (formik) => {
         return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange },
-            react_1.default.createElement(style_guide_1.Dialog, { isOpen: showDeleteDialog, category: style_guide_1.Category.confirmation, header: "Delete Reference", message: "Are you sure you want to delete this reference from the list?", actions: {
-                    secondary: {
-                        action: () => {
-                            onDelete();
-                            setShowDeleteDialog(false);
-                        },
-                        title: 'Delete',
-                    },
-                    primary: {
-                        action: () => setShowDeleteDialog(false),
-                        title: 'Cancel',
-                    },
-                } }),
-            react_1.default.createElement(styled_components_1.Actions, null,
-                react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                    react_1.default.createElement(style_guide_1.IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
-                        react_1.default.createElement(style_guide_1.LinkIcon, null)),
-                    react_1.default.createElement(styled_components_1.DeleteButton, { "$defaultColor": true, disabled: !showDelete, "data-tooltip-content": "Unable to delete because the item is used in the document", "data-tooltip-hidden": showDelete, onClick: () => setShowDeleteDialog(true) },
-                        react_1.default.createElement(style_guide_1.DeleteIcon, null))),
-                react_1.default.createElement(style_guide_1.ButtonGroup, null,
-                    react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
-                    react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.isValid || !formik.dirty }, "Save"))),
             react_1.default.createElement(styled_components_1.FormFields, { ref: fieldsRef },
                 react_1.default.createElement(style_guide_1.FormRow, null,
                     react_1.default.createElement(style_guide_1.Label, { htmlFor: 'citation-item-type' }, "Type"),

package/dist/cjs/components/references/ReferenceForm/styled-components.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemoveButton = exports.ToggleButton = exports.DropdownIndicator = exports.Title = exports.PersonForm = exports.Section = exports.DeleteButton = exports.FormFields = exports.ReferenceTextArea = exports.ReferenceTextField = exports.Actions = exports.Button = void 0;
+exports.RemoveButton = exports.ToggleButton = exports.DropdownIndicator = exports.Title = exports.PersonForm = exports.Section = exports.DeleteButton = exports.FormFields = exports.ReferenceTextArea = exports.ReferenceTextField = exports.Button = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.Button = (0, styled_components_1.default)(style_guide_1.IconButton).attrs({
@@ -19,18 +19,6 @@ exports.Button = (0, styled_components_1.default)(style_guide_1.IconButton).attr
     mask: none;
   }
 `;
-exports.Actions = styled_components_1.default.div `
-  flex-shrink: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .tooltip {
-    max-width: ${(props) => props.theme.grid.unit * 39}px;
-    padding: ${(props) => props.theme.grid.unit * 2}px;
-    border-radius: 6px;
-  }
-`;
 exports.ReferenceTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
   padding: ${(props) => props.theme.grid.unit * 2}px
     ${(props) => props.theme.grid.unit * 3}px;

package/dist/cjs/components/references/ReferencesEditor.js

@@ -32,13 +32,20 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReferencesEditor = void 0;
+exports.openReferencesEditor = exports.ReferencesEditor = void 0;
 const transform_1 = require("@manuscripts/transform");
 const react_1 = __importStar(require("react"));
 const array_reducer_1 = require("../../lib/array-reducer");
 const utils_1 = require("../../lib/utils");
 const ReferencesModal_1 = require("./ReferencesModal");
+const editor_props_1 = require("../../plugins/editor-props");
+const view_1 = require("../../lib/view");
+const ReactSubView_1 = __importDefault(require("../../views/ReactSubView"));
+const bibliography_1 = require("../../plugins/bibliography");
 const itemsReducer = (0, array_reducer_1.attrsReducer)();
 const ReferencesEditor = (props) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
@@ -76,3 +83,21 @@ const ReferencesEditor = (props) => {
     return (react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: isOpen, onCancel: () => setOpen(false), items: items, item: selectedItem, citationCounts: props.citationCounts, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
 };
 exports.ReferencesEditor = ReferencesEditor;
+const openReferencesEditor = (state, _, view) => {
+    if (!view) {
+        return false;
+    }
+    const props = (0, editor_props_1.getEditorProps)(state);
+    const bib = (0, bibliography_1.getBibliographyPluginState)(view.state);
+    const componentProps = {
+        items: bib ? Array.from(bib.bibliographyItems.values()) : [],
+        citationCounts: new Map(bib?.citationCounts),
+        onDelete: (item) => (0, view_1.deleteNode)(view, item.id),
+        onSave: (item) => (0, view_1.saveBibliographyItem)(view, item),
+    };
+    const referencesEditor = (0, ReactSubView_1.default)(props, exports.ReferencesEditor, componentProps, state.doc, () => 0, view);
+    view.focus();
+    document.body.appendChild(referencesEditor);
+    return true;
+};
+exports.openReferencesEditor = openReferencesEditor;