@tiptap/core 3.14.0 → 3.15.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/core",
   "description": "headless rich text editor",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -52,10 +52,10 @@
     "jsx-dev-runtime"
   ],
   "devDependencies": {
-    "@tiptap/pm": "^3.14.0"
+    "@tiptap/pm": "^3.15.0"
   },
   "peerDependencies": {
-    "@tiptap/pm": "^3.14.0"
+    "@tiptap/pm": "^3.15.0"
   },
   "repository": {
     "type": "git",

package/src/Editor.ts

@@ -115,6 +115,7 @@ export class Editor extends EventEmitter<EditorEvents> {
     onPaste: () => null,
     onDrop: () => null,
     onDelete: () => null,
+    enableExtensionDispatchTransaction: true,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -518,14 +519,23 @@ export class Editor extends EventEmitter<EditorEvents> {
    * Creates a ProseMirror view.
    */
   private createView(element: NonNullable<EditorOptions['element']>): void {
+    const { editorProps, enableExtensionDispatchTransaction } = this.options
+    // If a user provided a custom `dispatchTransaction` through `editorProps`,
+    // we use that as the base dispatch function.
+    // Otherwise, we use Tiptap's internal `dispatchTransaction` method.
+    const baseDispatch = (editorProps as any).dispatchTransaction || this.dispatchTransaction.bind(this)
+    const dispatch = enableExtensionDispatchTransaction
+      ? this.extensionManager.dispatchTransaction(baseDispatch)
+      : baseDispatch
+
     this.editorView = new EditorView(element, {
-      ...this.options.editorProps,
+      ...editorProps,
       attributes: {
         // add `role="textbox"` to the editor element
         role: 'textbox',
-        ...this.options.editorProps?.attributes,
+        ...editorProps?.attributes,
       },
-      dispatchTransaction: this.dispatchTransaction.bind(this),
+      dispatchTransaction: dispatch,
       state: this.editorState,
       markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews,

package/src/Extendable.ts

@@ -9,6 +9,7 @@ import type { Node } from './Node.js'
 import type { PasteRule } from './PasteRule.js'
 import type {
   AnyConfig,
+  DispatchTransactionProps,
   EditorEvents,
   Extensions,
   GlobalAttributes,
@@ -447,6 +448,33 @@ export interface ExtendableConfig<
         event: EditorEvents['destroy'],
       ) => void)
     | null
+
+  /**
+   * This hook allows you to intercept and modify transactions before they are dispatched.
+   *
+   * Example
+   * ```ts
+   * dispatchTransaction({ transaction, next }) {
+   *   console.log('Dispatching transaction:', transaction)
+   *   next(transaction)
+   * }
+   * ```
+   *
+   * @param props - The dispatch transaction props
+   */
+  dispatchTransaction?:
+    | ((
+        this: {
+          name: string
+          options: Options
+          storage: Storage
+          editor: Editor
+          type: PMType
+          parent: ParentConfig<Config>['dispatchTransaction']
+        },
+        props: DispatchTransactionProps,
+      ) => void)
+    | null
 }
 
 export class Extendable<

package/src/ExtensionManager.ts

@@ -1,6 +1,6 @@
 import { keymap } from '@tiptap/pm/keymap'
 import type { Schema } from '@tiptap/pm/model'
-import type { Plugin } from '@tiptap/pm/state'
+import type { Plugin, Transaction } from '@tiptap/pm/state'
 import type { MarkViewConstructor, NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
@@ -243,6 +243,40 @@ export class ExtensionManager {
     )
   }
 
+  /**
+   * Get the composed dispatchTransaction function from all extensions.
+   * @param baseDispatch The base dispatch function (e.g. from the editor or user props)
+   * @returns A composed dispatch function
+   */
+  dispatchTransaction(baseDispatch: (tr: Transaction) => void): (tr: Transaction) => void {
+    const { editor } = this
+    const extensions = sortExtensions([...this.extensions].reverse())
+
+    return extensions.reduceRight((next, extension) => {
+      const context = {
+        name: extension.name,
+        options: extension.options,
+        storage: this.editor.extensionStorage[extension.name as keyof Storage],
+        editor,
+        type: getSchemaTypeByName(extension.name, this.schema),
+      }
+
+      const dispatchTransaction = getExtensionField<AnyConfig['dispatchTransaction']>(
+        extension,
+        'dispatchTransaction',
+        context,
+      )
+
+      if (!dispatchTransaction) {
+        return next
+      }
+
+      return (transaction: Transaction) => {
+        dispatchTransaction.call(context, { transaction, next })
+      }
+    }, baseDispatch)
+  }
+
   get markViews(): Record<string, MarkViewConstructor> {
     const { editor } = this
     const { markExtensions } = splitExtensions(this.extensions)

package/src/types.ts

@@ -264,6 +264,23 @@ export interface EditorEvents {
   )
 }
 
+/**
+ * Props passed to the `dispatchTransaction` hook in extensions.
+ */
+export type DispatchTransactionProps = {
+  /**
+   * The transaction that is about to be dispatched.
+   */
+  transaction: Transaction
+  /**
+   * A function that should be called to pass the transaction down to the next extension
+   * (or eventually to the editor).
+   *
+   * @param transaction The transaction to dispatch
+   */
+  next: (transaction: Transaction) => void
+}
+
 export type EnableRules = (AnyExtension | string)[] | boolean
 
 export interface EditorOptions {
@@ -450,6 +467,17 @@ export interface EditorOptions {
    * Called when content is deleted from the editor.
    */
   onDelete: (props: EditorEvents['delete']) => void
+  /**
+   * Whether to enable extension-level dispatching of transactions.
+   * If `false`, extensions cannot define their own `dispatchTransaction` hook.
+   *
+   * @default true
+   * @example
+   * new Editor({
+   *   enableExtensionDispatchTransaction: false,
+   * })
+   */
+  enableExtensionDispatchTransaction?: boolean
 }
 
 /**