@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/views/citation_editable.ts

@@ -0,0 +1,312 @@
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+import {
+  BibliographyItemAttrs,
+  ManuscriptNode,
+  schema,
+} from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+import { findChildrenByType } from 'prosemirror-utils'
+
+import {
+  CitationEditor,
+  CitationEditorProps,
+} from '../components/references/CitationEditor'
+import {
+  CitationViewer,
+  CitationViewerProps,
+} from '../components/references/CitationViewer'
+import { handleComment } from '../lib/comments'
+import { Crossref } from '../lib/crossref'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { deleteNode, findChildByID, updateNodeAttrs } 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
+  private can = this.props.getCapabilities()
+
+  createDOM() {
+    super.createDOM()
+    this.dom.addEventListener('mouseup', () => this.handleClick(false))
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey(() => this.handleClick(true))
+    )
+  }
+
+  // we added this to stop select events in case th e user clicks on the comment,
+  // so it won't interfere with the context menu
+  public stopEvent = (event: Event) => {
+    const element = event.target as Element
+    return !!(
+      element.classList.contains('point-comment') ||
+      element.classList.contains('comment-icon') ||
+      element.parentElement?.classList.contains('comment-icon')
+    )
+  }
+
+  public handleClick = (fromKeyboard: boolean) => {
+    if (
+      !this.can.seeReferencesButtons ||
+      this.dom.classList.contains('inconsistency-highlight')
+    ) {
+      this.showPopper()
+    } else if (!isDeleted(this.node)) {
+      const attrs = this.node.attrs
+      if (attrs.rids.length) {
+        this.showContextMenu(fromKeyboard)
+      }
+    }
+  }
+  public selectNode = () => {
+    this.dom.classList.add('ProseMirror-selectednode')
+    if (
+      this.can.seeReferencesButtons &&
+      !isDeleted(this.node) &&
+      !this.dom.classList.contains('inconsistency-highlight')
+    ) {
+      const attrs = this.node.attrs
+      if (!attrs.rids.length) {
+        this.showPopper()
+      }
+    }
+  }
+
+  public destroy = () => {
+    this.editor?.remove()
+    this.props.popper.destroy()
+  }
+
+  public showContextMenu = (autoFocus = true) => {
+    this.props.popper.destroy()
+
+    const can = this.props.getCapabilities()
+    const actions = [
+      {
+        label: 'Comment',
+        action: () => handleComment(this.node, this.view),
+        icon: 'AddComment',
+      },
+    ]
+
+    if (can.editArticle) {
+      actions.unshift({
+        label: 'Edit',
+        action: () => this.handleEdit(),
+        icon: 'Edit',
+      })
+    }
+    const componentProps: ContextMenuProps = {
+      actions,
+    }
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+    this.props.popper.show(
+      this.dom,
+      this.contextMenu,
+      'right-start',
+      false,
+      [],
+      autoFocus
+    )
+  }
+
+  public showPopper = () => {
+    this.props.popper.destroy()
+    const bib = getBibliographyPluginState(this.view.state)
+    if (!bib) {
+      return
+    }
+    const can = this.props.getCapabilities()
+
+    const attrs = this.node.attrs
+    const rids = attrs.rids
+
+    const items = Array.from(bib.bibliographyItems.values())
+
+    if (can.editArticle) {
+      const query = this.node.attrs.selectedText
+      const componentProps: CitationEditorProps = {
+        query,
+        rids,
+        items,
+        citationCounts: bib.citationCounts,
+        sources: [Crossref],
+        onCite: this.handleCite,
+        onUncite: this.handleUncite,
+        onSave: this.handleSave,
+        onDelete: this.handleDelete,
+        onCancel: this.handleCancel,
+        canEdit: can.editCitationsAndRefs,
+      }
+
+      this.editor = ReactSubView(
+        this.props,
+        CitationEditor,
+        componentProps,
+        this.node,
+        this.getPos,
+        this.view,
+        ['citation-editor']
+      )
+    } else {
+      const componentProps: CitationViewerProps = {
+        rids,
+        items,
+      }
+      this.editor = ReactSubView(
+        this.props,
+        CitationViewer,
+        componentProps,
+        this.node,
+        this.getPos,
+        this.view,
+        ['citation-editor']
+      )
+    }
+    this.props.popper.show(this.dom, this.editor, 'auto')
+  }
+
+  private handleEdit = () => {
+    this.showPopper()
+  }
+
+  private handleCancel = () => {
+    // move the cursor after this node
+    const selection = TextSelection.create(
+      this.view.state.tr.doc,
+      this.getPos() + 1
+    )
+    this.view.dispatch(this.view.state.tr.setSelection(selection))
+
+    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 handleUncite = (id: string) => {
+    const attrs = this.node.attrs
+    const rids = attrs.rids.filter((i) => i !== id)
+    const pos = this.getPos()
+    const tr = this.view.state.tr
+
+    if (rids.length > 0) {
+      tr.setNodeMarkup(pos, undefined, {
+        ...attrs,
+        rids,
+      })
+    } else {
+      tr.delete(pos, pos + 1)
+    }
+
+    this.view.dispatch(tr)
+    this.props.popper.destroy()
+  }
+
+  private handleCite = (items: BibliographyItemAttrs[]) => {
+    const bib = getBibliographyPluginState(this.view.state)
+    if (!bib) {
+      return
+    }
+
+    const attrs = this.node.attrs
+    const rids = [...attrs.rids]
+
+    items = items.filter((i) => !rids.includes(i.id))
+
+    for (const item of items) {
+      const existingItem = bib.bibliographyItems.get(item.id)
+
+      if (existingItem) {
+        item.id = existingItem.id
+      } else {
+        this.insertBibliographyNode(item)
+      }
+
+      rids.push(item.id)
+    }
+
+    const tr = this.view.state.tr
+    const pos = this.getPos()
+    tr.setNodeAttribute(pos, 'rids', rids)
+
+    this.view.dispatch(tr)
+    this.handleCancel()
+  }
+
+  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/contributors.ts

@@ -0,0 +1,341 @@
+/*!
+ * © 2023 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ContextMenu, ContextMenuProps } from '@manuscripts/style-guide'
+import {
+  addTrackChangesAttributes,
+  isDeleted,
+} from '@manuscripts/track-changes-plugin'
+import { ContributorsNode, schema } from '@manuscripts/transform'
+
+import { NodeSelection } from 'prosemirror-state'
+
+import {
+  AuthorsAndAffiliationsModals,
+  AuthorsAndAffiliationsModalsProps,
+} from '../components/authors-affiliations/AuthorsAndAffiliationsModals'
+import { authorComparator, authorLabel, ContributorAttrs } from '../lib/authors'
+import { handleComment } from '../lib/comments'
+import { createKeyboardInteraction } from '../lib/navigation-utils'
+import { findChildByID, findChildrenAttrsByType } from '../lib/view'
+import { affiliationsKey, PluginState } from '../plugins/affiliations'
+import { selectedSuggestionKey } from '../plugins/selected-suggestion'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { ORCIDIcon } from '../icons'
+export class ContributorsView extends BlockView<Trackable<ContributorsNode>> {
+  contextMenu: HTMLElement
+  container: HTMLElement
+  inner: HTMLElement
+  popper?: HTMLElement
+  version: string
+
+  public ignoreMutation = () => true
+  public stopEvent = () => true
+  private removeKeydownListener?: () => void
+
+  public updateContents() {
+    super.updateContents()
+    const affs = affiliationsKey.getState(this.view.state)
+    if (!affs) {
+      return
+    }
+    if (affs.version === this.version) {
+      this.updateSelection()
+      return
+    }
+    this.version = affs.version
+    this.container.innerHTML = ''
+
+    this.buildAuthors(affs)
+    this.createLegend()
+    this.updateSelection()
+  }
+
+  buildAuthors = (affs: PluginState) => {
+    const wrapper = document.createElement('div')
+    wrapper.classList.add('contributors-list')
+
+    const can = this.props.getCapabilities()
+    if (can.editMetadata) {
+      wrapper.addEventListener('click', this.handleClick)
+
+      this.removeKeydownListener = createKeyboardInteraction({
+        container: wrapper,
+        navigation: {
+          getItems: () => {
+            return Array.from(
+              wrapper.querySelectorAll<HTMLElement>('.contributor')
+            )
+          },
+          arrowKeys: { forward: 'ArrowRight', backward: 'ArrowLeft' },
+        },
+        additionalKeys: {
+          Enter: (e) => {
+            e.preventDefault()
+            this.handleClick(e)
+          },
+        },
+      })
+    }
+
+    const authors = affs.contributors
+
+    authors.sort(authorComparator).forEach((author, i) => {
+      const jointAuthors = this.isJointFirstAuthor(authors, i)
+      wrapper.appendChild(this.buildAuthor(author, jointAuthors, i))
+      if (i !== authors.length - 1) {
+        const separator = document.createElement('span')
+        separator.classList.add('separator')
+        separator.innerHTML = ','
+        wrapper.appendChild(separator)
+      }
+    })
+
+    this.container.appendChild(wrapper)
+  }
+
+  buildAuthor = (
+    attrs: ContributorAttrs,
+    isJointFirstAuthor: boolean,
+    index: number
+  ) => {
+    const state = this.view.state
+    const affs = affiliationsKey.getState(state)?.indexedAffiliationIds
+
+    const container = document.createElement('span')
+    container.classList.add('contributor')
+    container.setAttribute('id', attrs.id)
+    container.setAttribute('contenteditable', 'false')
+    container.tabIndex = index === 0 ? 0 : -1
+
+    addTrackChangesAttributes(attrs, container)
+
+    const name = authorLabel(attrs)
+    container.innerHTML =
+      attrs.isCorresponding && attrs.email
+        ? `<span class="name">${name} (${attrs.email})</span>`
+        : `<span class="name">${name}</span>`
+
+    if (attrs.ORCID) {
+      container.innerHTML += `<a href="${attrs.ORCID}" target="_blank" class="orcid-link">${ORCIDIcon}</span>`
+    }
+
+    const noteText: string[] = []
+    if (affs) {
+      attrs.affiliationIDs?.map((a) => {
+        const index = affs.get(a)
+        if (index) {
+          noteText.push(index.toString())
+        }
+      })
+    }
+
+    if (isJointFirstAuthor) {
+      container.appendChild(this.createNote('†', 'Joint contributor'))
+    }
+
+    if (noteText) {
+      container.appendChild(this.createNote(noteText.join(',')))
+    }
+
+    if (attrs.isCorresponding) {
+      container.appendChild(this.createNote('*', 'Corresponding author'))
+    }
+
+    return container
+  }
+
+  private createNote(text = '', title = '') {
+    const note = document.createElement('span')
+    note.innerHTML = text
+    if (title) {
+      note.setAttribute('title', title)
+    }
+    note.classList.add('contributor-note')
+    return note
+  }
+
+  private isJointFirstAuthor = (authors: ContributorAttrs[], index: number) => {
+    const author = index === 0 ? authors[index] : authors[index - 1]
+    return Boolean(author.isJointContributor)
+  }
+
+  public createElement = () => {
+    this.inner = document.createElement('div')
+    this.inner.classList.add('authors-container', 'block')
+    this.dom.appendChild(this.inner)
+
+    this.container = document.createElement('div')
+    this.container.classList.add('contributors')
+    this.inner.appendChild(this.container)
+  }
+
+  public createDOM = () => {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('block-container', `block-${this.node.type.name}`)
+  }
+
+  public authorContextMenu = (): HTMLElement | undefined => {
+    const can = this.props.getCapabilities()
+    const componentProps: ContextMenuProps = {
+      actions: [],
+    }
+    if (can.editArticle) {
+      componentProps.actions.push({
+        label: 'Comment',
+        action: () => handleComment(this.node, this.view),
+        icon: 'AddComment',
+      })
+      componentProps.actions.push({
+        label: 'New Author',
+        action: () => this.handleEdit('', true),
+        icon: 'AddOutline',
+      })
+      componentProps.actions.push({
+        label: 'Edit',
+        action: () => this.handleEdit(''),
+        icon: 'Edit',
+      })
+    }
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+    return this.contextMenu
+  }
+
+  public actionGutterButtons = (): HTMLElement[] => {
+    const contextMenu = this.authorContextMenu()
+    return contextMenu ? [contextMenu] : []
+  }
+
+  createLegend = () => {
+    const state = affiliationsKey.getState(this.view.state)
+    if (state?.contributors) {
+      const isThereJointContributor = state.contributors.find(
+        (attrs) => attrs.isJointContributor
+      )
+      if (isThereJointContributor) {
+        const element = document.createElement('p')
+        element.classList.add('contributors-legend')
+        element.innerHTML =
+          '<span class="symbol">†</span>These authors contributed equally to this work.'
+        this.container.appendChild(element)
+      }
+    }
+  }
+  private handleClick = (event: Event) => {
+    this.props.popper.destroy()
+    const element = event.target as HTMLElement
+    const author = element.closest('.contributor')
+    if (!author) {
+      return
+    }
+    const { node, pos } = findChildByID(this.view, author.id) || {}
+    if (!node || !pos) {
+      return
+    }
+    if (!isDeleted(node)) {
+      this.showContextMenu(author)
+    }
+    const view = this.view
+    const tr = view.state.tr
+    tr.setSelection(NodeSelection.create(view.state.doc, pos))
+    view.dispatch(tr)
+  }
+
+  private updateSelection = () => {
+    const state = this.view.state
+    const selection = selectedSuggestionKey.getState(state)?.suggestion
+    this.container
+      .querySelectorAll('.selected-suggestion')
+      .forEach((e) => e.classList.remove('selected-suggestion'))
+    if (selection) {
+      const item = this.container.querySelector(
+        `[data-track-id="${selection.id}"]`
+      )
+      item?.classList.add('selected-suggestion')
+    }
+  }
+
+  public showContextMenu = (element: Element) => {
+    this.props.popper.destroy() // destroy the old context menu
+
+    const componentProps: ContextMenuProps = {
+      actions: [
+        {
+          label: 'Edit',
+          action: () => this.handleEdit(element.id),
+          icon: 'Edit',
+        },
+      ],
+    }
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+    this.props.popper.show(element, this.contextMenu, 'right-start')
+  }
+
+  handleEdit = (id: string, addNew?: boolean) => {
+    this.props.popper.destroy()
+
+    const contributors = findChildrenAttrsByType<ContributorAttrs>(
+      this.view,
+      schema.nodes.contributor
+    )
+    const author = id ? contributors.filter((a) => a.id === id)[0] : undefined
+    const componentProps: AuthorsAndAffiliationsModalsProps = {
+      initialModal: 'authors',
+      view: this.view,
+      author,
+      addNewAuthor: addNew,
+    }
+
+    this.popper?.remove()
+
+    this.popper = ReactSubView(
+      this.props,
+      AuthorsAndAffiliationsModals,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view
+    )
+
+    this.container.appendChild(this.popper)
+  }
+
+  public destroy() {
+    this.removeKeydownListener?.()
+    super.destroy()
+  }
+}
+
+export default createNodeView(ContributorsView)