@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/plugins/add-subtitle.ts

@@ -0,0 +1,102 @@
+/*!
+ * © 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 { ManuscriptEditorView, schema } from '@manuscripts/transform'
+import { Plugin, TextSelection } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { v4 as uuidv4 } from 'uuid'
+
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { addAuthorIcon } from '../icons'
+import { handleEnterKey } from '../lib/navigation-utils'
+import { findInsertionPosition } from '../lib/utils'
+
+const createAddSubtitleButton = (handler: () => void) => {
+  const button = document.createElement('span')
+  button.className = 'add-subtitle'
+  button.innerHTML = `${addAuthorIcon} <span class="add-subtitle-text">Add subtitle</span>`
+
+  button.tabIndex = 0
+  const activate = (event: MouseEvent | KeyboardEvent) => {
+    event.preventDefault()
+    handler()
+  }
+  button.addEventListener('mousedown', (e) => {
+    activate(e)
+  })
+  button.addEventListener('keydown', handleEnterKey(activate))
+
+  return button
+}
+
+export default (props: EditorProps) =>
+  new Plugin<null>({
+    props: {
+      decorations: (state) => {
+        const can = props.getCapabilities()
+        if (!can.editArticle) {
+          return DecorationSet.empty
+        }
+
+        let titleHasContent = false
+        let titlePos = -1
+        let hasSubtitles = false
+
+        state.doc.descendants((node, pos) => {
+          if (node.type === schema.nodes.title && node.textContent.trim()) {
+            titleHasContent = true
+            titlePos = pos
+          } else if (node.type === schema.nodes.subtitles) {
+            hasSubtitles = true
+            return false // Stop early if subtitles found
+          }
+        })
+
+        // Show button only if title has content and no subtitles exist
+        if (titleHasContent && !hasSubtitles) {
+          const titleNode = state.doc.nodeAt(titlePos)
+          if (titleNode) {
+            const titleEndPos = titlePos + titleNode.nodeSize
+
+            return DecorationSet.create(state.doc, [
+              Decoration.widget(titleEndPos, (view: ManuscriptEditorView) => {
+                return createAddSubtitleButton(() => {
+                  const subtitlesNode = schema.nodes.subtitles.create(
+                    { id: uuidv4() },
+                    [schema.nodes.subtitle.create({ id: uuidv4() })]
+                  )
+                  const pos = findInsertionPosition(
+                    schema.nodes.subtitles,
+                    state.doc
+                  )
+                  const tr = view.state.tr.insert(pos, subtitlesNode)
+                  const subtitlePos = pos + 1
+                  tr.setSelection(TextSelection.create(tr.doc, subtitlePos))
+
+                  view.dispatch(tr)
+                  view.focus()
+                })
+                },
+                { side: -1 }
+              ),
+            ])
+          }
+        }
+
+        return DecorationSet.empty
+      },
+    },
+  })

package/src/plugins/affiliations.ts

@@ -0,0 +1,136 @@
+/*!
+ * © 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.
+ */
+
+/**
+ * This plugin handles indexing of affiliations that are supposed to be index in accordance with their order in the document.
+ * It also provides that information to components that display that indexing. Additionally it deletes affiliations that have been detached and not used anymore.
+ */
+import { isDeleted } from '@manuscripts/track-changes-plugin'
+import {
+  isAffiliationNode,
+  isContributorNode,
+  ManuscriptNode,
+} from '@manuscripts/transform'
+import { isEqual } from 'lodash'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import {
+  AffiliationAttrs,
+  authorComparator,
+  ContributorAttrs,
+} from '../lib/authors'
+
+export interface PluginState {
+  version: string
+  indexedAffiliationIds: Map<string, number> // key is affiliation id
+  contributors: ContributorAttrs[]
+  affiliations: AffiliationAttrs[]
+  decorations: DecorationSet
+}
+
+export const affiliationsKey = new PluginKey<PluginState>('affiliations')
+
+let id = 1
+export const buildPluginState = (
+  doc: ManuscriptNode,
+  $old?: PluginState
+): PluginState => {
+  const nodes: [ManuscriptNode, number][] = []
+  const contributors: ContributorAttrs[] = []
+  const affiliations: AffiliationAttrs[] = []
+  const deletedContribId = new Set<string>()
+
+  doc.descendants((node, pos) => {
+    const attrs = node.attrs
+    if (isAffiliationNode(node)) {
+      nodes.push([node, pos])
+      affiliations.push(attrs as AffiliationAttrs)
+    }
+    if (isContributorNode(node)) {
+      isDeleted(node) && deletedContribId.add(attrs.id)
+      nodes.push([node, pos])
+      contributors.push(attrs as ContributorAttrs)
+    }
+  })
+
+  if (
+    $old &&
+    isEqual(contributors, $old.contributors) &&
+    isEqual(affiliations, $old.affiliations)
+  ) {
+    return $old
+  }
+
+  // Only index affiliations that are assigned to active contributors
+  const iAffiliations = new Set<string>()
+  contributors
+    .filter((contrib) => !deletedContribId.has(contrib.id))
+    .sort(authorComparator)
+    .forEach((attrs) => {
+      attrs.affiliationIDs?.forEach((aff) => {
+        iAffiliations.add(aff)
+      })
+    })
+
+  // Create index map only for affiliated affiliations
+  const indexedAffiliationIds = new Map<string, number>(
+    [...iAffiliations].map((id, i) => [id, i + 1])
+  )
+
+  const version = String(id++)
+  const decorations: Decoration[] = []
+  nodes.forEach(([node, pos]) => {
+    decorations.push(
+      Decoration.node(pos, pos + node.nodeSize, {
+        version,
+      })
+    )
+  })
+
+  return {
+    version,
+    indexedAffiliationIds,
+    contributors,
+    affiliations,
+    decorations: DecorationSet.create(doc, decorations),
+  }
+}
+
+export default () => {
+  return new Plugin<PluginState>({
+    key: affiliationsKey,
+
+    state: {
+      init(config, instance): PluginState {
+        return buildPluginState(instance.doc)
+      },
+
+      apply(tr, value, oldState, newState): PluginState {
+        const $old = affiliationsKey.getState(oldState)
+        if (!tr.docChanged && $old) {
+          return $old
+        } else {
+          return buildPluginState(newState.doc, $old)
+        }
+      },
+    },
+
+    props: {
+      decorations: (state) => affiliationsKey.getState(state)?.decorations,
+    },
+  })
+}

