@manuscripts/body-editor 3.16.0 → 3.16.2

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/cjs/views/cross_reference.js

@@ -16,7 +16,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceView = void 0;
+const transform_1 = require("@manuscripts/transform");
+const doc_1 = require("../lib/doc");
 const navigation_utils_1 = require("../lib/navigation-utils");
+const supplements_1 = require("../lib/supplements");
 const objects_1 = require("../plugins/objects");
 const base_node_view_1 = require("./base_node_view");
 const creators_1 = require("./creators");
@@ -49,8 +52,15 @@ class CrossReferenceView extends base_node_view_1.BaseNodeView {
         super.updateContents();
         const targets = objects_1.objectsKey.getState(this.view.state);
         const attrs = this.node.attrs;
-        const label = attrs.rids.length && targets.get(attrs.rids[0])?.label;
-        this.dom.textContent = attrs.label || label || '';
+        const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined;
+        let derivedLabel = target?.label || '';
+        if (target?.type === transform_1.schema.nodes.supplement.name && target.href) {
+            const found = (0, doc_1.findNodeByID)(this.view.state.doc, target.id);
+            if (found) {
+                derivedLabel = (0, supplements_1.getSupplementDisplayLabel)(found.node, this.props.getFiles());
+            }
+        }
+        this.dom.textContent = attrs.label || derivedLabel;
         this.dom.addEventListener('click', this.handleClick);
     }
 }

package/dist/cjs/views/cross_reference_editable.js

@@ -19,10 +19,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrossReferenceEditableView = 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 CrossReferenceItems_1 = require("../components/views/CrossReferenceItems");
+const comments_1 = require("../lib/comments");
+const doc_1 = require("../lib/doc");
+const supplements_1 = require("../lib/supplements");
 const objects_1 = require("../plugins/objects");
 const creators_1 = require("./creators");
 const cross_reference_1 = require("./cross_reference");
@@ -37,14 +41,20 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             if (!can?.editArticle || rids.length) {
                 return;
             }
+            this.showPicker();
+        };
+        this.showPicker = () => {
+            const rids = this.node.attrs.rids;
             const componentProps = {
                 handleSelect: this.handleSelect,
                 targets: this.getTargets(),
+                files: this.props.getFiles(),
                 handleCancel: this.handleCancel,
                 currentTargetId: rids[0],
                 currentCustomLabel: this.node.attrs.label,
+                isEdit: rids.length > 0,
             };
-            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view, ['cross-reference-editor']);
+            this.popperContainer = (0, ReactSubView_1.default)(this.props, CrossReferenceItems_1.CrossReferenceItems, componentProps, this.node, this.getPos, this.view);
             this.popperContainer.setAttribute('tabindex', '0');
             this.props.popper.show(this.dom, this.popperContainer, 'auto');
         };
@@ -56,15 +66,39 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             this.handleCancel();
         };
         this.getTargets = () => {
-            const excludedTypes = [transform_1.schema.nodes.image_element.name];
             const targets = objects_1.objectsKey.getState(this.view.state);
-            return Array.from(targets.values()).filter((t) => !excludedTypes.includes(t.type));
+            const files = this.props.getFiles();
+            const fileMap = new Map(files.map((f) => [f.id, f.name]));
+            const excludedTypes = [transform_1.schema.nodes.image_element.name];
+            const supplement = transform_1.schema.nodes.supplement.name;
+            return Array.from(targets.values()).reduce((acc, t) => {
+                if (excludedTypes.includes(t.type)) {
+                    return acc;
+                }
+                if (t.type === supplement && t.href) {
+                    const found = (0, doc_1.findNodeByID)(this.view.state.doc, t.id);
+                    const label = found
+                        ? (0, supplements_1.getSupplementDisplayLabel)(found.node, files)
+                        : (fileMap.get(t.href) ?? t.href);
+                    acc.push({ ...t, label, caption: '' });
+                }
+                else {
+                    acc.push(t);
+                }
+                return acc;
+            }, []);
         };
         this.handleCancel = () => {
             if (!this.node.attrs.rids.length) {
                 const { state } = this.view;
                 const pos = this.getPos();
-                const tr = state.tr.delete(pos, pos + this.node.nodeSize);
+                if (pos === undefined) {
+                    return;
+                }
+                const label = this.node.attrs.label;
+                const tr = label
+                    ? state.tr.replaceWith(pos, pos + this.node.nodeSize, state.schema.text(label))
+                    : state.tr.delete(pos, pos + this.node.nodeSize);
                 tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, pos));
                 (0, track_changes_plugin_1.skipTracking)(tr);
                 this.view.dispatch(tr);
