@tiptap/core 2.11.7 → 3.0.0-beta.0

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

package/src/NodeView.ts

@@ -1,8 +1,8 @@
 import { NodeSelection } from '@tiptap/pm/state'
-import { NodeView as ProseMirrorNodeView, ViewMutationRecord } from '@tiptap/pm/view'
+import type { NodeView as ProseMirrorNodeView, ViewMutationRecord } from '@tiptap/pm/view'
 
-import { Editor as CoreEditor } from './Editor.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'
 
@@ -14,7 +14,8 @@ export class NodeView<
   Component,
   NodeEditor extends CoreEditor = CoreEditor,
   Options extends NodeViewRendererOptions = NodeViewRendererOptions,
-> implements ProseMirrorNodeView {
+> implements ProseMirrorNodeView
+{
   component: Component
 
   editor: NodeEditor
@@ -74,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
@@ -98,9 +98,7 @@ export class NodeView<
       y = handleBox.y - domBox.y + offsetY
     }
 
-    const clonedNode = this.dom.cloneNode(true) as HTMLElement
-
-    event.dataTransfer?.setDragImage(clonedNode, x, y)
+    event.dataTransfer?.setDragImage(this.dom, x, y)
 
     const pos = this.getPos()
 
@@ -197,14 +195,7 @@ 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
     }
 
@@ -242,15 +233,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

package/src/PasteRule.ts

@@ -1,31 +1,27 @@
-import { Fragment, Node as ProseMirrorNode } from '@tiptap/pm/model'
-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 { getHTMLFromFragment } from './helpers/getHTMLFromFragment.js'
-import {
-  CanCommands,
-  ChainedCommands,
-  ExtendedRegExpMatchArray,
-  Range,
-  SingleCommands,
-} from './types.js'
+import type { CanCommands, ChainedCommands, ExtendedRegExpMatchArray, Range, SingleCommands } from './types.js'
 import { isNumber } from './utilities/isNumber.js'
 import { isRegExp } from './utilities/isRegExp.js'
 
 export type PasteRuleMatch = {
-  index: number;
-  text: string;
-  replaceWith?: string;
-  match?: RegExpMatchArray;
-  data?: Record<string, any>;
-};
+  index: number
+  text: string
+  replaceWith?: string
+  match?: RegExpMatchArray
+  data?: Record<string, any>
+}
 
 export type PasteRuleFinder =
   | RegExp
-  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined);
+  | ((text: string, event?: ClipboardEvent | null) => PasteRuleMatch[] | null | undefined)
 
 /**
  * Paste rules are used to react to pasted content.
@@ -35,28 +31,28 @@ export class PasteRule {
   find: PasteRuleFinder
 
   handler: (props: {
-    state: EditorState;
-    range: Range;
-    match: ExtendedRegExpMatchArray;
-    commands: SingleCommands;
-    chain: () => ChainedCommands;
-    can: () => CanCommands;
-    pasteEvent: ClipboardEvent | null;
-    dropEvent: DragEvent | null;
+    state: EditorState
+    range: Range
+    match: ExtendedRegExpMatchArray
+    commands: SingleCommands
+    chain: () => ChainedCommands
+    can: () => CanCommands
+    pasteEvent: ClipboardEvent | null
+    dropEvent: DragEvent | null
   }) => void | null
 
   constructor(config: {
-    find: PasteRuleFinder;
+    find: PasteRuleFinder
     handler: (props: {
-      can: () => CanCommands;
-      chain: () => ChainedCommands;
-      commands: SingleCommands;
-      dropEvent: DragEvent | null;
-      match: ExtendedRegExpMatchArray;
-      pasteEvent: ClipboardEvent | null;
-      range: Range;
-      state: EditorState;
-    }) => void | null;
+      can: () => CanCommands
+      chain: () => ChainedCommands
+      commands: SingleCommands
+      dropEvent: DragEvent | null
+      match: ExtendedRegExpMatchArray
+      pasteEvent: ClipboardEvent | null
+      range: Range
+      state: EditorState
+    }) => void | null
   }) {
     this.find = config.find
     this.handler = config.handler
@@ -87,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)
@@ -100,17 +94,15 @@ const pasteRuleMatcherHandler = (
 }
 
 function run(config: {
-  editor: Editor;
-  state: EditorState;
-  from: number;
-  to: number;
-  rule: PasteRule;
-  pasteEvent: ClipboardEvent | null;
-  dropEvent: DragEvent | null;
+  editor: Editor
+  state: EditorState
+  from: number
+  to: number
+  rule: PasteRule
+  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,
@@ -201,11 +193,11 @@ export function pasteRulesPlugin(props: { editor: Editor; rules: PasteRule[] }):
     rule,
     pasteEvt,
   }: {
-    state: EditorState;
-    from: number;
-    to: { b: number };
-    rule: PasteRule;
-    pasteEvt: ClipboardEvent | null;
+    state: EditorState
+    from: number
+    to: { b: number }
+    rule: PasteRule
+    pasteEvt: ClipboardEvent | null
   }) => {
     const tr = state.tr
     const chainableState = createChainableState({
@@ -242,9 +234,7 @@ 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

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)
+  }

package/src/commands/cut.ts

@@ -1,6 +1,6 @@
 import { TextSelection } from '@tiptap/pm/state'
 
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -13,22 +13,24 @@ declare module '@tiptap/core' {
        * @param targetPos The position to insert the content at.
        * @example editor.commands.cut({ from: 1, to: 3 }, 5)
        */
