@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/views/author_notes.ts

@@ -0,0 +1,96 @@
+/*!
+ * © 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 { AuthorNotesNode, ManuscriptNode } from '@manuscripts/transform'
+
+import { createHeader } from '../lib/utils'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class AuthorNotesView extends BlockView<Trackable<AuthorNotesNode>> {
+  container: HTMLElement
+  allowedTypes = ['corresp', 'footnote', 'paragraph']
+  correspondenceHeader = 'Correspondence'
+  genericHeader = 'Author notes'
+  genericHeaderIsDisplayed: boolean
+
+  public ignoreMutation = () => true
+  public stopEvent = () => true
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block', 'author-notes-container')
+    this.dom.appendChild(this.container)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.genericHeaderIsDisplayed = false
+    this.dom.setAttribute('contenteditable', 'false')
+    this.container.innerHTML = ''
+
+    const items: { [key: string]: ManuscriptNode[] } = {}
+    this.allowedTypes.forEach((type) => (items[type] = []))
+
+    // Fill items with nodes of allowed types
+    this.node.descendants((node) => {
+      if (this.allowedTypes.includes(node.type.name)) {
+        items[node.type.name].push(node)
+        return false
+      }
+    })
+
+    this.allowedTypes.forEach((typeName) => {
+      if (items[typeName] && items[typeName].length) {
+        const content = this.createContent(typeName, items[typeName])
+        if (content) {
+          this.container.appendChild(content)
+        }
+      }
+    })
+  }
+
+  public createContent = (typeName: string, nodes: ManuscriptNode[]) => {
+    let isNotEmpty = false
+    if (nodes.length) {
+      const container = document.createElement('div')
+      container.classList.add(`${typeName}s-container`)
+      // Show title 'Correspondence' for corresp items
+      // or 'Author notes' for other items, but only once
+      if (typeName === this.allowedTypes[0]) {
+        container.append(createHeader(typeName, this.correspondenceHeader))
+      } else if (!this.genericHeaderIsDisplayed) {
+        this.genericHeaderIsDisplayed = true
+        container.append(createHeader(typeName, this.genericHeader))
+      }
+
+      nodes.forEach((node) => {
+        if (node.textContent) {
+          isNotEmpty = true
+          const div = document.createElement('div')
+          div.classList.add(typeName)
+          div.textContent = node.textContent
+          container.append(div)
+        }
+      })
+      return isNotEmpty ? container : null
+    }
+    return null
+  }
+}
+
+export default createNodeView(AuthorNotesView)

package/src/views/award.ts

@@ -0,0 +1,194 @@
+/*!
+ * © 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 { AwardNode, schema } from '@manuscripts/transform'
+
+import { AwardModal, AwardModalProps } from '../components/awards/AwardModal'
+import {
+  DeleteAwardDialog,
+  DeleteAwardDialogProps,
+} from '../components/awards/DeleteAwardDiaolog'
+import { updateNodeAttrs } from '../lib/view'
+import { Trackable, TrackableAttributes } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+
+export type AwardAttrs = TrackableAttributes<AwardNode>
+export class AwardView extends BlockView<Trackable<AwardNode>> {
+  protected popperContainer: HTMLDivElement
+  private dialog: HTMLElement
+  contextMenu: HTMLElement
+
+  public ignoreMutation = () => true
+  public stopEvent = () => true
+
+  public updateContents() {
+    super.updateContents()
+    if (!this.contentDOM) {
+      return
+    }
+    const { recipient, code, source } = this.node.attrs
+    if (!source) {
+      return
+    }
+
+    this.contentDOM.innerHTML = ''
+    const notAvailable = 'N/A'
+    const fragment = document.createDocumentFragment()
+
+    fragment.appendChild(this.createAwardFragment('award-source', '', source))
+
+    fragment.appendChild(
+      this.createAwardFragment(
+        'award-code',
+        'Grant Number(s): ',
+        code ? code.split(';').join(', ') : notAvailable
+      )
+    )
+
+    fragment.appendChild(
+      this.createAwardFragment(
+        'award-recipient',
+        'Recipient: ',
+        recipient ? recipient : notAvailable
+      )
+    )
+    this.contentDOM.appendChild(fragment)
+    this.updateClasses()
+  }
+
+  private createAwardFragment = (
+    className: string,
+    title: string,
+    content: string
+  ): HTMLDivElement => {
+    const awardFragment = document.createElement('div')
+    awardFragment.classList.add(className)
+    if (title) {
+      const titleElement = document.createElement('span')
+      titleElement.classList.add('title')
+      titleElement.textContent = title
+      awardFragment.appendChild(titleElement)
+    }
+    if (content) {
+      const contentElement = document.createElement('span')
+      contentElement.classList.add('content')
+      contentElement.textContent = content
+      awardFragment.appendChild(contentElement)
+    }
+    return awardFragment
+  }
+
+  public awardContextMenu = (): HTMLElement | undefined => {
+    const can = this.props.getCapabilities()
+    if (!can.editArticle || isDeleted(this.node)) {
+      return undefined
+    }
+    const componentProps: ContextMenuProps = {
+      actions: [
+        {
+          label: 'Edit Funder Info',
+          action: () => {
+            this.props.popper.destroy()
+            this.showAwardModal(this.node)
+          },
+          icon: 'Edit',
+        },
+        {
+          label: 'Delete Funder Info',
+          action: () => {
+            this.props.popper.destroy()
+            this.showDeleteAwardDialog()
+          },
+          icon: 'Delete',
+        },
+      ],
+    }
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu']
+    )
+    return this.contextMenu
+  }
+
+  public actionGutterButtons = (): HTMLElement[] => {
+    const contextMenu = this.awardContextMenu()
+    return contextMenu ? [contextMenu] : []
+  }
+
+  showAwardModal = (award: AwardNode) => {
+    this.dialog?.remove()
+    this.popperContainer?.remove()
+
+    const componentProps: AwardModalProps = {
+      initialData: award?.attrs || ({} as AwardAttrs),
+      onSaveAward: this.handleSaveAward,
+    }
+    this.popperContainer = ReactSubView(
+      this.props,
+      AwardModal,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['award-editor']
+    )
+    this.props.popper.show(this.dom, this.popperContainer, 'auto', false)
+  }
+
+  showDeleteAwardDialog = () => {
+    this.dialog?.remove()
+    const componentProps: DeleteAwardDialogProps = {
+      handleDelete: this.handleDeleteAward,
+    }
+
+    this.popperContainer = ReactSubView(
+      this.props,
+      DeleteAwardDialog,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['award-editor']
+    )
+    this.props.popper.show(this.dom, this.popperContainer, 'auto', false)
+  }
+
+  handleSaveAward = (award: AwardAttrs) => {
+    updateNodeAttrs(this.view, schema.nodes.award, award)
+  }
+
+  handleDeleteAward = () => {
+    const award = this.node
+    const pos = this.getPos()
+    if (award) {
+      const tr = this.view.state.tr
+      const from = pos
+      const to = pos + award.nodeSize
+      this.view.dispatch(tr.delete(from, to))
+    }
+  }
+}
+
+export default createNodeView(AwardView)

package/src/views/awards.ts

@@ -0,0 +1,59 @@
+/*!
+ * © 2024 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 { AwardsNode } from '@manuscripts/transform'
+
+import { createHeader } from '../lib/utils'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class AwardsView extends BaseNodeView<AwardsNode> {
+  public elementType = 'div'
+  container: HTMLElement
+
+  public initialise() {
+    this.createDOM()
+    this.createElement()
+    this.updateContents()
+  }
+
+  public createDOM() {
+    this.dom = document.createElement(this.elementType)
+    this.dom.classList.add(`block-${this.node.type.name}`)
+  }
+
+  public createElement = () => {
+    this.contentDOM = document.createElement(this.elementType)
+    this.contentDOM.className = 'block'
+  }
+
+  public updateContents() {
+    super.updateContents()
+    if (!this.contentDOM) {
+      return
+    }
+    this.dom.innerHTML = ''
+    this.dom.setAttribute('contenteditable', 'false')
+    this.contentDOM.setAttribute('contenteditable', 'false')
+
+    if (this.node.content.size !== 0) {
+      const header = createHeader(this.node.type.name, 'Funder Information')
+      this.dom.append(header, this.contentDOM)
+    }
+  }
+}
+
+export default createNodeView(AwardsView)

package/src/views/base_node_view.ts

@@ -0,0 +1,85 @@
+/*!
+ * © 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 { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform'
+import { NodeView } from 'prosemirror-view'
+
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import {
+  addTrackChangesAttributes,
+  addTrackChangesClassNames,
+} from '@manuscripts/track-changes-plugin'
+
+export class BaseNodeView<Node extends ManuscriptNode> implements NodeView {
+  public dom: HTMLElement
+  public contentDOM?: HTMLElement
+  public elementType = 'div'
+
+  public constructor(
+    public readonly props: EditorProps,
+    public node: Node,
+    public readonly view: ManuscriptEditorView,
+    public readonly getPos: () => number
+  ) {}
+
+  public update(newNode: ManuscriptNode) {
+    // if (!newNode.sameMarkup(this.node)) return false
+    if (newNode.attrs.id !== this.node.attrs.id) {
+      return false
+    }
+    if (newNode.type.name !== this.node.type.name) {
+      return false
+    }
+    this.node = newNode as Node
+    this.updateContents()
+    this.props.popper.update()
+    return true
+  }
+
+  public initialise() {
+    // extend this
+  }
+
+  public updateContents() {
+    //this should be in initialize
+    if (this.node.attrs.id) {
+      this.dom.id = this.node.attrs.id
+    }
+    if (this.contentDOM) {
+      this.contentDOM.removeAttribute('id')
+    }
+    this.handleTrackChanges()
+    // extend this
+  }
+
+  public handleTrackChanges() {
+    addTrackChangesAttributes(this.node.attrs, this.dom)
+    addTrackChangesClassNames(this.node.attrs, this.dom)
+  }
+
+  public selectNode() {
+    this.dom.classList.add('ProseMirror-selectednode')
+  }
+
+  public deselectNode() {
+    this.dom.classList.remove('ProseMirror-selectednode')
+    this.props.popper.destroy()
+  }
+
+  public destroy() {
+    this.props.popper.destroy()
+  }
+}