@manuscripts/body-editor 3.12.67 → 3.13.0

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

@@ -0,0 +1,95 @@
+/*!
+ * © 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 { isDeleted, isDeletedText } from '@manuscripts/track-changes-plugin'
+import { Node as ProseMirrorNode } from 'prosemirror-model'
+
+export function getNewMatch(
+  side: 'left' | 'right',
+  current: number,
+  selection: { from: number; to: number },
+  matches: { from: number; to: number }[]
+) {
+  if (current < 0) {
+    // it means we need to recalc againt the new pointer
+    return getClosestMatch(side, selection, matches)
+  }
+
+  let newMatch = 0
+  if (side == 'left') {
+    newMatch = current - 1 >= 0 ? current - 1 : matches.length - 1
+  }
+  if (side == 'right') {
+    newMatch = current + 1 < matches.length ? current + 1 : 0
+  }
+  return newMatch
+}
+
+export function getClosestMatch(
+  side: 'left' | 'right',
+  selection: { from: number; to: number },
+  matches: { from: number; to: number }[]
+) {
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i]
+    if (match.from >= selection.from) {
+      return side == 'right' ? i : Math.max(0, i - 1)
+    }
+  }
+  return 0
+}
+
+function removeDiacritics(str: string) {
+  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+}
+
+export function getMatches(
+  doc: ProseMirrorNode,
+  value: string,
+  caseSensitive: boolean,
+  ignoreDiacritics: boolean
+) {
+  if (!value) {
+    return []
+  }
+  let normalised = caseSensitive ? value : value.toLocaleLowerCase()
+  if (ignoreDiacritics) {
+    normalised = removeDiacritics(normalised)
+  }
+  const matches: Array<{ from: number; to: number }> = []
+
+  doc.descendants((node, pos) => {
+    if (isDeleted(node) || isDeletedText(node)) {
+      return
+    }
+    if (node.isText && node.text) {
+      let base = caseSensitive ? node.text : node.text.toLocaleLowerCase()
+      if (ignoreDiacritics) {
+        base = removeDiacritics(base)
+      }
+      let index = base.indexOf(normalised)
+      while (index !== -1) {
+        matches.push({
+          from: pos + index,
+          to: pos + index + normalised.length,
+        })
+        index = base.indexOf(normalised, index + normalised.length)
+      }
+    }
+  })
+
+  return matches
+}

package/src/plugins/section_category.ts

@@ -0,0 +1,212 @@
+/*!
+ * © 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 {
+  getGroupCategories,
+  isSectionNode,
+  schema,
+  SectionCategory,
+} from '@manuscripts/transform'
+import { ResolvedPos } from 'prosemirror-model'
+import { EditorState, Plugin, PluginKey } from 'prosemirror-state'
+import {
+  findChildrenByType,
+  findParentNodeOfTypeClosestToPos,
+} from 'prosemirror-utils'
+import { Decoration, DecorationSet, EditorView } from 'prosemirror-view'
+
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { sectionCategoryIcon } from '../icons'
+
+export const sectionCategoryKey = new PluginKey<PluginState>('section-category')
+
+export interface PluginState {
+  decorations: DecorationSet
+}
+
+export default (props: EditorProps) =>
+  new Plugin<PluginState>({
+    key: sectionCategoryKey,
+    state: {
+      init: (_, state) => buildPluginState(state, props),
+      apply: (tr, value, oldState, newState) => {
+        if (!tr.docChanged) {
+          return value
+        }
+        return buildPluginState(newState, props)
+      },
+    },
+    props: {
+      decorations: (state) =>
+        sectionCategoryKey.getState(state)?.decorations || DecorationSet.empty,
+    },
+  })
+
+const createMenuItem = (
+  props: EditorProps,
+  contents: string,
+  handler: EventListener,
+  isDisabled: boolean,
+  isSelected: boolean
+) => {
+  const item = document.createElement('div')
+  item.classList.add('menu-item')
+  if (isSelected) {
+    item.classList.add('selected')
+  }
+  if (isDisabled) {
+    item.classList.add('disabled')
+  }
+  item.textContent = contents
+  item.addEventListener('mousedown', (event) => {
+    handler(event)
+    props.popper.destroy()
+  })
+  return item
+}
+
+const createMenu = (
+  props: EditorProps,
+  currentCategory: SectionCategory | undefined,
+  categories: SectionCategory[],
+  usedCategoryIDs: Set<string>,
+  onSelect: (category: SectionCategory) => void
+) => {
+  const menu = document.createElement('div')
+  menu.className = 'section-category menu'
+  categories.forEach((category) => {
+    const item = createMenuItem(
+      props,
+      category.titles[0],
+      () => onSelect(category),
+      category.isUnique && usedCategoryIDs.has(category.id),
+      currentCategory === category
+    )
+    menu.appendChild(item)
+  })
+  return menu
+}
+
+const createButton = (
+  props: EditorProps,
+  view: EditorView,
+  pos: number,
+  currentCategory: SectionCategory | undefined,
+  categories: SectionCategory[],
+  usedCategoryIDs: Set<string>,
+  canEdit = true,
+  disabled: boolean
+) => {
+  const handleSelect = (category: SectionCategory) => {
+    const tr = view.state.tr
+    tr.setNodeAttribute(pos, 'category', category.id)
+    view.dispatch(tr)
+  }
+  const button = document.createElement('button')
+  button.innerHTML = sectionCategoryIcon
+  button.classList.add('section-category-button')
+  button.setAttribute('aria-label', 'Section categories menu')
+  if (currentCategory) {
+    button.setAttribute('data-tooltip-content', currentCategory.titles[0])
+    button.classList.add('assigned')
+  }
+  if (disabled) {
+    button.classList.add('disabled')
+  } else if (canEdit) {
+    button.addEventListener('mousedown', () => {
+      const menu = createMenu(
+        props,
+        currentCategory,
+        categories,
+        usedCategoryIDs,
+        handleSelect
+      )
+      props.popper.show(button, menu, 'bottom-end', false)
+    })
+  }
+
+  return button
+}
+
+const buildPluginState = (
+  state: EditorState,
+  props: EditorProps
+): PluginState => {
+  const decorations: Decoration[] = []
+  const can = props.getCapabilities()
+  const categories = props.sectionCategories
+  const usedCategoryIDs = getUsedSectionCategoryIDs(state)
+  const canEdit = !!can?.editArticle
+
+  state.doc.descendants((node, pos) => {
+    if (node.type === schema.nodes.box_element) {
+      return false
+    }
+    if (isSectionNode(node)) {
+      const categoryID = node.attrs.category
+      const category = categories.get(categoryID)
+      const $pos = state.doc.resolve(pos)
+      const group = getGroup($pos)
+      const groupCategories = getGroupCategories(categories, group)
+
+      const numOptions = groupCategories.length
+
+      const shouldShow = !!category || (canEdit && numOptions >= 2)
+
+      if (shouldShow) {
+        const isEditable = canEdit && numOptions >= 2
+
+        decorations.push(
+          Decoration.widget(pos + 1, (view) =>
+            createButton(
+              props,
+              view,
+              pos,
+              category,
+              groupCategories,
+              usedCategoryIDs,
+              isEditable,
+              categories.size === 0
+            )
+          )
+        )
+      }
+      return false
+    }
+  })
+
+  return { decorations: DecorationSet.create(state.doc, decorations) }
+}
+
+const getUsedSectionCategoryIDs = (state: EditorState): Set<string> => {
+  const sections = findChildrenByType(state.doc, schema.nodes.section)
+  const used = new Set<string>()
+  sections.forEach(({ node }) => {
+    if (node.attrs.category) {
+      used.add(node.attrs.category)
+    }
+  })
+  return used
+}
+
+const getGroup = ($pos: ResolvedPos) => {
+  if (findParentNodeOfTypeClosestToPos($pos, schema.nodes.abstracts)) {
+    return 'abstracts'
+  }
+  if (findParentNodeOfTypeClosestToPos($pos, schema.nodes.backmatter)) {
+    return 'backmatter'
+  }
+  return 'body'
+}

package/src/plugins/section_title/autocompletion.ts

@@ -0,0 +1,87 @@
+/*!
+ * © 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 { ManuscriptNode, schema, SectionCategory } from '@manuscripts/transform'
+import { EditorState } from 'prosemirror-state'
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
+
+import { getEditorProps } from '../editor-props'
+import { getActualTextContent } from '@manuscripts/track-changes-plugin'
+
+function cursorAtTheEndOfText(
+  state: EditorState,
+  nodeSize: number,
+  nodePos: number
+) {
+  const { from, to } = state.selection
+  return from === to && to === nodePos + nodeSize - 1
+}
+
+const isUpperCase = (test: string) =>
+  test === test.toUpperCase() && test.length > 1
+
+export function hasAutoCompletionSlack(
+  node: ManuscriptNode,
+  category: SectionCategory
+) {
+  const titles = category.titles
+
+  if (titles.length && node.textContent) {
+    const actualTextContent = getActualTextContent(node.content)
+    const title = titles.find((t) =>
+      t.toLowerCase().startsWith(actualTextContent.toLowerCase())
+    )
+
+    if (title) {
+      const suggestionPart = title.slice(actualTextContent.length)
+      const suggestion = isUpperCase(actualTextContent)
+        ? suggestionPart.toUpperCase()
+        : suggestionPart
+      return {
+        suggestion,
+        title: isUpperCase(actualTextContent) ? title.toUpperCase() : title,
+      }
+    }
+  }
+  return null
+}
+
+export function checkForCompletion(state: EditorState) {
+  const section = findParentNodeOfTypeClosestToPos(
+    state.selection.$from,
+    schema.nodes.section
+  )
+  if (!section) {
+    return
+  }
+
+  const title = findParentNodeOfTypeClosestToPos(
+    state.selection.$from,
+    schema.nodes.section_title
+  )
+  if (!title || !cursorAtTheEndOfText(state, title.node.nodeSize, title.pos)) {
+    return
+  }
+
+  const props = getEditorProps(state)
+  const category = props.sectionCategories.get(section.node.attrs.category)
+
+  if (category) {
+    const text = hasAutoCompletionSlack(title.node, category)
+    if (text) {
+      return text
+    }
+  }
+}

package/src/plugins/section_title/index.ts

@@ -0,0 +1,105 @@
+/*!
+ * © 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 { Node as ProseMirrorNode } from 'prosemirror-model'
+import { EditorState, Plugin, PluginKey, Transaction } from 'prosemirror-state'
+import { findChildrenByType } from 'prosemirror-utils'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { checkForCompletion } from './autocompletion'
+import { clear } from '@manuscripts/track-changes-plugin'
+
+type NumberingArray = number[]
+export type PluginState = Map<string, string>
+
+export const sectionTitleKey = new PluginKey<PluginState>('sectionNumbering')
+
+const calculateSectionLevels = (
+  node: ProseMirrorNode,
+  startPos: number,
+  sectionNumberMap: Map<string, string>,
+  numbering: NumberingArray = [0]
+) => {
+  clear(node).forEach((childNode, offset) => {
+    if (
+      childNode.type === schema.nodes.section ||
+      childNode.type === schema.nodes.box_element
+    ) {
+      numbering[numbering.length - 1] += 1
+      const sectionNumber = numbering.join('.')
+      const sectionStartPos = startPos + offset + 1
+
+      childNode.forEach((innerChildNode) => {
+        if (innerChildNode.type === schema.nodes.section_title) {
+          sectionNumberMap.set(childNode.attrs.id, sectionNumber)
+        }
+      })
+
+      // Process child nodes to handle subsections
+      calculateSectionLevels(childNode, sectionStartPos, sectionNumberMap, [
+        ...numbering,
+        0,
+      ])
+    }
+  })
+}
+
+const getPluginState = (doc: ProseMirrorNode): PluginState => {
+  const bodyNodes = findChildrenByType(doc, schema.nodes.body)
+  const bodyNode = bodyNodes[0]
+  const sectionNumberMap = new Map<string, string>()
+  calculateSectionLevels(bodyNode.node, bodyNode.pos, sectionNumberMap)
+
+  return sectionNumberMap
+}
+
+export default () => {
+  return new Plugin<PluginState>({
+    key: sectionTitleKey,
+    props: {
+      decorations(state) {
+        const text = checkForCompletion(state)
+        if (text) {
+          const decoration = Decoration.widget(state.selection.from, () => {
+            const node = document.createElement('span')
+            node.classList.add('completion-bearer')
+            node.dataset.suggest = text.suggestion
+            return node
+          })
+          return DecorationSet.create(state.doc, [decoration])
+        }
+
+        return DecorationSet.empty
+      },
+    },
+    state: {
+      init: (_, state: EditorState) => {
+        return getPluginState(state.doc)
+      },
+      apply: (
+        tr: Transaction,
+        oldSectionNumberMap: PluginState,
+        oldState: EditorState,
+        newState: EditorState
+      ) => {
+        if (tr.docChanged) {
+          return getPluginState(newState.doc)
+        }
+        return oldSectionNumberMap
+      },
+    },
+  })
+}