@manuscripts/body-editor 3.16.1 → 3.16.2

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

@@ -43,6 +43,8 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ReferenceForm_1 = require("./ReferenceForm/ReferenceForm");
 const ReferenceLine_1 = require("./ReferenceLine");
+const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
+const ImportSuccessPlaceholder_1 = require("./ImportSuccessPlaceholder");
 const ReferencesModalContainer = (0, styled_components_1.default)(style_guide_1.ModalContainer) `
   min-width: 960px;
 `;
@@ -52,6 +54,33 @@ const ReferencesSidebar = (0, styled_components_1.default)(style_guide_1.ModalSi
 const ReferencesSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
   overflow-y: auto;
 `;
+const ImportFromFileFooter = styled_components_1.default.div `
+  padding: 16px;
+`;
+const ImportFromFileButton = styled_components_1.default.button `
+  display: flex;
+  width: 100%;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px dashed #c9c9c9;
+  background: #fafafa;
+  cursor: pointer;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 14px;
+  color: #353535;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg rect {
+    fill: #6e6e6e;
+  }
+`;
 const ReferencesInnerWrapper = (0, style_guide_1.withListNavigation)(styled_components_1.default.div `
   width: 100%;
   padding: 12px 0;
@@ -139,15 +168,25 @@ const normalize = (item) => ({
     accessed: item.accessed,
     comment: item.comment || '',
 });
-const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, }) => {
+const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave, onDelete, handleImport, }) => {
+    const [importing, setImporting] = (0, react_1.useState)(false);
+    const [importSuccessCount, setImportSuccessCount] = (0, react_1.useState)(null);
     const [confirm, setConfirm] = (0, react_1.useState)(false);
     const valuesRef = (0, react_1.useRef)(undefined);
     const [selection, setSelection] = (0, react_1.useState)();
     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;
+        const bUncited = (citationCounts.get(b.id) ?? 0) === 0;
+        if (aUncited === bUncited) {
+            return 0;
+        }
+        return aUncited ? 1 : -1;
+    }), [items, citationCounts]);
     const isSelected = (item) => {
         return item.id === selection?.id;
     };
-    const selectionIndex = items.findIndex(isSelected);
+    const selectionIndex = sortedItems.findIndex(isSelected);
     (0, react_1.useEffect)(() => {
         setSelection(item);
     }, [item]);
@@ -165,8 +204,8 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
     (0, react_1.useEffect)(() => {
         const base = Math.max(0, selectionIndex - selectionTopOffset);
         setStartIndex(base);
-        setEndIndex(Math.min(items.length - 1, base + pageSize));
-    }, [selectionIndex, items]);
+        setEndIndex(Math.min(sortedItems.length - 1, base + pageSize));
+    }, [selectionIndex, sortedItems]);
     (0, react_1.useEffect)(() => {
         if (triggers.top) {
             const newFirst = Math.max(0, startIndex - pageSize);
@@ -174,11 +213,11 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
             setEndIndex(Math.min(newFirst + dropLimit, endIndex));
         }
         if (triggers.bottom) {
-            const newLast = Math.min(items.length - 1, endIndex + pageSize);
+            const newLast = Math.min(sortedItems.length - 1, endIndex + pageSize);
             setEndIndex(newLast);
             setStartIndex(Math.max(newLast - dropLimit, startIndex));
         }
-    }, [triggers, items]);
+    }, [triggers, sortedItems]);
     const actionsRef = (0, react_1.useRef)(undefined);
     const reset = () => {
         actionsRef.current?.reset();
@@ -212,7 +251,9 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
         onDelete(selection);
         setSelection(undefined);
     };
