@manuscripts/body-editor 3.19.0 → 3.19.2

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

@@ -13,52 +13,111 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { ArrowUpIcon, AttentionRedIcon, ButtonGroup, IconButton, ModalContainer, PrimaryButton, RadioButton, StyledModal, TertiaryButton, WebLinkIcon, withFocusTrap, } from '@manuscripts/style-guide';
+import { schema } from '@manuscripts/transform';
 import React, { useState } from 'react';
-import { AttentionOrangeIcon, CloseButton, ModalContainer, ModalHeader, PrimaryButton, StyledModal, TertiaryButton, TextButton, } from '@manuscripts/style-guide';
-import { startCase } from 'lodash';
+import { getSurroundingText } from '../../lib/utils';
+import { nodeTypeIcon } from '../../node-type-icons';
 import styled from 'styled-components';
 export const CrossRefWarningModal = ({ onClose, xrefs, onConfirm, selectAndScrollTo }) => {
     const [isOpen, setIsOpen] = useState(true);
+    const [deleteOption, setDeleteOption] = useState('delete-without-ref');
     const handleClose = () => {
         setIsOpen(false);
         onClose();
     };
-    return (React.createElement(Modal, { isOpen: isOpen, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: false, hideOverlay: true },
-        React.createElement(Container, { "data-cy": "cross-reference-warning-modal" },
-            React.createElement(ModalHeader, null,
-                React.createElement(CloseButton, { onClick: () => handleClose(), "data-cy": "modal-close-button" })),
+    const [showRef, setShowRef] = useState(false);
+    const [isScrolling, setIsScrolling] = 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.createElement(Modal, { isOpen: isOpen, "$isScrolling": isScrolling, onRequestClose: () => handleClose(), shouldCloseOnOverlayClick: false, hideOverlay: true },
+        React.createElement(Container, { "$isScrolling": isScrolling, "data-cy": "cross-reference-warning-modal" },
             React.createElement(Body, null,
                 React.createElement(Title, null,
-                    React.createElement(AttentionOrangeIcon, { width: 24, height: 22 }),
-                    " Delete referenced content?"),
-                React.createElement("p", null, "You are deleting content referenced elsewhere in the document:"),
-                React.createElement(ScrolableItems, null, xrefs.map((group, i) => (React.createElement(XrefGroupDisplay, { key: i, group: group, selectAndScrollTo: selectAndScrollTo })))),
-                React.createElement(Actions, null,
+                    React.createElement(AttentionRedIcon, { width: 24, height: 24 }),
+                    "Confirm Deletion"),
+                React.createElement("p", null,
+                    React.createElement("b", null, elementLabel),
+                    " ",
+                    xrefs.length === 1 ? 'is' : 'are',
+                    " actively referenced in",
+                    ' ',
+                    React.createElement("b", null,
+                        references.length,
+                        " ",
+                        locationWord),
+                    ' ',
+                    "in your document. Deleting ",
+                    pronoun,
+                    " will break the following cross-references:"),
+                React.createElement("div", null,
+                    React.createElement(ToggleHeader, null,
+                        React.createElement(SecondaryBoldHeading, null, showRef
+                            ? 'Hide locations'
+                            : `Show ${references.length} location`),
+                        React.createElement(ToggleButton, { onClick: toggleReferenceList }, showRef ? React.createElement(ArrowUpIcon, null) : React.createElement(ArrowDownIcon, null))),
+                    showRef && (React.createElement(ListWrapper, null, xrefs.length === 1 ? (React.createElement(XrefGroupDisplay, { label: xrefs[0].label, xrefs: xrefs[0].xrefs, selectAndScrollTo: handleSelectAndScrollTo })) : (React.createElement(XrefGroupsDisplay, { xrefsGroup: xrefs, selectAndScrollTo: handleSelectAndScrollTo }))))),
+                React.createElement(SelectorContainer, null,
+                    React.createElement(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.createElement(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.createElement(ButtonGroup, null,
                     React.createElement(TertiaryButton, { type: "button", onClick: () => handleClose() }, "Cancel"),
                     React.createElement(PrimaryButton, { "$danger": true, type: "button", onClick: () => {
-                            onConfirm();
+                            onConfirm(deleteOption);
                             setIsOpen(false);
-                        } }, "Delete & remove citation"))))));
+                        } }, "Delete"))))));
 };
