@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/plugins/comments.ts

@@ -0,0 +1,328 @@
+/*!
+ * © 2022 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 {
+  CommentNode,
+  ManuscriptNode,
+  ManuscriptTransaction,
+  schema,
+} from '@manuscripts/transform'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { findChildrenByType, NodeWithPos } from 'prosemirror-utils'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+
+import {
+  Comment,
+  CommentAttrs,
+  CommentKey,
+  CommentRange,
+  CommentSelection,
+  createCommentMarker,
+  getCommentKey,
+  HighlightMarkerAttrs,
+  InlineComment,
+  isReply,
+  NodeComment,
+} from '../lib/comments'
+
+export const commentsKey = new PluginKey<PluginState>('comments')
+const COMMENT_SELECTION = 'comment-selection'
+const EMPTY_SELECTION = {}
+
+export interface PluginState {
+  decorations: DecorationSet
+  comments: Map<string, Comment>
+  commentsByKey: Map<CommentKey, Comment[]>
+  selection?: CommentSelection
+}
+
+const handleCommentMarkerInteraction = (
+  view: EditorView,
+  target: HTMLElement | null
+) => {
+  const state = view.state
+  const com = commentsKey.getState(state)
+  const marker = target?.closest('[data-key]') as HTMLElement
+
+  // Don't dispatch a transaction if both empty
+  if (!marker && !com?.selection) {
+    return false
+  }
+
+  const tr = state.tr
+  if (marker) {
+    const key = marker.dataset.key as CommentKey
+    setCommentSelection(tr, key, undefined, false)
+  } else {
+    clearCommentSelection(tr)
+  }
+  view.dispatch(tr)
+}
+
+/**
+ * This plugin creates a icon decoration for both inline and block comment.
+ */
+export default () => {
+  return new Plugin<PluginState>({
+    key: commentsKey,
+    state: {
+      init: (_, state) => {
+        return buildPluginState(state.doc)
+      },
+      apply: (tr, value) => {
+        if (tr.docChanged || tr.getMeta(COMMENT_SELECTION)) {
+          const selection = tr.getMeta(COMMENT_SELECTION) || value.selection
+          return buildPluginState(
+            tr.doc,
+            selection === EMPTY_SELECTION ? undefined : selection
+          )
+        }
+        return value
+      },
+    },
+    props: {
+      decorations: (state) => commentsKey.getState(state)?.decorations,
+      handleClick: (view: EditorView, pos: number, e: MouseEvent) => {
+        const target = e.target as HTMLElement
+        return handleCommentMarkerInteraction(view, target)
+      },
+      handleDOMEvents: {
+        keydown: (view: EditorView, e: KeyboardEvent) => {
+          if (e.key !== 'Enter') {
+            return false
+          }
+          const target = document.activeElement as HTMLElement
+          const marker = target?.closest('[data-key]') as HTMLElement | null
+          if (!marker) {
+            return false
+          }
+          e.preventDefault()
+          handleCommentMarkerInteraction(view, target)
+          return true
+        },
+      },
+    },
+  })
+}
+
+export const setCommentSelection = (
+  tr: ManuscriptTransaction,
+  key: CommentKey,
+  id: string | undefined,
+  isNew: boolean
+) => {
+  tr.setMeta(COMMENT_SELECTION, {
+    key,
+    id,
+    isNew,
+  })
+  tr.setMeta('origin', commentsKey)
+  return tr
+}
+
+export const clearCommentSelection = (tr: ManuscriptTransaction) => {
+  tr.setMeta(COMMENT_SELECTION, EMPTY_SELECTION)
+  tr.setMeta('origin', commentsKey)
+  return tr
+}
+
+const findCommentRanges = (doc: ManuscriptNode) => {
+  const nodes = findChildrenByType(doc, schema.nodes.highlight_marker)
+
+  const ranges = new Map<string, CommentRange>()
+
+  let start
+
+  for (const { node, pos } of nodes) {
+    const attrs = node.attrs as HighlightMarkerAttrs
+    const position = attrs.position
+    if (position === 'point') {
+      ranges.set(attrs.id, {
+        pos: pos + 1,
+        size: 0,
+      })
+    } else if (position === 'start') {
+      start = pos + 1
+    } else if (position === 'end' && start) {
+      ranges.set(attrs.id, {
+        pos: start,
+        size: pos - start,
+      })
+      start = undefined
+    }
+  }
+  return ranges
+}
+
+const findComments = (doc: ManuscriptNode) => {
+  const comments = findChildrenByType(doc, schema.nodes.comment)
+
+  const commentsByTarget = new Map<string, NodeWithPos[]>()
+  for (const comment of comments) {
+    const targetID = comment.node.attrs.target
+    const list = commentsByTarget.get(targetID) || []
+    commentsByTarget.set(targetID, [...list, comment])
+  }
+
+  return commentsByTarget
+}
+
+const buildPluginState = (
+  doc: ManuscriptNode,
+  selection?: CommentSelection
+) => {
+  const commentsByTarget = findComments(doc)
+  const ranges = findCommentRanges(doc)
+
+  const decorations: Decoration[] = []
+  const allComments: Comment[] = []
+
+  doc.descendants((node, pos) => {
+    const id = node.attrs.id
+    const comments = commentsByTarget.get(id)
+    if (!comments || !comments.length) {
+      return
+    }
+
+    const target = {
+      node,
+      pos,
+    }
+
+    const nodeComments: NodeComment[] = []
+    const highlightComments: InlineComment[] = []
+    const pointComments: InlineComment[] = []
+
+    comments
+      .map((c) => {
+        const attrs = c.node.attrs as CommentAttrs
+        const id = attrs.id
+        const range = ranges.get(id)
+        const key = getCommentKey(attrs, range, node)
+        return {
+          key,
+          node: c.node as CommentNode,
+          pos: c.pos,
+          target,
+          range,
+        }
+      })
+      .forEach((c) => {
+        allComments.push(c)
+        if (!isReply(c)) {
+          if (!c.range) {
+            nodeComments.push(c)
+          } else if (c.range.size) {
+            highlightComments.push(c as InlineComment)
+          } else {
+            pointComments.push(c as InlineComment)
+          }
+        }
+      })
+
+    for (const comment of highlightComments) {
+      const key = comment.key
+      const range = comment.range
+      decorations.push(createHighlightDecoration(key, range, selection))
+    }
+    if (pointComments.length) {
+      groupByKey(pointComments).forEach((comments, key) => {
+        const count = comments.length
+        const pos = comments[0].range.pos
+        decorations.push(
+          createMarkerDecoration(key, 'span', pos, count, selection)
+        )
+      })
+    }
+    if (nodeComments.length) {
+      const count = nodeComments.length
+      const key = nodeComments[0].key
+      const tagName = node.isAtom ? 'span' : 'div'
+      const dpos = getDecorationPos(node, pos)
+      decorations.push(
+        createMarkerDecoration(key, tagName, dpos, count, selection)
+      )
+    }
+  })
+
+  return {
+    decorations: DecorationSet.create(doc, decorations),
+    comments: new Map(allComments.map((c) => [c.node.attrs.id, c])),
+    commentsByKey: groupByKey(allComments),
+    selection,
+  }
+}
+
+const groupByKey = <T extends Comment>(comments: T[]): Map<CommentKey, T[]> => {
+  const map = new Map()
+  for (const comment of comments) {
+    const key = comment.key
+    const value = map.get(key) || []
+    map.set(key, [...value, comment])
+  }
+  return map
+}
+
+const getDecorationPos = (node: ManuscriptNode, pos: number) => {
+  switch (node.type) {
+    case schema.nodes.affiliations:
+    case schema.nodes.paragraph:
+    case schema.nodes.embed:
+    case schema.nodes.contributors:
+    case schema.nodes.hero_image:
+    case schema.nodes.supplements:
+      return pos
+    case schema.nodes.keywords:
+      return pos + 2
+    default:
+      return pos + 1
+  }
+}
+
+const createHighlightDecoration = (
+  key: CommentKey,
+  range: CommentRange,
+  selection: CommentSelection | undefined
+) => {
+  const classNames = ['highlight']
+  if (key === selection?.key) {
+    classNames.push('selected-comment')
+  }
+  return Decoration.inline(range.pos, range.pos + range.size, {
+    nodeName: 'span',
+    class: classNames.join(' '),
+    'data-key': key,
+  })
+}
+
+const createMarkerDecoration = (
+  key: CommentKey,
+  tagName: string,
+  pos: number,
+  count: number,
+  selection: CommentSelection | undefined
+) => {
+  const isSelected = selection?.key === key
+  const toDOM = () => {
+    const marker = createCommentMarker(tagName, key, count)
+    if (isSelected) {
+      marker.classList.add('selected-comment')
+    }
+    return marker
+  }
+  return Decoration.widget(pos, toDOM, {
+    key: `${key}-${count}-${isSelected}`,
+  })
+}