-      cut: ({ from, to }: { from: number, to: number }, targetPos: number) => ReturnType,
+      cut: ({ from, to }: { from: number; to: number }, targetPos: number) => ReturnType
     }
   }
 }
 
-export const cut: RawCommands['cut'] = (originRange, targetPos) => ({ editor, tr }) => {
-  const { state } = editor
+export const cut: RawCommands['cut'] =
+  (originRange, targetPos) =>
+  ({ editor, tr }) => {
+    const { state } = editor
 
-  const contentSlice = state.doc.slice(originRange.from, originRange.to)
+    const contentSlice = state.doc.slice(originRange.from, originRange.to)
 
-  tr.deleteRange(originRange.from, originRange.to)
-  const newPos = tr.mapping.map(targetPos)
+    tr.deleteRange(originRange.from, originRange.to)
+    const newPos = tr.mapping.map(targetPos)
 
-  tr.insert(newPos, contentSlice.content)
+    tr.insert(newPos, contentSlice.content)
 
-  tr.setSelection(new TextSelection(tr.doc.resolve(newPos - 1)))
+    tr.setSelection(new TextSelection(tr.doc.resolve(newPos - 1)))
 
-  return true
-}
+    return true
+  }

package/src/commands/deleteCurrentNode.ts

@@ -1,4 +1,4 @@
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -7,36 +7,38 @@ declare module '@tiptap/core' {
        * Delete the node that currently has the selection anchor.
        * @example editor.commands.deleteCurrentNode()
        */
-      deleteCurrentNode: () => ReturnType,
+      deleteCurrentNode: () => ReturnType
     }
   }
 }
 
-export const deleteCurrentNode: RawCommands['deleteCurrentNode'] = () => ({ tr, dispatch }) => {
-  const { selection } = tr
-  const currentNode = selection.$anchor.node()
+export const deleteCurrentNode: RawCommands['deleteCurrentNode'] =
+  () =>
+  ({ tr, dispatch }) => {
+    const { selection } = tr
+    const currentNode = selection.$anchor.node()
 
-  // if there is content inside the current node, break out of this command
-  if (currentNode.content.size > 0) {
-    return false
-  }
+    // if there is content inside the current node, break out of this command
+    if (currentNode.content.size > 0) {
+      return false
+    }
 
-  const $pos = tr.selection.$anchor
+    const $pos = tr.selection.$anchor
 
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth)
+    for (let depth = $pos.depth; depth > 0; depth -= 1) {
+      const node = $pos.node(depth)
 
-    if (node.type === currentNode.type) {
-      if (dispatch) {
-        const from = $pos.before(depth)
-        const to = $pos.after(depth)
+      if (node.type === currentNode.type) {
+        if (dispatch) {
+          const from = $pos.before(depth)
+          const to = $pos.after(depth)
 
-        tr.delete(from, to).scrollIntoView()
-      }
+          tr.delete(from, to).scrollIntoView()
+        }
 
-      return true
+        return true
+      }
     }
-  }
 
-  return false
-}
+    return false
+  }

package/src/commands/deleteNode.ts

@@ -1,7 +1,7 @@
-import { NodeType } from '@tiptap/pm/model'
+import type { NodeType } from '@tiptap/pm/model'
 
 import { getNodeType } from '../helpers/getNodeType.js'
-import { RawCommands } from '../types.js'
+import type { RawCommands } from '../types.js'
 
 declare module '@tiptap/core' {
   interface Commands<ReturnType> {
@@ -11,29 +11,31 @@ declare module '@tiptap/core' {
        * @param typeOrName The type or name of the node.
        * @example editor.commands.deleteNode('paragraph')
        */
-      deleteNode: (typeOrName: string | NodeType) => ReturnType,
+      deleteNode: (typeOrName: string | NodeType) => ReturnType
     }
   }
 }
 
-export const deleteNode: RawCommands['deleteNode'] = typeOrName => ({ tr, state, dispatch }) => {
-  const type = getNodeType(typeOrName, state.schema)
-  const $pos = tr.selection.$anchor
+export const deleteNode: RawCommands['deleteNode'] =
+  typeOrName =>
+  ({ tr, state, dispatch }) => {
+    const type = getNodeType(typeOrName, state.schema)
+    const $pos = tr.selection.$anchor
 
-  for (let depth = $pos.depth; depth > 0; depth -= 1) {
-    const node = $pos.node(depth)
+    for (let depth = $pos.depth; depth > 0; depth -= 1) {
+      const node = $pos.node(depth)
 
-    if (node.type === type) {
-      if (dispatch) {
-        const from = $pos.before(depth)
-        const to = $pos.after(depth)
+      if (node.type === type) {
+        if (dispatch) {
+          const from = $pos.before(depth)
+          const to = $pos.after(depth)
 
-        tr.delete(from, to).scrollIntoView()
-      }
+          tr.delete(from, to).scrollIntoView()
+        }
 
-      return true
+        return true
+      }
     }
-  }
 
-  return false
-}
+    return false
+  }