@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/views/affiliations.ts

@@ -0,0 +1,254 @@
+/*!
+ * © 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 { AffiliationNode, schema } from '@manuscripts/transform'
+import { NodeSelection } from 'prosemirror-state'
+
+import {
+  AuthorsAndAffiliationsModals,
+  AuthorsAndAffiliationsModalsProps,
+} from '../components/authors-affiliations/AuthorsAndAffiliationsModals'
+import { alertIcon } from '../icons'
+import { AffiliationAttrs, affiliationName } from '../lib/authors'
+import { handleComment } from '../lib/comments'
+
+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'
+
+//todo update AffiliationNode to AffiliationsNode
+export class AffiliationsView extends BlockView<Trackable<AffiliationNode>> {
+  contextMenu: HTMLElement
+  version: string
+  container: HTMLElement
+  popper?: HTMLElement
+
+  public ignoreMutation = () => true
+  public stopEvent = () => true
+
+  public createElement() {
+    this.container = document.createElement('div')
+    this.container.classList.add('affiliations', 'block')
+    this.container.contentEditable = 'false'
+    this.container.addEventListener('click', this.handleClick)
+    this.dom.setAttribute('contenteditable', 'false')
+    this.dom.appendChild(this.container)
+  }
+
+  public updateContents() {
+    super.updateContents()
+    const affs = affiliationsKey.getState(this.view.state)
+
+    if (!affs) {
+      return
+    }
+    if (this.version === affs.version) {
+      this.updateSelection()
+      return
+    }
+    this.version = affs.version
+    this.container.innerHTML = ''
+    this.buildAffiliations(affs)
+    this.updateSelection()
+  }
+
+  private buildAffiliations(affs: PluginState) {
+    const elements = []
+    for (const affiliation of affs.affiliations) {
+      const index = affs.indexedAffiliationIds.get(affiliation.id)
+      elements.push({
+        index,
+        element: this.buildAffiliation(affiliation, index),
+      })
+    }
+
+    elements
+      .sort(this.sortAffiliations)
+      .forEach((e) => this.container.appendChild(e.element))
+  }
+
+  private buildAffiliation(attrs: AffiliationAttrs, index?: number) {
+    const element = document.createElement('div')
+    element.classList.add('affiliation')
+    element.id = attrs.id
+    addTrackChangesAttributes(attrs, element)
+
+    const marker = document.createElement('span')
+    if (index) {
+      marker.classList.add('affiliation-label')
+      marker.innerText = String(index)
+    } else {
+      marker.innerHTML = alertIcon
+    }
+    element.appendChild(marker)
+
+    const name = document.createElement('span')
+    name.classList.add('affiliation-name')
+    name.innerHTML = affiliationName(attrs)
+    element.appendChild(name)
+    return element
+  }
+
+  private sortAffiliations(aff1: { index?: number }, aff2: { index?: number }) {
+    const index1 = aff1.index || 10000
+    const index2 = aff2.index || 10000
+    return index1 - index2
+  }
+
+  private handleClick = (event: Event) => {
+    const element = event.target as HTMLElement
+    const affiliation = element.closest('.affiliation')
+    if (!affiliation) {
+      return
+    }
+    const { node, pos } = findChildByID(this.view, affiliation.id) || {}
+    if (!node || !pos) {
+      return
+    }
+    if (!isDeleted(node)) {
+      this.showContextMenu(affiliation)
+    }
+
+    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')
+    }
+  }
+
+  handleEdit = (id: string, addNew?: boolean) => {
+    this.props.popper.destroy()
+
+    const affiliations = findChildrenAttrsByType<AffiliationAttrs>(
+      this.view,
+      schema.nodes.affiliation
+    )
+    const affiliation = id ? affiliations.find((a) => a.id === id) : undefined
+    const componentProps: AuthorsAndAffiliationsModalsProps = {
+      initialModal: 'affiliations',
+      view: this.view,
+      affiliation,
+      addNewAffiliation: addNew,
+    }
+
+    this.popper?.remove()
+
+    this.popper = ReactSubView(
+      this.props,
+      AuthorsAndAffiliationsModals,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view
+    )
+    this.container.appendChild(this.popper)
+  }
+
+  public showGroupContextMenu = (): 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 Affiliation',
+        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
+    }
+
+    return undefined
+  }
+
+  public showContextMenu = (element: Element) => {
+    const affiliationNameBlock = element.querySelector('.affiliation-name')
+    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(
+      affiliationNameBlock || element,
+      this.contextMenu,
+      'right-start'
+    )
+  }
+
+  public actionGutterButtons = (): HTMLElement[] => {
+    const contextMenu = this.showGroupContextMenu()
+    return contextMenu ? [contextMenu] : []
+  }
+}
+
+export default createNodeView(AffiliationsView)

package/src/views/alt_title.ts

@@ -0,0 +1,85 @@
+/*!
+ * © 2025 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 { AltTitleNode, ManuscriptNodeView } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import { createKeyboardInteraction } from '../lib/navigation-utils'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class AltTitleView
+  extends BaseNodeView<AltTitleNode>
+  implements ManuscriptNodeView
+{
+  public contentDOM: HTMLElement
+  private removeKeydownListener?: () => void
+
+  public initialise = () => {
+    this.createDOM()
+  }
+
+  protected createDOM = () => {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('manuscript-alt-title')
+    const label = document.createElement('div')
+    label.classList.add('alt-title-label')
+    label.innerHTML = this.node.attrs.type + ' title'
+    label.contentEditable = 'false'
+    this.dom.setAttribute('data-type', this.node.attrs.type)
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('alt-title-text')
+    this.contentDOM.tabIndex = this.node.attrs.type === 'running' ? 0 : -1
+
+    this.removeKeydownListener = createKeyboardInteraction({
+      container: this.contentDOM,
+      navigation: {
+        getItems: () => {
+          const allAltTitles = Array.from(
+            this.view.dom.querySelectorAll<HTMLElement>('.alt-title-text')
+          )
+          return allAltTitles
+        },
+        arrowKeys: { forward: 'ArrowDown', backward: 'ArrowUp' },
+        getCurrentElement: () => this.contentDOM,
+      },
+      additionalKeys: {
+        Enter: (e) => {
+          e.preventDefault()
+          const pos = this.getPos()
+          if (typeof pos === 'number') {
+            const tr = this.view.state.tr.setSelection(
+              TextSelection.create(this.view.state.doc, pos + 1)
+            )
+            this.view.dispatch(tr)
+            this.view.focus()
+          }
+        },
+      },
+    })
+
+    this.dom.appendChild(label)
+    this.dom.appendChild(this.contentDOM)
+    this.updateContents()
+  }
+
+  public destroy() {
+    this.removeKeydownListener?.()
+    super.destroy()
+  }
+}
+
+export default createNodeView(AltTitleView)

package/src/views/alt_titles_section.ts

@@ -0,0 +1,97 @@
+/*!
+ * © 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 { AltTitlesSectionNode } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+import { findChildrenByType } from 'prosemirror-utils'
+
+import { arrowDown } from '../icons'
+import { altTitlesKey } from '../plugins/alt-titles'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+import { handleEnterKey } from '../lib/navigation-utils'
+
+export class AltTitleSectionView extends BlockView<
+  Trackable<AltTitlesSectionNode>
+> {
+  private container: HTMLElement
+
+  public ignoreMutation = () => true
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block')
+    this.dom.appendChild(this.container)
+
+    // figure group
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('alt-titles-section')
+    this.contentDOM.setAttribute('id', this.node.attrs.id)
+    this.container.appendChild(this.contentDOM)
+    this.container.appendChild(this.createClosingPanel())
+  }
+
+  createClosingPanel() {
+    const closingPanel = document.createElement('div')
+    closingPanel.classList.add('alt-titles-closing-panel')
+    const button = document.createElement('button')
+    button.classList.add('alt-titles-closing-button', 'button-reset')
+    button.setAttribute('aria-label', 'Collapse alternative titles')
+
+    button.innerHTML = arrowDown
+    const handleCollapse = () => {
+      const tr = this.view.state.tr.setMeta(altTitlesKey, {
+        collapsed: true,
+      })
+      const titleNode = findChildrenByType(
+        this.view.state.doc,
+        this.view.state.schema.nodes.title
+      )[0]
+      const subtitleNode = findChildrenByType(
+        this.view.state.doc,
+        this.view.state.schema.nodes.subtitle
+      )[0]
+
+      const prev = subtitleNode || titleNode
+      if (prev) {
+        const titleEndPos = prev.pos + prev.node.nodeSize
+        tr.setSelection(TextSelection.create(tr.doc, titleEndPos))
+      }
+      this.view.dispatch(tr)
+
+      // Focus the toggle button after collapse
+      const toggleButton = this.view.dom.querySelector(
+        '.toggle-button-open'
+      ) as HTMLElement
+      toggleButton?.focus()
+    }
+
+    button.addEventListener('click', (e) => {
+      e.preventDefault()
+      handleCollapse()
+    })
+
+    button.addEventListener(
+      'keydown',
+      handleEnterKey(() => handleCollapse())
+    )
+    closingPanel.appendChild(button)
+    return closingPanel
+  }
+}
+
+export default createNodeView(AltTitleSectionView)

package/src/views/attachment.ts

@@ -0,0 +1,160 @@
+/*!
+ * © 2025 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 { AttachmentNode } from '@manuscripts/transform'
+
+import { fileMainDocumentIcon } from '../icons'
+import { FileAttachment } from '../lib/files'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+// Extended file type that includes properties from the article editor
+interface ExtendedFileAttachment extends FileAttachment {
+  type?: string
+}
+
+export class AttachmentView extends BlockView<Trackable<AttachmentNode>> {
+  private container: HTMLElement
+
+  public createElement = () => {
+    this.createContainer()
+    this.renderView()
+  }
+
+  public updateContents() {
+    this.renderView()
+  }
+
+  private renderView() {
+    this.container.innerHTML = ''
+
+    const file = this.getFileFromAttachment()
+    if (!file) {
+      return
+    }
+
+    if (this.isPDF(file)) {
+      this.createPDFPreview(file)
+    }
+  }
+
+  private createContainer() {
+    this.container = document.createElement('div')
+    this.container.classList.add('attachment-item')
+    this.container.addEventListener('click', (e) => {
+      e.stopPropagation()
+      this.setMainDocumentSelection()
+    })
+    this.dom.appendChild(this.container)
+  }
+
+  private isPDF(file: ExtendedFileAttachment) {
+    return file.name?.toLowerCase().endsWith('.pdf') ?? false
+  }
+
+  private getFileFromAttachment() {
+    const { href } = this.node.attrs
+    if (!href) {
+      return null
+    }
+
+    const files = this.props?.getFiles?.() || []
+    return files.find((f: ExtendedFileAttachment) => f.id === href) || null
+  }
+
+  private createPDFPreview(file: ExtendedFileAttachment) {
+    this.container.setAttribute('data-pdf-preview', file.id)
+
+    const header = this.createHeader(file)
+    const content = this.createContent(file)
+
+    this.container.appendChild(header)
+    this.container.appendChild(content)
+  }
+
+  private createHeader(file: ExtendedFileAttachment) {
+    const header = document.createElement('div')
+    header.className = 'attachment-header'
+
+    const icon = this.createIcon()
+    const name = this.createFileName(file.name)
+
+    header.append(icon, name)
+    return header
+  }
+
+  private createIcon() {
+    const icon = document.createElement('span')
+    icon.className = 'attachment-icon'
+    icon.innerHTML = fileMainDocumentIcon
+    return icon
+  }
+
+  private createFileName(fileName: string) {
+    const name = document.createElement('span')
+    Object.assign(name, {
+      textContent: fileName,
+      className: 'attachment-name',
+      title: fileName,
+    })
+    return name
+  }
+
+  private createContent(file: ExtendedFileAttachment) {
+    const content = document.createElement('div')
+    content.className = 'attachment-content'
+
+    const embed = document.createElement('embed')
+    Object.assign(embed, {
+      src: this.getPDFUrl(file),
+      type: 'application/pdf',
+      className: 'attachment-pdf',
+      height: '400px',
+      width: '100%',
+    })
+    embed.style.border = 'none'
+
+    content.appendChild(embed)
+    return content
+  }
+
+  private getPDFUrl(file: ExtendedFileAttachment) {
+    const baseUrl = file.link || file.id || '#'
+
+    if (baseUrl && baseUrl !== '#') {
+      const separator = baseUrl.includes('?') ? '&' : '?'
+      return `${baseUrl}${separator}inline=true`
+    }
+
+    return baseUrl
+  }
+
+  private setMainDocumentSelection() {
+    if (this.props.onEditorClick) {
+      const event = {
+        target: { dataset: { action: 'select-main-document' } },
+        stopPropagation: () => {
+          // Prevent event bubbling - no-op
+        },
+      } as unknown as MouseEvent
+
+      this.props.onEditorClick(event)
+    }
+  }
+}
+
+export default createNodeView(AttachmentView)

package/src/views/attachments.ts

@@ -0,0 +1,72 @@
+/*!
+ * © 2025 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 { ManuscriptNode } from '@manuscripts/transform'
+
+import { arrowUp } from '../icons'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class AttachmentsView extends BlockView<Trackable<ManuscriptNode>> {
+  private container: HTMLElement
+  private collapsed = false
+
+  public ignoreMutation = () => true
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block', 'attachments-container')
+    this.dom.appendChild(this.container)
+
+    this.container.appendChild(this.createPanel())
+
+    const content = document.createElement('div')
+    content.className = 'attachments-content'
+
+    this.container.appendChild(content)
+    this.contentDOM = content
+  }
+
+  createPanel() {
+    const panel = document.createElement('div')
+    panel.classList.add('panel-header')
+
+    const label = document.createElement('span')
+    label.textContent = 'Main document'
+    label.contentEditable = 'false'
+
+    const toggleBtn = document.createElement('button')
+    toggleBtn.classList.add('toggle-btn', 'button-reset')
+
+    toggleBtn.innerHTML = arrowUp
+    toggleBtn.classList.toggle('collapsed', this.collapsed)
+
+    toggleBtn.onclick = () => {
+      this.collapsed = !this.collapsed
+      if (this.contentDOM) {
+        this.contentDOM.style.display = this.collapsed ? 'none' : ''
+      }
+      toggleBtn.classList.toggle('collapsed', this.collapsed)
+    }
+
+    panel.appendChild(label)
+    panel.appendChild(toggleBtn)
+    return panel
+  }
+}
+
+export default createNodeView(AttachmentsView)