@manuscripts/body-editor 3.16.1 → 3.16.2

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/lib/view.ts

@@ -15,7 +15,9 @@
  */
 
 import {
+  BibliographyItemAttrs,
   ManuscriptEditorView,
+  ManuscriptNode,
   ManuscriptNodeType,
   schema,
 } from '@manuscripts/transform'
@@ -98,3 +100,66 @@ export const deleteNode = (view: ManuscriptEditorView, id: string) => {
     view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize))
   }
 }
+
+const createBibliographySection = (nodes: ManuscriptNode[]) =>
+  schema.nodes.bibliography_section.createAndFill({}, [
+    schema.nodes.section_title.create({}, schema.text('References')),
+    schema.nodes.bibliography_element.create({}, nodes),
+  ]) as ManuscriptNode
+
+export const insertBibliographyItems = (
+  view: ManuscriptEditorView,
+  items: BibliographyItemAttrs[]
+) => {
+  const { doc } = view.state
+  let tr = view.state.tr
+
+  const biblioSection = utils.findChildrenByType(
+    doc,
+    schema.nodes.bibliography_element,
+    true
+  )
+
+  if (biblioSection.length) {
+    let insertPos = biblioSection[0].pos + 1
+    for (const attrs of items) {
+      const node = schema.nodes.bibliography_item.create(attrs)
+      tr = tr.insert(insertPos, node)
+      insertPos += node.nodeSize
+    }
+  } else {
+    const backmatter = utils.findChildrenByType(
+      doc,
+      schema.nodes.backmatter,
+      true
+    )
+    const backmatterEnd = backmatter[0]
+      ? backmatter[0].node.nodeSize + backmatter[0].pos
+      : 0
+
+    const nodes = items.map((attrs) =>
+      schema.nodes.bibliography_item.create(attrs)
+    )
+    tr = tr.insert(
+      backmatterEnd ? backmatterEnd - 1 : tr.doc.content.size,
+      createBibliographySection(nodes)
+    )
+  }
+  view.dispatch(tr)
+}
+
+export const saveBibliographyItem = (
+  view: ManuscriptEditorView,
+  attrs: BibliographyItemAttrs[]
+) => {
+  if (attrs.length === 1) {
+    const item = attrs[0]
+
+    if (findChildByID(view, item.id)) {
+      updateNodeAttrs(view, schema.nodes.bibliography_item, item)
+      return
+    }
+  }
+
+  insertBibliographyItems(view, attrs)
+}

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.16.1';
+export const VERSION = '3.16.2';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/bibliography_element.ts

@@ -19,7 +19,6 @@ import {
   BibliographyElementNode,
   BibliographyItemAttrs,
   BibliographyItemNode,
-  schema,
 } from '@manuscripts/transform'
 import { NodeSelection } from 'prosemirror-state'
 
@@ -32,7 +31,7 @@ import { handleEnterKey } from '../lib/navigation-utils'
 import { findNodeByID } from '../lib/doc'
 import { sanitize } from '../lib/dompurify'
 
-import { deleteNode, findChildByID, updateNodeAttrs } from '../lib/view'
+import { deleteNode, findChildByID, saveBibliographyItem } from '../lib/view'
 import { getBibliographyPluginState } from '../plugins/bibliography'
 import { commentsKey, setCommentSelection } from '../plugins/comments'
 import { selectedSuggestionKey } from '../plugins/selected-suggestion'
@@ -269,8 +268,8 @@ export class BibliographyElementBlockView extends BlockView<
     this.dom.appendChild(this.container)
   }
 
-  private handleSave = (attrs: BibliographyItemAttrs) => {
-    updateNodeAttrs(this.view, schema.nodes.bibliography_item, attrs)
+  private handleSave = (attrs: BibliographyItemAttrs[]) => {
+    saveBibliographyItem(this.view, attrs)
   }
 
   private handleDelete = (item: BibliographyItemAttrs) => {

package/src/views/citation_editable.ts

@@ -16,13 +16,8 @@
 
 import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
 import { isDeleted } from '@manuscripts/track-changes-plugin'
-import {
-  BibliographyItemAttrs,
-  ManuscriptNode,
-  schema,
-} from '@manuscripts/transform'
+import { BibliographyItemAttrs } from '@manuscripts/transform'
 import { TextSelection } from 'prosemirror-state'
-import { findChildrenByType } from 'prosemirror-utils'
 
 import {
   CitationEditor,
@@ -35,18 +30,12 @@ import {
 import { handleComment } from '../lib/comments'
 import { Crossref } from '../lib/crossref'
 import { handleEnterKey } from '../lib/navigation-utils'
-import { deleteNode, findChildByID, updateNodeAttrs } from '../lib/view'
+import { deleteNode, saveBibliographyItem } from '../lib/view'
 import { getBibliographyPluginState } from '../plugins/bibliography'
 import { CitationView } from './citation'
 import { createEditableNodeView } from './creators'
 import ReactSubView from './ReactSubView'
 
-const createBibliographySection = (node: ManuscriptNode) =>
-  schema.nodes.bibliography_section.createAndFill({}, [
-    schema.nodes.section_title.create({}, schema.text('References')),
-    schema.nodes.bibliography_element.create({}, node ? [node] : []),
-  ]) as ManuscriptNode
-
 export class CitationEditableView extends CitationView {
   private editor: HTMLElement
   private contextMenu: HTMLElement
@@ -216,12 +205,8 @@ export class CitationEditableView extends CitationView {
     this.props.popper.destroy()
   }
 
-  private handleSave = (attrs: BibliographyItemAttrs) => {
-    if (!findChildByID(this.view, attrs.id)) {
-      this.insertBibliographyNode(attrs)
-    } else {
-      updateNodeAttrs(this.view, schema.nodes.bibliography_item, attrs)
-    }
+  private handleSave = (attrs: BibliographyItemAttrs[]) => {
+    saveBibliographyItem(this.view, attrs)
   }
 
   private handleUncite = (id: string) => {
@@ -260,7 +245,7 @@ export class CitationEditableView extends CitationView {
       if (existingItem) {
         item.id = existingItem.id
       } else {
-        this.insertBibliographyNode(item)
+        saveBibliographyItem(this.view, [item])
       }
 
       rids.push(item.id)
@@ -277,36 +262,6 @@ export class CitationEditableView extends CitationView {
   private handleDelete = (item: BibliographyItemAttrs) => {
     return deleteNode(this.view, item.id)
   }
-
-  private insertBibliographyNode(attrs: BibliographyItemAttrs) {
-    const { doc, tr } = this.view.state
-
-    const biblioSection = findChildrenByType(
-      doc,
-      schema.nodes.bibliography_element,
-      true
-    )
-
-    const backmatter = findChildrenByType(doc, schema.nodes.backmatter, true)
-    const backmatterEnd = backmatter[0]
-      ? backmatter[0].node.nodeSize + backmatter[0].pos
-      : 0
-
-    const node = 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
-  }
 }
 
 export default createEditableNodeView(CitationEditableView)