@manuscripts/body-editor 3.17.5 → 3.18.1

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.1';
 export const MATHJAX_VERSION = '3.2.2';

package/src/views/bibliography_element.ts

@@ -19,6 +19,7 @@ import {
   BibliographyElementNode,
   BibliographyItemAttrs,
   BibliographyItemNode,
+  isCitationNode,
 } from '@manuscripts/transform'
 import { NodeSelection } from 'prosemirror-state'
 
@@ -32,7 +33,10 @@ import { findNodeByID } from '../lib/doc'
 import { sanitize } from '../lib/dompurify'
 
 import { deleteNode, findChildByID, saveBibliographyItem } from '../lib/view'
-import { getBibliographyPluginState } from '../plugins/bibliography'
+import {
+  getBibliographyPluginState,
+  PluginState,
+} from '../plugins/bibliography'
 import { commentsKey, setCommentSelection } from '../plugins/comments'
 import { selectedSuggestionKey } from '../plugins/selected-suggestion'
 import { Trackable } from '../types'
@@ -43,6 +47,7 @@ import {
   addTrackChangesAttributes,
   addTrackChangesClassNames,
 } from '@manuscripts/track-changes-plugin'
+import { addIcon } from '../icons'
 
 export class BibliographyElementBlockView extends BlockView<
   Trackable<BibliographyElementNode>
@@ -52,7 +57,7 @@ export class BibliographyElementBlockView extends BlockView<
   private contextMenu: HTMLDivElement
   private version: string
 
-  public showPopper(id: string) {
+  public showPopper(id?: string) {
     const bib = getBibliographyPluginState(this.view.state)
     if (!bib) {
       return
@@ -61,7 +66,7 @@ export class BibliographyElementBlockView extends BlockView<
     const componentProps: ReferencesEditorProps = {
       items: Array.from(bib.bibliographyItems.values()),
       citationCounts: bib.citationCounts,
-      item: bib.bibliographyItems.get(id),
+      item: id ? bib.bibliographyItems.get(id) : undefined,
       onSave: this.handleSave,
       onDelete: this.handleDelete,
     }
@@ -187,7 +192,20 @@ export class BibliographyElementBlockView extends BlockView<
     }
     this.version = bib.version
 
+    this.renderBibs(bib)
+    this.createInlineModalButton()
+    this.updateSelections()
+  }
+
+  renderBibs(bib: PluginState) {
     const nodes: Map<string, BibliographyItemNode> = new Map()
+    const rids: string[] = []
+
+    this.view.state.doc.descendants((node) => {
+      if (isCitationNode(node)) {
+        rids.push(...node.attrs.rids)
+      }
+    })
 
     this.node.descendants((node) => {
       const id = node.attrs.id
@@ -239,6 +257,14 @@ export class BibliographyElementBlockView extends BlockView<
       const comment = createCommentMarker('div', id)
       element.prepend(comment)
 
+      if (!rids.includes(id)) {
+        // node is uncited if not reffed anywhere
+        const uncitedMarker = document.createElement('span')
+        uncitedMarker.innerHTML = 'UNCITED'
+        uncitedMarker.classList.add('uncited-reference-marker')
+        element.prepend(uncitedMarker)
+      }
+
       addTrackChangesAttributes(node.attrs, element)
       addTrackChangesClassNames(node.attrs, element)
 
@@ -257,7 +283,38 @@ export class BibliographyElementBlockView extends BlockView<
     } else {
       this.container.appendChild(wrapper)
     }
-    this.updateSelections()
+  }
+
+  inlineModalButton: HTMLSpanElement | null
+  createInlineModalButton() {
+    const can = this.props.getCapabilities()
+
+    if (!can.editCitationsAndRefs) {
+      if (this.inlineModalButton) {
+        this.inlineModalButton.remove()
+        this.inlineModalButton = null
+      }
+      return
+    }
+
+    if (this.inlineModalButton) {
+      return
+    }
+
+    const $span = document.createElement('span')
+    $span.tabIndex = 0
+    $span.className = 'add-new-reference add-trans-abstract'
+    $span.title = 'Add New Reference'
+    $span.innerHTML = `${addIcon} <span type="button" tabindex="0" class="add-new-reference-text">Add new reference</span>`
+    $span.addEventListener('click', (e) => {
+      this.showPopper()
+    })
+    $span.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.showPopper())
+    )
+    this.inlineModalButton = $span
+    this.dom.appendChild($span)
   }
 
   public createElement = () => {

package/src/views/cross_reference.ts

@@ -18,13 +18,10 @@ 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'
@@ -51,16 +48,10 @@ export class CrossReferenceView
     const attrs = this.node.attrs
     const target = attrs.rids.length ? targets.get(attrs.rids[0]) : undefined
 
-    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()
-        )
-      }
-    }
+    const isSupplement = target?.type === schema.nodes.supplement.name;
+    const derivedLabel = isSupplement
+      ? target?.caption || target?.label || ''
+      : target?.label || ''
 
     this.dom.textContent = attrs.label || derivedLabel
     this.dom.addEventListener('click', this.handleClick)

