@tiptap/core 3.0.0 → 3.0.2

package/src/NodePos.ts

@@ -1,9 +1,7 @@
-import {
-  Fragment, Node, ResolvedPos,
-} from '@tiptap/pm/model'
+import type { Fragment, Node, ResolvedPos } from '@tiptap/pm/model'
 
-import { Editor } from './Editor.js'
-import { Content, Range } from './types.js'
+import type { Editor } from './Editor.js'
+import type { Content, Range } from './types.js'
 
 export class NodePos {
   private resolvedPos: ResolvedPos
@@ -135,8 +133,15 @@ export class NodePos {
 
     this.node.content.forEach((node, offset) => {
       const isBlock = node.isBlock && !node.isTextblock
+      const isNonTextAtom = node.isAtom && !node.isText
+
+      const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1)
+
+      // Check if targetPos is within valid document range
+      if (targetPos < 0 || targetPos > this.resolvedPos.doc.nodeSize - 2) {
+        return
+      }
 
-      const targetPos = this.pos + offset + 1
       const $pos = this.resolvedPos.doc.resolve(targetPos)
 
       if (!isBlock && $pos.depth <= this.depth) {
@@ -235,9 +240,13 @@ export class NodePos {
   }
 
   setAttribute(attributes: { [key: string]: any }) {
-    const oldSelection = this.editor.state.selection
+    const { tr } = this.editor.state
+
+    tr.setNodeMarkup(this.from, undefined, {
+      ...this.node.attrs,
+      ...attributes,
+    })
 
-    this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
-      .run()
+    this.editor.view.dispatch(tr)
   }
 }

package/src/NodeView.ts

@@ -1,10 +1,8 @@
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
 import { NodeSelection } from '@tiptap/pm/state'
-import { NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import type { NodeView as ProseMirrorNodeView, ViewMutationRecord } from '@tiptap/pm/view'
 
-import { Editor as CoreEditor } from './Editor.js'
-import { Node } from './Node.js'
-import { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js'
+import type { Editor as CoreEditor } from './Editor.js'
+import type { DecorationWithType, NodeViewRendererOptions, NodeViewRendererProps } from './types.js'
 import { isAndroid } from './utilities/isAndroid.js'
 import { isiOS } from './utilities/isiOS.js'
 
@@ -16,20 +14,27 @@ export class NodeView<
   Component,
   NodeEditor extends CoreEditor = CoreEditor,
   Options extends NodeViewRendererOptions = NodeViewRendererOptions,
-> implements ProseMirrorNodeView {
+> implements ProseMirrorNodeView
+{
   component: Component
 
   editor: NodeEditor
 
   options: Options
 
-  extension: Node
+  extension: NodeViewRendererProps['extension']
 
-  node: ProseMirrorNode
+  node: NodeViewRendererProps['node']
 
-  decorations: DecorationWithType[]
+  decorations: NodeViewRendererProps['decorations']
 
-  getPos: any
+  innerDecorations: NodeViewRendererProps['innerDecorations']
+
+  view: NodeViewRendererProps['view']
+
+  getPos: NodeViewRendererProps['getPos']
+
+  HTMLAttributes: NodeViewRendererProps['HTMLAttributes']
 
   isDragging = false
 
@@ -44,6 +49,9 @@ export class NodeView<
     this.extension = props.extension
     this.node = props.node
     this.decorations = props.decorations as DecorationWithType[]
+    this.innerDecorations = props.innerDecorations
+    this.view = props.view
+    this.HTMLAttributes = props.HTMLAttributes
     this.getPos = props.getPos
     this.mount()
   }
@@ -67,9 +75,8 @@ export class NodeView<
 
     // get the drag handle element
     // `closest` is not available for text nodes so we may have to use its parent
-    const dragHandle = target.nodeType === 3
-      ? target.parentElement?.closest('[data-drag-handle]')
-      : target.closest('[data-drag-handle]')
+    const dragHandle =
+      target.nodeType === 3 ? target.parentElement?.closest('[data-drag-handle]') : target.closest('[data-drag-handle]')
 
     if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
       return
@@ -91,11 +98,18 @@ export class NodeView<
       y = handleBox.y - domBox.y + offsetY
     }
 
-    event.dataTransfer?.setDragImage(this.dom, x, y)
+    const clonedNode = this.dom.cloneNode(true) as HTMLElement
+
+    event.dataTransfer?.setDragImage(clonedNode, x, y)
 
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
     // we need to tell ProseMirror that we want to move the whole node
     // so we create a NodeSelection
-    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const selection = NodeSelection.create(view.state.doc, pos)
     const transaction = view.state.tr.setSelection(selection)
 
     view.dispatch(transaction)
@@ -139,11 +153,11 @@ export class NodeView<
     // ProseMirror tries to drag selectable nodes
     // even if `draggable` is set to `false`
     // this fix prevents that
-    if (!isDraggable && isSelectable && isDragEvent) {
+    if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
       event.preventDefault()
     }
 
-    if (isDraggable && isDragEvent && !isDragging) {
+    if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
       event.preventDefault()
       return false
     }
@@ -183,21 +197,19 @@ export class NodeView<
     }
 
     // these events are handled by prosemirror
-    if (
-      isDragging
-      || isDropEvent
-      || isCopyEvent
-      || isPasteEvent
-      || isCutEvent
-      || (isClickEvent && isSelectable)
-    ) {
+    if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || (isClickEvent && isSelectable)) {
       return false
     }
 
     return true
   }
 
-  ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
+  /**
+   * Called when a DOM [mutation](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) or a selection change happens within the view.
+   * @return `false` if the editor should re-read the selection or re-parse the range around the mutation
+   * @return `true` if it can safely be ignored.
+   */
+  ignoreMutation(mutation: ViewMutationRecord) {
     if (!this.dom || !this.contentDOM) {
       return true
     }
@@ -223,15 +235,12 @@ export class NodeView<
     // see: https://github.com/ueberdosis/tiptap/issues/1214
     // see: https://github.com/ueberdosis/tiptap/issues/2534
     if (
-      this.dom.contains(mutation.target)
-      && mutation.type === 'childList'
-      && (isiOS() || isAndroid())
-      && this.editor.isFocused
+      this.dom.contains(mutation.target) &&
+      mutation.type === 'childList' &&
+      (isiOS() || isAndroid()) &&
+      this.editor.isFocused
     ) {
-      const changedNodes = [
-        ...Array.from(mutation.addedNodes),
-        ...Array.from(mutation.removedNodes),
-      ] as HTMLElement[]
+      const changedNodes = [...Array.from(mutation.addedNodes), ...Array.from(mutation.removedNodes)] as HTMLElement[]
 
       // we’ll check if every changed node is contentEditable
       // to make sure it’s probably mutated by ProseMirror
@@ -254,10 +263,17 @@ export class NodeView<
     return true
   }
 
-  updateAttributes(attributes: {}) {
+  /**
+   * Update the attributes of the prosemirror node.
+   */
+  updateAttributes(attributes: Record<string, any>): void {
     this.editor.commands.command(({ tr }) => {
       const pos = this.getPos()
 
+      if (typeof pos !== 'number') {
+        return false
+      }
+
       tr.setNodeMarkup(pos, undefined, {
         ...this.node.attrs,
         ...attributes,
@@ -267,8 +283,15 @@ export class NodeView<
     })
   }
 
+  /**
+   * Delete the node.
+   */
   deleteNode(): void {
     const from = this.getPos()
+
+    if (typeof from !== 'number') {
+      return
+    }
     const to = from + this.node.nodeSize
 
     this.editor.commands.deleteRange({ from, to })

package/src/PasteRule.ts

@@ -1,15 +1,13 @@
-import { EditorState, Plugin } from '@tiptap/pm/state'
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Fragment } from '@tiptap/pm/model'
+import type { EditorState } from '@tiptap/pm/state'
+import { Plugin } from '@tiptap/pm/state'
 
 import { CommandManager } from './CommandManager.js'
-import { Editor } from './Editor.js'
+import type { Editor } from './Editor.js'
 import { createChainableState } from './helpers/createChainableState.js'
-import {
-  CanCommands,
-  ChainedCommands,
-  ExtendedRegExpMatchArray,
-  Range,
-  SingleCommands,
-} from './types.js'
+import { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
+import type { CanCommands, ChainedCommands, ExtendedRegExpMatchArray, Range, SingleCommands } from './types.js'
 import { isNumber } from './utilities/isNumber.js'
 import { isRegExp } from './utilities/isRegExp.js'
 
@@ -21,11 +19,13 @@ export type PasteRuleMatch = {
   data?: Record<string, any>
 }
 
-export type PasteRuleFinder = RegExp | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
+export type PasteRuleFinder =
+  | RegExp
+  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
 
 /**
  * Paste rules are used to react to pasted content.
- * @see https://tiptap.dev/guide/custom-extensions/#paste-rules
+ * @see https://tiptap.dev/docs/editor/extensions/custom-extensions/extend-existing#paste-rules
  */
 export class PasteRule {
   find: PasteRuleFinder
@@ -83,9 +83,7 @@ const pasteRuleMatcherHandler = (
 
     if (pasteRuleMatch.replaceWith) {
       if (!pasteRuleMatch.text.includes(pasteRuleMatch.replaceWith)) {
-        console.warn(
-          '[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".',
-        )
+        console.warn('[tiptap warn]: "pasteRuleMatch.replaceWith" must be part of "pasteRuleMatch.text".')
       }
 
       result.push(pasteRuleMatch.replaceWith)
@@ -104,9 +102,7 @@ function run(config: {
   pasteEvent: ClipboardEvent | null
   dropEvent: DragEvent | null
 }): boolean {
-  const {
-    editor, state, from, to, rule, pasteEvent, dropEvent,
-  } = config
+  const { editor, state, from, to, rule, pasteEvent, dropEvent } = config
 
   const { commands, chain, can } = new CommandManager({
     editor,
@@ -158,6 +154,9 @@ function run(config: {
   return success
 }
 
+// When dragging across editors, must get another editor instance to delete selection content.
+let tiptapDragFromOtherEditor: Editor | null = null
+
 const createClipboardPasteEvent = (text: string) => {
   const event = new ClipboardEvent('paste', {
     clipboardData: new DataTransfer(),
@@ -179,7 +178,13 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
   let isPastedFromProseMirror = false
   let isDroppedFromProseMirror = false
   let pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
-  let dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  let dropEvent: DragEvent | null
+
+  try {
+    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+  } catch {
+    dropEvent = null
+  }
 
   const processEvent = ({
     state,
@@ -214,7 +219,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
       return
     }
 
-    dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    try {
+      dropEvent = typeof DragEvent !== 'undefined' ? new DragEvent('drop') : null
+    } catch {
+      dropEvent = null
+    }
     pasteEvent = typeof ClipboardEvent !== 'undefined' ? new ClipboardEvent('paste') : null
 
     return tr
@@ -225,16 +234,26 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
       // we register a global drag handler to track the current drag source element
       view(view) {
         const handleDragstart = (event: DragEvent) => {
-          dragSourceElement = view.dom.parentElement?.contains(event.target as Element)
-            ? view.dom.parentElement
-            : null
+          dragSourceElement = view.dom.parentElement?.contains(event.target as Element) ? view.dom.parentElement : null
+
+          if (dragSourceElement) {
+            tiptapDragFromOtherEditor = editor
+          }
+        }
+
+        const handleDragend = () => {
+          if (tiptapDragFromOtherEditor) {
+            tiptapDragFromOtherEditor = null
+          }
         }
 
         window.addEventListener('dragstart', handleDragstart)
+        window.addEventListener('dragend', handleDragend)
 
         return {
           destroy() {
             window.removeEventListener('dragstart', handleDragstart)
+            window.removeEventListener('dragend', handleDragend)
           },
         }
       },
@@ -245,6 +264,20 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
             isDroppedFromProseMirror = dragSourceElement === view.dom.parentElement
             dropEvent = event as DragEvent
 
+            if (!isDroppedFromProseMirror) {
+              const dragFromOtherEditor = tiptapDragFromOtherEditor
+
+              if (dragFromOtherEditor?.isEditable) {
+                // setTimeout to avoid the wrong content after drop, timeout arg can't be empty or 0
+                setTimeout(() => {
+                  const selection = dragFromOtherEditor.state.selection
+
+                  if (selection) {
+                    dragFromOtherEditor.commands.deleteRange({ from: selection.from, to: selection.to })
+                  }
+                }, 10)
+              }
+            }
             return false
           },
 
@@ -266,7 +299,9 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
         const isDrop = transaction.getMeta('uiEvent') === 'drop' && !isDroppedFromProseMirror
 
         // if PasteRule is triggered by insertContent()
-        const simulatedPasteMeta = transaction.getMeta('applyPasteRules')
+        const simulatedPasteMeta = transaction.getMeta('applyPasteRules') as
+          | undefined
+          | { from: number; text: string | ProseMirrorNode | Fragment }
         const isSimulatedPaste = !!simulatedPasteMeta
 
         if (!isPaste && !isDrop && !isSimulatedPaste) {
@@ -275,8 +310,17 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
 
         // Handle simulated paste
         if (isSimulatedPaste) {
-          const { from, text } = simulatedPasteMeta
+          let { text } = simulatedPasteMeta
+
+          if (typeof text === 'string') {
+            text = text as string
+          } else {
+            text = getHTMLFromFragment(Fragment.from(text), state.schema)
+          }
+
+          const { from } = simulatedPasteMeta
           const to = from + text.length
+
           const pasteEvt = createClipboardPasteEvent(text)
 
           return processEvent({

package/src/Tracker.ts

@@ -1,4 +1,4 @@
-import { Transaction } from '@tiptap/pm/state'
+import type { Transaction } from '@tiptap/pm/state'
 
 export interface TrackerResult {
   position: number
@@ -18,17 +18,15 @@ export class Tracker {
   map(position: number): TrackerResult {
     let deleted = false
 
-    const mappedPosition = this.transaction.steps
-      .slice(this.currentStep)
-      .reduce((newPosition, step) => {
-        const mapResult = step.getMap().mapResult(newPosition)
+    const mappedPosition = this.transaction.steps.slice(this.currentStep).reduce((newPosition, step) => {
+      const mapResult = step.getMap().mapResult(newPosition)
 
-        if (mapResult.deleted) {
-          deleted = true
-        }
+      if (mapResult.deleted) {
+        deleted = true
+      }
 
-        return mapResult.pos
-      }, position)
+      return mapResult.pos
+    }, position)
 
     return {
       position: mappedPosition,

package/src/commands/blur.ts

@@ -1,4 +1,4 @@
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -7,21 +7,23 @@ declare module '@tiptap/core' {
        * Removes focus from the editor.
        * @example editor.commands.blur()
        */
-      blur: () => ReturnType,
+      blur: () => ReturnType
     }
   }
 }
 
-export const blur: RawCommands['blur'] = () => ({ editor, view }) => {
-  requestAnimationFrame(() => {
-    if (!editor.isDestroyed) {
-      (view.dom as HTMLElement).blur()
+export const blur: RawCommands['blur'] =
+  () =>
+  ({ editor, view }) => {
+    requestAnimationFrame(() => {
+      if (!editor.isDestroyed) {
+        ;(view.dom as HTMLElement).blur()
 
-      // Browsers should remove the caret on blur but safari does not.
-      // See: https://github.com/ueberdosis/tiptap/issues/2405
-      window?.getSelection()?.removeAllRanges()
-    }
-  })
+        // Browsers should remove the caret on blur but safari does not.
+        // See: https://github.com/ueberdosis/tiptap/issues/2405
+        window?.getSelection()?.removeAllRanges()
+      }
+    })
 
-  return true
-}
+    return true
+  }

package/src/commands/clearContent.ts

@@ -1,18 +1,25 @@
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
     clearContent: {
       /**
        * Clear the whole document.
-       * @param emitUpdate Whether to emit an update event.
        * @example editor.commands.clearContent()
        */
-      clearContent: (emitUpdate?: boolean) => ReturnType,
+      clearContent: (
+        /**
+         * Whether to emit an update event.
+         * @default true
+         */
+        emitUpdate?: boolean,
+      ) => ReturnType
     }
   }
 }
 
-export const clearContent: RawCommands['clearContent'] = (emitUpdate = false) => ({ commands }) => {
-  return commands.setContent('', emitUpdate)
-}
+export const clearContent: RawCommands['clearContent'] =
+  (emitUpdate = true) =>
+  ({ commands }) => {
+    return commands.setContent('', { emitUpdate })
+  }

package/src/commands/clearNodes.ts

@@ -1,6 +1,6 @@
 import { liftTarget } from '@tiptap/pm/transform'
 
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -9,47 +9,49 @@ declare module '@tiptap/core' {
        * Normalize nodes to a simple paragraph.
        * @example editor.commands.clearNodes()
        */
-      clearNodes: () => ReturnType,
+      clearNodes: () => ReturnType
     }
   }
 }
 
-export const clearNodes: RawCommands['clearNodes'] = () => ({ state, tr, dispatch }) => {
-  const { selection } = tr
-  const { ranges } = selection
+export const clearNodes: RawCommands['clearNodes'] =
+  () =>
+  ({ state, tr, dispatch }) => {
+    const { selection } = tr
+    const { ranges } = selection
 
-  if (!dispatch) {
-    return true
-  }
+    if (!dispatch) {
+      return true
+    }
 
-  ranges.forEach(({ $from, $to }) => {
-    state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
-      if (node.type.isText) {
-        return
-      }
+    ranges.forEach(({ $from, $to }) => {
+      state.doc.nodesBetween($from.pos, $to.pos, (node, pos) => {
+        if (node.type.isText) {
+          return
+        }
 
-      const { doc, mapping } = tr
-      const $mappedFrom = doc.resolve(mapping.map(pos))
-      const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize))
-      const nodeRange = $mappedFrom.blockRange($mappedTo)
+        const { doc, mapping } = tr
+        const $mappedFrom = doc.resolve(mapping.map(pos))
+        const $mappedTo = doc.resolve(mapping.map(pos + node.nodeSize))
+        const nodeRange = $mappedFrom.blockRange($mappedTo)
 
-      if (!nodeRange) {
-        return
-      }
+        if (!nodeRange) {
+          return
+        }
 
-      const targetLiftDepth = liftTarget(nodeRange)
+        const targetLiftDepth = liftTarget(nodeRange)
 
-      if (node.type.isTextblock) {
-        const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
+        if (node.type.isTextblock) {
+          const { defaultType } = $mappedFrom.parent.contentMatchAt($mappedFrom.index())
 
-        tr.setNodeMarkup(nodeRange.start, defaultType)
-      }
+          tr.setNodeMarkup(nodeRange.start, defaultType)
+        }
 
-      if (targetLiftDepth || targetLiftDepth === 0) {
-        tr.lift(nodeRange, targetLiftDepth)
-      }
+        if (targetLiftDepth || targetLiftDepth === 0) {
+          tr.lift(nodeRange, targetLiftDepth)
+        }
+      })
     })
-  })
 
-  return true
-}
+    return true
+  }

package/src/commands/command.ts

@@ -1,4 +1,4 @@
-import { Command, RawCommands } from '../types.js'
+import type { Command, RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -12,7 +12,7 @@ declare module '@tiptap/core' {
        *   return true
        * })
        */
-      command: (fn: (props: Parameters<Command>[0]) => boolean) => ReturnType,
+      command: (fn: (props: Parameters<Command>[0]) => boolean) => ReturnType
     }
   }
 }

package/src/commands/createParagraphNear.ts

@@ -1,6 +1,6 @@
 import { createParagraphNear as originalCreateParagraphNear } from '@tiptap/pm/commands'
 
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -14,6 +14,8 @@ declare module '@tiptap/core' {
   }
 }
 
-export const createParagraphNear: RawCommands['createParagraphNear'] = () => ({ state, dispatch }) => {
-  return originalCreateParagraphNear(state, dispatch)
-}
+export const createParagraphNear: RawCommands['createParagraphNear'] =
+  () =>
+  ({ state, dispatch }) => {
+    return originalCreateParagraphNear(state, dispatch)
+  }