@manuscripts/body-editor 3.16.0 → 3.16.2

package/src/commands.ts

@@ -14,7 +14,11 @@
  * limitations under the License.
  */
 
-import { isDeleted, skipTracking, skipSelect } from '@manuscripts/track-changes-plugin'
+import {
+  isDeleted,
+  skipTracking,
+  skipSelect,
+} from '@manuscripts/track-changes-plugin'
 import {
   AttachmentNode,
   AwardNode,
@@ -525,7 +529,7 @@ export const insertSupplementWeblink = (
   const supplement = schema.nodes.supplement.createAndFill(
     {
       id: generateNodeID(schema.nodes.supplement),
-      href: url
+      href: url,
     },
     createAndFillCaption()
   ) as SupplementNode
@@ -554,7 +558,7 @@ export const updateSupplementWeblink = (
     ...node.attrs,
     href: url,
     title: title,
-    })
+  })
   view.dispatch(tr)
   return true
 }
@@ -782,21 +786,62 @@ export const insertInlineCitation = (
   return true
 }
 
+export const canInsertCrossReference = (
+  state: ManuscriptEditorState
+): boolean => {
+  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: ManuscriptEditorState,
   dispatch?: 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
+  let pos: number
+  const isWrap = !state.selection.empty
 
-  const tr = state.tr.insert(pos, node)
+  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
@@ -1524,10 +1569,7 @@ export const insertTransGraphicalAbstract =
         lang,
         category: category.id,
       },
-      [
-        schema.nodes.section_title.create(),
-        createAndFillFigureElement(state),
-      ]
+      [schema.nodes.section_title.create(), createAndFillFigureElement(state)]
     ) as TransGraphicalAbstractNode
 
     const tr = state.tr.insert(pos, node)

package/src/components/ChangeHandlingForm.tsx

@@ -17,8 +17,10 @@ import { Form, useFormikContext } from 'formik'
 import React, { MutableRefObject, PropsWithChildren, useEffect } from 'react'
 import styled from 'styled-components'
 
-export interface ChangeHandlingFormProps<Values>
-  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange'> {
+export interface ChangeHandlingFormProps<Values> extends Omit<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  'onChange'
+> {
   onChange: (values: Values) => void
   id?: string
   formRef?: MutableRefObject<HTMLFormElement | null>

package/src/components/form/FormFooter.tsx

@@ -37,14 +37,16 @@ const StyledIconTextButton = styled(IconTextButton)`
 const FormFooter = ({
   onCancel,
   primaryAction,
+  cancelLabel = 'Close',
 }: {
   onCancel: () => void
   primaryAction?: React.ReactNode
+  cancelLabel?: string
 }) => {
   return (
     <Footer>
       <StyledIconTextButton color="secondary" onClick={onCancel}>
-        Close
+        {cancelLabel}
       </StyledIconTextButton>
       {primaryAction}
     </Footer>

package/src/components/keyboard-shortcuts-modal/KeyboardShortcutsModal.tsx

@@ -86,14 +86,11 @@ export const KeyboardShortcutsModal: React.FC<KeyboardShortcutsModalProps> = ({
                 </StyledModalSidebarTitle>
               </StyledModalSidebarHeader>
               <StyledSidebarContent>
-                <ShortcutTabs
-                  selectedIndex={tabIndex}
-                  onChange={setTabIndex}
-                >
+                <ShortcutTabs selectedIndex={tabIndex} onChange={setTabIndex}>
                   <ModalTabsWrapper>
                     <ModalTabs tabLabels={TAB_LABELS} />
                   </ModalTabsWrapper>
-                  
+
                   <InspectorTabPanels>
                     {EDITOR_KEYBOARD_SHORTCUT_TABS.map((tab) => (
                       <ShortcutTabPanel key={tab.id}>
@@ -139,7 +136,8 @@ const ShortcutTabs = styled(InspectorTabs)`
 `
 
 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({
@@ -198,7 +196,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/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;
-`