package/src/plugins/cross-references.ts

@@ -0,0 +1,70 @@
+/*!
+ * © 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 { schema } from '@manuscripts/transform'
+import { isEqual } from 'lodash'
+import { Node } from 'prosemirror-model'
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { objectsKey } from './objects'
+
+export default () => {
+  return new Plugin({
+    state: {
+      init() {
+        // Initialize decorations with an empty set
+        return DecorationSet.empty
+      },
+      apply(tr, oldDecorationSet, oldState, newState) {
+        let decoSet = oldDecorationSet
+        // Check if document or targets have changed
+        const oldTargets = objectsKey.getState(oldState)
+        const newTargets = objectsKey.getState(newState)
+        if (tr.docChanged && !isEqual(oldTargets, newTargets)) {
+          const decorations = createDecorations(tr.doc)
+          decoSet = DecorationSet.create(tr.doc, decorations)
+        }
+
+        return decoSet
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state)
+      },
+    },
+  })
+}
+
+/**
+ * Helper function to create decorations for specific node types.
+ * @param {Node} doc - The document to scan.
+ * @returns {Decoration[]} - An array of decorations.
+ */
+function createDecorations(doc: Node): Decoration[] {
+  const decorations: Decoration[] = []
+  doc.descendants((node, pos) => {
+    if (node.type === schema.nodes.cross_reference) {
+      decorations.push(
+        Decoration.node(pos, pos + node.nodeSize, {
+          class: `decorated-${Date.now()}`,
+        })
+      )
+    }
+  })
+  return decorations
+}

