@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/plugins/paragraphs.ts

@@ -0,0 +1,90 @@
+/*!
+ * © 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 { isParagraphNode, ManuscriptNode } from '@manuscripts/transform'
+import { Plugin } from 'prosemirror-state'
+
+const isTextBlock = (node: ManuscriptNode): boolean => {
+  return node.type === node.type.schema.nodes.text_block
+}
+
+const isTextBlockOrParagraph = (node: ManuscriptNode): boolean => {
+  return isParagraphNode(node) || isTextBlock(node)
+}
+
+const isTableCell = (node: ManuscriptNode): boolean => {
+  const { schema } = node.type
+  return (
+    node.type === schema.nodes.table_cell ||
+    node.type === schema.nodes.table_header
+  )
+}
+
+/**
+ * This plugin enforces a rule that there can never be more than one adjacent empty paragraph.
+ */
+export default () => {
+  return new Plugin<null>({
+    appendTransaction: (transactions, oldState, newState) => {
+      const positionsToJoin: number[] = []
+
+      const tr = newState.tr
+
+      if (!transactions.some((tr) => tr.docChanged || tr.getMeta('INIT'))) {
+        return null
+      }
+
+      const joinAdjacentParagraphs =
+        (parent: ManuscriptNode, pos: number) =>
+        (node: ManuscriptNode, offset: number, index: number) => {
+          const nodePos = pos + offset
+
+          // Skip joining for table cells - allow multiple adjacent empty paragraphs/text_blocks there
+          if (isTableCell(parent)) {
+            node.forEach(joinAdjacentParagraphs(node, nodePos + 1))
+            return
+          }
+
+          if (
+            isTextBlockOrParagraph(node) &&
+            node.childCount === 0 &&
+            index < parent.childCount - 1
+          ) {
+            const nextNode = parent.child(index + 1)
+
+            if (isTextBlockOrParagraph(nextNode) && nextNode.childCount === 0) {
+              positionsToJoin.push(nodePos + node.nodeSize)
+            }
+          }
+
+          node.forEach(joinAdjacentParagraphs(node, nodePos + 1))
+        }
+
+      newState.doc.forEach(joinAdjacentParagraphs(newState.doc, 0))
+
+      if (positionsToJoin.length) {
+        // execute the joins in reverse order so the positions don't change
+        positionsToJoin.reverse()
+
+        for (const nodePos of positionsToJoin) {
+          tr.join(nodePos)
+        }
+        tr.setMeta('origin', 'paragraphs')
+        return tr
+      }
+    },
+  })
+}

package/src/plugins/persist.ts

@@ -0,0 +1,64 @@
+/*!
+ * © 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 { clear, skipTracking } from '@manuscripts/track-changes-plugin'
+import {
+  generateNodeID,
+  isHighlightMarkerNode,
+  ManuscriptNode,
+  schema,
+} from '@manuscripts/transform'
+import { Plugin } from 'prosemirror-state'
+import { isInit } from '../lib/plugins'
+
+/**
+ * This plugin ensures that all nodes which need ids (i.e. `id` is defined in the node spec's attributes) are given an id, and that there aren't any duplicate ids in the document.
+ */
+
+const isManuscriptNode = (node: ManuscriptNode | null) => {
+  return node && node.type === schema.nodes.manuscript
+}
+
+export default () => {
+  return new Plugin<null>({
+    appendTransaction(transactions, oldState, newState) {
+      // only scan if nodes have changed
+      if (!transactions.some((tr) => tr.docChanged || isInit(tr))) {
+        return null
+      }
+      const ids = new Set<string>()
+      const tr = newState.tr
+      clear(newState.doc).descendants((node, pos, parent) => {
+        if (
+          !(node.type.spec.attrs && 'id' in node.type.spec.attrs) ||
+          isHighlightMarkerNode(node) ||
+          isManuscriptNode(node) ||
+          isManuscriptNode(parent)
+        ) {
+          return
+        }
+        let id = node.attrs.id
+        if (!id || ids.has(id)) {
+          id = generateNodeID(node.type)
+          tr.setNodeAttribute(pos, 'id', id)
+        }
+        ids.add(id)
+      })
+      skipTracking(tr)
+      tr.setMeta('origin', 'persist')
+      return tr
+    },
+  })
+}

package/src/plugins/persistent-cursor.ts

