@manuscripts/body-editor 3.16.0 → 3.16.2

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>

package/src/components/references/ReferencesEditor.tsx

@@ -13,8 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { BibliographyItemAttrs } from '@manuscripts/transform'
-import React, { useReducer, useState } from 'react'
+import {
+  BibliographyItemAttrs,
+  generateNodeID,
+  schema,
+} from '@manuscripts/transform'
+import React, { useEffect, useReducer, useState } from 'react'
 
 import { attrsReducer } from '../../lib/array-reducer'
 import { cleanItemValues } from '../../lib/utils'
@@ -22,18 +26,25 @@ import { ReferencesModal, ReferencesModalProps } from './ReferencesModal'
 
 export type ReferencesEditorProps = Omit<
   ReferencesModalProps,
-  'isOpen' | 'onCancel'
->
+  'isOpen' | 'onCancel' | 'handleImport' | 'onSave'
+> & {
+  onSave: (item: BibliographyItemAttrs[]) => void
+}
 
 const itemsReducer = attrsReducer<BibliographyItemAttrs>()
 
 export const ReferencesEditor: React.FC<ReferencesEditorProps> = (props) => {
   const [isOpen, setOpen] = useState(true)
   const [items, dispatch] = useReducer(itemsReducer, props.items)
+  const [selectedItem, setSelectedItem] = useState(props.item)
+
+  useEffect(() => {
+    setSelectedItem(props.item)
+  }, [props.item])
 
   const handleSave = (item: BibliographyItemAttrs) => {
     const cleanedItem = cleanItemValues(item)
-    props.onSave(cleanedItem)
+    props.onSave([cleanedItem])
     dispatch({
       type: 'update',
       items: [cleanedItem],
@@ -48,14 +59,32 @@ export const ReferencesEditor: React.FC<ReferencesEditorProps> = (props) => {
     })
   }
 
+  const handleImport = (data: BibliographyItemAttrs[]) => {
+    const newItems = data.map((item) =>
+      cleanItemValues({
+        ...item,
+        id: generateNodeID(schema.nodes.bibliography_item),
+      })
+    )
+
+    props.onSave(newItems)
+
+    dispatch({
+      type: 'set',
+      state: [...items, ...newItems],
+    })
+  }
+
   return (
     <ReferencesModal
-      {...props}
       isOpen={isOpen}
       onCancel={() => setOpen(false)}
       items={items}
+      item={selectedItem}
+      citationCounts={props.citationCounts}
       onSave={handleSave}
       onDelete={handleDelete}
+      handleImport={handleImport}
     />
   )
 }

package/src/components/references/ReferencesModal.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import {
+  AddAuthorIcon,
   Category,
   CitationCountIcon,
   CloseButton,
@@ -33,7 +34,7 @@ import {
 } from '@manuscripts/style-guide'
 import { BibliographyItemAttrs } from '@manuscripts/transform'
 import isEqual from 'lodash/isEqual'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import {
@@ -41,6 +42,8 @@ import {
   ReferenceFormActions,
 } from './ReferenceForm/ReferenceForm'
 import { ReferenceLine } from './ReferenceLine'
+import { ImportBibliographyModal } from './ImportBibliographyModal'
+import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder'
 
 const ReferencesModalContainer = styled(ModalContainer)`
   min-width: 960px;
@@ -54,6 +57,35 @@ const ReferencesSidebarContent = styled(SidebarContent)`
   overflow-y: auto;
 `
 
+const ImportFromFileFooter = styled.div`
+  padding: 16px;
+`
+
+const ImportFromFileButton = styled.button`
+  display: flex;
+  width: 100%;
+  padding: 8px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px dashed #c9c9c9;
+  background: #fafafa;
+  cursor: pointer;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 14px;
+  color: #353535;
+
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  svg rect {
+    fill: #6e6e6e;
+  }
+`
+
 const ReferencesInnerWrapper = withListNavigation(styled.div`
   width: 100%;
   padding: 12px 0;
@@ -155,6 +187,7 @@ export interface ReferencesModalProps {
   citationCounts: Map<string, number>
   onSave: (item: BibliographyItemAttrs) => void
   onDelete: (item: BibliographyItemAttrs) => void
+  handleImport: (data: BibliographyItemAttrs[]) => void
 }
 
 export const ReferencesModal: React.FC<ReferencesModalProps> = ({
@@ -165,16 +198,36 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
   citationCounts,
   onSave,
   onDelete,
+  handleImport,
 }) => {
+  const [importing, setImporting] = useState(false)
+  const [importSuccessCount, setImportSuccessCount] = useState<number | null>(
+    null
+  )
   const [confirm, setConfirm] = useState(false)
   const valuesRef = useRef<BibliographyItemAttrs>(undefined)
 
   const [selection, setSelection] = useState<BibliographyItemAttrs>()
   const selectionRef = useRef<HTMLDivElement>(null)
+
+  const sortedItems = useMemo(
+    () =>
+      [...items].sort((a, b) => {
+        const aUncited = (citationCounts.get(a.id) ?? 0) === 0
+        const bUncited = (citationCounts.get(b.id) ?? 0) === 0
+
+        if (aUncited === bUncited) {
+          return 0
+        }
+        return aUncited ? 1 : -1
+      }),
+    [items, citationCounts]
+  )
+
   const isSelected = (item: BibliographyItemAttrs) => {
     return item.id === selection?.id
   }
-  const selectionIndex = items.findIndex(isSelected)
+  const selectionIndex = sortedItems.findIndex(isSelected)
 
   useEffect(() => {
     setSelection(item)
@@ -199,8 +252,8 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
   useEffect(() => {
     const base = Math.max(0, selectionIndex - selectionTopOffset)
     setStartIndex(base)
-    setEndIndex(Math.min(items.length - 1, base + pageSize))
-  }, [selectionIndex, items])
+    setEndIndex(Math.min(sortedItems.length - 1, base + pageSize))
+  }, [selectionIndex, sortedItems])
 
   useEffect(() => {
     if (triggers.top) {
@@ -209,12 +262,12 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
       setEndIndex(Math.min(newFirst + dropLimit, endIndex))
     }
     if (triggers.bottom) {
-      const newLast = Math.min(items.length - 1, endIndex + pageSize)
+      const newLast = Math.min(sortedItems.length - 1, endIndex + pageSize)
       setEndIndex(newLast)
       setStartIndex(Math.max(newLast - dropLimit, startIndex))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggers, items])
+  }, [triggers, sortedItems])
 
   const actionsRef = useRef<ReferenceFormActions>(undefined)
 
@@ -260,7 +313,10 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     setSelection(undefined)
   }
 
+  const clearImportSuccess = () => setImportSuccessCount(null)
+
   const handleItemClick = (item: BibliographyItemAttrs) => {
+    clearImportSuccess()
     const values = valuesRef.current
     if (values && selection && !isEqual(values, normalize(selection))) {
       setConfirm(true)
@@ -272,81 +328,111 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
   const handleChange = (values: BibliographyItemAttrs) => {
     valuesRef.current = values
   }
-  if (items.length <= 0) {
+
+  const handleImportSave = (data: BibliographyItemAttrs[]) => {
+    handleImport(data)
+    setImporting(false)
+    setSelection(undefined)
+    setImportSuccessCount(data.length)
+  }
+
+  if (sortedItems.length <= 0) {
     return <></>
   }
 
   return (
-    <StyledModal isOpen={isOpen} onRequestClose={onCancel}>
-      <Dialog
-        isOpen={confirm}
-        category={Category.confirmation}
-        header="You've made changes to this option"
-        message="Would you like to save or discard your changes?"
-        actions={{
-          secondary: {
-            action: () => reset(),
-            title: 'Discard',
-          },
-          primary: {
-            action: () => handleSave(valuesRef.current),
-            title: 'Save',
-          },
-        }}
-      />
-      <ReferencesModalContainer data-cy={'references-editor'}>
-        <ModalHeader>
-          <CloseButton onClick={onCancel} />
-        </ModalHeader>
-        <ModalBody>
-          <ReferencesSidebar>
-            <ModalSidebarHeader>
-              <ModalSidebarTitle>References</ModalSidebarTitle>
-            </ModalSidebarHeader>
-            <ReferencesSidebarContent ref={ref}>
-              <ReferencesInnerWrapper>
-                {items.slice(startIndex, endIndex + 1).map((item) => (
-                  <ReferenceButton
-                    key={item.id}
-                    id={item.id}
-                    className={isSelected(item) ? 'selected' : ''}
-                    onClick={() => handleItemClick(item)}
-                    ref={isSelected(item) ? selectionRef : null}
-                  >
-                    <IconContainer>
-                      <CitationCountIcon />
-                      {(citationCounts.get(item.id) || 0) > 0 ? (
-                        <CitationCount data-tooltip-content="Number of times used in the document">
-                          {citationCounts.get(item.id)}
-                        </CitationCount>
-                      ) : (
-                        <CitationCount className="unused">0</CitationCount>
-                      )}
-                    </IconContainer>
-                    <ReferenceLine item={item} />
-                  </ReferenceButton>
-                ))}
-              </ReferencesInnerWrapper>
-            </ReferencesSidebarContent>
-          </ReferencesSidebar>
-          <ScrollableModalContent>
-            {selection && (
-              <ReferenceForm
-                values={normalize(selection)}
-                showDelete={
-                  !citationCounts.get(selection.id) &&
-                  isNewItem(selection, ['id', 'type']) // disable the delete button for the new citations
-                }
-                onChange={handleChange}
-                onCancel={onCancel}
-                onDelete={handleDelete}
-                onSave={handleSave}
-                actionsRef={actionsRef}
-              />
-            )}
-          </ScrollableModalContent>
-        </ModalBody>
-      </ReferencesModalContainer>
-    </StyledModal>
+    <>
+      {importing && (
+        <ImportBibliographyModal
+          onCancel={() => setImporting(false)}
+          onSave={handleImportSave}
+        />
+      )}
+      <StyledModal isOpen={isOpen} onRequestClose={onCancel}>
+        <Dialog
+          isOpen={confirm}
+          category={Category.confirmation}
+          header="You've made changes to this option"
+          message="Would you like to save or discard your changes?"
+          actions={{
+            secondary: {
+              action: () => reset(),
+              title: 'Discard',
+            },
+            primary: {
+              action: () => handleSave(valuesRef.current),
+              title: 'Save',
+            },
+          }}
+        />
+        <ReferencesModalContainer data-cy={'references-editor'}>
+          <ModalHeader>
+            <CloseButton data-cy="modal-close-button" onClick={onCancel} />
+          </ModalHeader>
+          <ModalBody>
+            <ReferencesSidebar>
+              <ModalSidebarHeader>
+                <ModalSidebarTitle>References</ModalSidebarTitle>
+              </ModalSidebarHeader>
+              <ReferencesSidebarContent ref={ref}>
+                <ReferencesInnerWrapper>
+                  {sortedItems.slice(startIndex, endIndex + 1).map((item) => (
+                    <ReferenceButton
+                      key={item.id}
+                      id={item.id}
+                      className={isSelected(item) ? 'selected' : ''}
+                      onClick={() => handleItemClick(item)}
+                      ref={isSelected(item) ? selectionRef : null}
+                    >
+                      <IconContainer>
+                        <CitationCountIcon />
+                        {(citationCounts.get(item.id) || 0) > 0 ? (
+                          <CitationCount data-tooltip-content="Number of times used in the document">
+                            {citationCounts.get(item.id)}
+                          </CitationCount>
+                        ) : (
+                          <CitationCount className="unused">0</CitationCount>
+                        )}
+                      </IconContainer>
+                      <ReferenceLine item={item} />
+                    </ReferenceButton>
+                  ))}
+                </ReferencesInnerWrapper>
+              </ReferencesSidebarContent>
+              <ImportFromFileFooter>
+                <ImportFromFileButton
+                  type="button"
+                  data-cy="import-from-file-button"
+                  onClick={() => setImporting(true)}
+                >
+                  <AddAuthorIcon />
+                  Import from file
+                </ImportFromFileButton>
+              </ImportFromFileFooter>
+            </ReferencesSidebar>
+            <ScrollableModalContent>
+              {importSuccessCount !== null ? (
+                <ImportSuccessPlaceholder count={importSuccessCount} />
+              ) : (
+                selection && (
+                  <ReferenceForm
+                    values={normalize(selection)}
+                    showDelete={
+                      !citationCounts.get(selection.id) &&
+                      isNewItem(selection, ['id', 'type']) // disable the delete button for the new citations
+                    }
+                    onChange={handleChange}
+                    onCancel={onCancel}
+                    onDelete={handleDelete}
+                    onSave={handleSave}
+                    actionsRef={actionsRef}
+                  />
+                )
+              )}
+            </ScrollableModalContent>
+          </ModalBody>
+        </ReferencesModalContainer>
+      </StyledModal>
+    </>
   )
 }

package/src/components/toolbar/InsertEmbedDialog.tsx

@@ -93,8 +93,12 @@ export const InsertEmbedDialog: React.FC<InsertEmbedDialogProps> = ({
     () => {
       debounce(async () => {
         if (url && allowedHref(url)) {
-        const html = await getEditorProps(state).fetchOEmbedHtml(url, 368, 217)
-        setOEmbedHTML(html)
+          const html = await getEditorProps(state).fetchOEmbedHtml(
+            url,
+            368,
+            217
+          )
+          setOEmbedHTML(html)
         }
       })
     },

package/src/components/toolbar/type-selector/styles.ts

@@ -18,7 +18,8 @@ import styled from 'styled-components'
 
 import { Option } from './TypeSelector'
 
-const TypeSelect: React.ComponentType<Props<Option, false, GroupBase<Option>>> = Select
+const TypeSelect: React.ComponentType<Props<Option, false, GroupBase<Option>>> =
+  Select
 
 export const StyledSelect = styled(TypeSelect)`
   .type-selector__control:hover {