package/src/plugins/detect-inconsistency/detect-inconsistency-utils.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 { ManuscriptEditorState, ManuscriptNode } from '@manuscripts/transform'
+import { NodeSelection } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { EditorProps } from '../../configs/ManuscriptsEditor'
+import { affiliationsKey } from '../affiliations'
+import { getBibliographyPluginState } from '../bibliography'
+import { footnotesKey } from '../footnotes'
+import { objectsKey } from '../objects'
+import { ValidatorContext, validators } from './validators'
+
+export type Inconsistency = {
+  type: 'warning'
+  category: 'missing-reference' | 'not-used' | 'empty-content'
+  severity: 'error' | 'warning'
+  message: string
+  nodeDescription: string
+  node: ManuscriptNode
+  pos: number
+}
+
+export type PluginState = {
+  decorations: DecorationSet
+  inconsistencies: Array<Inconsistency>
+  showDecorations: boolean
+}
+
+export const createDecoration = (
+  node: ManuscriptNode,
+  pos: number,
+  selectedPos: number | null
+) => {
+  const classNames = ['inconsistency-highlight']
+  if (selectedPos === pos) {
+    classNames.push('selected-suggestion')
+  }
+
+  return Decoration.node(pos, pos + node.nodeSize, {
+    class: classNames.join(' '),
+    'data-inconsistency-type': 'warning',
+  })
+}
+
+export const buildPluginState = (
+  state: ManuscriptEditorState,
+  props: EditorProps,
+  showDecorations: boolean
+): PluginState => {
+  const inconsistencies: Inconsistency[] = []
+  const decorations: Decoration[] = []
+
+  const selection = state.selection
+  let selectedPos: number | null = null
+
+  if (selection instanceof NodeSelection) {
+    selectedPos = selection.from
+  }
+
+  const context: ValidatorContext = {
+    pluginStates: {
+      affiliations: affiliationsKey.getState(state)?.indexedAffiliationIds,
+      bibliography: getBibliographyPluginState(state)?.bibliographyItems,
+      objects: objectsKey.getState(state),
+      footnotes: footnotesKey.getState(state)?.footnotesElementIDs,
+      footnotesElements: footnotesKey.getState(state)?.footnotesElements,
+    },
+    showDecorations,
+    selectedPos,
+    decorations,
+    props,
+    doc: state.doc,
+  }
+
+  state.doc.descendants((node, pos) => {
+    const validator = validators[node.type.name]
+    if (validator) {
+      inconsistencies.push(...validator(node, pos, context))
+    }
+  })
+
+  return {
+    decorations: DecorationSet.create(state.doc, decorations),
+    inconsistencies,
+    showDecorations,
+  }
+}

package/src/plugins/detect-inconsistency/index.ts

@@ -0,0 +1,55 @@
+/*!
+ * © 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.
+ */
+
+// This plugin is used to detect inconsistencies in the document.
+// The plugin will check for cross-references, footnotes, table-footnotes, and citations.
+// If one of these doesn't have a linked node, it will add a warning to the node.
+
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { DecorationSet } from 'prosemirror-view'
+
+import { EditorProps } from '../../configs/ManuscriptsEditor'
+import { buildPluginState, PluginState } from './detect-inconsistency-utils'
+
+export { Inconsistency } from './detect-inconsistency-utils'
+
+export const detectInconsistencyKey = new PluginKey<PluginState>(
+  'detectInconsistency'
+)
+
+export default (props: EditorProps) => {
+  return new Plugin<PluginState>({
+    key: detectInconsistencyKey,
+    state: {
+      init: (_, state) => buildPluginState(state, props, false),
+      apply: (tr, value, newState) => {
+        const showDecorations =
+          tr.getMeta(detectInconsistencyKey) !== undefined
+            ? tr.getMeta(detectInconsistencyKey)
+            : value.showDecorations
+        return buildPluginState(newState, props, showDecorations)
+      },
+    },
+    props: {
+      decorations: (state) => {
+        const pluginState = detectInconsistencyKey.getState(state)
+        return pluginState?.showDecorations
+          ? pluginState.decorations
+          : DecorationSet.empty
+      },
+    },
+  })
+}