@manuscripts/body-editor 3.19.0 → 3.19.2

package/src/components/references/ReferenceForm/styled-components.ts

@@ -37,19 +37,6 @@ export const Button = styled(IconButton).attrs({
   }
 `
 
-export const Actions = styled.div`
-  flex-shrink: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .tooltip {
-    max-width: ${(props) => props.theme.grid.unit * 39}px;
-    padding: ${(props) => props.theme.grid.unit * 2}px;
-    border-radius: 6px;
-  }
-`
-
 export const ReferenceTextField = styled(TextField)`
   padding: ${(props) => props.theme.grid.unit * 2}px
     ${(props) => props.theme.grid.unit * 3}px;

package/src/components/references/ReferencesEditor.tsx

@@ -23,6 +23,12 @@ import React, { useEffect, useReducer, useState } from 'react'
 import { attrsReducer } from '../../lib/array-reducer'
 import { cleanItemValues } from '../../lib/utils'
 import { ReferencesModal, ReferencesModalProps } from './ReferencesModal'
+import { getEditorProps } from '../../plugins/editor-props'
+import { deleteNode, saveBibliographyItem } from '../../lib/view'
+import ReactSubView from '../../views/ReactSubView'
+import { EditorState, Transaction } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { getBibliographyPluginState } from '../../plugins/bibliography'
 
 export type ReferencesEditorProps = Omit<
   ReferencesModalProps,
@@ -88,3 +94,35 @@ export const ReferencesEditor: React.FC<ReferencesEditorProps> = (props) => {
     />
   )
 }
+
+export const openReferencesEditor = (
+  state: EditorState,
+  _?: (tr: Transaction) => void,
+  view?: EditorView
+) => {
+  if (!view) {
+    return false
+  }
+
+  const props = getEditorProps(state)
+  const bib = getBibliographyPluginState(view.state)
+
+  const componentProps: ReferencesEditorProps = {
+    items: bib ? Array.from(bib.bibliographyItems.values()) : [],
+    citationCounts: new Map<string, number>(bib?.citationCounts),
+    onDelete: (item) => deleteNode(view, item.id),
+    onSave: (item) => saveBibliographyItem(view, item),
+  }
+
+  const referencesEditor = ReactSubView(
+    props,
+    ReferencesEditor,
+    componentProps,
+    state.doc,
+    () => 0,
+    view
+  )
+  view.focus()
+  document.body.appendChild(referencesEditor)
+  return true
+}

package/src/components/references/ReferencesModal.tsx

@@ -32,7 +32,12 @@ import {
   useScrollDetection,
   withListNavigation,
   withNavigableListItem,
+  ButtonGroup,
+  DeleteIcon,
+  LinkIcon,
+  outlineStyle,
 } from '@manuscripts/style-guide'
+import { Button, IconButton } from '@manuscripts/style-guide/mui'
 import {
   BibliographyItemAttrs,
   generateNodeID,
@@ -40,11 +45,12 @@ import {
 } from '@manuscripts/transform'
 import isEqual from 'lodash/isEqual'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 import {
   ReferenceForm,
   ReferenceFormActions,
+  validateReference,
 } from './ReferenceForm/ReferenceForm'
 import { ReferenceLine } from './ReferenceLine'
 import { ImportBibliographyModal } from './ImportBibliographyModal'
@@ -87,6 +93,7 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
 
   const [selection, setSelection] = useState<BibliographyItemAttrs>()
   const [isNew, setIsNew] = useState<boolean>(false)
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const selectionRef = useRef<HTMLDivElement>(null)
 
   const sortedItems = useMemo(
@@ -173,6 +180,12 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     return extraKeys.length > 0
   }
 
+  const canDeleteSelectedItem =
+    (selection &&
+      !citationCounts.get(selection.id) &&
+      isNewItem(selection, ['id', 'type'])) ??
+    false
+
   const handleSave = (values: BibliographyItemAttrs | undefined) => {
     if (!values || !selection) {
       return
@@ -221,8 +234,14 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
     setSelection(item)
   }
 
+  const [canSave, setCanSave] = useState(false)
+
   const handleChange = (values: BibliographyItemAttrs) => {
     valuesRef.current = values
+    const errors = validateReference(values)
+    const isValid = Object.keys(errors).length === 0
+    const dirty = actionsRef.current?.isDirty() ?? false
+    setCanSave(isValid && dirty)
   }
 
   const handleImportSave = (data: BibliographyItemAttrs[]) => {
@@ -257,6 +276,25 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
             },
           }}
         />