-const XrefGroupDisplay = ({ group, selectAndScrollTo }) => {
-    return (React.createElement("div", null,
-        React.createElement("h3", null, group.label),
-        React.createElement(ReferencesList, null, group.xrefs.map(([, pos], i) => {
-            return (React.createElement("li", { key: i },
-                React.createElement(TextButton, { onClick: () => selectAndScrollTo(pos) }, `${startCase(pos.parent.type.name)} - ${pos.parent.textContent}`)));
-        }))));
+const XrefGroupDisplay = ({ label, xrefs, selectAndScrollTo }) => {
+    return (React.createElement(ReferencesList, null, xrefs.map(([xrefNode, pos], i) => {
+        const { leftHandText, rightHandText } = getSurroundingText(pos, xrefNode);
+        const derivedLabel = xrefNode.attrs.label || label || '[cross-ref]';
+        return (React.createElement(ListItem, { key: i },
+            React.createElement(XRefTextContainer, null,
+                React.createElement(XRefAdjacentText, { "$direction": 'rtl' }, leftHandText),
+                React.createElement(XRefLabel, null, derivedLabel),
+                React.createElement(XRefAdjacentText, { "$direction": 'ltr' }, rightHandText)),
+            React.createElement(ScrollButton, { "$mini": true, onClick: () => selectAndScrollTo(pos) }, "Show")));
+    })));
+};
+const XrefGroupsDisplay = ({ xrefsGroup, selectAndScrollTo }) => {
+    return (React.createElement(ReferencesList, null, xrefsGroup.map(({ referenced, label, caption, xrefs }, i) => {
+        const icon = getReferencedIcon(referenced.type);
+        return (React.createElement("div", { key: i },
+            React.createElement(DarkSecondaryBoldHeading, null,
+                icon ? React.createElement(ItemIcon, null, icon) : null,
+                `${label}:`,
+                React.createElement(CaptionTitle, { "$direction": 'ltr' }, caption)),
+            React.createElement(XrefGroupDisplay, { label: label, xrefs: xrefs, selectAndScrollTo: selectAndScrollTo })));
+    })));
+};
+const getReferencedIcon = (type) => {
+    if (type === schema.nodes.supplement) {
+        return React.createElement(WebLinkIcon, { className: "file-icon" });
+    }
+    return nodeTypeIcon(schema.nodes[type.name]);
 };
 const Container = styled(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 = styled(StyledModal) `
@@ -86,6 +145,8 @@ const Modal = styled(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;
@@ -95,11 +156,11 @@ const Modal = styled(StyledModal) `
     margin: 0.5em 0;
   }
 `;
-const Body = styled.div `
+const Body = withFocusTrap(styled.div `
   margin: 1.5rem;
   display: flex;
   flex-flow: column;
-`;
+`);
 const Title = styled.h2 `
   font-size: 18px;
   font-weight: 700;
@@ -108,35 +169,124 @@ const Title = styled.h2 `
   color: #353535;
   svg {
     vertical-align: text-top;
+    margin-right: 8px;
   }
 `;
-const ReferencesList = styled.ul `
-  padding: 8px;
-  margin-left: 0;
-  list-style: none;
+const ToggleHeader = styled.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.div `
   border: 1px solid #e2e2e2;
-  border-radius: 3px;
-
-  ${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 = styled(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.footer `
-  text-align: right;
-  padding-top: 1rem;
+const SecondaryHeading = styled.div `
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  color: #6e6e6e;
+  user-select: none;
 `;
-const ScrolableItems = styled.div `
-  max-height: 16vh;
-  min-height: 100px;
-  overflow-y: auto;
+const SecondaryBoldHeading = styled(SecondaryHeading) `
+  font-weight: 700;
+  color: #6e6e6e;
+`;
+const DarkSecondaryBoldHeading = styled(SecondaryBoldHeading) `
+  display: flex;
+  padding: 0 4px;
+  margin-bottom: 10px;
+  border-radius: 4px;
+  color: #353535;
+  background: #f2f2f2;
+`;
+const ItemIcon = styled.span `
+  display: flex;
+  padding-right: 8px;
+  svg {
+    align-self: center;
+  }
+`;
+const ReferencesList = styled.ul `
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+const ListItem = styled.li `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: solid 1px #e2e2e2;
+  &:last-child {
+    border-bottom: none;
+    padding: 0;
+  }
+`;
+const ScrollButton = styled(TertiaryButton) `
+  margin: 0;
+  padding: 4px;
+  font-size: 14px;
+  line-height: 24px;
+  text-decoration-line: underline;
+`;
+const XRefTextContainer = styled.div `
+  display: flex;
+  color: #6e6e6e;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+`;
+const XRefLabel = styled.span `
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+  mix-blend-mode: darken;
+`;
+const XRefAdjacentText = styled.span `
+  display: block;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: ${(props) => props.$direction};
+`;
+const CaptionTitle = styled(XRefAdjacentText) `
+  max-width: 120px;
+  margin-left: 4px;
+`;
+const SelectorContainer = styled.div `
+  display: flex;
+  gap: 24px;
+  padding: 8px 12px 4px 12px;
+  margin: 24px 0;
+  border-radius: 4px;
+  border: 1px solid #fe8f1f;
+  background: #fff9e5;
+`;
+const ArrowDownIcon = styled(ArrowUpIcon) `
+  transform: rotate(180deg);
 `;

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

@@ -15,14 +15,20 @@
  */
 import { getEditorProps } from '../../plugins/editor-props';
 import ReactSubView from '../../views/ReactSubView';
-import { CrossRefWarningModal } from './CrossRefWarningModal';
+import { CrossRefWarningModal, } from './CrossRefWarningModal';
 export const openCrossRefWarningModal = (view, xrefGroups, onConfirm, onClose, selectAndScrollTo) => {
     const { state } = view;
     const props = getEditorProps(state);
     const componentProps = {
         xrefs: xrefGroups,
-        onConfirm,
-        onClose,
+        onConfirm: (deleteOption) => {
+            dialog.unmount();
+            onConfirm(deleteOption);
+        },
+        onClose: () => {
+            dialog.unmount();
+            onClose();
+        },
         selectAndScrollTo,
     };
     const dialog = ReactSubView(props, CrossRefWarningModal, componentProps, state.doc, () => 0, view);

package/dist/es/components/references/ReferenceForm/ReferenceForm.js

@@ -13,19 +13,33 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AddAuthorIcon, ButtonGroup, Category, DeleteIcon, Dialog, IconButton, LinkIcon, PrimaryButton, SecondaryButton, SelectField, Label, FormRow, YearField, } from '@manuscripts/style-guide';
+import { AddAuthorIcon, SelectField, Label, FormRow, YearField, } from '@manuscripts/style-guide';
 import { Field, FieldArray, Formik } from 'formik';
 import React, { useEffect, useRef, useState } from 'react';
 import { bibliographyItemTypes } from '../../../lib/references';
 import { shouldRenderField } from '../../../lib/utils';
 import { ChangeHandlingForm } from '../../ChangeHandlingForm';
 import { PersonDropDown } from './PersonDropDown';
-import { Actions, Button, DeleteButton, FormFields, ReferenceTextArea, ReferenceTextField, } from './styled-components';
+import { Button, FormFields, ReferenceTextArea, ReferenceTextField, } from './styled-components';
 const bibliographyItemTypeOptions = bibliographyItemTypes.map((i) => ({
     label: i[1],
     value: i[0],
 }));
-export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSave, actionsRef, }) => {
+export 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;
+};
+export const ReferenceForm = ({ values, onChange, onSave, actionsRef, }) => {
     const fieldsRef = useRef(null);
     const formRef = useRef(null);
     const [newAuthorIndex, setNewAuthorIndex] = useState();
@@ -35,52 +49,19 @@ export const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel
             fieldsRef.current.scrollTop = 0;
         }
     }, [values]);
