@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/plugins/selected-suggestion.ts

@@ -0,0 +1,243 @@
+/*!
+ * © 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 {
+  CHANGE_OPERATION,
+  CHANGE_STATUS,
+  isTracked,
+  TrackedAttrs,
+  TrackedChange,
+} from '@manuscripts/track-changes-plugin'
+import {
+  DataTrackedAttrs,
+  ManuscriptEditorState,
+  ManuscriptNode,
+  schema,
+} from '@manuscripts/transform'
+import { ResolvedPos } from 'prosemirror-model'
+import { Plugin, PluginKey } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { isTextSelection } from '../commands'
+import { getSelectionChangeGroup } from '../selection'
+
+export const selectedSuggestionKey = new PluginKey<PluginState>(
+  'selected-suggestion'
+)
+
+type EffectiveSelection = {
+  node: ManuscriptNode
+  from: number
+  to: number
+}
+export interface PluginState {
+  decorations: DecorationSet
+  suggestion?: TrackedAttrs
+}
+
+const EMPTY: PluginState = {
+  decorations: DecorationSet.empty,
+}
+
+/**
+ * This plugin is responsible for designating a single suggestion as
+ * "selected" based on the current
+ * [editor selection]{@link ManuscriptEditorState#selection}.
+ *
+ * The selected suggestion is wrapped with a "selected-suggestion"
+ * decoration to apply different styling to it in the editor.
+ *
+ * For node views that render other nodes (e.g. the `bibliography_element`
+ * view is responsible for rendering `bibliography_item` nodes), the
+ * decoration has to be applied manually, for which the
+ * selected suggestion (if any) is [provided in the state]{@link PluginState#suggestion}.
+ */
+export default () => {
+  return new Plugin<PluginState>({
+    key: selectedSuggestionKey,
+    state: {
+      init: (_, state) => buildPluginState(state),
+      apply: (tr, value, oldState, newState) => buildPluginState(newState),
+    },
+    props: {
+      decorations: (state) => {
+        const suggestion = selectedSuggestionKey.getState(state)
+        return suggestion?.decorations || DecorationSet.empty
+      },
+    },
+  })
+}
+
+const buildPluginState = (state: ManuscriptEditorState): PluginState => {
+  const selection = state.selection
+  const changes = getSelectionChangeGroup(state)
+  if (changes.length) {
+    return buildGroupOfChangesDecoration(state.doc, changes)
+  }
+  const $pos =
+    isTextSelection(selection) && selection.$cursor
+      ? selection.$cursor
+      : selection.$to
+  if (!$pos) {
+    return EMPTY
+  }
+  const effective = getEffectiveSelection($pos)
+
+  if (!effective) {
+    return EMPTY
+  }
+  if (effective.node.isText) {
+    return buildTextDecoration(state.doc, effective)
+  } else {
+    return buildNodeDecoration(state.doc, effective)
+  }
+}
+
+/**
+ * Find the node containing `$pos` with the _least depth_ (closest to the root)
+ * that changed. This is mainly for cases where inserting a node automatically
+ * inserts a bunch of children (e.g. inserting a `figure_element` automatically
+ * inserts a `figure`, `figure_caption`, etc.)
+ * @param $pos
+ */
+const getEffectiveSelection = ($pos: ResolvedPos) => {
+  let current
+  for (let depth = $pos.depth; depth > 0; depth--) {
+    const node = $pos.node(depth)
+    // @TODO - abstract reference processing to tc-plugin
+    if (
+      node.attrs.dataTracked &&
+      !node.attrs.dataTracked?.find(
+        (c: DataTrackedAttrs) => c.operation === 'reference'
+      )
+    ) {
+      current = {
+        node,
+        from: $pos.before(depth),
+        to: $pos.after(depth),
+      }
+    }
+  }
+  if (current) {
+    return current
+  }
+  const parent = $pos.parent
+  // if selection is longer than a text node by a single char, still select the previous node
+  // @TODO - define how selection should behave when multiple text nodes are selected at once - which tracked-changes should be highlighted? (maybe multiple highlights)
+  const child = parent.childBefore(Math.max($pos.parentOffset - 1, 0))
+  const node = child.node
+  if (node) {
+    const from = $pos.start() + child.offset
+    const to = from + node.nodeSize
+    return {
+      node,
+      from,
+      to,
+    }
+  }
+}
+
+const buildNodeDecoration = (
+  doc: ManuscriptNode,
+  selection: EffectiveSelection
+) => {
+  const node = selection.node
+  const suggestion = node.attrs.dataTracked?.[0]
+  if (!suggestion?.status || suggestion.status === CHANGE_STATUS.rejected) {
+    return EMPTY
+  }
+  const from = selection.from
+  const to = selection.to
+  //hack for keywords since they're really inline nodes but not
+  //marked as such in the schema
+  const inline = node.type === schema.nodes.keyword || node.isInline
+  const decorationType = inline ? Decoration.inline : Decoration.node
+  const decoration = decorationType(from, to, {
+    class: 'selected-suggestion',
+  })
+  return {
+    suggestion,
+    decorations: DecorationSet.create(doc, [decoration]),
+  }
+}
+
+const buildTextDecoration = (
+  doc: ManuscriptNode,
+  selection: EffectiveSelection
+) => {
+  const node = selection.node
+  let suggestion = getTrackedMark(node)?.attrs.dataTracked as TrackedAttrs
+
+  if (!suggestion) {
+    for (const mark of node.marks) {
+      if (isTracked(mark)) {
+        suggestion = mark.attrs.dataTracked[0] as TrackedAttrs
+      }
+    }
+  }
+
+  if (!suggestion) {
+    return EMPTY
+  }
+  const from = selection.from
+  const to = selection.to
+
+  const decoration = Decoration.inline(from, to, {
+    nodeName: 'span',
+    class: 'selected-suggestion',
+  })
+  return {
+    suggestion,
+    decorations: DecorationSet.create(doc, [decoration]),
+  }
+}
+
+const buildGroupOfChangesDecoration = (
+  doc: ManuscriptNode,
+  changes: TrackedChange[]
+) => {
+  const decorations = []
+  if (changes[0].dataTracked.operation === CHANGE_OPERATION.structure) {
+    changes.map((c) =>
+      decorations.push(
+        Decoration.node(c.from, c.to, { class: 'selected-suggestion' })
+      )
+    )
+  } else {
+    const from = changes[0].from,
+      to = changes[changes.length - 1].to
+    decorations.push(
+      Decoration.inline(from, to, {
+        class: 'selected-suggestion',
+      })
+    )
+  }
+  return {
+    decorations: DecorationSet.create(doc, decorations),
+    suggestion: changes[0].dataTracked,
+  }
+}
+
+const trackedMarkTypes = new Set([
+  schema.marks.tracked_insert,
+  schema.marks.tracked_delete,
+])
+const getTrackedMark = (node: ManuscriptNode) => {
+  for (const mark of node.marks) {
+    if (trackedMarkTypes.has(mark.type)) {
+      return mark
+    }
+  }
+}