+        <Dialog
+          isOpen={showDeleteDialog}
+          category={Category.confirmation}
+          header="Delete Reference"
+          message="Are you sure you want to delete this reference from the list?"
+          actions={{
+            secondary: {
+              action: () => {
+                handleDelete()
+                setShowDeleteDialog(false)
+              },
+              title: 'Delete',
+            },
+            primary: {
+              action: () => setShowDeleteDialog(false),
+              title: 'Cancel',
+            },
+          }}
+        />
         <ReferencesModalContainer data-cy={'references-editor'}>
           <ModalHeader>
             <CloseButton data-cy="modal-close-button" onClick={onCancel} />
@@ -286,9 +324,11 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                   <span>New Reference</span>
                 </NewReferenceButton>
                 <ReferencesInnerWrapper>
-                  <ExistingReferencesHeading>
-                    Existing References
-                  </ExistingReferencesHeading>
+                  {sortedItems.length ? (
+                    <ExistingReferencesHeading>
+                      Existing References
+                    </ExistingReferencesHeading>
+                  ) : null}
                   {sortedItems.slice(startIndex, endIndex + 1).map((item) => (
                     <ReferenceButton
                       key={item.id}
@@ -311,6 +351,25 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                         showUncited={!citationCounts.get(item.id)}
                         item={item}
                       />
+                      {isSelected(item) && (
+                        <ButtonGroup>
+                          <IconButton
+                            component={'a'}
+                            href={`https://doi.org/${item.DOI}`}
+                            target={'_blank'}
+                            size={'small'}
+                          >
+                            <DOILinkIcon fill={'#6E6E6E'} />
+                          </IconButton>
+                          <IconButton
+                            disabled={!canDeleteSelectedItem}
+                            size={'small'}
+                            onClick={() => setShowDeleteDialog(true)}
+                          >
+                            <DeleteIcon fill={'#6E6E6E'} />
+                          </IconButton>
+                        </ButtonGroup>
+                      )}
                     </ReferenceButton>
                   ))}
                 </ReferencesInnerWrapper>
