@tiptap/core 3.18.0 → 3.20.0

package/package.json

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

package/src/Editor.ts

@@ -2,7 +2,7 @@
 import type { MarkType, Node as ProseMirrorNode, NodeType, Schema } from '@tiptap/pm/model'
 import type { Plugin, PluginKey, Transaction } from '@tiptap/pm/state'
 import { EditorState } from '@tiptap/pm/state'
-import { EditorView } from '@tiptap/pm/view'
+import { type DirectEditorProps, EditorView } from '@tiptap/pm/view'
 
 import { CommandManager } from './CommandManager.js'
 import { EventEmitter } from './EventEmitter.js'
@@ -300,7 +300,7 @@ export class Editor extends EventEmitter<EditorEvents> {
   }
 
   /**
-   * Returns the editor state.
+   * Returns the editor view.
    */
   public get view(): EditorView {
     if (this.editorView) {
@@ -523,11 +523,15 @@ export class Editor extends EventEmitter<EditorEvents> {
     // 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 baseDispatch = (editorProps as DirectEditorProps).dispatchTransaction || this.dispatchTransaction.bind(this)
     const dispatch = enableExtensionDispatchTransaction
       ? this.extensionManager.dispatchTransaction(baseDispatch)
       : baseDispatch
 
+    // Compose transformPastedHTML from extensions and user-provided editorProps
+    const baseTransformPastedHTML = (editorProps as DirectEditorProps).transformPastedHTML
+    const transformPastedHTML = this.extensionManager.transformPastedHTML(baseTransformPastedHTML)
+
     this.editorView = new EditorView(element, {
       ...editorProps,
       attributes: {
@@ -536,6 +540,7 @@ export class Editor extends EventEmitter<EditorEvents> {
         ...editorProps?.attributes,
       },
       dispatchTransaction: dispatch,
+      transformPastedHTML,
       state: this.editorState,
       markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews,

package/src/Extendable.ts

@@ -213,6 +213,30 @@ export interface ExtendableConfig<
     parent: ParentConfig<Config>['addProseMirrorPlugins']
   }) => Plugin[]
 
+  /**
+   * This function transforms pasted HTML content before it's parsed.
+   * Extensions can use this to modify or clean up pasted HTML.
+   * The transformations are chained - each extension's transform receives
+   * the output from the previous extension's transform.
+   * @see https://tiptap.dev/docs/editor/guide/custom-extensions#transform-pasted-html
+   * @example
+   * transformPastedHTML(html) {
+   *   // Remove all style attributes
+   *   return html.replace(/style="[^"]*"/g, '')
+   * }
+   */
+  transformPastedHTML?: (
+    this: {
+      name: string
+      options: Options
+      storage: Storage
+      editor: Editor
+      type: PMType
+      parent: ParentConfig<Config>['transformPastedHTML']
+    },
+    html: string,
+  ) => string
+
   /**
    * This function adds additional extensions to the editor. This is useful for
    * building extension kits.

package/src/ExtensionManager.ts

@@ -1,7 +1,7 @@
 import { keymap } from '@tiptap/pm/keymap'
 import type { Schema } from '@tiptap/pm/model'
 import type { Plugin, Transaction } from '@tiptap/pm/state'
-import type { MarkViewConstructor, NodeViewConstructor } from '@tiptap/pm/view'
+import type { EditorView, MarkViewConstructor, NodeViewConstructor } from '@tiptap/pm/view'
 
 import type { Editor } from './Editor.js'
 import {
@@ -277,6 +277,47 @@ export class ExtensionManager {
     }, baseDispatch)
   }
 
+  /**
+   * Get the composed transformPastedHTML function from all extensions.
+   * @param baseTransform The base transform function (e.g. from the editor props)
+   * @returns A composed transform function that chains all extension transforms
+   */
+  transformPastedHTML(
+    baseTransform?: (html: string, view?: any) => string,
+  ): (html: string, view?: EditorView) => string {
+    const { editor } = this
+    const extensions = sortExtensions([...this.extensions])
+
+    return extensions.reduce(
+      (transform, 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 extensionTransform = getExtensionField<AnyConfig['transformPastedHTML']>(
+          extension,
+          'transformPastedHTML',
+          context,
+        )
+
+        if (!extensionTransform) {
+          return transform
+        }
+
+        return (html: string, view?: any) => {
+          // Chain the transforms: pass the result of the previous transform to the next
+          const transformedHtml = transform(html, view)
+          return extensionTransform.call(context, transformedHtml)
+        }
+      },
+      baseTransform || ((html: string) => html),
+    )
+  }
+
   get markViews(): Record<string, MarkViewConstructor> {
     const { editor } = this
     const { markExtensions } = splitExtensions(this.extensions)