@manuscripts/body-editor 3.12.67 → 3.13.0

package/src/components/toolbar/helpers.ts

@@ -0,0 +1,547 @@
+/*!
+ * © 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 {
+  isDeleted,
+  isValid,
+  setAction,
+  TrackChangesAction,
+  TrackedAttrs,
+} from '@manuscripts/track-changes-plugin'
+import {
+  generateNodeID,
+  isSectionNodeType,
+  ManuscriptEditorView,
+  ManuscriptNodeType,
+  nodeNames,
+  schema,
+  SectionTitleNode,
+} from '@manuscripts/transform'
+import { Fragment, Node } from 'prosemirror-model'
+import { EditorState, TextSelection, Transaction } from 'prosemirror-state'
+import { findChildrenByType, hasParentNodeOfType } from 'prosemirror-utils'
+import { EditorView } from 'prosemirror-view'
+
+import { Dispatch } from '../../commands'
+import { filterBlockNodes } from '../../lib/utils'
+import { Option } from './type-selector/TypeSelector'
+
+export const optionName = (nodeType: ManuscriptNodeType) => {
+  switch (nodeType) {
+    case nodeType.schema.nodes.section:
+      return 'Heading'
+
+    default:
+      return nodeNames.get(nodeType) || nodeType.name
+  }
+}
+
+export const titleCase = (text: string) =>
+  text.replace(/\b([a-z])/g, (match) => match.toUpperCase())
+
+export const findSelectedOption = (options: Option[]): Option | undefined => {
+  for (const option of options) {
+    if (option.isSelected) {
+      return option
+    }
+  }
+}
+
+// Helper function to find the deepest subsection (the last subsection that doesn't have subsections itself)
+export const getDeepestSubsectionPosition = (
+  subsection: Node,
+  position: number
+) => {
+  while (subsection.lastChild && isSectionNodeType(subsection.lastChild.type)) {
+    if (isDeleted(subsection.lastChild)) {
+      return (
+        position +
+        jumpToPreviousValidNode(
+          subsection.nodeSize - subsection.lastChild.nodeSize - 2,
+          subsection
+        ) +
+        1
+      )
+    }
+    position += subsection.nodeSize - subsection.lastChild.nodeSize
+    subsection = subsection.lastChild
+  }
+  return position + subsection.content.size
+}
+
+const getInsertDataTracked = (node: Node) => {
+  const dataTracked = node.attrs.dataTracked as TrackedAttrs[] | null
+  const change = dataTracked?.find((c) => c.operation === 'insert')
+  return change ? [change] : null
+}
+
+/** Look at current position if node is deleted move to the previous sibling and
+ * check if it's deleted until we find a valid node */
+const jumpToPreviousValidNode = (beforeSection: number, doc: Node) => {
+  const $beforeSection = doc.resolve(beforeSection)
+  let pos = beforeSection
+  for (let i = $beforeSection.index() - 1; i >= 0; i--) {
+    pos = $beforeSection.posAtIndex(i)
+    const node = doc.resolve(pos + 1).node()
+    if (!(isDeleted(node) && node.type === schema.nodes.section) && i >= 0) {
+      pos = $beforeSection.posAtIndex(i + 1)
+      break
+    }
+  }
+
+  return pos
+}
+
+export const demoteSectionToParagraph = (
+  state: EditorState,
+  dispatch: (tr: Transaction) => void,
+  view?: ManuscriptEditorView
+) => {
+  const {
+    doc,
+    selection: { $from },
+    schema,
+    tr,
+  } = state
+  const { nodes } = schema
+
+  const sectionTitle = $from.node($from.depth)
+  const afterSectionTitle = $from.after($from.depth)
+  const $afterSectionTitle = doc.resolve(afterSectionTitle)
+  const afterSectionTitleOffset = $afterSectionTitle.parentOffset
+
+  const sectionDepth = $from.depth - 1
+  const section = $from.node(sectionDepth)
+  let beforeSection = $from.before(sectionDepth)
+  beforeSection = jumpToPreviousValidNode(beforeSection, doc)
+  const $beforeSection = doc.resolve(beforeSection)
+  const previousNode = $beforeSection.nodeBefore
+  const paragraph = nodes.paragraph.create(
+    {
+      id: generateNodeID(nodes.paragraph),
+      dataTracked: getInsertDataTracked(section),
+    },
+    sectionTitle.content
+  )
+
+  let anchor
+
+  const sectionContent = section.content.cut(afterSectionTitleOffset)
+
+  if (previousNode && isSectionNodeType(previousNode.type)) {
+    const hasSubsections =
+      previousNode.lastChild && isSectionNodeType(previousNode.lastChild.type)
+
+    if (hasSubsections) {
+      beforeSection = getDeepestSubsectionPosition(
+        previousNode,
+        beforeSection - previousNode.nodeSize
+      )
+    } else {
+      beforeSection = beforeSection - 1
+    }
+    anchor = beforeSection + 1
+  } else {
+    anchor = beforeSection + 1
+  }
+
+  // TC plugins is the one who has to drop shadow content and not body-editor has to do that
+  const content = filterBlockNodes(
+    Fragment.from(paragraph).append(sectionContent)
+  )
+  tr.insert(beforeSection, content)
+
+  const afterSection = tr.mapping.map($from.after(sectionDepth))
+  tr.delete(afterSection - section.nodeSize, afterSection)
+
+  tr.setSelection(TextSelection.create(tr.doc, anchor))
+
+  dispatch(
+    setAction(
+      tr,
+      TrackChangesAction.structuralChangeAction,
+      'convert-to-paragraph'
+    )
+  )
+  view && view.focus()
+}
+
+export const promoteParagraphToSection = (
+  state: EditorState,
+  dispatch: (tr: Transaction) => void,
+  view?: ManuscriptEditorView
+) => {
+  const {
+    doc,
+    selection: { $from },
+    schema,
+    tr,
+  } = state
+  const { nodes } = schema
+  const paragraph = $from.node($from.depth)
+  const beforeParagraph = $from.before($from.depth)
+  const $beforeParagraph = doc.resolve(beforeParagraph)
+  const beforeParagraphOffset = $beforeParagraph.parentOffset
+  const afterParagraphOffset = beforeParagraphOffset + paragraph.nodeSize
+
+  const sectionDepth = $from.depth - 1
+  const parentSection = $from.node(sectionDepth)
+  const startIndex = $from.index(sectionDepth)
+  const endIndex = $from.indexAfter(sectionDepth)
+  let afterParentSection = $from.after(sectionDepth)
+  const items: Node[] = []
+
+  if (startIndex > 0) {
+    // add the original section with content up to the paragraph
+    const precedingSection = parentSection.cut(0, beforeParagraphOffset)
+    items.push(precedingSection)
+  }
+
+  const textContent = findChildrenByType(paragraph, schema.nodes.text).map(
+    ({ node }) => node
+  )
+  const sectionTitle: SectionTitleNode = textContent
+    ? nodes.section_title.create({}, Fragment.from(textContent))
+    : nodes.section_title.create()
+
+  let sectionContent = Fragment.from(sectionTitle)
+  if (endIndex < parentSection.childCount) {
+    sectionContent = sectionContent.append(
+      parentSection.content.cut(afterParagraphOffset)
+    )
+  } else {
+    sectionContent = sectionContent.append(Fragment.from(paragraph.copy()))
+  }
+
+  if (parentSection.type.name === 'body') {
+    sectionContent = Fragment.from(sectionTitle)
+    afterParentSection = beforeParagraph + paragraph.nodeSize
+    // get position before first section in body, starting from the selection node index
+    parentSection.forEach((node, offset, index) => {
+      if (
+        node.type !== nodes.section &&
+        index > tr.doc.resolve(beforeParagraph).index()
+      ) {
+        const pos = $from.start($from.depth - 1)
+        afterParentSection = pos + offset + node.nodeSize
+        sectionContent = sectionContent.append(Fragment.from(node))
+      }
+    })
+    items[0] = nodes.section.create(
+      { dataTracked: getInsertDataTracked(paragraph) },
+      sectionContent
+    )
+  } else {
+    items.push(
+      parentSection.type.create(
+        { dataTracked: getInsertDataTracked(paragraph) },
+        sectionContent
+      )
+    )
+  }
+  const content = filterBlockNodes(Fragment.from(items[items.length - 1]))
+  tr.insert(afterParentSection, content)
+  tr.delete(beforeParagraph, afterParentSection - 1)
+
+  const anchor = tr.mapping.map(afterParentSection) - content.size + 2
+  tr.setSelection(TextSelection.create(tr.doc, anchor))
+
+  dispatch(
+    setAction(
+      tr,
+      TrackChangesAction.structuralChangeAction,
+      'convert-to-section'
+    )
+  )
+  view && view.focus()
+}
+
+export const isIndentationAllowed =
+  (action: string) => (state: EditorState) => {
+    const { $from } = state.selection
+    const nodeType = $from.node().type
+
+    const allowedNodeTypes = [
+      schema.nodes.section_title,
+      schema.nodes.paragraph,
+    ]
+    if (!allowedNodeTypes.includes(nodeType)) {
+      return false
+    }
+
+    const isInBody = hasParentNodeOfType(schema.nodes.body)(state.selection)
+    const isDeletedNode = isDeleted($from.node($from.depth))
+    if (!isInBody || isDeletedNode) {
+      return false
+    }
+
+    // It is not allowed to unindent the top level parent sections, headers and paragraphs
+    if (action === 'unindent') {
+      const grandparentNode = $from.node($from.depth - 2)
+      if (grandparentNode?.type === schema.nodes.body) {
+        return false
+      }
+    }
+
+    if (nodeType === schema.nodes.paragraph) {
+      const parentNode = $from.node($from.depth - 1)
+
+      const isIndentNotAllowed = ![
+        schema.nodes.section,
+        schema.nodes.body,
+      ].includes(parentNode?.type)
+
+      const isUnindentNotAllowed = parentNode?.type !== schema.nodes.section
+
+      if (action === 'indent' && isIndentNotAllowed) {
+        return false
+      }
+
+      if (action === 'unindent' && isUnindentNotAllowed) {
+        return false
+      }
+    }
+
+    return true
+  }
+
+export const indentSection =
+  () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => {
+    const {
+      selection: { $from },
+      schema,
+      tr,
+    } = state
+    const { nodes } = schema
+
+    const sectionDepth = $from.depth - 1
+    const section = $from.node(sectionDepth)
+    const beforeSection = $from.before(sectionDepth)
+    const afterSection = $from.after(sectionDepth)
+
+    const parentSectionDepth = sectionDepth - 1
+    const parentSection = $from.node(parentSectionDepth)
+    const startIndex = $from.index(parentSectionDepth)
+
+    // Check if there's a valid previous section to indent into
+    // Look backwards through siblings to find a valid (non-deleted, non-moved) section
+    let previousSection: Node | null = null
+    for (let i = startIndex - 1; i >= 0; i--) {
+      const candidate = parentSection.child(i)
+      if (candidate.type === nodes.section && isValid(candidate)) {
+        previousSection = candidate
+        break
+      }
+    }
+
+    let anchor
+    if (!previousSection) {
+      // No valid previous section, creating new parent section
+      const emptyTitle = nodes.section_title.create()
+      const newParentSectionContent = Fragment.fromArray([emptyTitle, section])
+      const newParentSection = nodes.section.create({}, newParentSectionContent)
+
+      tr.insert(beforeSection, newParentSection)
+
+      // Delete the original section (now at shifted position)
+      const newBeforeSection = beforeSection + newParentSection.nodeSize
+      const newAfterSection = afterSection + newParentSection.nodeSize
+
+      tr.delete(newBeforeSection, newAfterSection)
+
+      anchor = beforeSection + 1
+    } else {
+      // Moving section into previous section as subsection
+      // Find the actual position of the previous section by walking through the document
+      let beforePreviousSection: number | null = null
+
+      $from.doc.descendants((node, pos) => {
+        if (node === previousSection) {
+          beforePreviousSection = pos
+          return false // stop iteration
+        }
+      })
+
+      if (beforePreviousSection === null) {
+        return false
+      }
+
+      const insertPos = beforePreviousSection + previousSection.nodeSize - 1
+      tr.insert(insertPos, section)
+
+      // Delete the original section (positions have shifted due to insert)
+      const newBeforeSection = beforeSection + section.nodeSize
+      const newAfterSection = afterSection + section.nodeSize
+      tr.delete(newBeforeSection, newAfterSection)
+
+      anchor = insertPos + 1
+    }
+
+    tr.setSelection(TextSelection.create(tr.doc, anchor))
+
+    setAction(tr, TrackChangesAction.indentationAction, { action: 'indent' })
+
+    dispatch(tr)
+    view && view.focus()
+  }
+
+export const indentParagraph =
+  () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => {
+    const { $from } = state.selection
+    const { schema, tr } = state
+
+    const beforeParagraph = $from.before($from.depth)
+    const sectionDepth = $from.depth - 1
+    const parentSection = $from.node(sectionDepth)
+    const sectionStart = $from.start(sectionDepth)
+    const sectionEnd = $from.end(sectionDepth)
+
+    // Build section content
+    const sectionContent = Fragment.from(
+      schema.nodes.section_title.create()
+    ).append(parentSection.content.cut(beforeParagraph - sectionStart))
+
+    // Create new section
+    const newSection = schema.nodes.section.create(
+      { id: generateNodeID(schema.nodes.section) },
+      sectionContent
+    )
+
+    setAction(tr, TrackChangesAction.indentationAction, { action: 'indent' })
+
+    tr.delete(beforeParagraph, sectionEnd)
+    tr.insert(beforeParagraph, newSection)
+
+    // Set selection inside the title of the new section
+    tr.setSelection(
+      TextSelection.create(tr.doc, beforeParagraph + newSection.nodeSize - 2)
+    )
+
+    dispatch(tr)
+    view?.focus()
+  }
+
+export const unindentSection =
+  () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => {
+    const {
+      selection: { $from },
+      tr,
+    } = state
+    const sectionDepth = $from.depth - 1
+    const section = $from.node(sectionDepth)
+    const beforeSection = $from.before(sectionDepth)
+    const sectionTitle = $from.node($from.depth)
+
+    const $beforeSection = tr.doc.resolve(beforeSection)
+    const beforeSectionOffset = $beforeSection.parentOffset
+    const afterSectionOffset = beforeSectionOffset + section.nodeSize
+
+    const parentSectionDepth = $from.depth - 2
+    const parentSection = $from.node(parentSectionDepth)
+    const endIndex = $from.indexAfter(parentSectionDepth)
+    const afterParentSection = $from.after(parentSectionDepth)
+
+    const hasFollowingSiblings = endIndex < parentSection.childCount
+
+    let extendedSection = section
+
+    if (hasFollowingSiblings) {
+      // If there are following siblings, we need to extend the section
+      const siblingsContent = parentSection.content.cut(afterSectionOffset)
+      extendedSection = section.copy(section.content.append(siblingsContent))
+    }
+
+    // Insert the unindented section at the parent level
+    tr.insert(afterParentSection, Fragment.from(extendedSection))
+
+    // Delete the original section (positions inside parent haven't changed)
+    tr.delete(beforeSection, beforeSection + extendedSection.nodeSize)
+
+    const anchor = afterParentSection + 2
+
+    tr.setSelection(
+      TextSelection.create(tr.doc, anchor, anchor + sectionTitle.content.size)
+    )
+
+    setAction(tr, TrackChangesAction.indentationAction, { action: 'unindent' })
+
+    dispatch(tr)
+    view && view.focus()
+  }
+
+export const unindentParagraph =
+  () => (state: EditorState, dispatch: Dispatch, view?: EditorView) => {
+    const {
+      selection: { $from },
+      schema,
+      tr,
+    } = state
+
+    const paragraphPos = $from.before($from.depth)
+
+    const sectionDepth = $from.depth - 1
+    const section = $from.node(sectionDepth)
+    const afterSection = $from.after(sectionDepth)
+    const sectionStart = $from.start(sectionDepth)
+
+    const parentSectionDepth = sectionDepth - 1
+    const parentSection = $from.node(parentSectionDepth)
+    const parentSectionStart = $from.start(parentSectionDepth)
+    const parentSectionEnd = $from.end(parentSectionDepth)
+
+    let sectionContent = Fragment.from(schema.nodes.section_title.create())
+
+    sectionContent = sectionContent
+      .append(section.content.cut(paragraphPos - sectionStart))
+      .append(parentSection.content.cut(afterSection - parentSectionStart))
+
+    const newSection = schema.nodes.section.create(
+      { id: generateNodeID(schema.nodes.section) },
+      sectionContent
+    )
+
+    tr.delete(paragraphPos, parentSectionEnd)
+    tr.insert(paragraphPos + 2, newSection)
+
+    tr.setSelection(
+      TextSelection.create(tr.doc, paragraphPos + newSection.nodeSize)
+    )
+
+    setAction(tr, TrackChangesAction.indentationAction, { action: 'unindent' })
+
+    dispatch(tr)
+    view?.focus()
+  }
+
+const indentationHandlers = {
+  section_title: {
+    indent: indentSection,
+    unindent: unindentSection,
+  },
+  paragraph: {
+    indent: indentParagraph,
+    unindent: unindentParagraph,
+  },
+}
+
+export const changeIndentation =
+  (action: 'indent' | 'unindent') =>
+  (state: EditorState, dispatch: Dispatch, view?: EditorView) => {
+    const { $from } = state.selection
+    const nodeName = $from.node().type.name as 'section_title' | 'paragraph'
+
+    const handler = indentationHandlers[nodeName]?.[action]
+    handler()(state, dispatch, view)
+  }