@@ -0,0 +1,66 @@
+/*!
+ * © 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 } from '@manuscripts/transform'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+export const persistentCursor = new PluginKey<{ on: boolean }>(
+  'persistent-cursor'
+)
+
+/**
+ * This plugin creates a fake text cursor when the editor is out of focus for better UX.
+ */
+export default () => {
+  return new Plugin({
+    state: {
+      init(_, state) {
+        return { on: false }
+      },
+      apply(tr, value) {
+        if (tr.getMeta(persistentCursor)) {
+          return tr.getMeta(persistentCursor)
+        }
+        return value
+      },
+    },
+    props: {
+      decorations(state) {
+        const selection = state.selection
+        if (this.getState(state)?.on && selection.from === selection.to) {
+          const decorations = [
+            Decoration.widget(selection.to, (view: ManuscriptEditorView) => {
+              const cursor = document.createElement('span')
+              cursor.classList.add('cursor-placeholder')
+              return cursor
+            }),
+          ]
+          return DecorationSet.create(state.doc, decorations)
+        }
+        return DecorationSet.empty
+      },
+      handleDOMEvents: {
+        focus(view, event) {
+          if (this.getState(view.state)?.on) {
+            const newTr = view.state.tr.setMeta(persistentCursor, { on: false })
+            view.dispatch(newTr)
+          }
+        },
+      },
+    },
+  })
+}

package/src/plugins/placeholder.ts