package/src/views/cross_reference_editable.ts

@@ -16,13 +16,11 @@
 
 import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
 import { isDeleted, skipTracking } from '@manuscripts/track-changes-plugin'
-import { schema, SupplementNode, Target } from '@manuscripts/transform'
+import { schema, 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'
@@ -81,25 +79,13 @@ export class CrossReferenceEditableView extends CrossReferenceView {
 
   public getTargets = () => {
     const targets = objectsKey.getState(this.view.state) as Map<string, Target>
-    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)
-      }
+      acc.push(t)
       return acc
     }, [])
   }

package/src/views/figure_element.ts

@@ -18,7 +18,7 @@ import { schema } from '@manuscripts/transform'
 import { Node } from 'prosemirror-model'
 import { TextSelection } from 'prosemirror-state'
 
-import { addAuthorIcon } from '../icons'
+import { addIcon } from '../icons'
 import { handleEnterKey } from '../lib/navigation-utils'
 import { createNodeView } from './creators'
 import { FigureEditableView } from './figure_editable'
@@ -59,7 +59,7 @@ export class FigureElementView extends ImageElementView {
     if (this.props.getCapabilities()?.editArticle) {
       this.addFigureBtn = Object.assign(document.createElement('button'), {
         className: 'add-button',
-        innerHTML: addAuthorIcon,
+        innerHTML: addIcon,
         title: 'Add figure',
       })
       this.addFigureBtn.addEventListener('click', () => this.addFigure())

package/src/views/headshot_grid.ts

@@ -21,7 +21,7 @@ import {
 } from '@manuscripts/transform'
 import { TextSelection } from 'prosemirror-state'
 
-import { addAuthorIcon } from '../icons'
+import { addIcon } from '../icons'
 import {
   createKeyboardInteraction,
   handleEnterKey,
@@ -61,7 +61,7 @@ export class HeadshotGridView extends BlockView<HeadshotGridNode> {
       this.addHeadshotButton.classList.add('add-headshot-element-button')
       this.addHeadshotButton.setAttribute('data-cy', 'headshot-add')
       this.addHeadshotButton.contentEditable = 'false'
-      this.addHeadshotButton.innerHTML = addAuthorIcon
+      this.addHeadshotButton.innerHTML = addIcon
       const buttonText = document.createElement('span')
       buttonText.classList.add('add-headshot-element-text')
       buttonText.innerText = 'Add Headshot'

package/styles/AdvancedEditor.css

@@ -585,7 +585,7 @@ span.comment-marker {
 .bib-item {
   display: flex;
   margin-bottom: 12px;
-  min-height: 80px;
+  min-height: 60px;
 }
 .bib-item:focus-visible {
   outline: 4px solid var(--focus-outline-color);
@@ -2126,6 +2126,7 @@ th:hover > .table-context-menu-button,
   padding-right: 150px;
 }
 
+.ProseMirror .add-new-reference,
 .ProseMirror .add-trans-abstract {
   display: flex;
   align-items: center;
@@ -2140,16 +2141,42 @@ th:hover > .table-context-menu-button,
   background: unset;
   border: none;
 }
-
+.ProseMirror .add-new-reference {
+  bottom: 100%;
+  top: auto;
+}
+.ProseMirror .add-new-reference svg,
 .ProseMirror .add-trans-abstract svg {
   width: 16px;
   height: 16px;
 }
 
+.ProseMirror .add-new-reference svg rect,
 .ProseMirror .add-trans-abstract svg rect {
   fill: #6e6e6e !important;
 }
 
+.tracking-visible .ProseMirror .bib-item.inserted .uncited-reference-marker,
+.tracking-visible .ProseMirror .deleted.bib-item .uncited-reference-marker {
+  text-decoration: none !important;
+}
+.tracking-visible .ProseMirror .bib-item.deleted {
+  display: block;
+}
+.ProseMirror .uncited-reference-marker {
+  padding: 1px 6px 0 6px;
+  border-radius: 4px;
+  left: calc(100% + 5px);
+  position: absolute;
+  top: 0;
+  color: #353535;
+  line-height: 13px;
+  background-color: #f7b314;
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.ProseMirror .add-new-reference-text,
 .ProseMirror .add-trans-abstract-text {
   font-size: 14px;
   color: #353535;