package/src/plugins/tables-cursor-fix.ts

@@ -0,0 +1,143 @@
+/*!
+ * © 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 { ManuscriptNode, schema } from '@manuscripts/transform'
+import { Fragment } from 'prosemirror-model'
+import { EditorState, Plugin, TextSelection } from 'prosemirror-state'
+import { CellSelection, selectedRect } from 'prosemirror-tables'
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils'
+
+import { isTextSelection } from '../commands'
+
+/**
+ * This plugins fixes cursos jump caused by tables-fixes plugin from prosemirror tables
+ * also will include table_element node with the selection, if the selection start/end from table node
+ */
+export default () => {
+  return new Plugin<null>({
+    appendTransaction: (transactions, oldState, newState) => {
+      if (
+        isTextSelection(newState.selection) &&
+        !oldState.selection.eq(newState.selection)
+      ) {
+        const slice = newState.selection.$from.doc.slice(
+          newState.selection.from,
+          newState.selection.to
+        )
+        const selectionTable = getTable(slice.content)
+        const selection = addTableElementToSelection(newState, selectionTable)
+        if (selection) {
+          const newTr = newState.tr
+          newTr.setSelection(selection)
+          return newTr
+        }
+      }
+      if (
+        isTableShapeSelected(newState) &&
+        !oldState.selection.eq(newState.selection)
+      ) {
+        const contentNode = findParentNodeOfTypeClosestToPos(
+          newState.selection.$from,
+          schema.nodes.table_element
+        )
+        if (contentNode) {
+          const newTr = newState.tr
+          newTr.setSelection(
+            TextSelection.create(
+              newState.doc,
+              contentNode.pos,
+              contentNode.pos + contentNode.node.nodeSize
+            )
+          )
+          return newTr
+        }
+      }
+
+      const tablesFixedTr = transactions.find((tr) => tr.getMeta('fix-tables$'))
+      if (!tablesFixedTr) {
+        return null
+      }
+
+      // const pos = tablesFixedTr.selection.$anchor.pos;
+      const newTr = newState.tr
+      skipTracking(newTr)
+      newTr.setMeta('origin', 'tables-cursor-fix')
+      newTr.setSelection(
+        TextSelection.create(newState.doc, tablesFixedTr.selection.$anchor.pos)
+      )
+
+      return newTr
+    },
+  })
+}
+
+const isTableShapeSelected = (state: EditorState) => {
+  if (state.selection instanceof CellSelection) {
+    const rect = selectedRect(state)
+    return (
+      rect.left === 0 &&
+      rect.top === 0 &&
+      rect.right === rect.map.width &&
+      rect.bottom === rect.map.height
+    )
+  }
+  return false
+}
+
+const getTable = (fragment?: Fragment) => {
+  let table: ManuscriptNode | undefined
+  fragment?.descendants((node) => {
+    if (node?.type === schema.nodes.table) {
+      table = node
+      return false
+    }
+  })
+  return table
+}
+
+/**
+ * Expand selection to include table_element node
+ */
+const addTableElementToSelection = (
+  state: EditorState,
+  selectedTable?: ManuscriptNode
+) => {
+  const { doc, selection } = state
+  const fromContentNode = findParentNodeOfTypeClosestToPos(
+    selection.$from,
+    schema.nodes.table_element
+  )
+  const toContentNode = findParentNodeOfTypeClosestToPos(
+    selection.$to,
+    schema.nodes.table_element
+  )
+  const docTableElement = fromContentNode?.node || toContentNode?.node
+
+  if (
+    selectedTable?.nodeSize !== getTable(docTableElement?.content)?.nodeSize
+  ) {
+    return undefined
+  }
+
+  const from =
+    ((fromContentNode && toContentNode) || fromContentNode) &&
+    fromContentNode.pos
+  const to =
+    ((fromContentNode && toContentNode) || toContentNode) &&
+    toContentNode.pos + toContentNode.node.nodeSize
+
+  return TextSelection.create(doc, from || selection.from, to || selection.to)
+}