@@ -0,0 +1,219 @@
+/*!
+ * © 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 {
+  isFootnoteNode,
+  isGeneralTableFootnoteNode,
+  isPullquoteElement,
+  ManuscriptEditorView,
+  ManuscriptNode,
+  schema,
+} from '@manuscripts/transform'
+import { Plugin, TextSelection } from 'prosemirror-state'
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+const placeholderMap: Record<string, string> = {
+  subtitle: 'Type subtitle here...',
+}
+
+const placeholderWidget =
+  (placeholder: string) =>
+  (view: ManuscriptEditorView, getPos: () => number | undefined) => {
+    const element = document.createElement('span')
+    element.className = 'placeholder-text'
+    element.setAttribute('aria-hidden', 'true')
+    element.dataset.placeholder = placeholder
+    element.addEventListener('click', (event: MouseEvent) => {
+      event.preventDefault()
+      const pos = getPos() as number
+      const selection = TextSelection.create(view.state.tr.doc, pos)
+      view.dispatch(view.state.tr.setSelection(selection))
+    })
+    return element
+  }
+
+const backmatterWidget = (direction: 'top' | 'bottom') => {
+  const element = document.createElement('div')
+  element.className = 'backmatter-border-placeholder'
+  const line = document.createElement('div')
+  line.className = direction
+  element.appendChild(line)
+  return element
+}
+
+const getParagraphPlaceholderText = (
+  parent: ManuscriptNode | null,
+  node: ManuscriptNode
+) => {
+  if (!parent) {
+    return
+  }
+  if (isPullquoteElement(parent) && !node.textContent.length) {
+    let otherParagraphHasContent = false
+    parent.descendants((child) => {
+      if (child !== node && child.type === child.type.schema.nodes.text_block) {
+        otherParagraphHasContent = true
+      }
+    })
+    if (otherParagraphHasContent) {
+      return
+    }
+    return 'Insert pull quote here'
+  }
+  if (parent.textContent.length) {
+    return
+  }
+  if (parent.type === schema.nodes.body) {
+    return 'Start typing here...'
+  }
+  if (isFootnoteNode(parent) || isGeneralTableFootnoteNode(parent)) {
+    return 'Type new footnote here'
+  }
+  if (parent.type === schema.nodes.trans_abstract) {
+    return 'Type here'
+  }
+}
+
+const isTextBlockOfQuoteElement = (
+  node: ManuscriptNode,
+  parent: ManuscriptNode | null
+) =>
+  node.type === schema.nodes.text_block &&
+  !!parent &&
+  (parent.type === schema.nodes.pullquote_element ||
+    parent.type === schema.nodes.blockquote_element)
+
+/**
+ * This plugin adds a placeholder decoration to empty nodes
+ */
+export default () =>
+  new Plugin<null>({
+    props: {
+      decorations: (state) => {
+        const decorations: Decoration[] = []
+
+        state.doc.descendants((node, pos, parent) => {
+          if (!node.isAtom && node.type.isBlock && node.childCount === 0) {
+            if (node.type === node.type.schema.nodes.attribution) {
+              decorations.push(
+                Decoration.widget(
+                  pos + 1,
+                  placeholderWidget('Insert reference here')
+                )
+              )
+            }
+            if (
+              node.type === node.type.schema.nodes.paragraph ||
+              isTextBlockOfQuoteElement(node, parent)
+            ) {
+              const text = getParagraphPlaceholderText(parent, node)
+              if (text) {
+                decorations.push(
+                  Decoration.widget(pos + 1, placeholderWidget(text))
+                )
+              }
+            } else if (node.type === node.type.schema.nodes.section_title) {
+              const $pos = state.doc.resolve(pos)
+
+              let placeholderText = 'Type heading here'
+
+              const boxElement = findParentNodeOfTypeClosestToPos(
+                $pos,
+                schema.nodes.box_element
+              )
+
+              if (boxElement) {
+                const section = findParentNodeOfTypeClosestToPos(
+                  $pos,
+                  schema.nodes.section
+                )
+
+                // If the section is a direct child of the box_element,
+                // it's the top-level section and should have the box placeholder
+                if (section && section.depth === boxElement.depth + 1) {
+                  placeholderText = 'Optional box title...'
+                }
+              }
+
+              if (
+                findParentNodeOfTypeClosestToPos($pos, schema.nodes.supplements)
+              ) {
+                placeholderText = 'Supplements'
+              }
+
+              decorations.push(
+                Decoration.widget(pos + 1, placeholderWidget(placeholderText))
+              )
+            } else if (node.type === node.type.schema.nodes.trans_abstract) {
+              decorations.push(
+                Decoration.widget(
+                  pos + 1,
+                  placeholderWidget('Type new abstract title here')
+                )
+              )
+            } else if (node.type === schema.nodes.caption_title) {
+              decorations.push(
+                Decoration.widget(
+                  pos + 1,
+                  placeholderWidget('Caption title...'),
+                  {
+                    key: node.attrs.id,
+                  }
+                )
+              )
+            } else if (
+              node.type === schema.nodes.text_block &&
+              parent &&
+              parent.type === schema.nodes.caption
+            ) {
+              decorations.push(
+                Decoration.widget(pos + 1, placeholderWidget('Caption...'))
+              )
+            } else {
+              const placeholder = placeholderMap[node.type.name]
+              decorations.push(
+                Decoration.node(pos, pos + node.nodeSize, {
+                  class: 'empty-node',
+                  ...(placeholder && { 'data-placeholder': placeholder }),
+                })
+              )
+            }
+          } else if (node.type === schema.nodes.backmatter) {
+            decorations.push(
+              Decoration.widget(pos + 1, backmatterWidget('top'))
+            )
+            const nextNode = parent && parent.nodeAt(pos + node.nodeSize)
+            if (
+              nextNode &&
+              (nextNode.type === schema.nodes.supplements ||
+                nextNode.type === schema.nodes.hero_image ||
+                nextNode.type === schema.nodes.attachments)
+            ) {
+              decorations.push(
+                Decoration.widget(
+                  pos + node.nodeSize - 1,
+                  backmatterWidget('bottom')
+                )
+              )
+            }
+          }
+        })
+
+        return DecorationSet.create(state.doc, decorations)
+      },
+    },
+  })

package/src/plugins/prevent-empty.ts

@@ -0,0 +1,50 @@
+/*!
+ * © 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 { skipTracking } from '@manuscripts/track-changes-plugin'
+import { schema } from '@manuscripts/transform'
+import { Plugin } from 'prosemirror-state'
+
+/**
+ * This plugin prevent complete removal of minimal allowed content - empty title and empty paragraph in the only section in the doc
+ */
+export default () => {
+  return new Plugin<null>({
+    appendTransaction(transactions, oldState, newState) {
+      let emptyBody = false
+      let bodyPos = -1
+      newState.doc.descendants((node, pos) => {
+        if (bodyPos >= 0) {
+          return false
+        }
+        if (node.type === schema.nodes.body) {
+          bodyPos = pos
+          emptyBody = node.childCount == 0
+        }
+      })
+
+      if (emptyBody) {
+        const tr = newState.tr
+        tr.insert(bodyPos + 1, schema.nodes.paragraph.create())
+        tr.setMeta('prevent-empty', true)
+        skipTracking(tr)
+        return tr
+      }
+
+      return null
+    },
+  })
+}