@@ -85,6 +119,63 @@ class CrossReferenceEditableView extends cross_reference_1.CrossReferenceView {
             this.view.dispatch(tr.setSelection(selection));
             this.destroy();
         };
+        this.handleClick = () => {
+            if ((0, track_changes_plugin_1.isDeleted)(this.node)) {
+                return;
+            }
+            if (!this.node.attrs.rids.length) {
+                return;
+            }
+            this.showContextMenu();
+        };
+        this.showContextMenu = () => {
+            this.props.popper.destroy();
+            const can = this.props.getCapabilities();
+            const targets = objects_1.objectsKey.getState(this.view.state);
+            const rid = this.node.attrs.rids[0];
+            const isOrphaned = !targets?.get(rid);
+            const actions = [
+                {
+                    label: 'Comment',
+                    icon: 'AddComment',
+                    action: () => {
+                        this.props.popper.destroy();
+                        (0, comments_1.handleComment)(this.node, this.view);
+                    },
+                },
+                {
+                    label: 'Go to content',
+                    icon: 'Scroll',
+                    action: () => this.navigateToTarget(),
+                    disabled: isOrphaned,
+                },
+            ];
+            if (can?.editArticle) {
+                actions.unshift({
+                    label: 'Edit',
+                    icon: 'Edit',
+                    action: () => this.handleEdit(),
+                    disabled: isOrphaned,
+                });
+            }
+            this.contextMenu = (0, ReactSubView_1.default)(this.props, style_guide_1.ContextMenu, { actions }, this.node, this.getPos, this.view, ['context-menu']);
+            this.props.popper.show(this.dom, this.contextMenu, 'right-start', false);
+        };
+        this.navigateToTarget = () => {
+            this.props.popper.destroy();
+            const rids = this.node.attrs.rids;
+            if (!rids.length) {
+                return;
+            }
+            this.props.navigate({
+                pathname: this.props.location.pathname,
+                hash: '#' + rids[0],
+            });
+        };
+        this.handleEdit = () => {
+            this.props.popper.destroy();
+            this.showPicker();
+        };
     }
 }
 exports.CrossReferenceEditableView = CrossReferenceEditableView;

package/dist/cjs/views/figure_editable.js