-    const [showDeleteDialog, setShowDeleteDialog] = 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.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, innerRef: formRef, validate: validateReference }, (formik) => {
         return (React.createElement(ChangeHandlingForm, { onChange: onChange },
-            React.createElement(Dialog, { isOpen: showDeleteDialog, category: 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.createElement(Actions, null,
-                React.createElement(ButtonGroup, null,
-                    React.createElement(IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
-                        React.createElement(LinkIcon, null)),
-                    React.createElement(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.createElement(DeleteIcon, null))),
-                React.createElement(ButtonGroup, null,
-                    React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
-                    React.createElement(PrimaryButton, { type: "submit", disabled: !formik.isValid || !formik.dirty }, "Save"))),
             React.createElement(FormFields, { ref: fieldsRef },
                 React.createElement(FormRow, null,
                     React.createElement(Label, { htmlFor: 'citation-item-type' }, "Type"),

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

@@ -13,18 +13,6 @@ export const Button = styled(IconButton).attrs({
     mask: none;
   }
 `;
-export const Actions = styled.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;
-  }
-`;
 export const ReferenceTextField = styled(TextField) `
   padding: ${(props) => props.theme.grid.unit * 2}px
     ${(props) => props.theme.grid.unit * 3}px;

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

@@ -3,6 +3,10 @@ import React, { useEffect, useReducer, useState } from 'react';
 import { attrsReducer } from '../../lib/array-reducer';
 import { cleanItemValues } from '../../lib/utils';
 import { ReferencesModal } from './ReferencesModal';
+import { getEditorProps } from '../../plugins/editor-props';
+import { deleteNode, saveBibliographyItem } from '../../lib/view';
+import ReactSubView from '../../views/ReactSubView';
+import { getBibliographyPluginState } from '../../plugins/bibliography';
 const itemsReducer = attrsReducer();
 export const ReferencesEditor = (props) => {
     const [isOpen, setOpen] = useState(true);
@@ -39,3 +43,20 @@ export const ReferencesEditor = (props) => {
     };
     return (React.createElement(ReferencesModal, { isOpen: isOpen, onCancel: () => setOpen(false), items: items, item: selectedItem, citationCounts: props.citationCounts, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
 };
+export const openReferencesEditor = (state, _, view) => {
+    if (!view) {
+        return false;
+    }
+    const props = getEditorProps(state);
+    const bib = getBibliographyPluginState(view.state);
+    const componentProps = {
+        items: bib ? Array.from(bib.bibliographyItems.values()) : [],
+        citationCounts: new Map(bib?.citationCounts),
+        onDelete: (item) => deleteNode(view, item.id),
+        onSave: (item) => saveBibliographyItem(view, item),
+    };
+    const referencesEditor = ReactSubView(props, ReferencesEditor, componentProps, state.doc, () => 0, view);
+    view.focus();
+    document.body.appendChild(referencesEditor);
+    return true;
+};

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

@@ -1,9 +1,10 @@
-import { AddIcon, AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, } from '@manuscripts/style-guide';
+import { AddIcon, AddAuthorIcon, Category, CitationCountIcon, CloseButton, Dialog, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, useScrollDetection, withListNavigation, withNavigableListItem, ButtonGroup, DeleteIcon, LinkIcon, outlineStyle, } from '@manuscripts/style-guide';
+import { Button, IconButton } from '@manuscripts/style-guide/mui';
 import { generateNodeID, schema, } from '@manuscripts/transform';
 import isEqual from 'lodash/isEqual';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { ReferenceForm, } from './ReferenceForm/ReferenceForm';
+import styled, { css } from 'styled-components';
+import { ReferenceForm, validateReference, } from './ReferenceForm/ReferenceForm';
 import { ReferenceLine } from './ReferenceLine';
 import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder';
@@ -20,6 +21,7 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
     const valuesRef = useRef(undefined);
     const [selection, setSelection] = useState();
     const [isNew, setIsNew] = useState(false);
+    const [showDeleteDialog, setShowDeleteDialog] = useState(false);
     const selectionRef = useRef(null);
     const sortedItems = useMemo(() => [...items].sort((a, b) => {
         const aUncited = (citationCounts.get(a.id) ?? 0) === 0;
@@ -84,6 +86,10 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         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;
@@ -122,8 +128,13 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
         setIsNew(false);
         setSelection(item);
     };
+    const [canSave, setCanSave] = useState(false);
     const handleChange = (values) => {
         valuesRef.current = values;
+        const errors = validateReference(values);
+        const isValid = Object.keys(errors).length === 0;
+        const dirty = actionsRef.current?.isDirty() ?? false;
+        setCanSave(isValid && dirty);
     };
     const handleImportSave = (data) => {
         handleImport(data);
@@ -144,6 +155,19 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                         title: 'Save',
                     },
                 } }),
+            React.createElement(Dialog, { isOpen: showDeleteDialog, category: 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.createElement(ReferencesModalContainer, { "data-cy": 'references-editor' },
                 React.createElement(ModalHeader, null,
                     React.createElement(CloseButton, { "data-cy": "modal-close-button", onClick: onCancel })),
@@ -166,18 +190,25 @@ export const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts,
                                 React.createElement(AddIcon, null),
                                 React.createElement("span", null, "New Reference")),
                             React.createElement(ReferencesInnerWrapper, null,
-                                React.createElement(ExistingReferencesHeading, null, "Existing References"),
+                                sortedItems.length ? (React.createElement(ExistingReferencesHeading, null, "Existing References")) : null,
                                 sortedItems.slice(startIndex, endIndex + 1).map((item) => (React.createElement(ReferenceButton, { key: item.id, id: item.id, className: isSelected(item) ? 'selected' : '', onClick: () => handleItemClick(item), ref: isSelected(item) ? selectionRef : null },
                                     React.createElement(IconContainer, null,
                                         React.createElement(CitationCountIconStyled, null),
                                         (citationCounts.get(item.id) || 0) > 0 ? (React.createElement(CitationCount, { "data-tooltip-content": "Number of times used in the document" }, citationCounts.get(item.id))) : (React.createElement(CitationCount, { className: "unused" }, "0"))),
-                                    React.createElement(ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item })))))),
+                                    React.createElement(ReferenceLine, { showUncited: !citationCounts.get(item.id), item: item }),
+                                    isSelected(item) && (React.createElement(ButtonGroup, null,
+                                        React.createElement(IconButton, { component: 'a', href: `https://doi.org/${item.DOI}`, target: '_blank', size: 'small' },
+                                            React.createElement(DOILinkIcon, { fill: '#6E6E6E' })),
+                                        React.createElement(IconButton, { disabled: !canDeleteSelectedItem, size: 'small', onClick: () => setShowDeleteDialog(true) },
+                                            React.createElement(DeleteIcon, { fill: '#6E6E6E' }))))))))),
                         React.createElement(ImportFromFileFooter, null,
                             React.createElement(ImportFromFileButton, { type: "button", "data-cy": "import-from-file-button", onClick: () => setImporting(true) },
                                 React.createElement(AddAuthorIcon, null),
                                 "Import from file"))),
