@manuscripts/body-editor 3.19.0 → 3.19.1

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;

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/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/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.1';
 exports.MATHJAX_VERSION = '3.2.2';

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;
+};