@manuscripts/body-editor 3.17.5 → 3.18.0

package/dist/types/views/bibliography_element.d.ts

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { BibliographyElementNode } from '@manuscripts/transform';
+import { PluginState } from '../plugins/bibliography';
 import { Trackable } from '../types';
 import BlockView from './block_view';
 export declare class BibliographyElementBlockView extends BlockView<Trackable<BibliographyElementNode>> {
@@ -21,7 +22,7 @@ export declare class BibliographyElementBlockView extends BlockView<Trackable<Bi
     private editor;
     private contextMenu;
     private version;
-    showPopper(id: string): void;
+    showPopper(id?: string): void;
     stopEvent: () => boolean;
     ignoreMutation: () => boolean;
     private handleEdit;
@@ -31,6 +32,9 @@ export declare class BibliographyElementBlockView extends BlockView<Trackable<Bi
     private handleClick;
     private handleKeyDown;
     updateContents(): void;
+    renderBibs(bib: PluginState): void;
+    inlineModalButton: HTMLSpanElement | null;
+    createInlineModalButton(): void;
     createElement: () => void;
     private handleSave;
     private handleDelete;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/body-editor",
   "description": "Prosemirror components for editing and viewing manuscripts",
-  "version": "3.17.5",
+  "version": "3.18.0",
   "repository": "github:Atypon-OpenSource/manuscripts-body-editor",
   "license": "Apache-2.0",
   "main": "dist/cjs",

package/src/components/references/ReferenceLine.tsx

@@ -28,16 +28,31 @@ export const Metadata = styled.div`
 `
 
 export const MetadataContainer = styled.div`
+  position: relative;
   flex: 1;
 `
 
 export const ReferenceLine: React.FC<{
   item: BibliographyItemAttrs
-}> = ({ item }) => (
+  showUncited?: boolean
+}> = ({ item, showUncited }) => (
   <MetadataContainer>
+    {showUncited && <UncitedBadge>UNCITED</UncitedBadge>}
     <div data-cy={'reference-title'}>
       {item.title || item.literal || 'Untitled'}
     </div>
     <Metadata>{metadata(item)}</Metadata>
   </MetadataContainer>
 )
+
+const UncitedBadge = styled.span`
+  padding: 1px 6px;
+  display: flex;
+  margin-bottom: 2px;
+  max-width: max-content;
+  border-radius: 4px;
+  color: #353535;
+  background-color: #f7b314;
+  font-size: 10px;
+  font-weight: 500;
+`

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/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/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/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/translations.ts

@@ -26,7 +26,7 @@ import { Decoration, DecorationSet } from 'prosemirror-view'
 
 import { insertTransAbstract, insertTransGraphicalAbstract } from '../commands'
 import { EditorProps } from '../configs/ManuscriptsEditor'
-import { addAuthorIcon, translateIcon } from '../icons'
+import { addIcon, translateIcon } from '../icons'
 import { getLanguage, getLanguageLabel } from '../lib/languages'
 import {
   createKeyboardInteraction,
@@ -132,7 +132,7 @@ export default (props: EditorProps) =>
                     $span.tabIndex = 0
                     $span.className = 'add-trans-abstract'
                     $span.title = 'Add translation'
-                    $span.innerHTML = `${addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`
+                    $span.innerHTML = `${addIcon} <span class="add-trans-abstract-text">Add translation</span>`
 
                     const handleActivate = (event: Event) => {
                       event.preventDefault()

package/src/versions.ts

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