-                    React.createElement(ScrollableModalContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalizeBlblioItem(selection), showDelete: !citationCounts.get(selection.id) &&
-                            isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
+                    React.createElement(ReferencesContent, null, importSuccessCount !== null ? (React.createElement(ImportSuccessPlaceholder, { count: importSuccessCount })) : (selection && (React.createElement(ReferenceForm, { values: normalizeBlblioItem(selection), onChange: handleChange, onSave: handleSave, actionsRef: actionsRef }))))),
+                React.createElement(Footer, null,
+                    React.createElement(TertiaryButton, { variant: "tertiary", onClick: onCancel }, "Close"),
+                    React.createElement(Button, { disabled: !canSave, onClick: () => actionsRef.current?.submit() }, "Save Changes"))))));
 };
 const ReferencesModalContainer = styled(ModalContainer) `
   min-width: 960px;
@@ -185,15 +216,19 @@ const ReferencesModalContainer = styled(ModalContainer) `
 const ReferencesSidebar = styled(ModalSidebar) `
   width: 70%;
 `;
+const ReferencesContent = styled(ScrollableModalContent) `
+  padding-top: 32px;
+`;
 const ReferencesSidebarContent = styled(SidebarContent) `
   overflow-y: auto;
+  padding-top: 8px;
 `;
 const ReferencesInnerWrapper = withListNavigation(styled.div `
   width: 100%;
   padding: 12px 0;
 `);
 const CitationCountIconStyled = styled(CitationCountIcon) ``;