@@ -326,27 +385,32 @@ export const ReferencesModal: React.FC<ReferencesModalProps> = ({
                 </ImportFromFileButton>
               </ImportFromFileFooter>
             </ReferencesSidebar>
-            <ScrollableModalContent>
+            <ReferencesContent>
               {importSuccessCount !== null ? (
                 <ImportSuccessPlaceholder count={importSuccessCount} />
               ) : (
                 selection && (
                   <ReferenceForm
                     values={normalizeBlblioItem(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>
+            </ReferencesContent>
           </ModalBody>
+          <Footer>
+            <TertiaryButton variant="tertiary" onClick={onCancel}>
+              Close
+            </TertiaryButton>
+            <Button
+              disabled={!canSave}
+              onClick={() => actionsRef.current?.submit()}
+            >
+              Save Changes
+            </Button>
+          </Footer>
         </ReferencesModalContainer>
       </StyledModal>
     </>
@@ -361,8 +425,13 @@ const ReferencesSidebar = styled(ModalSidebar)`
   width: 70%;
 `
 
+const ReferencesContent = styled(ScrollableModalContent)`
+  padding-top: 32px;
+`
+
 const ReferencesSidebarContent = styled(SidebarContent)`
   overflow-y: auto;
+  padding-top: 8px;
 `
 
 const ReferencesInnerWrapper = withListNavigation(styled.div`
@@ -372,7 +441,7 @@ const ReferencesInnerWrapper = withListNavigation(styled.div`
 
 const CitationCountIconStyled = styled(CitationCountIcon)``
 
-const ReferenceButton = withNavigableListItem(styled.button`
+const referenceButtonStyles = css`
   cursor: pointer;
   display: flex;
   width: 100%;
@@ -384,6 +453,7 @@ const ReferenceButton = withNavigableListItem(styled.button`
   border: none;
   border-radius: 0;
   text-align: inherit;
+  color: #353535;
 
   padding: ${(props) => props.theme.grid.unit * 4}px 0;
   border-top: 1px solid transparent;
@@ -408,6 +478,13 @@ const ReferenceButton = withNavigableListItem(styled.button`
     padding: ${(props) => props.theme.grid.unit * 2}px;
     border-radius: 6px;
   }
+`
+
+const ReferenceButton = withNavigableListItem(styled.div.attrs({
+  role: 'button',
+  tabIndex: 0,
+})`
+  ${referenceButtonStyles}
 `)
 
 const IconContainer = styled.div`
@@ -433,10 +510,14 @@ const CitationCount = styled.div`
   }
 `
 
-const NewReferenceButton = styled(ReferenceButton)`
+const NewReferenceButton = styled.button`
+  ${referenceButtonStyles}
+
   svg {
     margin-right: 8px;
   }
+
+  ${outlineStyle}
 `
 const ExistingReferencesHeading = styled.h3`
   font-size: 18px;
@@ -474,3 +555,24 @@ const ImportFromFileButton = styled.button`
     fill: #6e6e6e;
   }
 `
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 32px;
+  gap: 16px;
+`
+
+const TertiaryButton = styled(Button)`
+  &.MuiButton-textSecondary {
+    color: #0d79d0;
+
+    &:hover {
+      background-color: rgba(13, 121, 208, 0.04);
+    }
+  }
+`
+
+const DOILinkIcon = styled(LinkIcon)`
+  transform: rotate(-45deg);
+`

package/src/lib/utils.ts

@@ -33,6 +33,7 @@ import {
 import { EditorState, Selection } from 'prosemirror-state'
 import {
   ContentNodeWithPos,
+  findChildren,
   findChildrenByType,
   findParentNode,
   findParentNodeOfTypeClosestToPos,
@@ -332,3 +333,26 @@ export const getLastTitleNode = (state: ManuscriptEditorState) => {
   const titleNode = findChildrenByType(state.doc, state.schema.nodes.title)[0]
   return titleNode
 }
+
+export const getSurroundingText = (pos: ResolvedPos, node: ManuscriptNode) => {
+  const nodeContent = findChildren(
+    pos.node(),
+    (child) => child.attrs.id === node.attrs.id
+  )[0]
+
+  const content = pos.node().content
+  const MAX_LENGTH = 40
+
+  const nodeStart = nodeContent.pos
+  const nodeEnd = nodeContent.pos + node.nodeSize
+
+  const leftHandText = content.textBetween(
+    nodeStart > MAX_LENGTH ? nodeStart - MAX_LENGTH : 0,
+    nodeStart
+  )
+  const rightHandText = content.textBetween(
+    nodeEnd,
+    Math.min(nodeEnd + MAX_LENGTH, content.size)
+  )
+  return { leftHandText, rightHandText }
+}

package/src/lib/view.ts

@@ -180,3 +180,4 @@ export const isSelectionInsideNode = (
 
   return from >= pos && to <= end
 }
+

package/src/menus.tsx

@@ -66,6 +66,7 @@ import { isEditAllowed } from './lib/utils'
 import { getEditorProps } from './plugins/editor-props'
 import { useEditor } from './useEditor'
 import { openInsertAwardModal } from './components/awards/AwardModal'
+import { openReferencesEditor } from './components/references/ReferencesEditor'
 
 export const getEditorMenus = (
   editor: ReturnType<typeof useEditor>
@@ -652,6 +653,17 @@ export const getEditorMenus = (
         run: doCommand(insertInlineCitation),
         isHidden: !templateAllows(state, schema.nodes.citation),
       },
+      {
+        id: 'insert-reference-section',
+        label: 'New reference',
+        shortcut: {
+          mac: 'Option+CommandOrControl+N',
+          pc: 'CommandOrControl+Option+N',
+        },
+        isEnabled: isEditAllowed(state),
+        run: doCommand(openReferencesEditor),
+        isHidden: !templateAllows(state, schema.nodes.bibliography_item),
+      },
       {
         id: 'insert-cross-reference',
         label: 'Cross-reference',

package/src/plugins/cross-references.ts

@@ -20,18 +20,28 @@ import {
   schema,
   Target,
 } from '@manuscripts/transform'
-import { trackChangesPluginKey } from '@manuscripts/track-changes-plugin'
+import {
+  trackChangesPluginKey,
+  TrackChangesAction,
+} from '@manuscripts/track-changes-plugin'
 import isEqual from 'lodash/isEqual'
 import { Node, ResolvedPos } from 'prosemirror-model'
 import { NodeSelection, Plugin, Transaction } from 'prosemirror-state'
 import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
 
-import { XrefGroup } from '../components/cross-ref-check-modal/CrossRefWarningModal'
+import {
+  DeleteOption,
+  XrefGroup,
+} from '../components/cross-ref-check-modal/CrossRefWarningModal'
 import { openCrossRefWarningModal } from '../components/cross-ref-check-modal/openModal'
 import { objectsKey } from './objects'
 
+export const DELETE_WITHOUT_REF = 'delete-without-ref'
+export const SELECTED_CROSS_REF_CLASS = 'selected-cross-reference'
+
 let modalActive = false
 let modalElement: HTMLDivElement | null = null
+let scrollTargetEl: HTMLElement | null = null
 
 export default () => {
   let view: ManuscriptEditorView | null = null
@@ -55,7 +65,10 @@ export default () => {
         !view ||
         !tr.docChanged ||
         tr.getMeta(trackChangesPluginKey) ||
-        tr.getMeta('addToHistory') === false
+        tr.getMeta(TrackChangesAction.refreshChanges) ||
+        tr.getMeta('addToHistory') === false ||
+        tr.getMeta('collab$') ||
+        tr.getMeta(DELETE_WITHOUT_REF)
       ) {
         return true
       }
@@ -81,6 +94,9 @@ export default () => {
           modalElement.remove()
           modalElement = null
         }
+        if (scrollTargetEl) {
+          scrollTargetEl.classList.remove(SELECTED_CROSS_REF_CLASS)
+        }
       }
 
       const deletedIds = new Set(
@@ -206,7 +222,8 @@ function createXrefGroups(
     const xrefs = xrefsByRid.get(id)
     if (xrefs?.length) {
       const label = targets.get(referenced.attrs.id)?.label || ''
-      xrefGroups.push({ referenced, label, xrefs })
+      const caption = targets.get(referenced.attrs.id)?.caption || ''
+      xrefGroups.push({ referenced, label, caption, xrefs })
     }
   }
   return xrefGroups
@@ -219,7 +236,7 @@ const onConfirmCreator =
     deletedIds: Set<string>,
     tr: Transaction
   ) =>
-  () => {
+  (deleteOption: DeleteOption) => {
     cleanup()
     if (!view) {
       return
@@ -237,21 +254,25 @@ const onConfirmCreator =
       }
       newTr.step(step)
     }
-    // Remove cross-references that pointed to the now-deleted nodes.
-    // Collect positions in reverse order so deletions don't shift
-    // positions of earlier entries.
-    const xrefPositions: { from: number; to: number }[] = []
+    if (deleteOption === 'delete-with-ref') {
+      // Remove cross-references that pointed to the now-deleted nodes.
+      // Collect positions in reverse order so deletions don't shift
+      // positions of earlier entries.
+      const xrefPositions: { from: number; to: number }[] = []
     newTr.doc.descendants((node, pos) => {
       if (node.type === schema.nodes.cross_reference) {
         const rids = node.attrs.rids as string[]
         if (rids.some((rid) => deletedIds.has(rid))) {
           xrefPositions.push({ from: pos, to: pos + node.nodeSize })
         }
-      }
+        }
     })
     for (let i = xrefPositions.length - 1; i >= 0; i--) {
-      const { from, to } = xrefPositions[i]
-      newTr.delete(from, to)
+        const { from, to } = xrefPositions[i]
+        newTr.delete(from, to)
+      }
+    } else {
+      newTr.setMeta(DELETE_WITHOUT_REF, true)
     }
     view.dispatch(newTr)
   }
@@ -263,7 +284,6 @@ const selectAndScrollToCreator = (view: EditorView) => ($pos: ResolvedPos) => {
 
   const selTr = view.state.tr
   selTr.setSelection(NodeSelection.create(view.state.doc, $pos.pos))
-  view.focus()
   view.dispatch(selTr)
   // Standard PM's scrollIntoView doesn't allow placement control - hence switching to native DOM's peer method.
   let scrollable = view.dom.parentElement
@@ -293,4 +313,12 @@ const selectAndScrollToCreator = (view: EditorView) => ($pos: ResolvedPos) => {
     modalElement?.classList.remove('modal-bottom')
     scrollable.scrollTo({ top: scrollTo, behavior: 'smooth' })
   }
+  const dom = view.nodeDOM($pos.pos)
+  if (dom && dom instanceof HTMLElement) {
+    dom.classList.add(SELECTED_CROSS_REF_CLASS)
+    if (scrollTargetEl && scrollTargetEl !== dom) {
+      scrollTargetEl?.classList.remove(SELECTED_CROSS_REF_CLASS)
+    }
+    scrollTargetEl = dom
+  }
 }

package/src/versions.ts

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

package/src/views/ReactSubView.tsx

@@ -24,6 +24,8 @@ import { ThemeProvider } from 'styled-components'
 import { EditorProps } from '../configs/ManuscriptsEditor'
 import { Trackable } from '../types'
 
+export type SubViewContainer = HTMLDivElement & { unmount: () => void }
+
 export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
   nodeAttrs: NodeT['attrs']
   setNodeAttrs: (nextAttrs: Partial<NodeT['attrs']>) => void
@@ -32,7 +34,7 @@ export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
     getPos: () => number
     node: ManuscriptNode | Trackable<ManuscriptNode>
   }
-  container: HTMLDivElement
+  container: SubViewContainer
 }
 /*
   This is to render components that affect the Prosemirror Document indirectly. Such as dropdown buttons, inputs, advanced UX elements etc.
@@ -46,8 +48,9 @@ function createSubView<T extends Trackable<ManuscriptNode>>(
   getPos: () => number,
   view: ManuscriptEditorView,
   classNames: string[] = []
-): HTMLDivElement {
-  const container = document.createElement('div')
+): SubViewContainer {
+  const container = document.createElement('div') as SubViewContainer
+  container.unmount = () => root.unmount()
   const Wrapped = createView<T>(
     props,
     Component,

package/src/views/cross_reference.ts

@@ -50,11 +50,17 @@ export class CrossReferenceView
 
     const isSupplement = target?.type === schema.nodes.supplement.name
     const derivedLabel = isSupplement
-      ? target?.caption || target?.label || ''
-      : target?.label || ''
+      ? target?.caption || target?.label || '[cross-ref]'
+      : target?.label || '[cross-ref]'
 
     this.dom.textContent = attrs.label || derivedLabel
     this.dom.addEventListener('click', this.handleClick)
+
+    if (this.isOrphaned()) {
+      this.dom.classList.add('orphaned-cross-reference')
+    } else {
+      this.dom.classList.remove('orphaned-cross-reference')
+    }
   }
 
   public initialise = () => {
@@ -74,6 +80,12 @@ export class CrossReferenceView
       handleEnterKey(() => this.handleClick())
     )
   }
+
+  protected isOrphaned() {
+    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
+    const rid = this.node.attrs.rids[0]
+    return !targets?.get(rid)
+  }
 }
 
 export default createNodeView(CrossReferenceView)

package/src/views/cross_reference_editable.ts

@@ -147,9 +147,7 @@ export class CrossReferenceEditableView extends CrossReferenceView {
 
     const can = this.props.getCapabilities()
 
-    const targets = objectsKey.getState(this.view.state) as Map<string, Target>
-    const rid = this.node.attrs.rids[0]
-    const isOrphaned = !targets?.get(rid)
+    const isOrphaned = this.isOrphaned()
 
     const actions: ContextMenuProps['actions'] = [
       {
@@ -173,7 +171,6 @@ export class CrossReferenceEditableView extends CrossReferenceView {
         label: 'Edit',
         icon: 'Edit',
         action: () => this.handleEdit(),
-        disabled: isOrphaned,
       })
     }
 

package/styles/Editor.css

@@ -300,12 +300,24 @@
   color: inherit;
 }
 
+.ProseMirror .orphaned-cross-reference {
+  text-decoration: underline dotted #f35143;
+}
+
 .ProseMirror .bib-item.ProseMirror-selectednode,
 .ProseMirror .citation.ProseMirror-selectednode,
 .ProseMirror .cross-reference.ProseMirror-selectednode {
   background-color: #bce7f6;
 }
 
+.ProseMirror .cross-reference.selected-cross-reference {
+  border-radius: 4px;
+  outline: 2px solid #FE8F1F;
+  outline-offset: 1.5px;
+  background: #FFF9E5;
+  mix-blend-mode: darken;
+}
+
 .ProseMirror .block-table_element .block-gutter {
   padding-top: 1em;
 }