@manuscripts/body-editor 3.19.0 → 3.19.2

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

@@ -38,10 +38,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferencesModal = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
+const mui_1 = require("@manuscripts/style-guide/mui");
 const transform_1 = require("@manuscripts/transform");
 const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const ReferenceForm_1 = require("./ReferenceForm/ReferenceForm");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
@@ -59,6 +60,7 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
     const valuesRef = (0, react_1.useRef)(undefined);
     const [selection, setSelection] = (0, react_1.useState)();
     const [isNew, setIsNew] = (0, react_1.useState)(false);
+    const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
     const selectionRef = (0, react_1.useRef)(null);
     const sortedItems = (0, react_1.useMemo)(() => [...items].sort((a, b) => {
         const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
@@ -123,6 +125,10 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         const extraKeys = allKeys.filter((key) => !basicProps.includes(key));
         return extraKeys.length > 0;
     };
+    const canDeleteSelectedItem = (selection &&
+        !citationCounts.get(selection.id) &&
+        isNewItem(selection, ['id', 'type'])) ??
+        false;
     const handleSave = (values) => {
         if (!values || !selection) {
             return;
@@ -161,8 +167,13 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         setIsNew(false);
         setSelection(item);
     };
+    const [canSave, setCanSave] = (0, react_1.useState)(false);
     const handleChange = (values) => {
         valuesRef.current = values;
+        const errors = (0, ReferenceForm_1.validateReference)(values);
+        const isValid = Object.keys(errors).length === 0;
+        const dirty = actionsRef.current?.isDirty() ?? false;
+        setCanSave(isValid && dirty);
     };
     const handleImportSave = (data) => {
         handleImport(data);
@@ -183,6 +194,19 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
                         title: 'Save',
                     },
                 } }),
+            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: () => {
+                            handleDelete();
+                            setShowDeleteDialog(false);
+                        },
+                        title: 'Delete',
+                    },
+                    primary: {
+                        action: () => setShowDeleteDialog(false),
+                        title: 'Cancel',
+                    },
+                } }),
             react_1.default.createElement(ReferencesModalContainer, { "data-cy": 'references-editor' },
                 react_1.default.createElement(style_guide_1.ModalHeader, null,
                     react_1.default.createElement(style_guide_1.CloseButton, { "data-cy": "modal-close-button", onClick: onCancel })),
@@ -205,18 +229,25 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
                                 react_1.default.createElement(style_guide_1.AddIcon, null),
                                 react_1.default.createElement("span", null, "New Reference")),
                             react_1.default.createElement(ReferencesInnerWrapper, null,
-                                react_1.default.createElement(ExistingReferencesHeading, null, "Existing References"),
+                                sortedItems.length ? (react_1.default.createElement(ExistingReferencesHeading, null, "Existing References")) : null,
                                 sortedItems.slice(startIndex, endIndex + 1).map((item) => (react_1.default.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
                                     react_1.default.createElement(IconContainer, null,
                                         react_1.default.createElement(CitationCountIconStyled, null),
                                         (citationCounts.get(item.id) || 0) > 0 ? (react_1.default.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (react_1.default.createElement(CitationCount, { className: "unused" }, "0"))),
-                                    react_1.default.createElement(ReferenceLine_1.ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item })))))),
+                                    react_1.default.createElement(ReferenceLine_1.ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item }),
+                                    isSelected(item) && (react_1.default.createElement(style_guide_1.ButtonGroup, null,
+                                        react_1.default.createElement(mui_1.IconButton, { component: 'a', href: `https://doi.org/${item.DOI}`, target: '_blank', size: 'small' },
+                                            react_1.default.createElement(DOILinkIcon, { fill: '#6E6E6E' })),
+                                        react_1.default.createElement(mui_1.IconButton, { disabled: !canDeleteSelectedItem, size: 'small', onClick: () => setShowDeleteDialog(true) },
+                                            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' }))))))))),
                         react_1.default.createElement(ImportFromFileFooter, null,
                             react_1.default.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
                                 react_1.default.createElement(style_guide_1.AddAuthorIcon, null),
                                 "Import from file"))),
-                    react_1.default.createElement(style_guide_1.ScrollableModalContent, null, importSuccessCount !== null ? (react_1.default.createElement(ImportSuccessPlaceholder_1.ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: (0, normalize_1.normalizeBlblioItem)(selection), showDelete: !citationCounts.get(selection.id) &&
-                            isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
+                    react_1.default.createElement(ReferencesContent, null, importSuccessCount !== null ? (react_1.default.createElement(ImportSuccessPlaceholder_1.ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: (0, normalize_1.normalizeBlblioItem)(selection), onChange: handleChange, onSave: handleSave, actionsRef: actionsRef }))))),
+                react_1.default.createElement(Footer, null,
+                    react_1.default.createElement(TertiaryButton, { variant: "tertiary", onClick: onCancel }, "Close"),
+                    react_1.default.createElement(mui_1.Button, { disabled: !canSave, onClick: () => actionsRef.current?.submit() }, "Save Changes"))))));
 };
 exports.ReferencesModal = ReferencesModal;
 const ReferencesModalContainer = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
