@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/views/footnote.ts

@@ -0,0 +1,236 @@
+/*!
+ * © 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, isPendingInsert } from '@manuscripts/track-changes-plugin'
+import { FootnoteNode, ManuscriptNode, schema } from '@manuscripts/transform'
+
+import { isEqual } from 'lodash'
+import { NodeSelection, Transaction } from 'prosemirror-state'
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
+
+import {
+  DeleteFootnoteDialog,
+  DeleteFootnoteDialogProps,
+} from '../components/views/DeleteFootnoteDialog'
+import { alertIcon } from '../icons'
+import { getFootnotesElementState } from '../lib/footnotes'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { handleEnterKey } from '../lib/navigation-utils'
+
+export class FootnoteView extends BaseNodeView<Trackable<FootnoteNode>> {
+  dialog: HTMLElement
+  contextMenu: HTMLDivElement
+
+  public initialise = () => {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('footnote')
+    this.dom.tabIndex = 0
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('footnote-text')
+    this.dom.addEventListener('mousedown', (e) => this.handleClick(e, false))
+    this.dom.addEventListener(
+      'keydown',
+      handleEnterKey((e) => this.handleClick(e, true))
+    )
+    this.updateContents()
+  }
+
+  public updateContents() {
+    super.updateContents()
+
+    const { id, fn } = this.getFootnoteState()
+
+    if (!fn) {
+      return
+    }
+
+    const marker = document.createElement('span')
+    if (!isDeleted(this.node) && fn.unusedFootnoteIDs.has(id)) {
+      marker.classList.add('uncited-footnote')
+      marker.innerHTML = alertIcon
+    } else {
+      marker.classList.add('footnote-marker')
+      marker.innerText = fn.labels.get(id) || ''
+    }
+
+    this.dom.innerHTML = ''
+    this.dom.appendChild(marker)
+    this.contentDOM && this.dom.appendChild(this.contentDOM)
+  }
+
+  getFootnoteState() {
+    const id = this.node.attrs.id
+    const fn = getFootnotesElementState(this.view.state, id)
+    return { id, fn }
+  }
+
+  showContextMenu(element: HTMLElement, autoFocus: boolean) {
+    this.props.popper.destroy()
+
+    const can = this.props.getCapabilities()
+    const { id, fn } = this.getFootnoteState()
+
+    const componentProps: ContextMenuProps = {
+      actions: [],
+    }
+    if (!fn?.unusedFootnoteIDs.has(id)) {
+      componentProps.actions.push({
+        label: 'Go to footnote Refernce',
+        action: () => this.handleMarkerClick(),
+        icon: 'Scroll',
+      })
+    }
+    if (can.editArticle && !isDeleted(this.node)) {
+      componentProps.actions.push({
+        label: 'Delete',
+        action: () => this.handleDeleteClick(),
+        icon: 'Delete',
+      })
+    }
+
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu', 'footnote-context-menu']
+    )
+    this.props.popper.show(
+      element,
+      this.contextMenu,
+      'right-start',
+      true,
+      [],
+      autoFocus
+    )
+  }
+
+  handleClick = (event: Event, fromKeyboard = false) => {
+    const element = event.target as HTMLElement
+    const item = element.closest('.footnote')
+    if (item) {
+      this.showContextMenu(item as HTMLElement, fromKeyboard)
+    }
+  }
+
+  handleMarkerClick = (e?: Event) => {
+    e?.preventDefault()
+    e?.stopPropagation()
+
+    const id = this.node.attrs.id
+    const fn = getFootnotesElementState(this.view.state, id)
+
+    if (!fn) {
+      return
+    }
+
+    for (const [node, pos] of fn.inlineFootnotes) {
+      if (node.attrs.rids.includes(id)) {
+        const tr = this.view.state.tr
+        const selection = NodeSelection.create(this.view.state.doc, pos)
+        tr.setSelection(selection)
+        tr.scrollIntoView()
+        this.view.dispatch(tr)
+      }
+    }
+  }
+
+  handleDeleteClick = (e?: Event) => {
+    e?.preventDefault()
+    e?.stopPropagation()
+    const componentProps: DeleteFootnoteDialogProps = {
+      header: 'Delete footnote',
+      message:
+        'This action will entirely remove the footnote from the list because it will no longer be used.',
+      handleDelete: this.handleDelete,
+    }
+
+    this.dialog = ReactSubView(
+      this.props,
+      DeleteFootnoteDialog,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view
+    )
+
+    this.props.popper.show(this.dom, this.dialog, 'auto', false)
+  }
+
+  handleDelete = () => {
+    const tr = this.view.state.tr
+    this.deleteInlineFootnotes(tr)
+    this.deleteFootnote(tr)
+    this.view.dispatch(tr)
+  }
+
+  deleteInlineFootnotes = (tr: Transaction) => {
+    const id = this.node.attrs.id
+    const fns = getFootnotesElementState(this.view.state, this.node.attrs.id)
+    fns?.inlineFootnotes.forEach(([node, pos]) => {
+      pos = tr.mapping.map(pos)
+      const rids = node.attrs.rids.filter((rid) => rid !== id)
+      if (isEqual(rids, node.attrs.rids)) {
+        return
+      }
+      if (!rids.length) {
+        tr.delete(pos, pos + node.nodeSize)
+      } else {
+        tr.setNodeAttribute(pos, 'rids', rids)
+      }
+    })
+  }
+
+  deleteFootnote = (tr: Transaction) => {
+    const pos = tr.mapping.map(this.getPos())
+    const $pos = tr.doc.resolve(pos)
+    const element = findParentNodeOfTypeClosestToPos(
+      $pos,
+      schema.nodes.footnotes_element
+    )
+    tr.delete(pos, pos + this.node.nodeSize)
+
+    if (
+      element &&
+      getEffectiveChildCount(element.node) <= 1 &&
+      !isPendingInsert(this.node)
+    ) {
+      tr.delete(
+        tr.mapping.map(element.pos),
+        tr.mapping.map(element.pos + element.node.nodeSize)
+      )
+    }
+  }
+}
+
+const getEffectiveChildCount = (node: ManuscriptNode) => {
+  let count = 0
+  for (let i = 0; i < node.childCount; i++) {
+    const child = node.child(i)
+    if (!isDeleted(child)) {
+      count++
+    }
+  }
+  return count
+}
+
+export default createNodeView(FootnoteView)

package/src/views/footnotes_element.ts

@@ -0,0 +1,54 @@
+/*!
+ * © 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 { FootnotesElementNode, ManuscriptNode } from '@manuscripts/transform'
+
+import BlockView from './block_view'
+import { createNodeOrElementView } from './creators'
+
+export class FootnotesElementView extends BlockView<FootnotesElementNode> {
+  public elementType = 'div'
+
+  updateClasses() {
+    super.updateClasses()
+    updateClasses(this.node, this.dom)
+  }
+
+  updateContents() {
+    super.updateContents()
+    this.checkEditability()
+  }
+
+  checkEditability = () => {
+    const editable =
+      this.props.getCapabilities().editArticle && this.node.childCount
+        ? 'true'
+        : 'false'
+    this.contentDOM?.setAttribute('contenteditable', editable)
+    this.dom?.setAttribute('contenteditable', editable)
+  }
+}
+
+const updateClasses = (node: ManuscriptNode, dom: HTMLElement) => {
+  !node.childCount && dom.classList.add('empty-node')
+  dom.classList.add('footnotes-element')
+}
+
+export default createNodeOrElementView(
+  FootnotesElementView,
+  'div',
+  updateClasses
+)

package/src/views/general_table_footnote.ts

@@ -0,0 +1,140 @@
+/*!
+ * © 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 { GeneralTableFootnoteNode, schema } from '@manuscripts/transform'
+import {
+  findChildrenByType,
+  findParentNodeOfTypeClosestToPos,
+} from 'prosemirror-utils'
+
+import {
+  DeleteFootnoteDialog,
+  DeleteFootnoteDialogProps,
+} from '../components/views/DeleteFootnoteDialog'
+import { Trackable } from '../types'
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+import ReactSubView from './ReactSubView'
+import { isDeleted, isPendingInsert } from '@manuscripts/track-changes-plugin'
+
+export class GeneralTableFootnoteView extends BaseNodeView<
+  Trackable<GeneralTableFootnoteNode>
+> {
+  dialog: HTMLElement
+  contextMenu: HTMLDivElement
+
+  public initialise = () => {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('footnote', 'general-table-footnote')
+    this.dom.addEventListener('mousedown', this.handleClick)
+    this.contentDOM = document.createElement('div')
+    this.contentDOM.classList.add('footnote-text')
+    this.updateContents()
+  }
+
+  public updateContents() {
+    super.updateContents()
+    this.dom.innerHTML = ''
+    this.contentDOM && this.dom.appendChild(this.contentDOM)
+  }
+
+  handleClick = (e: Event) => {
+    const element = e.target as HTMLElement
+    const can = this.props.getCapabilities()
+
+    if (can.editArticle) {
+      const item = element.closest('.general-table-footnote')
+      if (item) {
+        this.showContextMenu(item as HTMLElement)
+      }
+    }
+  }
+
+  showContextMenu(element: HTMLElement) {
+    this.props.popper.destroy()
+
+    const componentProps: ContextMenuProps = {
+      actions: [],
+    }
+    if (!isDeleted(this.node)) {
+      componentProps.actions.push({
+        label: 'Delete',
+        action: () => this.handleDeleteClick(),
+        icon: 'Delete',
+      })
+    }
+
+    this.contextMenu = ReactSubView(
+      this.props,
+      ContextMenu,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view,
+      ['context-menu', 'footnote-context-menu']
+    )
+    this.props.popper.show(element, this.contextMenu, 'right-start')
+  }
+
+  handleDeleteClick = () => {
+    const componentProps: DeleteFootnoteDialogProps = {
+      header: 'Delete table general note',
+      message: 'This action will entirely remove the table general note.',
+      handleDelete: this.handleDelete,
+    }
+
+    this.dialog = ReactSubView(
+      this.props,
+      DeleteFootnoteDialog,
+      componentProps,
+      this.node,
+      this.getPos,
+      this.view
+    )
+
+    this.props.popper.show(this.dom, this.dialog, 'auto', false)
+  }
+
+  handleDelete = () => {
+    const tr = this.view.state.tr
+
+    const pos = this.getPos()
+    const $pos = this.view.state.doc.resolve(pos)
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const footer = findParentNodeOfTypeClosestToPos(
+      $pos,
+      schema.nodes.table_element_footer
+    )!
+    const element = findChildrenByType(
+      footer.node,
+      schema.nodes.general_table_footnote
+    )[0]
+    if (element && !isDeleted(element.node)) {
+      const from = tr.mapping.map(pos)
+      const to = tr.mapping.map(from + this.node.nodeSize)
+      tr.delete(from, to)
+    }
+    if (footer.node.childCount <= 1 && !isPendingInsert(element.node)) {
+      const from = tr.mapping.map(footer.pos)
+      const to = tr.mapping.map(from + footer.node.nodeSize)
+      tr.delete(from, to)
+    }
+    this.view.dispatch(tr)
+  }
+}
+
+export default createNodeView(GeneralTableFootnoteView)

package/src/views/hero_image.ts

@@ -0,0 +1,76 @@
+/*!
+ * © 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 { FigureElementNode } from '@manuscripts/transform'
+
+import { arrowUp } from '../icons'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { Trackable } from '../types'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+
+export class HeroImageView extends BlockView<Trackable<FigureElementNode>> {
+  private container: HTMLElement
+  private collapsed = false
+
+  public ignoreMutation = () => true
+
+  public createElement = () => {
+    this.container = document.createElement('div')
+    this.container.classList.add('block', 'hero-image-container')
+    this.dom.appendChild(this.container)
+
+    this.container.appendChild(this.createPanel())
+
+    this.contentDOM = document.createElement('figure')
+    this.contentDOM.classList.add('figure-block', 'hero-image-figure')
+    this.contentDOM.setAttribute('id', this.node.attrs.id)
+
+    this.container.appendChild(this.contentDOM)
+  }
+
+  createPanel() {
+    const panel = document.createElement('div')
+    panel.classList.add('panel-header')
+
+    const label = document.createElement('span')
+    label.textContent = 'Hero image'
+    label.contentEditable = 'false'
+
+    const heroImageToggleBtn = document.createElement('button')
+    heroImageToggleBtn.classList.add('toggle-btn', 'button-reset')
+
+    heroImageToggleBtn.innerHTML = arrowUp
+    heroImageToggleBtn.classList.toggle('collapsed', this.collapsed)
+
+    const handleToggle = () => {
+      this.collapsed = !this.collapsed
+      if (this.contentDOM) {
+        this.contentDOM.style.display = this.collapsed ? 'none' : ''
+      }
+      heroImageToggleBtn.classList.toggle('collapsed', this.collapsed)
+    }
+
+    heroImageToggleBtn.onclick = handleToggle
+    heroImageToggleBtn.addEventListener('keydown', handleEnterKey(handleToggle))
+
+    panel.appendChild(label)
+    panel.appendChild(heroImageToggleBtn)
+    return panel
+  }
+}
+
+export default createNodeView(HeroImageView)

package/src/views/hero_image_editable.ts

@@ -0,0 +1,21 @@
+/*!
+ * © 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 { createEditableNodeView } from './creators'
+import { EditableBlock } from './editable_block'
+import { HeroImageView } from './hero_image'
+
+export default createEditableNodeView(EditableBlock(HeroImageView))