@@ -198,6 +198,9 @@ class FigureEditableView extends figure_1.FigureView {
         this.addTools();
     }
     addTools() {
+        if (this.getPos() === undefined) {
+            return;
+        }
         this.manageReactTools();
         const existingDragHandlers = this.container.querySelectorAll('.drag-handler');
         existingDragHandlers.forEach((handler) => handler.remove());

package/dist/es/commands.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { isDeleted, skipTracking, skipSelect } from '@manuscripts/track-changes-plugin';
+import { isDeleted, skipTracking, skipSelect, } from '@manuscripts/track-changes-plugin';
 import { generateNodeID, isElementNodeType, isListNode, isSectionNodeType, isTableElementNode, schema, } from '@manuscripts/transform';
 import { Fragment, NodeRange, Slice, } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
@@ -298,7 +298,7 @@ export const insertSupplement = (file, view, setSelection = true) => {
 export const insertSupplementWeblink = (url, title, view) => {
     const supplement = schema.nodes.supplement.createAndFill({
         id: generateNodeID(schema.nodes.supplement),
-        href: url
+        href: url,
     }, createAndFillCaption());
     const tr = view.state.tr;
     const { pos } = upsertSupplementsSection(tr, supplement);
@@ -466,15 +466,52 @@ export const insertInlineCitation = (state, dispatch) => {
     }
     return true;
 };
+export const canInsertCrossReference = (state) => {
+    if (!canInsert(schema.nodes.cross_reference)(state)) {
+        return false;
+    }
+    const { from, to, empty, $from, $to } = state.selection;
+    if (empty) {
+        return true;
+    }
+    if (!$from.sameParent($to)) {
+        return false;
+    }
+    let overlaps = false;
+    state.doc.nodesBetween(from, to, (node) => {
+        if (node.isAtom && !node.isText) {
+            overlaps = true;
+            return false;
+        }
+        return !overlaps;
+    });
+    return !overlaps;
+};
 export const insertCrossReference = (state, dispatch) => {
+    if (!canInsertCrossReference(state)) {
+        return false;
+    }
+    const text = selectedText();
     const node = state.schema.nodes.cross_reference.create({
+        id: generateNodeID(schema.nodes.cross_reference),
         rids: [],
+        label: text,
     });
-    const pos = state.selection.to;
-    const tr = state.tr.insert(pos, node);
+    const { tr } = state;
+    let pos;
+    const isWrap = !state.selection.empty;
+    if (isWrap) {
+        pos = state.selection.from;
+        tr.replaceSelectionWith(node);
+    }
+    else {
+        pos = state.selection.to;
+        tr.insert(pos, node);
+    }
     if (dispatch) {
         const selection = NodeSelection.create(tr.doc, pos);
-        dispatch(tr.setSelection(selection).scrollIntoView());
+        tr.setSelection(selection).scrollIntoView();
+        dispatch(isWrap ? skipTracking(tr) : tr);
     }
     return true;
 };
@@ -963,10 +1000,7 @@ export const insertTransGraphicalAbstract = (category, insertAfterPos) => (state
     const node = schema.nodes.trans_graphical_abstract.createAndFill({
         lang,
         category: category.id,
-    }, [
-        schema.nodes.section_title.create(),
-        createAndFillFigureElement(state),
-    ]);
+    }, [schema.nodes.section_title.create(), createAndFillFigureElement(state)]);
     const tr = state.tr.insert(pos, node);
     if (node.lastChild) {
         expandAccessibilitySection(tr, node.lastChild);

package/dist/es/components/form/FormFooter.js

@@ -16,9 +16,9 @@ const Footer = styled.div `
 const StyledIconTextButton = styled(IconTextButton) `
   color: ${(props) => props.theme.colors.brand.default};
 `;
-const FormFooter = ({ onCancel, primaryAction, }) => {
+const FormFooter = ({ onCancel, primaryAction, cancelLabel = 'Close', }) => {
     return (React.createElement(Footer, null,
-        React.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, "Close"),
+        React.createElement(StyledIconTextButton, { color: "secondary", onClick: onCancel }, cancelLabel),
         primaryAction));
 };
 export default FormFooter;

package/dist/es/components/keyboard-shortcuts-modal/KeyboardShortcutsModal.js

@@ -41,7 +41,8 @@ const ShortcutTabs = styled(InspectorTabs) `
   min-height: 0;
 `;
 const ModalTabsWrapper = styled('div') `
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 3}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 3}px;
 `;
 const ShortcutTabPanel = styled(InspectorTabPanel).attrs({
     tabIndex: -1,
@@ -92,7 +93,8 @@ const Section = styled.section `
   }
 `;
 const SectionTitle = styled.h3 `
-  margin: 0 ${(props) => props.theme.grid.unit * 8}px ${(props) => props.theme.grid.unit * 2}px;
+  margin: 0 ${(props) => props.theme.grid.unit * 8}px
+    ${(props) => props.theme.grid.unit * 2}px;
   font-size: ${(props) => props.theme.font.size.large};
   font-weight: ${(props) => props.theme.font.weight.normal};
   line-height: ${(props) => props.theme.font.lineHeight.large};

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;
-`;