@manuscripts/body-editor 3.17.5 → 3.18.0

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/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;