@manuscripts/body-editor 3.12.66 → 3.13.0

package/src/useEditor.ts

@@ -0,0 +1,244 @@
+/*!
+ * © 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 {
+  trackChangesPluginKey,
+  TrackChangesStatus,
+} from '@manuscripts/track-changes-plugin'
+import {
+  getVersion,
+  receiveTransaction,
+  sendableSteps,
+} from 'prosemirror-collab'
+import {
+  Command,
+  EditorState,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import {
+  createEditorState,
+  createEditorView,
+  ExternalProps,
+} from './configs/ManuscriptsEditor'
+import { PopperManager } from './lib/popper'
+import { useDoWithDebounce } from './lib/use-do-with-debounce'
+import { selectionForOutlineNavigation } from './lib/helpers'
+import { searchReplaceKey } from './plugins/search-replace'
+
+export const useEditor = (externalProps: ExternalProps) => {
+  const view = useRef<EditorView>(undefined)
+
+  const props = { ...externalProps, popper: new PopperManager() }
+
+  const [state, setState] = useState<EditorState>(() =>
+    createEditorState(props)
+  )
+  const location = useLocation()
+  const { collabProvider } = props
+
+  // Update editor state when document changes (e.g., when switching to comparison mode)
+  useEffect(() => {
+    if (view.current && props.isComparingMode) {
+      const newState = createEditorState(props)
+      setState(newState)
+      view.current.updateState(newState)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.doc, props.isComparingMode])
+
+  useEffect(() => {
+    // Receiving steps from backend
+    if (collabProvider && !props.isComparingMode) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      collabProvider.onNewSteps(async () => {
+        if (state && view.current) {
+          let localVersion = getVersion(view.current.state)
+          const since = await collabProvider.stepsSince(
+            getVersion(view.current.state)
+          )
+
+          /*
+          Check if we already requested and applied steps for this version before. Duplicate request for the same version can happen 
+          when websocket signals that there are new steps at about the same time when we send some new steps and get 409 as a response
+          due to conflict with the very same steps in authority. It would result in double request and application of the same steps and
+          forever desync (until page reload that is)
+          */
+          localVersion = getVersion(view.current.state)
+          if (since && since.version <= localVersion) {
+            return
+          }
+
+          if (since?.steps.length && since.clientIDs.length) {
+            view.current.dispatch(
+              receiveTransaction(
+                // has to be called for the collab to increment version and drop buffered steps
+                view.current.state,
+                since?.steps,
+                since.clientIDs
+              )
+            )
+          } else {
+            console.warn('Inconsistent new steps event from the authority.')
+          }
+        }
+      })
+    }
+    return () => {
+      collabProvider?.unsubscribe()
+    }
+  }, [collabProvider, props.isComparingMode, !!view.current]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const debounce = useDoWithDebounce()
+
+  const dispatch = useCallback(
+    (tr: Transaction) => {
+      if (!view.current) {
+        return state
+      }
+
+      const nextState = view.current.state.apply(tr)
+      view.current.updateState(nextState)
+
+      const trackState = trackChangesPluginKey.getState(view.current.state)
+
+      if (
+        collabProvider &&
+        (!trackState ||
+          trackState.status !== TrackChangesStatus.viewSnapshots) &&
+        !props.isComparingMode
+      ) {
+        const sendable = sendableSteps(nextState)
+
+        if (sendable) {
+          collabProvider.sendSteps(
+            sendable.version,
+            sendable.steps,
+            sendable.clientID,
+            false
+          )
+        }
+      }
+      debounce(
+        () => {
+          setState(nextState)
+        },
+        250,
+        !tr.isGeneric || !tr.docChanged || !tr.getMeta(searchReplaceKey)
+      )
+
+      return nextState
+    },
+    [] // eslint-disable-line react-hooks/exhaustive-deps
+  )
+
+  const isViewingMode = props.isViewingMode
+
+  const onRender = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (view.current) {
+        view.current.destroy()
+        view.current = undefined
+      }
+
+      if (!el) {
+        return
+      }
+
+      const freshState = createEditorState(props)
+      view.current = createEditorView(props, el, freshState || state, dispatch)
+      setState(view.current.state)
+    },
+    [isViewingMode] // eslint-disable-line react-hooks/exhaustive-deps
+  )
+
+  const isCommandValid = useCallback(
+    (command: Command): boolean => command(state),
+    [state]
+  )
+
+  const doCommand = useCallback(
+    (command: Command): boolean => command(state, dispatch, view.current),
+    [state, dispatch]
+  )
+
+  const replaceState = useCallback((state: EditorState) => {
+    setState(state)
+    if (view.current) {
+      view.current.updateState(state)
+    }
+  }, [])
+
+  const focusNodeWithId = useCallback(
+    (id: string) => {
+      const currentView = view.current
+      if (!id || !currentView || !state) {
+        return
+      }
+
+      const viewState = currentView.state
+      viewState.doc.descendants((node, pos) => {
+        if (node.attrs.id === id) {
+          currentView.focus()
+
+          const selection = selectionForOutlineNavigation(viewState.doc, pos)
+
+          currentView.dispatch(viewState.tr.setSelection(selection))
+
+          const scrollPos =
+            selection instanceof TextSelection ? selection.from : pos + 1
+          const dom = currentView.domAtPos(scrollPos)
+
+          if (dom.node instanceof Element) {
+            dom.node.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start',
+              inline: 'nearest',
+            })
+          }
+
+          return false
+        }
+      })
+    },
+    [state]
+  )
+
+  useEffect(() => {
+    // This will be evaluated on every route change. So, if
+    // the route has changed and the node id is defined, we want to
+    // focus that node.
+    const nodeId = location.hash.substring(1)
+    if (nodeId) {
+      focusNodeWithId(nodeId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location])
+
+  return {
+    state,
+    onRender,
+    isCommandValid,
+    doCommand,
+    replaceState,
+    view: view.current,
+    dispatch,
+  }
+}

package/src/versions.ts

@@ -0,0 +1,3 @@
+//THIS FILE WAS GENERATED BY versions.mjs
+export const VERSION = '3.13.0';
+export const MATHJAX_VERSION = '3.2.2';

package/src/views/ReactSubView.tsx

@@ -0,0 +1,145 @@
+/*!
+ * © 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 { ManuscriptEditorView, ManuscriptNode } from '@manuscripts/transform'
+import React from 'react'
+import { flushSync } from 'react-dom'
+import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from 'styled-components'
+
+import { EditorProps } from '../configs/ManuscriptsEditor'
+import { Trackable } from '../types'
+
+export interface ReactViewComponentProps<NodeT extends ManuscriptNode> {
+  nodeAttrs: NodeT['attrs']
+  setNodeAttrs: (nextAttrs: Partial<NodeT['attrs']>) => void
+  viewProps: {
+    view: ManuscriptEditorView
+    getPos: () => number
+    node: ManuscriptNode | Trackable<ManuscriptNode>
+  }
+  container: HTMLDivElement
+}
+/*
+  This is to render components that affect the Prosemirror Document indirectly. Such as dropdown buttons, inputs, advanced UX elements etc.
+  MAKE SURE dispatch IS PASSED TO YOUR VIEW
+*/
+function createSubView<T extends Trackable<ManuscriptNode>>(
+  props: EditorProps,
+  Component: React.FC<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+  componentProps: object,
+  node: T,
+  getPos: () => number,
+  view: ManuscriptEditorView,
+  classNames: string[] = []
+): HTMLDivElement {
+  const container = document.createElement('div')
+  const Wrapped = createView<T>(
+    props,
+    Component,
+    componentProps,
+    node,
+    getPos,
+    view,
+    classNames,
+    container
+  )
+  const root = createRoot(container)
+  root.render(<Wrapped />)
+  return container
+}
+
+function createView<T extends Trackable<ManuscriptNode>>(
+  props: EditorProps,
+  Component: React.FC<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+  componentProps: object,
+  node: T,
+  getPos: () => number,
+  view: ManuscriptEditorView,
+  classNames: string[] = [],
+  container: HTMLDivElement
+) {
+  container.classList.add('tools-panel')
+  if (classNames.length) {
+    container.classList.add(...classNames)
+    container.setAttribute('data-cy', classNames[0])
+  }
+  container.setAttribute('contenteditable', 'false')
+
+  const Wrapped: React.FC = () => {
+    const setNodeAttrs = (nextAttrs: Partial<ManuscriptNode['attrs']>) => {
+      const { selection, tr } = view.state
+
+      tr.setNodeMarkup(getPos(), undefined, {
+        ...node.attrs,
+        ...nextAttrs,
+      }).setSelection(selection.map(tr.doc, tr.mapping))
+
+      view.dispatch(tr)
+    }
+
+    return (
+      <ThemeProvider theme={props.theme}>
+        <Component
+          nodeAttrs={node.attrs}
+          setNodeAttrs={setNodeAttrs}
+          viewProps={{ node, view, getPos }}
+          container={container}
+          {...props}
+          {...componentProps}
+        />
+      </ThemeProvider>
+    )
+  }
+  return Wrapped
+}
+
+/**
+ * Due to async rendering in React, inline or persistent elements may flicker during rerendering.
+ * To prevent that this wrapper allows to replace element with its new version only when it's already rendered.
+ */
+export function createSubViewAsync<T extends Trackable<ManuscriptNode>>(
+  props: EditorProps,
+  Component: React.FC<any>, // eslint-disable-line @typescript-eslint/no-explicit-any
+  componentProps: object,
+  node: T,
+  getPos: () => number,
+  view: ManuscriptEditorView,
+  classNames: string[] = []
+): Promise<HTMLDivElement> {
+  const container = document.createElement('div')
+  const Wrapped = createView<T>(
+    props,
+    Component,
+    componentProps,
+    node,
+    getPos,
+    view,
+    classNames,
+    container
+  )
+
+  const root = createRoot(container)
+
+  return new Promise<HTMLDivElement>((resolve) => {
+    flushSync(() => {
+      root.render(<Wrapped />)
+    })
+    resolve(container)
+  })
+}
+
+export default createSubView

package/src/views/abstracts.ts

@@ -0,0 +1,46 @@
+/*!
+ * © 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 { ManuscriptNode } from '@manuscripts/transform'
+
+import { BaseNodeView } from './base_node_view'
+import { createNodeView } from './creators'
+
+export class AbstractsView extends BaseNodeView<ManuscriptNode> {
+  public elementType = 'div'
+
+  public initialise() {
+    this.createDOM()
+    this.createElement()
+    this.updateContents()
+  }
+
+  public createDOM() {
+    this.dom = document.createElement(this.elementType)
+    this.dom.classList.add('abstracts')
+  }
+
+  public createElement() {
+    this.contentDOM = document.createElement(this.elementType)
+    this.dom.appendChild(this.contentDOM)
+  }
+
+  public updateContents() {
+    super.updateContents()
+  }
+}
+
+export default createNodeView(AbstractsView)

package/src/views/accessibility_element.ts

@@ -0,0 +1,86 @@
+/*!
+ * © 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 { LongDescNode, schema } from '@manuscripts/transform'
+import { TextSelection } from 'prosemirror-state'
+
+import { createKeyboardInteraction } from '../lib/navigation-utils'
+import BlockView from './block_view'
+import { createNodeView } from './creators'
+export class AccessibilityElementView extends BlockView<LongDescNode> {
+  public contentDOM: HTMLElement
+  private removeKeydownListener?: () => void
+
+  public initialise() {
+    this.createDOM()
+    this.createElement()
+    this.updateContents()
+  }
+
+  public createDOM() {
+    this.dom = document.createElement('div')
+    this.dom.classList.add('accessibility_element')
+    const label = document.createElement('div')
+    label.contentEditable = 'false'
+    label.className = 'accessibility_element_label'
+    label.innerText =
+      this.node.type === schema.nodes.long_desc
+        ? 'Long description'
+        : 'Alt text'
+    this.dom.appendChild(label)
+  }
+
+  public createElement() {
+    super.createElement()
+    this.contentDOM.className = 'accessibility_element_input'
+    this.contentDOM.setAttribute('contenteditable', 'true')
+
+    this.contentDOM.tabIndex = this.node.type === schema.nodes.alt_text ? 0 : -1
+
+    this.removeKeydownListener = createKeyboardInteraction({
+      container: this.contentDOM,
+      navigation: {
+        getItems: () => {
+          const parentEl = this.dom.parentElement
+          if (!parentEl) {
+            return []
+          }
+          return Array.from(
+            parentEl.querySelectorAll('.accessibility_element_input')
+          ) as HTMLElement[]
+        },
+        arrowKeys: { forward: 'ArrowDown', backward: 'ArrowUp' },
+        getCurrentElement: () => this.contentDOM,
+      },
+      additionalKeys: {
+        Enter: (e) => {
+          e.preventDefault()
+          const pos = this.getPos()
+          const tr = this.view.state.tr.setSelection(
+            TextSelection.create(this.view.state.doc, pos + 1)
+          )
+          this.view.dispatch(tr)
+          this.view.focus()
+        },
+      },
+    })
+  }
+  public destroy() {
+    this.removeKeydownListener?.()
+    super.destroy()
+  }
+}
+
+export default createNodeView(AccessibilityElementView)