package/src/plugins/search-replace/index.ts

@@ -0,0 +1,157 @@
+/*!
+ * © 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 { EditorState, Plugin, PluginKey, Selection } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { getClosestMatch, getMatches } from './lib'
+
+export type SearchReplacePluginState = {
+  value: string
+  matches: Array<{ from: number; to: number }>
+  replaceValue: string
+  active: boolean // if the plugin actively display matches
+  activeAdvanced: boolean // enabling advanced view for search and replace
+  currentMatch: number
+  caseSensitive: boolean
+  ignoreDiacritics: boolean
+  highlightCurrent: boolean
+}
+
+export const searchReplaceKey = new PluginKey<SearchReplacePluginState>(
+  'findReplace'
+)
+
+function buildPluginState(
+  state: EditorState,
+  oldData?: SearchReplacePluginState,
+  newData?: Partial<SearchReplacePluginState>,
+  selection?: Selection,
+  pointerChanged?: boolean
+) {
+  // this is needed to allow components that update this plugin states to update it partially and not always the entire state
+  const data: SearchReplacePluginState = {
+    value: '',
+    replaceValue: '',
+    active: false,
+    activeAdvanced: false,
+    currentMatch: -1, // index of a currently selected match
+    highlightCurrent: false,
+    matches: [],
+    caseSensitive: false,
+    ignoreDiacritics: true,
+    ...oldData,
+    ...newData,
+  }
+
+  // creating a new set of matches if search value has changed and not falsy
+  data.matches = getMatches(
+    state.doc,
+    data.value,
+    data.caseSensitive,
+    data.ignoreDiacritics
+  )
+
+  // if user changes pointer position - we drop previous index so if next time user move selection it will be recalculated against the new pointer
+  if (pointerChanged && selection && data.matches.length) {
+    data.currentMatch = getClosestMatch('right', selection, data.matches)
+  }
+
+  // pointer was changed not by the UI of Find & Search, stop highlight as some other component is managing the selection
+  if (!newData && pointerChanged) {
+    data.highlightCurrent = false
+  }
+
+  // setting new currentMatch if search value is updated
+  if (
+    selection &&
+    newData?.value &&
+    oldData?.value !== newData?.value &&
+    data.matches.length
+  ) {
+    data.currentMatch = getClosestMatch('right', selection, data.matches)
+  }
+  return data
+}
+
+export default () => {
+  return new Plugin<SearchReplacePluginState>({
+    key: searchReplaceKey,
+    state: {
+      init(config, instance) {
+        return buildPluginState(instance)
+      },
+      apply(tr, value, oldState, newState) {
+        const $old = searchReplaceKey.getState(oldState)
+        const selectionChanged = !!tr.getMeta('pointer') || tr.selectionSet
+        if (!$old || tr.getMeta(searchReplaceKey) || selectionChanged) {
+          return buildPluginState(
+            newState,
+            $old,
+            tr.getMeta(searchReplaceKey),
+            newState.selection,
+            selectionChanged
+          )
+        }
+        return $old
+      },
+    },
+    props: {
+      decorations: (state) => {
+        const pluginState = searchReplaceKey.getState(state)
+
+        if (
+          !pluginState ||
+          !pluginState.value ||
+          (!pluginState.active && !pluginState.activeAdvanced)
+        ) {
+          return DecorationSet.empty
+        }
+        const decorations: Decoration[] = []
+
+        pluginState.matches.forEach(({ from, to }, i) => {
+          let className = 'search-result'
+          if (pluginState.highlightCurrent && pluginState.currentMatch === i) {
+            className = className + ' search-result-selected'
+          }
+          decorations.push(
+            Decoration.inline(from, to, {
+              class: className,
+            })
+          )
+        })
+
+        return DecorationSet.create(state.doc, decorations)
+      },
+    },
+    view() {
+      return {
+        update() {
+          const element = document.querySelector(
+            '.search-result.search-result-selected'
+          )
+          if (element) {
+            // @TODO - there is an identical function scrollIntoView in article-editor, think about maybe unifying
+            const rect = element.getBoundingClientRect()
+            if (rect.bottom > window.innerHeight || rect.top < 150) {
+              element.scrollIntoView()
+            }
+          }
+        },
+      }
+    },
+  })
+}