+    const clearImportSuccess = () => setImportSuccessCount(null);
     const handleItemClick = (item) => {
+        clearImportSuccess();
         const values = valuesRef.current;
         if (values && selection && !(0, isEqual_1.default)(values, normalize(selection))) {
             setConfirm(true);
@@ -223,34 +264,46 @@ const ReferencesModal = ({ isOpen, onCancel, items, item, citationCounts, onSave
     const handleChange = (values) => {
         valuesRef.current = values;
     };
-    if (items.length <= 0) {
+    const handleImportSave = (data) => {
+        handleImport(data);
+        setImporting(false);
+        setSelection(undefined);
+        setImportSuccessCount(data.length);
+    };
+    if (sortedItems.length <= 0) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
-    return (react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
-        react_1.default.createElement(style_guide_1.Dialog, { isOpen: confirm, category: style_guide_1.Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
-                secondary: {
-                    action: () => reset(),
-                    title: 'Discard',
-                },
-                primary: {
-                    action: () => handleSave(valuesRef.current),
-                    title: 'Save',
-                },
-            } }),
-        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, { onClick: onCancel })),
-            react_1.default.createElement(style_guide_1.ModalBody, null,
-                react_1.default.createElement(ReferencesSidebar, null,
-                    react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
-                        react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "References")),
-                    react_1.default.createElement(ReferencesSidebarContent, { ref: ref },
-                        react_1.default.createElement(ReferencesInnerWrapper, null, items.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(style_guide_1.CitationCountIcon, 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, { item: item }))))))),
-                react_1.default.createElement(style_guide_1.ScrollableModalContent, null, selection && (react_1.default.createElement(ReferenceForm_1.ReferenceForm, { values: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
-                        isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        importing && (react_1.default.createElement(ImportBibliographyModal_1.ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleImportSave })),
+        react_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
+            react_1.default.createElement(style_guide_1.Dialog, { isOpen: confirm, category: style_guide_1.Category.confirmation, header: "You've made changes to this option", message: "Would you like to save or discard your changes?", actions: {
+                    secondary: {
+                        action: () => reset(),
+                        title: 'Discard',
+                    },
+                    primary: {
+                        action: () => handleSave(valuesRef.current),
+                        title: 'Save',
+                    },
+                } }),
+            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 })),
+                react_1.default.createElement(style_guide_1.ModalBody, null,
+                    react_1.default.createElement(ReferencesSidebar, null,
+                        react_1.default.createElement(style_guide_1.ModalSidebarHeader, null,
+                            react_1.default.createElement(style_guide_1.ModalSidebarTitle, null, "References")),
+                        react_1.default.createElement(ReferencesSidebarContent, { ref: ref },
+                            react_1.default.createElement(ReferencesInnerWrapper, 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(style_guide_1.CitationCountIcon, 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, { item: item })))))),
+                        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: normalize(selection), showDelete: !citationCounts.get(selection.id) &&
+                            isNewItem(selection, ['id', 'type']), onChange: handleChange, onCancel: onCancel, onDelete: handleDelete, onSave: handleSave, actionsRef: actionsRef })))))))));
 };
 exports.ReferencesModal = ReferencesModal;

package/dist/cjs/lib/view.js

@@ -48,7 +48,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
+exports.saveBibliographyItem = exports.insertBibliographyItems = exports.deleteNode = exports.updateNodeAttrs = exports.findChildrenAttrsByType = exports.findChildrenByType = exports.findChildByType = exports.findChildByID = void 0;
 const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const utils = __importStar(require("prosemirror-utils"));
@@ -106,3 +106,41 @@ const deleteNode = (view, id) => {
     }
 };
 exports.deleteNode = deleteNode;
