@manuscripts/body-editor 3.17.3 → 3.18.0

package/src/components/references/ReferencesModal.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import {
+  AddIcon,
   AddAuthorIcon,
   Category,
   CitationCountIcon,
@@ -32,7 +33,11 @@ import {
   withListNavigation,
   withNavigableListItem,
 } from '@manuscripts/style-guide'
-import { BibliographyItemAttrs } from '@manuscripts/transform'
+import {
+  BibliographyItemAttrs,
+  generateNodeID,
+  schema,
+} from '@manuscripts/transform'
 import isEqual from 'lodash/isEqual'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components'
@@ -44,104 +49,7 @@ import {
 import { ReferenceLine } from './ReferenceLine'
 import { ImportBibliographyModal } from './ImportBibliographyModal'
 import { ImportSuccessPlaceholder } from './ImportSuccessPlaceholder'
-
-const ReferencesModalContainer = styled(ModalContainer)`
-  min-width: 960px;
-`
-
-const ReferencesSidebar = styled(ModalSidebar)`
-  width: 70%;
-`
-
-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;
-`)
-
-const ReferenceButton = withNavigableListItem(styled.div`
-  cursor: pointer;
-  display: flex;
-  justify-content: flex-start;
-  padding: ${(props) => props.theme.grid.unit * 4}px 0;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-
-  path {
-    fill: #c9c9c9;
-  }
-
-  &:hover {
-    background: ${(props) => props.theme.colors.background.info};
-  }
-
-  &.selected {
-    background: ${(props) => props.theme.colors.background.info};
-    border-top-color: #bce7f6;
-    border-bottom-color: #bce7f6;
-  }
-
-  .tooltip {
-    max-width: ${(props) => props.theme.grid.unit * 25}px;
-    padding: ${(props) => props.theme.grid.unit * 2}px;
-    border-radius: 6px;
-  }
-`)
-
-const IconContainer = styled.div`
-  padding-right: ${(props) => props.theme.grid.unit * 5}px;
-  position: relative;
-`
-
-const CitationCount = styled.div`
-  border-radius: 50%;
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  color: #ffffff;
-  background-color: #bce7f6;
-  text-align: center;
-  vertical-align: top;
-  top: 0;
-  left: 16px;
-  font-size: 9px;
-
-  &.unused {
-    background-color: #fe8f1f;
-  }
-`
+import { normalizeBlblioItem } from '../../lib/normalize'
 
 const selectionTopOffset = 10 // to be able to place the selected item in the middle and allow for some scroll at the top
 const pageSize = 12
@@ -149,36 +57,6 @@ const topTrigger = 0.2 // says: notify when x% of the offsetHeight remains hidde
 const bottomTrigger = 0.8 // says: notify when x% of the offsetHeight remains hidden at the bottom
 const dropLimit = 36 // basically maximum amount of items that can exist at the same time
 
-const normalize = (item: BibliographyItemAttrs) => ({
-  id: item.id,
-  type: item.type,
-  author: item.author || [],
-  editor: item.editor || [],
-  issued: item.issued,
-  ['container-title']: item['container-title'] || '',
-  ['collection-title']: item['collection-title'] || '',
-  DOI: item.DOI || '',
-  URL: item.URL || '',
-  volume: item.volume || '',
-  issue: item.issue || '',
-  supplement: item.supplement || '',
-  edition: item.edition || '',
-  page: item.page || '',
-  ['number-of-pages']: item['number-of-pages'] || '',
-  title: item.title || '',
-  literal: item.literal || '',
-  std: item.std || '',
-  publisher: item.publisher || '',
-  ['publisher-place']: item['publisher-place'] || '',
-  event: item.event || '',
-  ['event-place']: item['event-place'] || '',
-  ['event-date']: item['event-date'],
-  institution: item.institution || '',
-  locator: item.locator || '',
-  accessed: item.accessed,
-  comment: item.comment || '',
-})
-
 export interface ReferencesModalProps {
   isOpen: boolean
   onCancel: () => void
@@ -208,6 +86,7 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
   const valuesRef = useRef<BibliographyItemAttrs>(undefined)
 
   const [selection, setSelection] = useState<BibliographyItemAttrs>()
+  const [isNew, setIsNew] = useState<boolean>(false)
   const selectionRef = useRef<HTMLDivElement>(null)
 
   const sortedItems = useMemo(
@@ -230,7 +109,16 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
   const selectionIndex = sortedItems.findIndex(isSelected)
 
   useEffect(() => {
-    setSelection(item)
+    if (item) {
+      setSelection(item)
+      setIsNew(false)
+    } else {
+      setIsNew(true)
+      setSelection({
+        id: generateNodeID(schema.nodes.bibliography_item),
+        type: 'article-journal',
+      })
+    }
   }, [item])
 
   useEffect(() => {
@@ -297,11 +185,12 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     const currentCitationCount = citationCounts.get(item.id)
 
     if (currentCitationCount === undefined) {
-      citationCounts.set(item.id, 1) // update the citation count in the Map
+      citationCounts.set(item.id, 0) // update the citation count in the Map
     }
 
     onSave(item)
     setSelection(item)
+    setIsNew(false)
     setConfirm(false)
   }
 
@@ -313,15 +202,22 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     setSelection(undefined)
   }
 
+  const hasChanged = () => {
+    const values = valuesRef.current
+    return (
+      values && selection && !isEqual(values, normalizeBlblioItem(selection))
+    )
+  }
+
   const clearImportSuccess = () => setImportSuccessCount(null)
 
   const handleItemClick = (item: BibliographyItemAttrs) => {
     clearImportSuccess()
-    const values = valuesRef.current
-    if (values && selection && !isEqual(values, normalize(selection))) {
+    if (hasChanged()) {
       setConfirm(true)
       return
     }
+    setIsNew(false)
     setSelection(item)
   }
 
@@ -336,10 +232,6 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     setImportSuccessCount(data.length)
   }
 
-  if (sortedItems.length <= 0) {
-    return <></>
-  }
-
   return (
     <>
       {importing && (
@@ -375,7 +267,28 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                 <ModalSidebarTitle>References</ModalSidebarTitle>
               </ModalSidebarHeader>
               <ReferencesSidebarContent ref={ref}>
+                <NewReferenceButton
+                  onClick={() => {
+                    if (hasChanged()) {
+                      setConfirm(true)
+                      return
+                    }
+                    setIsNew(true)
+                    setSelection({
+                      id: generateNodeID(schema.nodes.bibliography_item),
+                      type: 'article-journal',
+                    })
+                  }}
+                  className={isNew ? 'selected' : ''}
+                  disabled={isNew}
+                >
+                  <AddIcon />
+                  <span>New Reference</span>
+                </NewReferenceButton>
                 <ReferencesInnerWrapper>
+                  <ExistingReferencesHeading>
+                    Existing References
+                  </ExistingReferencesHeading>
                   {sortedItems.slice(startIndex, endIndex + 1).map((item) => (
                     <ReferenceButton
                       key={item.id}
@@ -385,7 +298,7 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                       ref={isSelected(item) ? selectionRef : null}
                     >
                       <IconContainer>
-                        <CitationCountIcon />
+                        <CitationCountIconStyled />
                         {(citationCounts.get(item.id) || 0) > 0 ? (
                           <CitationCount data-tooltip-content="Number of times used in the document">
                             {citationCounts.get(item.id)}
@@ -394,7 +307,10 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                           <CitationCount className="unused">0</CitationCount>
                         )}
                       </IconContainer>
-                      <ReferenceLine item={item} />
+                      <ReferenceLine
+                        showUncited={!citationCounts.get(item.id)}
+                        item={item}
+                      />
                     </ReferenceButton>
                   ))}
                 </ReferencesInnerWrapper>
@@ -416,7 +332,7 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
               ) : (
                 selection && (
                   <ReferenceForm
-                    values={normalize(selection)}
+                    values={normalizeBlblioItem(selection)}
                     showDelete={
                       !citationCounts.get(selection.id) &&
                       isNewItem(selection, ['id', 'type']) // disable the delete button for the new citations
@@ -436,3 +352,125 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     </>
   )
 }
+
+const ReferencesModalContainer = styled(ModalContainer)`
+  min-width: 960px;
+`
+
+const ReferencesSidebar = styled(ModalSidebar)`
+  width: 70%;
+`
+
+const ReferencesSidebarContent = styled(SidebarContent)`
+  overflow-y: auto;
+`
+
+const ReferencesInnerWrapper = withListNavigation(styled.div`
+  width: 100%;
+  padding: 12px 0;
+`)
+
+const CitationCountIconStyled = styled(CitationCountIcon)``
+
+const ReferenceButton = withNavigableListItem(styled.button`
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+  background: none;
+  border: none;
+  border-radius: 0;
+  text-align: inherit;
+
+  padding: ${(props) => props.theme.grid.unit * 4}px 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+
+  ${CitationCountIconStyled} path {
+    fill: #c9c9c9;
+  }
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.info};
+  }
+
+  &.selected {
+    background: ${(props) => props.theme.colors.background.info};
+    border-top-color: #bce7f6;
+    border-bottom-color: #bce7f6;
+  }
+
+  .tooltip {
+    max-width: ${(props) => props.theme.grid.unit * 25}px;
+    padding: ${(props) => props.theme.grid.unit * 2}px;
+    border-radius: 6px;
+  }
+`)
+
+const IconContainer = styled.div`
+  padding-right: ${(props) => props.theme.grid.unit * 5}px;
+  position: relative;
+`
+
+const CitationCount = styled.div`
+  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  color: #ffffff;
+  background-color: #bce7f6;
+  text-align: center;
+  vertical-align: top;
+  top: 0;
+  left: 16px;
+  font-size: 9px;
+
+  &.unused {
+    background-color: #fe8f1f;
+  }
+`
+
+const NewReferenceButton = styled(ReferenceButton)`
+  svg {
+    margin-right: 8px;
+  }
+`
+const ExistingReferencesHeading = styled.h3`
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  padding: 8px 0 20px;
+  margin: 0;
+  color: #6e6e6e;
+`
+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;
+  }
+`

