@manuscripts/body-editor 3.16.1 → 3.16.2

package/src/components/references/CitationEditor.tsx

@@ -36,7 +36,6 @@ import { arrayReducer, attrsReducer } from '../../lib/array-reducer'
 import { cleanItemValues } from '../../lib/utils'
 import { BibliographyItemSource } from './BibliographyItemSource'
 import { CitedItem, CitedItems } from './CitationViewer'
-import { ImportBibliographyModal } from './ImportBibliographyModal'
 import { ReferenceLine } from './ReferenceLine'
 import { ReferenceSearch } from './ReferenceSearch'
 import { ReferencesModal } from './ReferencesModal'
@@ -92,7 +91,7 @@ export interface CitationEditorProps {
   sources: BibliographyItemSource[]
   onCite: (items: BibliographyItemAttrs[]) => void
   onUncite: (id: string) => void
-  onSave: (item: BibliographyItemAttrs) => void
+  onSave: (item: BibliographyItemAttrs[]) => void
   onDelete: (item: BibliographyItemAttrs) => void
   onCancel: () => void
   canEdit: boolean
@@ -118,7 +117,7 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
   const [rids, dispatchRids] = useReducer(ridsReducer, $rids)
   const handleSave = (item: BibliographyItemAttrs) => {
     const cleanedItem = cleanItemValues(item)
-    onSave(cleanedItem)
+    onSave([cleanedItem])
     dispatchItems({
       type: 'update',
       items: [cleanedItem],
@@ -163,7 +162,6 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
   })
 
   const [searching, setSearching] = useState(false)
-  const [importing, setImporting] = useState(false)
 
   const handleAdd = () => {
     setSearching(false)
@@ -178,16 +176,19 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
     setEditingForm({ show: true, item: item })
   }
 
-  const handleImport = () => {
-    setSearching(false)
-    setImporting(true)
-  }
-  const handleSaveImport = (data: BibliographyItemAttrs[]) => {
-    data.forEach((item) => {
-      const newItem = { ...item }
-      newItem.id = generateNodeID(schema.nodes.bibliography_item)
-      handleSave(newItem)
-      handleCite([newItem])
+  const handleImport = (data: BibliographyItemAttrs[]) => {
+    const newItems = data.map((item) =>
+      cleanItemValues({
+        ...item,
+        id: generateNodeID(schema.nodes.bibliography_item),
+      })
+    )
+
+    onSave(newItems)
+
+    dispatchItems({
+      type: 'set',
+      state: [...items, ...newItems],
     })
   }
 
@@ -205,15 +206,7 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
         item={editingForm.item}
         onSave={handleSave}
         onDelete={handleDelete}
-      />
-    )
-  }
-
-  if (importing) {
-    return (
-      <ImportBibliographyModal
-        onCancel={() => setImporting(false)}
-        onSave={handleSaveImport}
+        handleImport={handleImport}
       />
     )
   }
@@ -223,7 +216,6 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
         sources={sources}
         items={items}
         onAdd={handleAdd}
-        onImport={handleImport}
         onCite={(items) => {
           setSearching(false)
           handleCite(items)
@@ -239,7 +231,6 @@ export const CitationEditor: React.FC<CitationEditorProps> = ({
         sources={sources}
         items={items}
         onAdd={handleAdd}
-        onImport={handleImport}
         onCite={handleCite}
         onCancel={onCancel}
       />

package/src/components/references/ImportBibliography.tsx

@@ -0,0 +1,119 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { ModalTitle, Tooltip } from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+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 },
+] as const
+
+export interface ImportBibliographyProps {
+  onCancel: () => void
+  onContinue: (data: BibliographyItemAttrs[]) => void
+}
+
+export const ImportBibliography: React.FC<ImportBibliographyProps> = ({
+  onCancel,
+  onContinue,
+}) => (
+  <>
+    <ModalTitle>Import Bibliography</ModalTitle>
+    <p>
+      {supportedFormats.map(({ label, example }, index) => (
+        <React.Fragment key={label}>
+          {index > 0 &&
+            (index === supportedFormats.length - 1 ? ' and ' : ', ')}
+          <SpanWithExample
+            data-tooltip-id="import-example-tooltip"
+            data-tooltip-content={example}
+          >
+            {label}
+          </SpanWithExample>
+        </React.Fragment>
+      ))}{' '}
+      formats are supported
+    </p>
+    <ImportBibliographyForm onCancel={onCancel} onSave={onContinue} />
+    <Example
+      id="import-example-tooltip"
+      place="bottom"
+      render={(s) => <pre>{s.content}</pre>}
+    />
+  </>
+)
+
+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/src/components/references/ImportBibliographyForm.tsx

@@ -182,7 +182,7 @@ export const ImportBibliographyForm = ({
             !formik.dirty || formik.isSubmitting || !formik.values.data.length
           }
         >
-          Save
+          Import References
         </PrimaryButton>
       </FormActionsBar>
     </form>

package/src/components/references/ImportBibliographyModal.tsx

@@ -18,142 +18,66 @@ import {
   ModalCardBody,
   ModalContainer,
   ModalHeader,
-  ModalTitle,
   StyledModal,
-  Tooltip,
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
 import React, { useState } from 'react'
-import styled from 'styled-components'
 
-import { ImportBibliographyForm } from './ImportBibliographyForm'
+import { ImportBibliography } from './ImportBibliography'
+import { ImportReferencesConfirmation } from './ImportReferencesConfirmation'
+
 export interface ImportBibliographyModalProps {
   onCancel: () => void
   onSave: (data: BibliographyItemAttrs[]) => void
 }
 
-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`
-
 export const ImportBibliographyModal: React.FC<
   ImportBibliographyModalProps
 > = ({ onCancel, onSave }) => {
   const [isOpen, setOpen] = useState(true)
+  const [pendingItems, setPendingItems] = useState<
+    BibliographyItemAttrs[] | null
+  >(null)
 
-  const handleCancel = () => {
-    handleClose()
-  }
+  const isConfirming = pendingItems !== null
   const handleClose = () => setOpen(false)
+  const handleBack = () => setPendingItems(null)
 
-  const handleSave = (data: BibliographyItemAttrs[]) => {
-    onSave(data)
+  const handleConfirm = (items: BibliographyItemAttrs[]) => {
+    onSave(items)
     handleClose()
   }
 
   return (
     <StyledModal isOpen={isOpen} onRequestClose={onCancel}>
-      <ModalContainer data-cy="import-bibliography-modal">
+      <ModalContainer
+        data-cy={
+          isConfirming
+            ? 'import-confirmation-modal'
+            : 'import-bibliography-modal'
+        }
+      >
         <ModalHeader>
-          <CloseButton onClick={onCancel} data-cy="modal-close-button" />
-        </ModalHeader>
-        <ModalCardBody $width={640}>
-          <ModalTitle>Import Bibliography</ModalTitle>
-          <p>
-            <SpanWithExample
-              data-tooltip-id="import-example-tooltip"
-              data-tooltip-content={exampleBibtex}
-            >
-              BibTex
-            </SpanWithExample>
-            ,{' '}
-            <SpanWithExample
-              data-tooltip-id="import-example-tooltip"
-              data-tooltip-content={examplePubmed}
-            >
-              PubMed
-            </SpanWithExample>
-            ,{' '}
-            <SpanWithExample
-              data-tooltip-id="import-example-tooltip"
-              data-tooltip-content={exampleRis}
-            >
-              RIS
-            </SpanWithExample>
-            ,{' '}
-            <SpanWithExample
-              data-tooltip-id="import-example-tooltip"
-              data-tooltip-content={exampleEnw}
-            >
-              ENW
-            </SpanWithExample>{' '}
-            and{' '}
-            <SpanWithExample
-              data-tooltip-id="import-example-tooltip"
-              data-tooltip-content={exampleDoi}
-            >
-              DOI
-            </SpanWithExample>{' '}
-            formats are supported
-          </p>
-          <ImportBibliographyForm onCancel={handleCancel} onSave={handleSave} />
-          <Example
-            id="import-example-tooltip"
-            place="bottom"
-            render={(s) => <pre>{s.content}</pre>}
+          <CloseButton
+            onClick={isConfirming ? handleBack : onCancel}
+            data-cy="modal-close-button"
           />
+        </ModalHeader>
+        <ModalCardBody $width={724}>
+          {pendingItems ? (
+            <ImportReferencesConfirmation
+              items={pendingItems}
+              onCancel={handleBack}
+              onConfirm={handleConfirm}
+            />
+          ) : (
+            <ImportBibliography
+              onCancel={onCancel}
+              onContinue={setPendingItems}
+            />
+          )}
         </ModalCardBody>
       </ModalContainer>
     </StyledModal>
   )
 }
-
-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/src/components/references/ImportReferencesConfirmation.tsx

@@ -0,0 +1,133 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {
+  CheckboxField,
+  CheckboxLabel,
+  FormActionsBar,
+  ModalTitle,
+  PrimaryButton,
+  SecondaryButton,
+} from '@manuscripts/style-guide'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+import { ReferenceLine } from './ReferenceLine'
+
+export interface ImportReferencesConfirmationProps {
+  items: BibliographyItemAttrs[]
+  onCancel: () => void
+  onConfirm: (items: BibliographyItemAttrs[]) => void
+}
+
+export const ImportReferencesConfirmation: React.FC<
+  ImportReferencesConfirmationProps
+> = ({ items, onCancel, onConfirm }) => {
+  const [selected, setSelected] = useState(() => items.map(() => true))
+
+  const selectedCount = selected.filter(Boolean).length
+  const countLabel = selectedCount === 1 ? 'reference' : 'references'
+
+  const toggleItem = (index: number) => {
+    setSelected((current) =>
+      current.map((value, i) => (i === index ? !value : value))
+    )
+  }
+
+  const handleConfirm = () => {
+    onConfirm(items.filter((_, index) => selected[index]))
+  }
+
+  return (
+    <>
+      <Title>Import References</Title>
+      <Subtitle>
+        Importing {selectedCount} {countLabel}
+      </Subtitle>
+      <List>
+        {items.map((item, index) => (
+          <ListItem key={index}>
+            <ItemCheckbox>
+              <CheckboxField
+                checked={selected[index]}
+                aria-label={`Select reference ${index + 1}`}
+                onChange={() => toggleItem(index)}
+              />
+              <div />
+            </ItemCheckbox>
+            <ReferenceLine item={item} />
+          </ListItem>
+        ))}
+      </List>
+      <FormActionsBar>
+        <SecondaryButton type="button" onClick={onCancel}>
+          Cancel
+        </SecondaryButton>
+        <PrimaryButton
+          type="button"
+          disabled={selectedCount === 0}
+          onClick={handleConfirm}
+        >
+          Import {selectedCount} {countLabel}
+        </PrimaryButton>
+      </FormActionsBar>
+    </>
+  )
+}
+
+const Title = styled(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.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.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${(props) => props.theme.grid.unit * 5}px;
+  overflow-y: auto;
+`
+
+const ListItem = styled.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 = styled(CheckboxLabel)`
+  flex-shrink: 0;
+
+  > div {
+    margin: 0;
+
+    &::before {
+      width: 18px;
+      height: 18px;
+      border-radius: 4px;
+      margin: 0;
+    }
+  }
+`

package/src/components/references/ImportSuccessPlaceholder.tsx

@@ -0,0 +1,93 @@
+/*!
+ * © 2026 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from 'react'
+import styled from 'styled-components'
+
+export interface ImportSuccessPlaceholderProps {
+  count: number
+}
+
+export const ImportSuccessPlaceholder: React.FC<
+  ImportSuccessPlaceholderProps
+> = ({ count }) => {
+  const countLabel = count === 1 ? 'reference' : 'references'
+
+  return (
+    <Container data-cy="import-success-placeholder">
+      <IconCircle>
+        <SuccessCheckIcon />
+      </IconCircle>
+      <Title>Successfully Imported</Title>
+      <Message>
+        Your library has been updated with {count} new {countLabel}.
+      </Message>
+    </Container>
+  )
+}
+
+const SuccessCheckIcon = () => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M26.6656 8L12.0004 22.6656L5.3344 15.9994"
+      stroke="#36B260"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+const Container = styled.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.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 32px;
+  background: #f6ffed;
+`
+
+const Title = styled.h2`
+  margin: 0;
+  font-size: 24px;
+  line-height: 32px;
+  letter-spacing: -0.37px;
+  color: ${(props) => props.theme.colors.text.primary};
+`
+
+const Message = styled.p`
+  margin: 0;
+  line-height: ${(props) => props.theme.font.lineHeight.large};
+  color: ${(props) => props.theme.colors.text.secondary};
+`

package/src/components/references/ReferenceSearch.tsx

@@ -20,7 +20,6 @@ import {
   IconTextButton,
   PrimaryButton,
   SecondaryButton,
-  UploadIcon,
   withFocusTrap,
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
@@ -74,7 +73,6 @@ export const ReferenceSearch: React.FC<{
   sources: BibliographyItemSource[]
   items: BibliographyItemAttrs[]
   onAdd: () => void
-  onImport: () => void
   onCite: (items: BibliographyItemAttrs[]) => void
   onCancel: () => void
 }> = ({
@@ -82,7 +80,6 @@ export const ReferenceSearch: React.FC<{
   sources,
   items,
   onAdd,
-  onImport,
   onCite,
   onCancel,
 }) => {
@@ -146,10 +143,6 @@ export const ReferenceSearch: React.FC<{
             <AddNewIcon />
             Add new
           </IconTextButton>
-          <IconTextButton onClick={onImport}>
-            <UploadIcon />
-            Import new
-          </IconTextButton>
         </AddReferenceActions>
         <ButtonGroup>
           <SecondaryButton onClick={onCancel}>Close</SecondaryButton>