@@ -225,15 +256,19 @@ const ReferencesModalContainer = (0, styled_components_1.default)(style_guide_1.
 const ReferencesSidebar = (0, styled_components_1.default)(style_guide_1.ModalSidebar) `
   width: 70%;
 `;
+const ReferencesContent = (0, styled_components_1.default)(style_guide_1.ScrollableModalContent) `
+  padding-top: 32px;
+`;
 const ReferencesSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
   overflow-y: auto;
+  padding-top: 8px;
 `;
 const ReferencesInnerWrapper = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   width: 100%;
   padding: 12px 0;
 `);
 const CitationCountIconStyled = (0, styled_components_1.default)(style_guide_1.CitationCountIcon) ``;
-const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.button `
+const referenceButtonStyles = (0, styled_components_1.css) `
   cursor: pointer;
   display: flex;
   width: 100%;
@@ -245,6 +280,7 @@ const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_componen
   border: none;
   border-radius: 0;
   text-align: inherit;
+  color: #353535;
 
   padding: ${(props) => props.theme.grid.unit * 4}px 0;
   border-top: 1px solid transparent;
@@ -269,6 +305,12 @@ const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_componen
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
+`;
+const ReferenceButton = (0, style_guide_1.withNavigableListItem)(styled_components_1.default.div.attrs({
+    role: 'button',
+    tabIndex: 0,
+}) `
+  ${referenceButtonStyles}
 `);
 const IconContainer = styled_components_1.default.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
@@ -291,10 +333,14 @@ const CitationCount = styled_components_1.default.div `
     background-color: #fe8f1f;
   }
 `;
-const NewReferenceButton = (0, styled_components_1.default)(ReferenceButton) `
+const NewReferenceButton = styled_components_1.default.button `
+  ${referenceButtonStyles}
+
   svg {
     margin-right: 8px;
   }
+
+  ${style_guide_1.outlineStyle}
 `;
 const ExistingReferencesHeading = styled_components_1.default.h3 `
   font-size: 18px;
@@ -331,3 +377,21 @@ const ImportFromFileButton = styled_components_1.default.button `
     fill: #6e6e6e;
   }
 `;
+const Footer = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  gap: 16px;
+`;
+const TertiaryButton = (0, styled_components_1.default)(mui_1.Button) `
+  &.MuiButton-textSecondary {
+    color: #0d79d0;
+
+    &:hover {
+      background-color: rgba(13, 121, 208, 0.04);
+    }
+  }
+`;
+const DOILinkIcon = (0, styled_components_1.default)(style_guide_1.LinkIcon) `
+  transform: rotate(-45deg);
+`;

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/menus.js

@@ -29,6 +29,7 @@ const template_1 = require("./lib/template");
 const utils_1 = require("./lib/utils");
 const editor_props_1 = require("./plugins/editor-props");
 const AwardModal_1 = require("./components/awards/AwardModal");
+const ReferencesEditor_1 = require("./components/references/ReferencesEditor");
 const getEditorMenus = (editor) => {
     const { isCommandValid, state, view } = editor;
     const doCommand = (command) => () => editor.doCommand(command);
@@ -566,6 +567,17 @@ const getEditorMenus = (editor) => {
                 run: doCommand(commands_1.insertInlineCitation),
                 isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.citation),
             },
+            {
+                id: 'insert-reference-section',
+                label: 'New reference',
+                shortcut: {
+                    mac: 'Option+CommandOrControl+N',
+                    pc: 'CommandOrControl+Option+N',
+                },
+                isEnabled: (0, utils_1.isEditAllowed)(state),
+                run: doCommand(ReferencesEditor_1.openReferencesEditor),
+                isHidden: !(0, template_1.templateAllows)(state, transform_1.schema.nodes.bibliography_item),
+            },
             {
                 id: 'insert-cross-reference',
                 label: 'Cross-reference',

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.0';
+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']);