package/src/configs/editor-views.ts

@@ -137,6 +137,7 @@ export default (
     headshot_element: headshotElement(props, dispatch),
     headshot_image: headshotImage(props, dispatch),
     abstracts: abstracts(props),
+    abstract: section(props),
     trans_abstract: transAbstract(props),
     trans_graphical_abstract: transGraphicalAbstract(props),
     attachment: attachment(props, dispatch),

package/src/icons.ts

@@ -47,7 +47,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 
 const renderIcon = (c: React.FC) => renderToStaticMarkup(createElement(c))
 
-export const addAuthorIcon = renderIcon(AddAuthorIcon)
+export const addIcon = renderIcon(AddAuthorIcon)
 export const arrowDown = renderIcon(ArrowDownCircleIcon)
 export const arrowUp = renderIcon(ArrowUpIcon)
 export const alertIcon = renderIcon(AlertIcon)

package/src/lib/context-menu.ts

@@ -397,7 +397,10 @@ export class ContextMenu {
         this.createMenuSection((section: HTMLElement) => {
           let nodeName = nodeNames.get(type) || ''
           if (type === schema.nodes.section_title) {
-            nodeName = nodeNames.get(schema.nodes.section) as string
+            const containerType = $pos.parent.type
+            nodeName =
+              nodeNames.get(containerType) ??
+              (nodeNames.get(schema.nodes.section) as string)
           }
           section.appendChild(
             this.createMenuItem(`Delete ${nodeName}`, () => {

package/src/lib/normalize.ts

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { generateNodeID, Nodes, schema } from '@manuscripts/transform'
+import {
+  BibliographyItemAttrs,
+  generateNodeID,
+  Nodes,
+  schema,
+} from '@manuscripts/transform'
 
 import { AffiliationAttrs, ContributorAttrs } from './authors'
 
@@ -68,3 +73,33 @@ export const checkID = <T extends WithID>(attrs: T, nodeType: Nodes) => {
     id: attrs.id || generateNodeID(schema.nodes[nodeType]),
   }
 }
+
+export const normalizeBlblioItem = (item: BibliographyItemAttrs) => ({
+  id: item.id,
+  type: item.type,
+  author: item.author || [],
+  editor: item.editor || [],
+  issued: item.issued,
+  ['container-title']: item['container-title'] || '',
+  ['collection-title']: item['collection-title'] || '',
+  DOI: item.DOI || '',
+  URL: item.URL || '',
+  volume: item.volume || '',
+  issue: item.issue || '',
+  supplement: item.supplement || '',
+  edition: item.edition || '',
+  page: item.page || '',
+  ['number-of-pages']: item['number-of-pages'] || '',
+  title: item.title || '',
+  literal: item.literal || '',
+  std: item.std || '',
+  publisher: item.publisher || '',
+  ['publisher-place']: item['publisher-place'] || '',
+  event: item.event || '',
+  ['event-place']: item['event-place'] || '',
+  ['event-date']: item['event-date'],
+  institution: item.institution || '',
+  locator: item.locator || '',
+  accessed: item.accessed,
+  comment: item.comment || '',
+})

package/src/lib/paste.ts

@@ -109,7 +109,6 @@ export const transformPastedHTML = (html: string) => {
   const doc = new DOMParser().parseFromString(html, 'text/html')
   wrapHeadingWithSection(doc)
   wrapTableWithFigure(doc)
-  console.log(doc.body.innerHTML)
   return doc.body.innerHTML
 }
 

package/src/menus.tsx

@@ -563,7 +563,7 @@ export const getEditorMenus = (
   const abstractSection = allAbstractsCategories.find(
     (s) => s.id === ABSTRACT_ID
   )
-  const ABSTRACT_GRAPHICAL_ID = 'abstract-graphical'
+  const ABSTRACT_GRAPHICAL_ID = 'graphical'
   const graphicalAbstractSection = allAbstractsCategories.find(
     (s) => s.id === ABSTRACT_GRAPHICAL_ID
   )

package/src/node-type-icons.tsx

@@ -69,6 +69,7 @@ const icons: Map<
   [nodes.paragraph, OutlineParagraphIcon],
   [nodes.pullquote_element, OutlinePullQuoteIcon],
   [nodes.section, OutlineSectionIcon],
+  [nodes.abstract, OutlineSectionIcon],
   [nodes.table_element, OutlineTableIcon],
   [nodes.graphical_abstract_section, OutlineSectionIcon],
   [nodes.trans_graphical_abstract, OutlineSectionIcon],

package/src/plugins/add-subtitle.ts

@@ -20,14 +20,14 @@ import { Decoration, DecorationSet } from 'prosemirror-view'
 import { v4 as uuidv4 } from 'uuid'
 
 import { EditorProps } from '../configs/ManuscriptsEditor'
-import { addAuthorIcon } from '../icons'
+import { addIcon } from '../icons'
 import { handleEnterKey } from '../lib/navigation-utils'
 import { findInsertionPosition } from '../lib/utils'
 
 const createAddSubtitleButton = (handler: () => void) => {
   const button = document.createElement('span')
   button.className = 'add-subtitle'
-  button.innerHTML = `${addAuthorIcon} <span class="add-subtitle-text">Add subtitle</span>`
+  button.innerHTML = `${addIcon} <span class="add-subtitle-text">Add subtitle</span>`
 
   button.tabIndex = 0
   const activate = (event: MouseEvent | KeyboardEvent) => {

package/src/plugins/bibliography.ts

@@ -120,7 +120,7 @@ const buildBibliographyPluginState = (
     $new.engine = $old.engine
     $new.renderedCitations = $old.renderedCitations
   } else {
-    const citationCounts = new Map()
+    const citationCounts = new Map<string, number>()
     const rids = nodes.flatMap((e) => e[0].attrs.rids)
     rids.forEach((rid) => {
       const count = citationCounts.get(rid) || 0
@@ -142,10 +142,17 @@ const buildBibliographyPluginState = (
       csl.style,
       'en-US'
     )
-
+    const uncitedIds: string[] = []
+    bibliographyItems.forEach((item, id) => {
+      if (!rids.includes(id)) {
+        uncitedIds.push(id)
+      }
+    })
     //create new citations since citeproc modifies the ones passed
     const citationTexts = engine.rebuildProcessorState(
-      nodes.map(([node]) => buildCiteprocCitation(node.attrs))
+      nodes.map(([node]) => buildCiteprocCitation(node.attrs)),
+      'html',
+      uncitedIds
     )
 
     $new.version = String(version++)

package/src/plugins/section_category.ts

@@ -15,6 +15,7 @@
  */
 import {
   getGroupCategories,
+  isAbstractNode,
   isSectionNode,
   schema,
   SectionCategory,
@@ -154,7 +155,8 @@ const buildPluginState = (
     if (node.type === schema.nodes.box_element) {
       return false
     }
-    if (isSectionNode(node)) {
+
+    if (isSectionNode(node) || isAbstractNode(node)) {
       const categoryID = node.attrs.category
       const category = categories.get(categoryID)
       const $pos = state.doc.resolve(pos)
@@ -191,7 +193,10 @@ const buildPluginState = (
 }
 
 const getUsedSectionCategoryIDs = (state: EditorState): Set<string> => {
-  const sections = findChildrenByType(state.doc, schema.nodes.section)
+  const sections = [
+    ...findChildrenByType(state.doc, schema.nodes.section),
+    ...findChildrenByType(state.doc, schema.nodes.abstract),
+  ]
   const used = new Set<string>()
   sections.forEach(({ node }) => {
     if (node.attrs.category) {