@manuscripts/body-editor 3.17.3 → 3.18.0

package/src/plugins/translations.ts

@@ -14,20 +14,25 @@
  * limitations under the License.
  */
 
-import { schema } from '@manuscripts/transform'
-import { Node } from 'prosemirror-model'
+import {
+  isAbstractNode,
+  isGraphicalAbstractSectionNode,
+  isTransAbstractNode,
+  isTransGraphicalAbstractNode,
+  schema,
+} from '@manuscripts/transform'
 import { Plugin } from 'prosemirror-state'
 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 { templateAllows } from '../lib/template'
 import {
-  handleEnterKey,
   createKeyboardInteraction,
+  handleEnterKey,
 } from '../lib/navigation-utils'
+import { templateAllows } from '../lib/template'
 
 const createMenuItem = (
   props: EditorProps,
@@ -90,11 +95,6 @@ const createLanguageMenu = (
   return { menu, destroy }
 }
 
-const getInsertionPos = (doc: Node, nodePos: number): number | null => {
-  const node = doc.nodeAt(nodePos)
-  return node ? nodePos + node.nodeSize : null
-}
-
 export default (props: EditorProps) =>
   new Plugin<null>({
     props: {
@@ -110,19 +110,14 @@ export default (props: EditorProps) =>
 
         const widgets: Decoration[] = []
 
-        state.doc.descendants((node, pos, parent) => {
+        state.doc.descendants((node, pos) => {
           const isAbstractSection =
-            (node.type === schema.nodes.section ||
-              node.type === schema.nodes.graphical_abstract_section) &&
-            parent?.type === schema.nodes.abstracts
+            isAbstractNode(node) || isGraphicalAbstractSectionNode(node)
 
           // Show "Add translation" for abstract sections
           if (isAbstractSection) {
-            const isGraphical =
-              node.type === schema.nodes.graphical_abstract_section
             const category = props.sectionCategories.get(node.attrs.category)
-
-            const canEdit = isGraphical
+            const canEdit = isGraphicalAbstractSectionNode(node)
               ? canEditTransGraphicalAbstract &&
                 category &&
                 insertTransGraphicalAbstract(category)(state)
@@ -137,17 +132,13 @@ 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()
                       event.stopPropagation()
-                      const insertPos = getInsertionPos(view.state.doc, pos)
-                      if (insertPos == null) {
-                        return
-                      }
-                      if (isGraphical && category) {
-                        insertTransGraphicalAbstract(category, insertPos)(
+                      if (isGraphicalAbstractSectionNode(node) && category) {
+                        insertTransGraphicalAbstract(category)(
                           view.state,
                           view.dispatch,
                           view
@@ -156,8 +147,7 @@ export default (props: EditorProps) =>
                         insertTransAbstract(
                           view.state,
                           view.dispatch,
-                          node.attrs.category,
-                          insertPos
+                          node.attrs.category
                         )
                       }
                     }
@@ -177,8 +167,7 @@ export default (props: EditorProps) =>
 
           // Language selector for trans_abstract and trans_graphical_abstract nodes
           const isTransNode =
-            node.type === schema.nodes.trans_abstract ||
-            node.type === schema.nodes.trans_graphical_abstract
+            isTransAbstractNode(node) || isTransGraphicalAbstractNode(node)
 
           if (isTransNode) {
             const canEdit =

package/src/versions.ts

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

package/styles/Editor.css

@@ -694,12 +694,14 @@
   grid-template-columns: 52px auto 100px 28px;
 }
 .ProseMirror .block-container.block-section,
+.ProseMirror .block-container.block-abstract,
 .ProseMirror .block-container.block-graphical_abstract_section {
   position: relative;
   display: grid;
   grid-template-columns: auto;
 }
 .ProseMirror .block-container.block-section section,
+.ProseMirror .block-container.block-abstract section,
 .ProseMirror .block-container.block-graphical_abstract_section section {
   position: relative;
 }
@@ -707,6 +709,7 @@
 .ProseMirror
   .block-container:not(
     .block-section,
+    .block-abstract,
     .block-graphical_abstract_section
   ):hover {
   z-index: 2;
@@ -789,6 +792,7 @@
   .block-container:not(
     .block-section,
     .block-box_element,
+    .block-abstract,
     .block-graphical_abstract_section
   ):hover
   .block-gutter,
@@ -796,6 +800,7 @@
   .block-container:not(
     .block-section,
     .block-box_element,
+    .block-abstract,
     .block-graphical_abstract_section
   ):focus-within
   .block-gutter {
@@ -818,6 +823,7 @@
   .block-container:not(
     .block-section,
     .block-box_element,
+    .block-abstract,
     .block-graphical_abstract_section
   ):hover
   .action-gutter,
@@ -825,6 +831,7 @@
   .block-container:not(
     .block-section,
     .block-box_element,
+    .block-abstract,
     .block-graphical_abstract_section
   ):focus-within
   .action-gutter {