@manuscripts/body-editor 3.16.0 → 3.16.2

package/src/plugins/objects.ts

@@ -60,7 +60,7 @@ export default () => {
             if (id) {
               const target = targets.get(id)
 
-              if (target) {
+              if (target && target.label) {
                 const caption = findChildren(
                   node,
                   (node) =>
@@ -115,11 +115,7 @@ export default () => {
  * Returns the position for a widget decoration when there is no caption.
  * Falls back to the end of the node.
  */
-const getDecorationPos = (
-  target: Target,
-  doc: ManuscriptNode,
-  pos: number
-) => {
+const getDecorationPos = (target: Target, doc: ManuscriptNode, pos: number) => {
   const $pos = doc.resolve(pos + 1)
   return $pos.end()
 }

package/src/toolbar.tsx

@@ -24,6 +24,7 @@ import {
   ToolbarBoldIcon,
   ToolbarBoxedTextIcon,
   ToolbarCitationIcon,
+  ToolbarCrossReferenceIcon,
   ToolbarEquationIcon,
   ToolbarFigureIcon,
   ToolbarIndentIcon,
@@ -47,9 +48,11 @@ import {
   addInlineComment,
   blockActive,
   canInsert,
+  canInsertCrossReference,
   Dispatch,
   insertBlock,
   insertBoxElement,
+  insertCrossReference,
   insertEmbed,
   insertInlineCitation,
   insertLink,
@@ -179,6 +182,12 @@ export const toolbar: ToolbarConfig = {
       isEnabled: isEnabled(canInsert(schema.nodes.highlight_marker)), // TODO: check both ends of selection
       run: addInlineComment,
     },
+    cross_reference: {
+      title: 'Insert cross-reference',
+      content: <ToolbarCrossReferenceIcon />,
+      isEnabled: isEnabled(canInsertCrossReference),
+      run: insertCrossReference,
+    },
     citation: {
       title: 'Insert citation',
       content: <ToolbarCitationIcon />,

package/src/versions.ts

@@ -1,3 +1,3 @@
 //THIS FILE WAS GENERATED BY versions.mjs
-export const VERSION = '3.16.0';
+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)

package/src/views/cross_reference.ts

@@ -17,10 +17,14 @@
 import {
   CrossReferenceNode,
   ManuscriptNodeView,
+  schema,
+  SupplementNode,
   Target,
 } from '@manuscripts/transform'
 
+import { findNodeByID } from '../lib/doc'
 import { handleEnterKey } from '../lib/navigation-utils'
+import { getSupplementDisplayLabel } from '../lib/supplements'
 import { objectsKey } from '../plugins/objects'
 import { Trackable } from '../types'
 import { BaseNodeView } from './base_node_view'
@@ -45,10 +49,20 @@ export class CrossReferenceView
     super.updateContents()
     const targets = objectsKey.getState(this.view.state) as Map<string, Target>
     const attrs = this.node.attrs
+    const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined
 
-    const label = attrs.rids.length && targets.get(attrs.rids[0])?.label
-    // attrs.label contains custom text inserted at cross-reference creation time
-    this.dom.textContent = attrs.label || label || ''
+    let derivedLabel = target?.label || ''
+    if (target?.type === schema.nodes.supplement.name && target.href) {
+      const found = findNodeByID(this.view.state.doc, target.id)
+      if (found) {
+        derivedLabel = getSupplementDisplayLabel(
+          found.node as SupplementNode,
+          this.props.getFiles()
+        )
+      }
+    }
+
+    this.dom.textContent = attrs.label || derivedLabel
     this.dom.addEventListener('click', this.handleClick)
   }
 

package/src/views/cross_reference_editable.ts

@@ -14,11 +14,15 @@
  * limitations under the License.
  */
 
-import { skipTracking } from '@manuscripts/track-changes-plugin'
-import { schema, Target } from '@manuscripts/transform'
+import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import { isDeleted, skipTracking } from '@manuscripts/track-changes-plugin'
+import { schema, SupplementNode, Target } from '@manuscripts/transform'
 import { TextSelection } from 'prosemirror-state'
 
 import { CrossReferenceItems } from '../components/views/CrossReferenceItems'
+import { handleComment } from '../lib/comments'
+import { findNodeByID } from '../lib/doc'
+import { getSupplementDisplayLabel } from '../lib/supplements'
 import { objectsKey } from '../plugins/objects'
 import { createEditableNodeView } from './creators'
 import { CrossReferenceView } from './cross_reference'
@@ -26,6 +30,7 @@ import ReactSubView from './ReactSubView'
 
 export class CrossReferenceEditableView extends CrossReferenceView {
   protected popperContainer: HTMLDivElement
+  protected contextMenu: HTMLElement
 
   public selectNode = () => {
     const { getCapabilities } = this.props
@@ -37,12 +42,20 @@ export class CrossReferenceEditableView extends CrossReferenceView {
       return
     }
 
+    this.showPicker()
+  }
+
+  public showPicker = () => {
+    const rids = this.node.attrs.rids
+
     const componentProps = {
       handleSelect: this.handleSelect,
       targets: this.getTargets(),
+      files: this.props.getFiles(),
       handleCancel: this.handleCancel,
       currentTargetId: rids[0],
       currentCustomLabel: this.node.attrs.label,
+      isEdit: rids.length > 0,
     }
 
     this.popperContainer = ReactSubView(
@@ -51,8 +64,7 @@ export class CrossReferenceEditableView extends CrossReferenceView {
       componentProps,
       this.node,
       this.getPos,
-      this.view,
-      ['cross-reference-editor']
+      this.view
     )
     this.popperContainer.setAttribute('tabindex', '0')
     this.props.popper.show(this.dom, this.popperContainer, 'auto')
@@ -68,13 +80,28 @@ export class CrossReferenceEditableView extends CrossReferenceView {
   }
 
   public getTargets = () => {
-    const excludedTypes = [schema.nodes.image_element.name]
-
     const targets = objectsKey.getState(this.view.state) as Map<string, Target>
-
-    return Array.from(targets.values()).filter(
-      (t) => !excludedTypes.includes(t.type)
-    )
+    const files = this.props.getFiles()
+    const fileMap = new Map(files.map((f) => [f.id, f.name]))
+    const excludedTypes = [schema.nodes.image_element.name]
+    const supplement = schema.nodes.supplement.name
+
+    return Array.from(targets.values()).reduce<Target[]>((acc, t) => {
+      if (excludedTypes.includes(t.type)) {
+        return acc
+      }
+      // Prefer caption title, then URL / file name for supplements and weblinks.
+      if (t.type === supplement && t.href) {
+        const found = findNodeByID(this.view.state.doc, t.id)
+        const label = found
+          ? getSupplementDisplayLabel(found.node as SupplementNode, files)
+          : (fileMap.get(t.href) ?? t.href)
+        acc.push({ ...t, label, caption: '' })
+      } else {
+        acc.push(t)
+      }
+      return acc
+    }, [])
   }
 
   public handleCancel = () => {
@@ -82,7 +109,17 @@ export class CrossReferenceEditableView extends CrossReferenceView {
       const { state } = this.view
 
       const pos = this.getPos()
-      const tr = state.tr.delete(pos, pos + this.node.nodeSize)
+      if (pos === undefined) {
+        return
+      }
+      const label = this.node.attrs.label
+      const tr = label
+        ? state.tr.replaceWith(
+            pos,
+            pos + this.node.nodeSize,
+            state.schema.text(label)
+          )
+        : state.tr.delete(pos, pos + this.node.nodeSize)
       tr.setSelection(TextSelection.create(tr.doc, pos))
       skipTracking(tr)
       this.view.dispatch(tr)
@@ -108,6 +145,81 @@ export class CrossReferenceEditableView extends CrossReferenceView {
 
     this.destroy()
   }
+
+  public handleClick = () => {
+    if (isDeleted(this.node)) {
+      return
+    }
+    if (!this.node.attrs.rids.length) {
+      return
+    }
+    this.showContextMenu()
+  }
+
+  public showContextMenu = () => {
+    this.props.popper.destroy()
+
+    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 actions: ContextMenuProps['actions'] = [
+      {
+        label: 'Comment',
+        icon: 'AddComment',
+        action: () => {
+          this.props.popper.destroy()
+          handleComment(this.node, this.view)
+        },
+      },
+      {
+        label: 'Go to content',
+        icon: 'Scroll',
+        action: () => this.navigateToTarget(),
+        disabled: isOrphaned,
+      },
+    ]
+
+    if (can?.editArticle) {
+      actions.unshift({
+        label: 'Edit',
+        icon: 'Edit',
+        action: () => this.handleEdit(),
+        disabled: isOrphaned,
+      })
+    }
+
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      { actions },
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+
+    this.props.popper.show(this.dom, this.contextMenu, 'right-start', false)
+  }
+
+  private navigateToTarget = () => {
+    this.props.popper.destroy()
+    const rids = this.node.attrs.rids
+    if (!rids.length) {
+      return
+    }
+    this.props.navigate({
+      pathname: this.props.location.pathname,
+      hash: '#' + rids[0],
+    })
+  }
+
+  private handleEdit = () => {
+    this.props.popper.destroy()
+    this.showPicker()
+  }
 }
 
 export default createEditableNodeView(CrossReferenceEditableView)

package/src/views/figure_editable.ts

@@ -240,6 +240,10 @@ export class FigureEditableView extends FigureView {
   }
 
   public addTools() {
+    if (this.getPos() === undefined) {
+      return
+    }
+
     this.manageReactTools()
 
     const existingDragHandlers =

package/src/views/supplement.ts

@@ -25,7 +25,6 @@ import { Trackable } from '../types'
 import { BaseNodeView } from './base_node_view'
 import { createNodeView } from './creators'
 
-
 export class SupplementView extends BaseNodeView<Trackable<SupplementNode>> {
   private supplementInfoEl: HTMLDivElement
   private static currentDragSupplementId: string | null = null

package/src/views/supplements.ts

@@ -32,7 +32,7 @@ export class SupplementsView extends BlockView<Trackable<SupplementsNode>> {
     this.toggleButton = document.createElement('button')
     this.toggleButton.classList.add('supplements-toggle-btn', 'button-reset')
     this.toggleButton.innerHTML = arrowUp
-    
+
     const handleToggle = () => {
       this.collapsed = !this.collapsed
       this.toggleContent()
@@ -63,4 +63,4 @@ export class SupplementsView extends BlockView<Trackable<SupplementsNode>> {
   }
 }
 
-export default createNodeView(SupplementsView)
+export default createNodeView(SupplementsView)