package/src/plugins/translations.ts

@@ -0,0 +1,263 @@
+/*!
+ * © 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 { schema } from '@manuscripts/transform'
+import { Node } from 'prosemirror-model'
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+
+import { insertTransAbstract, insertTransGraphicalAbstract } from '../commands'
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { addAuthorIcon, translateIcon } from '../icons'
+import { getLanguage, getLanguageLabel } from '../lib/languages'
+import { templateAllows } from '../lib/template'
+import {
+  handleEnterKey,
+  createKeyboardInteraction,
+} from '../lib/navigation-utils'
+
+const createMenuItem = (
+  props: EditorProps,
+  contents: string,
+  handler: EventListener,
+  isSelected = false,
+  tabIndex: number
+) => {
+  const item = document.createElement('div')
+  item.className = `menu-item ${isSelected ? 'selected' : ''}`
+  item.textContent = contents
+  item.tabIndex = tabIndex
+
+  item.addEventListener('mousedown', handler)
+  item.addEventListener('keydown', handleEnterKey(handler))
+  return item
+}
+interface MenuInstance {
+  menu: HTMLElement
+  destroy: () => void
+}
+const createLanguageMenu = (
+  props: EditorProps,
+  selectedCode: string,
+  onSelect: (code: string) => void
+): MenuInstance => {
+  const menu = document.createElement('div')
+  menu.className = 'language menu'
+  const menuItems: HTMLElement[] = []
+
+  const removeKeydownListener = createKeyboardInteraction({
+    container: document,
+    navigation: {
+      getItems: () => menuItems,
+      arrowKeys: {
+        forward: 'ArrowDown',
+        backward: 'ArrowUp',
+      },
+    },
+  })
+  const destroy = () => {
+    removeKeydownListener()
+    props.popper.destroy()
+  }
+  props.languages.forEach((language, index) => {
+    const item = createMenuItem(
+      props,
+      getLanguageLabel(language),
+      () => {
+        onSelect(language.code)
+        destroy()
+      },
+      selectedCode === language.code,
+      index === 0 ? 0 : -1
+    )
+    menuItems.push(item)
+    menu.appendChild(item)
+  })
+
+  return { menu, destroy }
+}
+
+const getInsertionPos = (doc: Node, nodePos: number): number | null => {
+  const node = doc.nodeAt(nodePos)
+  return node ? nodePos + node.nodeSize : null
+}
+
+export default (props: EditorProps) =>
+  new Plugin<null>({
+    props: {
+      decorations: (state) => {
+        const can = props.getCapabilities()
+        const canEditTransAbstract =
+          can.editArticle &&
+          templateAllows(state, schema.nodes.trans_abstract) &&
+          insertTransAbstract(state)
+        const canEditTransGraphicalAbstract =
+          can.editArticle &&
+          templateAllows(state, schema.nodes.trans_graphical_abstract)
+
+        const widgets: Decoration[] = []
+
+        state.doc.descendants((node, pos, parent) => {
+          const isAbstractSection =
+            (node.type === schema.nodes.section ||
+              node.type === schema.nodes.graphical_abstract_section) &&
+            parent?.type === schema.nodes.abstracts
+
+          // Show "Add translation" for abstract sections
+          if (isAbstractSection) {
+            const isGraphical =
+              node.type === schema.nodes.graphical_abstract_section
+            const category = props.sectionCategories.get(node.attrs.category)
+
+            const canEdit = isGraphical
+              ? canEditTransGraphicalAbstract &&
+                category &&
+                insertTransGraphicalAbstract(category)(state)
+              : canEditTransAbstract
+
+            if (canEdit) {
+              widgets.push(
+                Decoration.widget(
+                  pos + 1,
+                  (view) => {
+                    const $span = document.createElement('span')
+                    $span.tabIndex = 0
+                    $span.className = 'add-trans-abstract'
+                    $span.title = 'Add translation'
+                    $span.innerHTML = `${addAuthorIcon} <span class="add-trans-abstract-text">Add translation</span>`
+
+                    const handleActivate = (event: Event) => {
+                      event.preventDefault()
+                      event.stopPropagation()
+                      const insertPos = getInsertionPos(view.state.doc, pos)
+                      if (insertPos == null) {
+                        return
+                      }
+                      if (isGraphical && category) {
+                        insertTransGraphicalAbstract(category, insertPos)(
+                          view.state,
+                          view.dispatch,
+                          view
+                        )
+                      } else {
+                        insertTransAbstract(
+                          view.state,
+                          view.dispatch,
+                          node.attrs.category,
+                          insertPos
+                        )
+                      }
+                    }
+
+                    $span.addEventListener('mousedown', handleActivate)
+                    $span.addEventListener(
+                      'keydown',
+                      handleEnterKey(handleActivate)
+                    )
+                    return $span
+                  },
+                  { key: `add-trans-${node.attrs.id}-${pos}` }
+                )
+              )
+            }
+          }
+
+          // Language selector for trans_abstract and trans_graphical_abstract nodes
+          const isTransNode =
+            node.type === schema.nodes.trans_abstract ||
+            node.type === schema.nodes.trans_graphical_abstract
+
+          if (isTransNode) {
+            const canEdit =
+              node.type === schema.nodes.trans_abstract
+                ? canEditTransAbstract
+                : canEditTransGraphicalAbstract
+
+            widgets.push(
+              Decoration.widget(
+                pos + 1,
+                (view) => {
+                  const $btn = document.createElement('span')
+                  $btn.className = 'language-selector-btn'
+                  $btn.setAttribute('data-cy', 'language-selector-btn')
+                  $btn.contentEditable = 'false'
+                  $btn.tabIndex = canEdit ? 0 : -1
+
+                  const code = node.attrs.lang || 'en'
+                  const lang = getLanguage(code, props.languages)
+                  const label = getLanguageLabel(lang)
+                  $btn.innerHTML = `<span>${label}</span> ${translateIcon}`
+
+                  if (canEdit) {
+                    let menuInstance: MenuInstance | null = null
+                    const handleOpenMenu = (event: Event) => {
+                      event.preventDefault()
+                      event.stopPropagation()
+
+                      props.popper.destroy() // Ensure any existing popper is closed
+
+                      const handleSelect = (code: string) => {
+                        const tr = view.state.tr.setNodeAttribute(
+                          pos,
+                          'lang',
+                          code
+                        )
+                        view.dispatch(tr)
+                      }
+
+                      menuInstance = createLanguageMenu(
+                        props,
+                        code,
+                        handleSelect
+                      )
+
+                      props.popper.show(
+                        $btn,
+                        menuInstance.menu,
+                        'bottom-end',
+                        false
+                      )
+                    }
+
+                    createKeyboardInteraction({
+                      container: $btn,
+                      additionalKeys: {
+                        Enter: handleOpenMenu,
+                        Escape: (e) => {
+                          e.preventDefault()
+                          menuInstance?.destroy()
+                          menuInstance = null
+                        },
+                      },
+                    })
+
+                    $btn.addEventListener('mousedown', handleOpenMenu)
+                  }
+
+                  return $btn
+                },
+                {
+                  key: `lang-selector-${node.attrs.id}-${pos}-${node.attrs.lang}`,
+                }
+              )
+            )
+          }
+        })
+
+        return DecorationSet.create(state.doc, widgets)
+      },
+    },
+  })

package/src/rules.ts

@@ -0,0 +1,60 @@
+/*!
+ * © 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 { schema } from '@manuscripts/transform'
+import {
+  ellipsis,
+  emDash,
+  InputRule,
+  inputRules,
+  smartQuotes,
+} from 'prosemirror-inputrules'
+import { Node as ProsemirrorNode, NodeType } from 'prosemirror-model'
+import { TextSelection } from 'prosemirror-state'
+
+const creatingInputRule = (regexp: RegExp, nodeType: NodeType) =>
+  new InputRule(regexp, (state, match, start, end) => {
+    const tr = state.tr.delete(start, end)
+    const range = tr.doc.resolve(start).blockRange()
+    if (range) {
+      const node = nodeType.createAndFill() as ProsemirrorNode
+      tr.replaceRangeWith(range.start, range.end, node)
+      const $anchor = tr.doc.resolve(range.start)
+      tr.setSelection(TextSelection.between($anchor, $anchor))
+      return tr
+    }
+    return null
+  })
+
+export default inputRules({
+  rules: [
+    ...smartQuotes,
+    ellipsis,
+    emDash,
+
+    // * bullet | ordered list
+    creatingInputRule(/^(\d+[.)]\s|\s*\*\s)$/, schema.nodes.list),
+
+    // > blockquote
+    creatingInputRule(/^\s*>\s$/, schema.nodes.blockquote_element),
+
+    // ``` listing
+    creatingInputRule(/^```$/, schema.nodes.listing_element),
+
+    // # section (heading)
+    creatingInputRule(/^#\s$/, schema.nodes.section),
+  ],
+})