package/src/plugins/alt-titles.ts

@@ -0,0 +1,219 @@
+/*!
+ * © 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 { skipTracking } from '@manuscripts/track-changes-plugin'
+import {
+  AltTitleNode,
+  AltTitlesSectionNode,
+  ManuscriptEditorView,
+  schema,
+  SubtitlesNode,
+  TitleNode,
+} from '@manuscripts/transform'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { createToggleButton, findInsertionPosition } from '../lib/utils'
+
+export interface PluginState {
+  collapsed: boolean
+  title: [TitleNode, number] | undefined
+  subtitles: [SubtitlesNode, number] | undefined
+  runningTitle: [AltTitleNode, number] | undefined
+  shortTitle: [AltTitleNode, number] | undefined
+  altTitlesSection: [AltTitlesSectionNode, number] | undefined
+}
+
+function getTitlesData(doc: ProseMirrorNode) {
+  let title: [TitleNode, number] | undefined
+  let subtitles: [SubtitlesNode, number] | undefined
+  let runningTitle: [AltTitleNode, number] | undefined
+  let shortTitle: [AltTitleNode, number] | undefined
+  let altTitlesSection: [AltTitlesSectionNode, number] | undefined
+
+  doc.descendants((node, pos) => {
+    if (title && runningTitle && shortTitle && altTitlesSection) {
+      return false
+    }
+    if (node.type === schema.nodes.title) {
+      // if title is empty we don't allow to edit alt titles
+      title = [node as TitleNode, pos]
+    }
+    if (node.type === schema.nodes.subtitles) {
+      subtitles = [node as SubtitlesNode, pos]
+    }
+    if (node.type === schema.nodes.alt_titles) {
+      altTitlesSection = [node as AltTitlesSectionNode, pos]
+    }
+    if (node.type === schema.nodes.alt_title) {
+      if (node.attrs.type === 'running') {
+        runningTitle = [node as AltTitleNode, pos]
+      }
+      if (node.attrs.type === 'short') {
+        shortTitle = [node as AltTitleNode, pos]
+      }
+    }
+  })
+  return { title, subtitles, runningTitle, shortTitle, altTitlesSection }
+}
+
+function selectionInAltTitles(from: number, to: number, state: PluginState) {
+  if (state.runningTitle && state.shortTitle) {
+    const range = {
+      from: Math.min(state.runningTitle[1], state.shortTitle[1]),
+      to: Math.max(
+        state.runningTitle[1] + state.runningTitle[0].nodeSize,
+        state.shortTitle[1] + state.shortTitle[0].nodeSize
+      ),
+    }
+    // if selection overlaps with the range of alt titles, the selection is in the titles
+    return Math.max(from, range.from) <= Math.min(to, range.to)
+  }
+  return false
+}
+
+export const altTitlesKey = new PluginKey<PluginState>('altTitles')
+
+export default () => {
+  return new Plugin<PluginState>({
+    key: altTitlesKey,
+    state: {
+      init: (_, state) => {
+        return { collapsed: true, ...getTitlesData(state.doc) }
+      },
+      apply: (tr, value) => {
+        let newState = value
+        if (tr.docChanged) {
+          newState = { ...newState, ...getTitlesData(tr.doc) }
+        }
+        if (
+          tr.selectionSet &&
+          selectionInAltTitles(tr.selection.from, tr.selection.to, newState)
+        ) {
+          // if selection was set in the titles - open them
+          newState = { ...newState, collapsed: false }
+        }
+        if (tr.getMeta(altTitlesKey)) {
+          newState = {
+            ...newState,
+            ...tr.getMeta(altTitlesKey),
+            ...getTitlesData(tr.doc),
+          }
+        }
+        return newState
+      },
+    },
+    appendTransaction: (transactions, _, newState) => {
+      // in appendTransaction we check if alt_titles nodes exist before opening them for the first time because they are optional
+      const tr = newState.tr
+      if (
+        !transactions.some((tr) => tr.getMeta(altTitlesKey)) ||
+        !altTitlesKey.getState(newState)
+      ) {
+        return null
+      }
+
+      const { title, runningTitle, shortTitle, altTitlesSection } =
+        //eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        altTitlesKey.getState(newState)!
+
+      const schema = newState.schema
+
+      if (!title) {
+        return null
+      }
+
+      if (!altTitlesSection) {
+        const pos = findInsertionPosition(schema.nodes.alt_titles, tr.doc)
+        const section = schema.nodes.alt_titles.create({}, [
+          schema.nodes.alt_title.create({
+            type: 'running',
+          }),
+          schema.nodes.alt_title.create({ type: 'short' }),
+        ])
+        tr.insert(pos, section)
+      } else {
+        const endPos = altTitlesSection[1] + altTitlesSection[0].nodeSize - 1
+        if (!runningTitle) {
+          const title = schema.nodes.alt_title.create({
+            type: 'running',
+          })
+          tr.insert(endPos, title)
+        }
+        if (!shortTitle) {
+          const title = schema.nodes.alt_title.create({ type: 'short' })
+          const newPos = tr.mapping.map(endPos)
+          tr.insert(newPos, title)
+        }
+      }
+      if (tr.docChanged) {
+        return tr.setMeta(altTitlesKey, 'created-missing-titles')
+      } else {
+        return null
+      }
+    },
+    props: {
+      decorations: (state) => {
+        const decorations: Decoration[] = []
+        const pState = altTitlesKey.getState(state)
+        if (!pState || !pState.title) {
+          return DecorationSet.empty
+        }
+
+        if (!pState.collapsed) {
+          state.doc.descendants((node, pos) => {
+            if (node.type === state.schema.nodes.alt_titles) {
+              decorations.push(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  class: 'alt-titles-section-open',
+                })
+              )
+            }
+          })
+        } else if (pState.title[0].textContent.length) {
+          // showing opening button only when titles are collapsed
+          const titleEnd = pState.title[0].nodeSize + pState.title[1]
+          decorations.push(
+            Decoration.widget(
+              titleEnd - 1,
+              (view: ManuscriptEditorView) => {
+                return createToggleButton((e) => {
+                  const tr = view.state.tr.setMeta(altTitlesKey, {
+                    collapsed: false,
+                  })
+                  view.dispatch(skipTracking(tr))
+                  // Only auto-focus first alt title on keyboard interaction, not mouse clicks
+                  const isKeyboardEvent = e.type === 'keydown'
+                  if (isKeyboardEvent) {
+                    const altTitle = view.dom.querySelector(
+                      '.alt-title-text'
+                    ) as HTMLElement
+                    altTitle?.focus()
+                  }
+                }, 'alternative titles')
+              },
+              {
+                side: -1,
+                key: 'title-' + titleEnd,
+              }
+            )
+          )
+        }
+        return DecorationSet.create(state.doc, decorations)
+      },
+    },
+  })
+}

package/src/plugins/bibliography.ts

@@ -0,0 +1,235 @@
+/*!
+ * © 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 {
+  BibliographyItemAttrs,
+  buildCiteprocCitation,
+  CitationNode,
+  isBibliographyElementNode,
+  isBibliographyItemNode,
+  isCitationNode,
+  ManuscriptNode,
+} from '@manuscripts/transform'
+import * as Citeproc from 'citeproc'
+import { isEqual } from 'lodash'
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { CSLProps } from '../configs/ManuscriptsEditor'
+import { PopperManager } from '../lib/popper'
+
+export const bibliographyKey = new PluginKey<PluginState>('bibliography')
+
+export interface PluginState {
+  version: string
+  citationNodes: [CitationNode, number][]
+  citations: Citeproc.Citation[]
+  bibliographyItems: Map<string, BibliographyItemAttrs>
+  renderedCitations: Map<string, string>
+  citationCounts: Map<string, number>
+  engine: Citeproc.Engine
+}
+
+export interface BibliographyProps {
+  cslProps: CSLProps
+  popper: PopperManager
+}
+
+/**
+ * This plugin generates labels for inline citations using citeproc-js.
+ * The citation labels are regenerated when any relevant content changes.
+ */
+export default (props: BibliographyProps) => {
+  return new Plugin<PluginState>({
+    key: bibliographyKey,
+    state: {
+      init(config, instance): PluginState {
+        return buildBibliographyPluginState(instance.doc, props.cslProps)
+      },
+      apply(tr, value): PluginState {
+        if (!tr.steps.length) {
+          return value
+        }
+        return buildBibliographyPluginState(tr.doc, props.cslProps, value)
+      },
+    },
+    props: {
+      decorations(state) {
+        const bib = getBibliographyPluginState(state)
+
+        return DecorationSet.create(
+          state.doc,
+          bib ? buildDecorations(bib, state.doc) : []
+        )
+      },
+    },
+  })
+}
+
+let version = 1
+const buildBibliographyPluginState = (
+  doc: ManuscriptNode,
+  csl: CSLProps,
+  $old?: PluginState
+): PluginState => {
+  const nodesMap = new Map<string, [CitationNode, number]>()
+  const bibliographyItems = new Map<string, BibliographyItemAttrs>()
+  doc.descendants((node, pos) => {
+    if (isCitationNode(node)) {
+      nodesMap.set(node.attrs.id, [node, pos])
+    }
+    if (isBibliographyItemNode(node)) {
+      bibliographyItems.set(node.attrs.id, node.attrs)
+    }
+  })
+
+  const nodes = Array.from(nodesMap.values())
+  const citations = nodes.map(([node]) => buildCiteprocCitation(node.attrs))
+
+  const $new: Partial<PluginState> = {
+    citationNodes: nodes,
+    citations,
+    bibliographyItems,
+  }
+
+  //TODO remove. There should always be a csl style
+  if (!csl.style) {
+    return $new as PluginState
+  }
+
+  if (
+    $old &&
+    isEqual(citations, $old.citations) &&
+    isEqual(bibliographyItems, $old.bibliographyItems)
+  ) {
+    $new.version = $old.version
+    $new.citationCounts = $old.citationCounts
+    $new.engine = $old.engine
+    $new.renderedCitations = $old.renderedCitations
+  } else {
+    const citationCounts = new Map()
+    const rids = nodes.flatMap((e) => e[0].attrs.rids)
+    rids.forEach((rid) => {
+      const count = citationCounts.get(rid) || 0
+      citationCounts.set(rid, count + 1)
+    })
+
+    const engine = new Citeproc.Engine(
+      {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        retrieveLocale: () => csl.locale!,
+        retrieveItem: (id: string) => {
+          const item = bibliographyItems.get(id)
+          if (!item) {
+            throw Error(`Missing bibliography item with id ${id}`)
+          }
+          return item as CSL.Data
+        },
+      },
+      csl.style,
+      'en-US'
+    )
+
+    //create new citations since citeproc modifies the ones passed
+    const citationTexts = engine.rebuildProcessorState(
+      nodes.map(([node]) => buildCiteprocCitation(node.attrs))
+    )
+
+    $new.version = String(version++)
+    $new.citationCounts = citationCounts
+    $new.engine = engine
+    $new.renderedCitations = new Map(citationTexts.map((i) => [i[0], i[2]]))
+  }
+
+  return $new as PluginState
+}
+
+export const buildDecorations = (state: PluginState, doc: ManuscriptNode) => {
+  const decorations: Decoration[] = []
+
+  let hasMissingItems = false
+
+  for (const [node, pos] of state.citationNodes) {
+    const rids = node.attrs.rids
+    if (rids.length) {
+      for (const rid of rids) {
+        if (!state.bibliographyItems.has(rid)) {
+          decorations.push(
+            Decoration.node(pos, pos + node.nodeSize, {
+              class: 'citation-missing',
+            })
+          )
+
+          hasMissingItems = true
+        }
+      }
+    } else {
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, {
+          class: 'citation-empty',
+        })
+      )
+    }
+    decorations.push(
+      Decoration.node(pos, pos + node.nodeSize, {
+        version: state.version,
+      })
+    )
+  }
+
+  if (hasMissingItems) {
+    doc.descendants((node, pos) => {
+      if (isBibliographyElementNode(node)) {
+        decorations.push(
+          Decoration.node(pos, pos + node.nodeSize, {
+            missing: 'true',
+          })
+        )
+
+        decorations.push(
+          Decoration.widget(pos, () => {
+            const el = document.createElement('div')
+            el.className = 'bibliography-missing'
+            el.textContent = `The bibliography could not be generated, due to a missing library item.`
+            return el
+          })
+        )
+      }
+    })
+  }
+
+  /**
+   * Use decorations to trigger bibliography element update.
+   * This is a way to communicate from the plugin to the bibliography element node without actually changing the node.
+   * We had to do that due to the absence of an actual node change.
+   * @TODO Look for a neater solution (using non-trackable attributes on bibliography_element is a proposed solution)
+   */
+  doc.descendants((node, pos) => {
+    if (isBibliographyElementNode(node)) {
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, {
+          version: state.version,
+        })
+      )
+    }
+  })
+
+  return decorations
+}
+
+export const getBibliographyPluginState = (state: EditorState) => {
+  return bibliographyKey.getState(state)
+}