-const ReferenceButton = withNavigableListItem(styled.button `
+const referenceButtonStyles = css `
   cursor: pointer;
   display: flex;
   width: 100%;
@@ -205,6 +240,7 @@ const ReferenceButton = withNavigableListItem(styled.button `
   border: none;
   border-radius: 0;
   text-align: inherit;
+  color: #353535;
 
   padding: ${(props) => props.theme.grid.unit * 4}px 0;
   border-top: 1px solid transparent;
@@ -229,6 +265,12 @@ const ReferenceButton = withNavigableListItem(styled.button `
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
+`;
+const ReferenceButton = withNavigableListItem(styled.div.attrs({
+    role: 'button',
+    tabIndex: 0,
+}) `
+  ${referenceButtonStyles}
 `);
 const IconContainer = styled.div `
   padding-right: ${(props) => props.theme.grid.unit * 5}px;
@@ -251,10 +293,14 @@ const CitationCount = styled.div `
     background-color: #fe8f1f;
   }
 `;
-const NewReferenceButton = styled(ReferenceButton) `
+const NewReferenceButton = styled.button `
+  ${referenceButtonStyles}
+
   svg {
     margin-right: 8px;
   }
+
+  ${outlineStyle}
 `;
 const ExistingReferencesHeading = styled.h3 `
   font-size: 18px;
@@ -291,3 +337,21 @@ const ImportFromFileButton = styled.button `
     fill: #6e6e6e;
   }
 `;
+const Footer = styled.div `
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  gap: 16px;
+`;
+const TertiaryButton = styled(Button) `
+  &.MuiButton-textSecondary {
+    color: #0d79d0;
+
+    &:hover {
+      background-color: rgba(13, 121, 208, 0.04);
+    }
+  }
+`;
+const DOILinkIcon = styled(LinkIcon) `
+  transform: rotate(-45deg);
+`;