+const createBibliographySection = (nodes) => transform_1.schema.nodes.bibliography_section.createAndFill({}, [
+    transform_1.schema.nodes.section_title.create({}, transform_1.schema.text('References')),
+    transform_1.schema.nodes.bibliography_element.create({}, nodes),
+]);
+const insertBibliographyItems = (view, items) => {
+    const { doc } = view.state;
+    let tr = view.state.tr;
+    const biblioSection = utils.findChildrenByType(doc, transform_1.schema.nodes.bibliography_element, true);
+    if (biblioSection.length) {
+        let insertPos = biblioSection[0].pos + 1;
+        for (const attrs of items) {
+            const node = transform_1.schema.nodes.bibliography_item.create(attrs);
+            tr = tr.insert(insertPos, node);
+            insertPos += node.nodeSize;
+        }
+    }
+    else {
+        const backmatter = utils.findChildrenByType(doc, transform_1.schema.nodes.backmatter, true);
+        const backmatterEnd = backmatter[0]
+            ? backmatter[0].node.nodeSize + backmatter[0].pos
+            : 0;
+        const nodes = items.map((attrs) => transform_1.schema.nodes.bibliography_item.create(attrs));
+        tr = tr.insert(backmatterEnd ? backmatterEnd - 1 : tr.doc.content.size, createBibliographySection(nodes));
+    }
+    view.dispatch(tr);
+};
+exports.insertBibliographyItems = insertBibliographyItems;
+const saveBibliographyItem = (view, attrs) => {
+    if (attrs.length === 1) {
+        const item = attrs[0];
+        if ((0, exports.findChildByID)(view, item.id)) {
+            (0, exports.updateNodeAttrs)(view, transform_1.schema.nodes.bibliography_item, item);
+            return;
+        }
+    }
+    (0, exports.insertBibliographyItems)(view, attrs);
+};
+exports.saveBibliographyItem = saveBibliographyItem;

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

package/dist/cjs/views/bibliography_element.js

@@ -20,7 +20,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BibliographyElementBlockView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
-const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
 const ReferencesEditor_1 = require("../components/references/ReferencesEditor");
 const comments_1 = require("../lib/comments");
