@manuscripts/body-editor 3.16.1 → 3.16.3

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

@@ -44,7 +44,6 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const array_reducer_1 = require("../../lib/array-reducer");
 const utils_1 = require("../../lib/utils");
 const CitationViewer_1 = require("./CitationViewer");
-const ImportBibliographyModal_1 = require("./ImportBibliographyModal");
 const ReferenceLine_1 = require("./ReferenceLine");
 const ReferenceSearch_1 = require("./ReferenceSearch");
 const ReferencesModal_1 = require("./ReferencesModal");
@@ -94,7 +93,7 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
     const [rids, dispatchRids] = (0, react_1.useReducer)(ridsReducer, $rids);
     const handleSave = (item) => {
         const cleanedItem = (0, utils_1.cleanItemValues)(item);
-        onSave(cleanedItem);
+        onSave([cleanedItem]);
         dispatchItems({
             type: 'update',
             items: [cleanedItem],
@@ -129,7 +128,6 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
         show: false,
     });
     const [searching, setSearching] = (0, react_1.useState)(false);
-    const [importing, setImporting] = (0, react_1.useState)(false);
     const handleAdd = () => {
         setSearching(false);
         const item = {
@@ -142,35 +140,31 @@ const CitationEditor = ({ query, rids: $rids, items: $items, citationCounts, sou
         });
         setEditingForm({ show: true, item: item });
     };
-    const handleImport = () => {
-        setSearching(false);
-        setImporting(true);
-    };
-    const handleSaveImport = (data) => {
-        data.forEach((item) => {
-            const newItem = { ...item };
-            newItem.id = (0, transform_1.generateNodeID)(transform_1.schema.nodes.bibliography_item);
-            handleSave(newItem);
-            handleCite([newItem]);
+    const handleImport = (data) => {
+        const newItems = data.map((item) => (0, utils_1.cleanItemValues)({
+            ...item,
+            id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.bibliography_item),
+        }));
+        onSave(newItems);
+        dispatchItems({
+            type: 'set',
+            state: [...items, ...newItems],
         });
     };
     const cited = (0, react_1.useMemo)(() => {
         return rids.flatMap((rid) => items.filter((i) => i.id === rid));
     }, [rids, items]);
     if (editingForm.show) {
-        return (react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: handleSave, onDelete: handleDelete }));
-    }
-    if (importing) {
-        return (react_1.default.createElement(ImportBibliographyModal_1.ImportBibliographyModal, { onCancel: () => setImporting(false), onSave: handleSaveImport }));
+        return (react_1.default.createElement(ReferencesModal_1.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_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: (items) => {
+        return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { sources: sources, items: items, onAdd: handleAdd, onCite: (items) => {
                 setSearching(false);
                 handleCite(items);
             }, onCancel: () => setSearching(false) }));
     }
     if (!rids.length) {
-        return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onImport: handleImport, onCite: handleCite, onCancel: onCancel }));
+        return (react_1.default.createElement(ReferenceSearch_1.ReferenceSearch, { query: query, sources: sources, items: items, onAdd: handleAdd, onCite: handleCite, onCancel: onCancel }));
     }
     return (react_1.default.createElement(Container, null,
         react_1.default.createElement(style_guide_1.Dialog, { isOpen: deleteDialog.show, category: style_guide_1.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/cjs/components/references/ImportBibliography.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportBibliography = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ImportBibliographyForm_1 = require("./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 },
+];
+const ImportBibliography = ({ onCancel, onContinue, }) => (react_1.default.createElement(react_1.default.Fragment, null,
+    react_1.default.createElement(style_guide_1.ModalTitle, null, "Import Bibliography"),
+    react_1.default.createElement("p", null,
+        supportedFormats.map(({ label, example }, index) => (react_1.default.createElement(react_1.default.Fragment, { key: label },
+            index > 0 &&
+                (index === supportedFormats.length - 1 ? ' and ' : ', '),
+            react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": example }, label)))),
+        ' ',
+        "formats are supported"),
+    react_1.default.createElement(ImportBibliographyForm_1.ImportBibliographyForm, { onCancel: onCancel, onSave: onContinue }),
+    react_1.default.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => react_1.default.createElement("pre", null, s.content) })));
+exports.ImportBibliography = ImportBibliography;
+const SpanWithExample = styled_components_1.default.span `
+  text-decoration: underline dotted;
+  text-underline-offset: 4px;
+`;
+const Example = (0, styled_components_1.default)(style_guide_1.Tooltip) `
+  text-align: left !important;
+  max-width: 480px !important;
+  overflow: hidden !important;
+`;

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

@@ -142,7 +142,7 @@ const ImportBibliographyForm = ({ onCancel, onSave, }) => {
             formik.values.data.map((item) => (react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item, key: item.id })))),
         react_1.default.createElement(style_guide_1.FormActionsBar, null,
             react_1.default.createElement(style_guide_1.SecondaryButton, { type: "reset" }, "Cancel"),
-            react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Save"))));
+            react_1.default.createElement(style_guide_1.PrimaryButton, { type: "submit", disabled: !formik.dirty || formik.isSubmitting || !formik.values.data.length }, "Import References"))));
 };
 exports.ImportBibliographyForm = ImportBibliographyForm;
 const Preview = styled_components_1.default.div `

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

@@ -32,97 +32,28 @@ 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.ImportBibliographyModal = void 0;
 const style_guide_1 = require("@manuscripts/style-guide");
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const ImportBibliographyForm_1 = require("./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 ImportBibliography_1 = require("./ImportBibliography");
+const ImportReferencesConfirmation_1 = require("./ImportReferencesConfirmation");
 const ImportBibliographyModal = ({ onCancel, onSave }) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
-    const handleCancel = () => {
-        handleClose();
-    };
+    const [pendingItems, setPendingItems] = (0, react_1.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_1.default.createElement(style_guide_1.StyledModal, { isOpen: isOpen, onRequestClose: onCancel },
-        react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": "import-bibliography-modal" },
+        react_1.default.createElement(style_guide_1.ModalContainer, { "data-cy": isConfirming
+                ? 'import-confirmation-modal'
+                : 'import-bibliography-modal' },
             react_1.default.createElement(style_guide_1.ModalHeader, null,
-                react_1.default.createElement(style_guide_1.CloseButton, { onClick: onCancel, "data-cy": "modal-close-button" })),
-            react_1.default.createElement(style_guide_1.ModalCardBody, { "$width": 640 },
-                react_1.default.createElement(style_guide_1.ModalTitle, null, "Import Bibliography"),
-                react_1.default.createElement("p", null,
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleBibtex }, "BibTex"),
-                    ",",
-                    ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": examplePubmed }, "PubMed"),
-                    ",",
-                    ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleRis }, "RIS"),
-                    ",",
-                    ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleEnw }, "ENW"),
-                    ' ',
-                    "and",
-                    ' ',
-                    react_1.default.createElement(SpanWithExample, { "data-tooltip-id": "import-example-tooltip", "data-tooltip-content": exampleDoi }, "DOI"),
-                    ' ',
-                    "formats are supported"),
-                react_1.default.createElement(ImportBibliographyForm_1.ImportBibliographyForm, { onCancel: handleCancel, onSave: handleSave }),
-                react_1.default.createElement(Example, { id: "import-example-tooltip", place: "bottom", render: (s) => react_1.default.createElement("pre", null, s.content) })))));
+                react_1.default.createElement(style_guide_1.CloseButton, { onClick: isConfirming ? handleBack : onCancel, "data-cy": "modal-close-button" })),
+            react_1.default.createElement(style_guide_1.ModalCardBody, { "$width": 724 }, pendingItems ? (react_1.default.createElement(ImportReferencesConfirmation_1.ImportReferencesConfirmation, { items: pendingItems, onCancel: handleBack, onConfirm: handleConfirm })) : (react_1.default.createElement(ImportBibliography_1.ImportBibliography, { onCancel: onCancel, onContinue: setPendingItems }))))));
 };
 exports.ImportBibliographyModal = ImportBibliographyModal;
-const SpanWithExample = styled_components_1.default.span `
-  text-decoration: underline dotted;
-  text-underline-offset: 4px;
-`;
-const Example = (0, styled_components_1.default)(style_guide_1.Tooltip) `
-  text-align: left !important;
-  max-width: 480px !important;
-  overflow: hidden !important;
-`;

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

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportReferencesConfirmation = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ReferenceLine_1 = require("./ReferenceLine");
+const ImportReferencesConfirmation = ({ items, onCancel, onConfirm }) => {
+    const [selected, setSelected] = (0, react_1.useState)(() => items.map(() => true));
+    const selectedCount = selected.filter(Boolean).length;
+    const countLabel = selectedCount === 1 ? 'reference' : 'references';
+    const toggleItem = (index) => {
+        setSelected((current) => current.map((value, i) => (i === index ? !value : value)));
+    };
+    const handleConfirm = () => {
+        onConfirm(items.filter((_, index) => selected[index]));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Title, null, "Import References"),
+        react_1.default.createElement(Subtitle, null,
+            "Importing ",
+            selectedCount,
+            " ",
+            countLabel),
+        react_1.default.createElement(List, null, items.map((item, index) => (react_1.default.createElement(ListItem, { key: index },
+            react_1.default.createElement(ItemCheckbox, null,
+                react_1.default.createElement(style_guide_1.CheckboxField, { checked: selected[index], "aria-label": `Select reference ${index + 1}`, onChange: () => toggleItem(index) }),
+                react_1.default.createElement("div", null)),
+            react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item }))))),
+        react_1.default.createElement(style_guide_1.FormActionsBar, null,
+            react_1.default.createElement(style_guide_1.SecondaryButton, { type: "button", onClick: onCancel }, "Cancel"),
+            react_1.default.createElement(style_guide_1.PrimaryButton, { type: "button", disabled: selectedCount === 0, onClick: handleConfirm },
+                "Import ",
+                selectedCount,
+                " ",
+                countLabel))));
+};
+exports.ImportReferencesConfirmation = ImportReferencesConfirmation;
+const Title = (0, styled_components_1.default)(style_guide_1.ModalTitle) `
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
+  margin: 0 -${(props) => 6 * props.theme.grid.unit}px 20px;
+  padding: 0 ${(props) => 6 * props.theme.grid.unit}px
+    ${(props) => props.theme.grid.unit * 4}px;
+`;
+const Subtitle = styled_components_1.default.p `
+  color: ${(props) => props.theme.colors.text.secondary};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  margin: 0 0 16px;
+  font-size: 14px;
+`;
+const List = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+  overflow-y: auto;
+`;
+const ListItem = styled_components_1.default.div `
+  border-bottom: 1px solid ${(props) => props.theme.colors.border.secondary};
+  display: flex;
+  align-items: flex-start;
+  gap: ${(props) => props.theme.grid.unit * 3}px;
+  padding: ${(props) => props.theme.grid.unit * 3}px 0;
+`;
+const ItemCheckbox = (0, styled_components_1.default)(style_guide_1.CheckboxLabel) `
+  flex-shrink: 0;
+
+  > div {
+    margin: 0;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      margin: 0;
+    }
+  }
+`;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportSuccessPlaceholder = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ImportSuccessPlaceholder = ({ count }) => {
+    const countLabel = count === 1 ? 'reference' : 'references';
+    return (react_1.default.createElement(Container, { "data-cy": "import-success-placeholder" },
+        react_1.default.createElement(IconCircle, null,
+            react_1.default.createElement(SuccessCheckIcon, null)),
+        react_1.default.createElement(Title, null, "Successfully Imported"),
+        react_1.default.createElement(Message, null,
+            "Your library has been updated with ",
+            count,
+            " new ",
+            countLabel,
+            ".")));
+};
+exports.ImportSuccessPlaceholder = ImportSuccessPlaceholder;
+const SuccessCheckIcon = () => (react_1.default.createElement("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    react_1.default.createElement("path", { d: "M26.6656 8L12.0004 22.6656L5.3344 15.9994", stroke: "#36B260", strokeWidth: "3", strokeLinecap: "round" })));
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${(props) => props.theme.grid.unit * 4}px;
+  height: 100%;
+  padding: 40px;
+  box-sizing: border-box;
+  text-align: center;
+`;
+const IconCircle = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  background: #f6ffed;
+`;
+const Title = styled_components_1.default.h2 `
+  margin: 0;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.37px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+const Message = styled_components_1.default.p `
+  margin: 0;
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+  color: ${(props) => props.theme.colors.text.secondary};
+`;

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

@@ -89,7 +89,7 @@ const AddReferenceActions = (0, styled_components_1.default)(style_guide_1.Butto
     }
   }
 `;
-const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onImport, onCite, onCancel, }) => {
+const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel, }) => {
     const [query, setQuery] = (0, react_1.useState)(initialQuery || '');
     const [selections, setSelections] = (0, react_1.useState)(new Map());
     const toggleSelection = (item) => {
@@ -125,10 +125,7 @@ const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onImport,
             react_1.default.createElement(AddReferenceActions, null,
                 react_1.default.createElement(style_guide_1.IconTextButton, { onClick: onAdd },
                     react_1.default.createElement(style_guide_1.AddNewIcon, null),
-                    "Add new"),
-                react_1.default.createElement(style_guide_1.IconTextButton, { onClick: onImport },
-                    react_1.default.createElement(style_guide_1.UploadIcon, null),
-                    "Import new")),
+                    "Add new")),
             react_1.default.createElement(style_guide_1.ButtonGroup, null,
                 react_1.default.createElement(style_guide_1.SecondaryButton, { onClick: onCancel }, "Close"),
                 react_1.default.createElement(style_guide_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Cite")))));

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 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");
@@ -42,9 +43,13 @@ const itemsReducer = (0, array_reducer_1.attrsReducer)();
 const ReferencesEditor = (props) => {
     const [isOpen, setOpen] = (0, react_1.useState)(true);
     const [items, dispatch] = (0, react_1.useReducer)(itemsReducer, props.items);
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(props.item);
+    (0, react_1.useEffect)(() => {
+        setSelectedItem(props.item);
+    }, [props.item]);
     const handleSave = (item) => {
         const cleanedItem = (0, utils_1.cleanItemValues)(item);
-        props.onSave(cleanedItem);
+        props.onSave([cleanedItem]);
         dispatch({
             type: 'update',
             items: [cleanedItem],
@@ -57,6 +62,17 @@ const ReferencesEditor = (props) => {
             item: item,
         });
     };
-    return (react_1.default.createElement(ReferencesModal_1.ReferencesModal, { ...props, isOpen: isOpen, onCancel: () => setOpen(false), items: items, onSave: handleSave, onDelete: handleDelete }));
+    const handleImport = (data) => {
+        const newItems = data.map((item) => (0, utils_1.cleanItemValues)({
+            ...item,
+            id: (0, transform_1.generateNodeID)(transform_1.schema.nodes.bibliography_item),
+        }));
+        props.onSave(newItems);
+        dispatch({
+            type: 'set',
+            state: [...items, ...newItems],
+        });
+    };
+    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;