package/src/components/toolbar/type-selector/OptionComponent.tsx

@@ -0,0 +1,89 @@
+/*!
+ * © 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 { TickIcon } from '@manuscripts/style-guide'
+import React, { useLayoutEffect, useRef } from 'react'
+import { components, ControlProps, OptionProps } from 'react-select'
+import styled from 'styled-components'
+
+import { optionName, titleCase } from '../helpers'
+import { Option } from './TypeSelector'
+
+const OptionContainer = styled.div<{ isFocused?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 8px;
+  background: ${(props) => (props.isFocused ? '#f2fbfc' : 'transparent')};
+
+  &:hover {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+`
+const OptionLabel = styled.span``
+
+const TickIconWrapper = styled.div``
+export const OptionComponent: React.FC<OptionProps<Option, false>> = ({
+  innerProps,
+  data,
+  isFocused,
+  innerRef,
+}) => {
+  return (
+    <OptionContainer {...innerProps} isFocused={isFocused} ref={innerRef}>
+      <OptionLabel>{titleCase(optionName(data.nodeType))}</OptionLabel>
+      {data.isSelected && (
+        <TickIconWrapper>
+          <TickIcon />
+        </TickIconWrapper>
+      )}
+    </OptionContainer>
+  )
+}
+
+export const CustomControl = (props: ControlProps<Option, false>) => {
+  const controlRef = useRef<HTMLDivElement>(null)
+
+  useLayoutEffect(() => {
+    if (controlRef.current) {
+      controlRef.current.setAttribute('data-toolbar-button', 'true')
+    }
+  }, [])
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      const { selectProps } = props
+      if (selectProps.menuIsOpen) {
+        selectProps.onMenuClose?.()
+      } else {
+        selectProps.onMenuOpen?.()
+      }
+    }
+  }
+
+  return (
+    <components.Control
+      {...props}
+      innerRef={controlRef}
+      innerProps={{
+        ...props.innerProps,
+        onKeyDown: handleKeyDown,
+      }}
+    />
+  )
+}