@@ -92,7 +91,7 @@ class BibliographyElementBlockView extends block_view_1.default {
             this.dom.appendChild(this.container);
         };
         this.handleSave = (attrs) => {
-            (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.bibliography_item, attrs);
+            (0, view_1.saveBibliographyItem)(this.view, attrs);
         };
         this.handleDelete = (item) => {
             (0, view_1.deleteNode)(this.view, item.id);

package/dist/cjs/views/citation_editable.js

@@ -21,9 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CitationEditableView = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const track_changes_plugin_1 = require("@manuscripts/track-changes-plugin");
-const transform_1 = require("@manuscripts/transform");
 const prosemirror_state_1 = require("prosemirror-state");
-const prosemirror_utils_1 = require("prosemirror-utils");
 const CitationEditor_1 = require("../components/references/CitationEditor");
 const CitationViewer_1 = require("../components/references/CitationViewer");
 const comments_1 = require("../lib/comments");
@@ -34,10 +32,6 @@ const bibliography_1 = require("../plugins/bibliography");
 const citation_1 = require("./citation");
 const creators_1 = require("./creators");
 const ReactSubView_1 = __importDefault(require("./ReactSubView"));
-const createBibliographySection = (node) => transform_1.schema.nodes.bibliography_section.createAndFill({}, [
-    transform_1.schema.nodes.section_title.create({}, transform_1.schema.text('References')),
-    transform_1.schema.nodes.bibliography_element.create({}, node ? [node] : []),
-]);
 class CitationEditableView extends citation_1.CitationView {
     constructor() {
         super(...arguments);
@@ -143,12 +137,7 @@ class CitationEditableView extends citation_1.CitationView {
             this.props.popper.destroy();
         };
         this.handleSave = (attrs) => {
-            if (!(0, view_1.findChildByID)(this.view, attrs.id)) {
-                this.insertBibliographyNode(attrs);
-            }
-            else {
-                (0, view_1.updateNodeAttrs)(this.view, transform_1.schema.nodes.bibliography_item, attrs);
-            }
+            (0, view_1.saveBibliographyItem)(this.view, attrs);
         };
         this.handleUncite = (id) => {
             const attrs = this.node.attrs;
@@ -181,7 +170,7 @@ class CitationEditableView extends citation_1.CitationView {
                     item.id = existingItem.id;
                 }
                 else {
-                    this.insertBibliographyNode(item);
+                    (0, view_1.saveBibliographyItem)(this.view, [item]);
                 }
                 rids.push(item.id);
             }
@@ -200,22 +189,6 @@ class CitationEditableView extends citation_1.CitationView {
         this.dom.addEventListener('mouseup', () => this.handleClick(false));
         this.dom.addEventListener('keydown', (0, navigation_utils_1.handleEnterKey)(() => this.handleClick(true)));
     }
-    insertBibliographyNode(attrs) {
-        const { doc, tr } = this.view.state;
-        const biblioSection = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.bibliography_element, true);
-        const backmatter = (0, prosemirror_utils_1.findChildrenByType)(doc, transform_1.schema.nodes.backmatter, true);
-        const backmatterEnd = backmatter[0]
-            ? backmatter[0].node.nodeSize + backmatter[0].pos
-            : 0;
-        const node = transform_1.schema.nodes.bibliography_item.create(attrs);
-        if (biblioSection.length) {
-            this.view.dispatch(tr.insert(biblioSection[0].pos + 1, node));
-        }
-        else {
-            this.view.dispatch(tr.insert(backmatterEnd ? backmatterEnd - 1 : tr.doc.content.size, createBibliographySection(node)));
-        }
-        return false;
-    }
 }
 exports.CitationEditableView = CitationEditableView;
 exports.default = (0, creators_1.createEditableNodeView)(CitationEditableView);

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

@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { arrayReducer, attrsReducer } from '../../lib/array-reducer';
 import { cleanItemValues } from '../../lib/utils';
 import { CitedItem, CitedItems } from './CitationViewer';
-import { ImportBibliographyModal } from './ImportBibliographyModal';
 import { ReferenceLine } from './ReferenceLine';
 import { ReferenceSearch } from './ReferenceSearch';
 import { ReferencesModal } from './ReferencesModal';
@@ -55,7 +54,7 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
     const [rids, dispatchRids] = useReducer(ridsReducer, $rids);
     const handleSave = (item) => {
         const cleanedItem = cleanItemValues(item);
-        onSave(cleanedItem);
+        onSave([cleanedItem]);
         dispatchItems({
             type: 'update',
             items: [cleanedItem],
@@ -90,7 +89,6 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
         show: false,
     });
     const [searching, setSearching] = useState(false);
-    const [importing, setImporting] = useState(false);
     const handleAdd = () => {
         setSearching(false);
         const item = {
@@ -103,35 +101,31 @@ export const CitationEditor = ({ query, rids: $rids, items: $items, citationCoun
         });
         setEditingForm({ show: true, item: item });
     };
-    const handleImport = () => {
-        setSearching(false);
-        setImporting(true);
-    };
-    const handleSaveImport = (data) => {
-        data.forEach((item) => {
-            const newItem = { ...item };
-            newItem.id = generateNodeID(schema.nodes.bibliography_item);
-            handleSave(newItem);
-            handleCite([newItem]);
+    const handleImport = (data) => {
+        const newItems = data.map((item) => cleanItemValues({
+            ...item,
+            id: generateNodeID(schema.nodes.bibliography_item),
+        }));
+        onSave(newItems);
+        dispatchItems({
+            type: 'set',
+            state: [...items, ...newItems],
         });
     };
     const cited = useMemo(() => {
         return rids.flatMap((rid) => items.filter((i) => i.id === rid));
     }, [rids, items]);
     if (editingForm.show) {
-        return (React.createElement(ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: handleSave, onDelete: handleDelete }));
-    }
-    if (importing) {
-        return (React.createElement(ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleSaveImport }));
+        return (React.createElement(ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: handleSave, onDelete: handleDelete, handleImport: handleImport }));
     }
     if (searching) {
-        return (React.createElement(ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: (items) => {
+        return (React.createElement(ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onCite: (items) => {
                 setSearching(false);
                 handleCite(items);
             }, onCancel: () => setSearching(false) }));
     }
     if (!rids.length) {
-        return (React.createElement(ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
+        return (React.createElement(ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
     }
     return (React.createElement(Container, null,
         React.createElement(Dialog, { isOpen: deleteDialog.show, category: Category.confirmation, header: "Remove cited item", message: "Are you sure you want to remove this cited item? It will still exist in the reference list.", actions: {

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

@@ -0,0 +1,70 @@
+import { ModalTitle, Tooltip } from '@manuscripts/style-guide';
+import React from 'react';
+import styled from 'styled-components';
+import { ImportBibliographyForm } from './ImportBibliographyForm';
+const exampleBibtex = `@book{abramowitz+stegun,
+ author    = "Milton {Abramowitz} and Irene A. {Stegun}",
+ title     = "Handbook of Mathematical Functions with Formulas, Graphs, and Mathematical Tables",
+ publisher = "Dover",
+ year      =  1964,
+ address   = "New York City",
+ edition   = "ninth Dover printing, tenth GPO printing"
+}`;
+const examplePubmed = `Example Identifiers:
+pmid:17170128
+PMC1852221`;
+const exampleRis = `TY  - JOUR
+AU  - Shannon, Claude E.
+PY  - 1948
+DA  - July
+TI  - A Mathematical Theory of Communication
+T2  - Bell System Technical Journal
+SP  - 379
+EP  - 423
+VL  - 27
+ER  - `;
+const exampleEnw = `%0 Journal Article
+%D 2018
+%@ 0903-4641
+%A Abbassi-Daloii, Tooba
+%A Yousefi, Soheil
+%A Sekhavati, Mohammad Hadi
+%A Tahmoorespur, Mojtaba
+%J APMIS
+%N 1
+%P 65-75
+%T Impact of heat shock protein 60KD in combination with outer membrane proteins on immune response against Brucella melitensis
+%R https://doi.org/10.1111/apm.12778
+%U https://onlinelibrary.wiley.com/doi/abs/10.1111/apm.12778
+%V 126
+%X Lorem ipsum dolor sit amet`;
+const exampleDoi = `Example DOI Identifiers:
+10.1080/15588742.2015.1017684
+http://dx.doi.org/10.1080/15588742.2015.1017684`;
+const supportedFormats = [
+    { label: 'BibTex', example: exampleBibtex },
+    { label: 'PubMed', example: examplePubmed },
+    { label: 'RIS', example: exampleRis },
+    { label: 'ENW', example: exampleEnw },
+    { label: 'DOI', example: exampleDoi },
+];
+export const ImportBibliography = ({ onCancel, onContinue, }) => (React.createElement(React.Fragment, null,
+    React.createElement(ModalTitle, null, "Import Bibliography"),
+    React.createElement("p", null,
+        supportedFormats.map(({ label, example }, index) => (React.createElement(React.Fragment, { key: label },
+            index > 0 &&
+                (index === supportedFormats.length - 1 ? ' and ' : ', '),
+            React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": example }, label)))),
+        ' ',
+        "formats are supported"),
+    React.createElement(ImportBibliographyForm, { onCancel: onCancel, onSave: onContinue }),
+    React.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => React.createElement("pre", null, s.content) })));
+const SpanWithExample = styled.span `
+  text-decoration: underline dotted;
+  text-underline-offset: 4px;
+`;
+const Example = styled(Tooltip) `
+  text-align: left !important;
+  max-width: 480px !important;
+  overflow: hidden !important;
+`;

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

@@ -103,7 +103,7 @@ export const ImportBibliographyForm = ({ onCancel, onSave, }) => {
             formik.values.data.map((item) => (React.createElement(ReferenceLine, { item: item, key: item.id })))),
         React.createElement(FormActionsBar, null,
             React.createElement(SecondaryButton, { type: "reset" }, "Cancel"),
-            React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Save"))));
+            React.createElement(PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Import References"))));
 };
 const Preview = styled.div `
   display: flex;

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

@@ -1,88 +1,22 @@
-import { CloseButton, ModalCardBody, ModalContainer, ModalHeader, ModalTitle, StyledModal, Tooltip, } from '@manuscripts/style-guide';
+import { CloseButton, ModalCardBody, ModalContainer, ModalHeader, StyledModal, } from '@manuscripts/style-guide';
 import React, { useState } from 'react';
-import styled from 'styled-components';
-import { ImportBibliographyForm } from './ImportBibliographyForm';
-const exampleBibtex = `@book{abramowitz+stegun,
- author    = "Milton {Abramowitz} and Irene A. {Stegun}",
- title     = "Handbook of Mathematical Functions with Formulas, Graphs, and Mathematical Tables",
- publisher = "Dover",
- year      =  1964,
- address   = "New York City",
- edition   = "ninth Dover printing, tenth GPO printing"
-}`;
-const examplePubmed = `Example Identifiers:
-pmid:17170128
-PMC1852221`;
-const exampleRis = `TY  - JOUR
-AU  - Shannon, Claude E.
-PY  - 1948
-DA  - July
-TI  - A Mathematical Theory of Communication
-T2  - Bell System Technical Journal
-SP  - 379
-EP  - 423
-VL  - 27
-ER  - `;
-const exampleEnw = `%0 Journal Article
-%D 2018
-%@ 0903-4641
-%A Abbassi-Daloii, Tooba
-%A Yousefi, Soheil
-%A Sekhavati, Mohammad Hadi
-%A Tahmoorespur, Mojtaba
-%J APMIS
-%N 1
-%P 65-75
-%T Impact of heat shock protein 60KD in combination with outer membrane proteins on immune response against Brucella melitensis
-%R https://doi.org/10.1111/apm.12778
-%U https://onlinelibrary.wiley.com/doi/abs/10.1111/apm.12778
-%V 126
-%X Lorem ipsum dolor sit amet`;
-const exampleDoi = `Example DOI Identifiers:
-10.1080/15588742.2015.1017684
-http://dx.doi.org/10.1080/15588742.2015.1017684`;
+import { ImportBibliography } from './ImportBibliography';
+import { ImportReferencesConfirmation } from './ImportReferencesConfirmation';
 export const ImportBibliographyModal = ({ onCancel, onSave }) => {
     const [isOpen, setOpen] = useState(true);
-    const handleCancel = () => {
-        handleClose();
-    };
+    const [pendingItems, setPendingItems] = useState(null);
+    const isConfirming = pendingItems !== null;
     const handleClose = () => setOpen(false);
-    const handleSave = (data) => {
-        onSave(data);
+    const handleBack = () => setPendingItems(null);
+    const handleConfirm = (items) => {
+        onSave(items);
         handleClose();
     };
     return (React.createElement(StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
-        React.createElement(ModalContainer, { "data-cy": "import-bibliography-modal" },
+        React.createElement(ModalContainer, { "data-cy": isConfirming
+                ? 'import-confirmation-modal'
+                : 'import-bibliography-modal' },
             React.createElement(ModalHeader, null,
-                React.createElement(CloseButton, { onClick: onCancel, "data-cy": "modal-close-button" })),
-            React.createElement(ModalCardBody, { "$width": 640 },
-                React.createElement(ModalTitle, null, "Import Bibliography"),
-                React.createElement("p", null,
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex }, "BibTex"),
-                    ",",
-                    ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": examplePubmed }, "PubMed"),
-                    ",",
-                    ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleRis }, "RIS"),
-                    ",",
-                    ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleEnw }, "ENW"),
-                    ' ',
-                    "and",
-                    ' ',
-                    React.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleDoi }, "DOI"),
-                    ' ',
-                    "formats are supported"),
-                React.createElement(ImportBibliographyForm, { onCancel: handleCancel, onSave: handleSave }),
-                React.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => React.createElement("pre", null, s.content) })))));
+                React.createElement(CloseButton, { onClick: isConfirming ? handleBack : onCancel, "data-cy": "modal-close-button" })),
+            React.createElement(ModalCardBody, { "$width": 724 }, pendingItems ? (React.createElement(ImportReferencesConfirmation, { items: pendingItems, onCancel: handleBack, onConfirm: handleConfirm })) : (React.createElement(ImportBibliography, { onCancel: onCancel, onContinue: setPendingItems }))))));
 };
-const SpanWithExample = styled.span `
-  text-decoration: underline dotted;
-  text-underline-offset: 4px;
-`;
-const Example = styled(Tooltip) `
-  text-align: left !important;
-  max-width: 480px !important;
-  overflow: hidden !important;
-`;