@tiptap/core 3.18.0 → 3.20.0

package/dist/index.d.cts

@@ -719,6 +719,26 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         type: PMType;
         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.
@@ -1496,8 +1516,18 @@ type ExtensionAttribute = {
 type GlobalAttributes = {
     /**
      * The node & mark types this attribute should be applied to.
+     * Can be a specific array of type names, or a shorthand string:
+     * - `'*'` applies to all nodes (excluding text) and all marks
+     * - `'nodes'` applies to all nodes (excluding the built-in text node)
+     * - `'marks'` applies to all marks
+     * - `string[]` applies to specific node/mark types by name
+     * @example
+     * types: '*'                                    // All nodes and marks
+     * types: 'nodes'                                // All nodes
+     * types: 'marks'                                // All marks
+     * types: ['heading', 'paragraph']               // Specific types
      */
-    types: string[];
+    types: string[] | 'nodes' | 'marks' | '*';
     /**
      * The attributes to add to the node or mark types.
      */
@@ -2320,6 +2350,12 @@ declare class ExtensionManager {
      * @returns A composed dispatch function
      */
     dispatchTransaction(baseDispatch: (tr: Transaction) => void): (tr: Transaction) => void;
+    /**
+     * 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;
     get markViews(): Record<string, MarkViewConstructor>;
     /**
      * Go through all extensions, create extension storages & setup marks
@@ -3528,7 +3564,7 @@ declare class Editor extends EventEmitter<EditorEvents> {
      */
     get isEditable(): boolean;
     /**
-     * Returns the editor state.
+     * Returns the editor view.
      */
     get view(): EditorView;
     /**

package/dist/index.d.ts

@@ -719,6 +719,26 @@ interface ExtendableConfig<Options = any, Storage = any, Config extends Extensio
         type: PMType;
         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.
@@ -1496,8 +1516,18 @@ type ExtensionAttribute = {
 type GlobalAttributes = {
     /**
      * The node & mark types this attribute should be applied to.
+     * Can be a specific array of type names, or a shorthand string:
+     * - `'*'` applies to all nodes (excluding text) and all marks
+     * - `'nodes'` applies to all nodes (excluding the built-in text node)
+     * - `'marks'` applies to all marks
+     * - `string[]` applies to specific node/mark types by name
+     * @example
+     * types: '*'                                    // All nodes and marks
+     * types: 'nodes'                                // All nodes
+     * types: 'marks'                                // All marks
+     * types: ['heading', 'paragraph']               // Specific types
      */
-    types: string[];
+    types: string[] | 'nodes' | 'marks' | '*';
     /**
      * The attributes to add to the node or mark types.
      */
@@ -2320,6 +2350,12 @@ declare class ExtensionManager {
      * @returns A composed dispatch function
      */
     dispatchTransaction(baseDispatch: (tr: Transaction) => void): (tr: Transaction) => void;
+    /**
+     * 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;
     get markViews(): Record<string, MarkViewConstructor>;
     /**
      * Go through all extensions, create extension storages & setup marks
@@ -3528,7 +3564,7 @@ declare class Editor extends EventEmitter<EditorEvents> {
      */
     get isEditable(): boolean;
     /**
-     * Returns the editor state.
+     * Returns the editor view.
      */
     get view(): EditorView;
     /**

package/dist/index.js

@@ -1348,6 +1348,9 @@ function getAttributesFromExtensions(extensions) {
     keepOnSplit: true,
     isRequired: false
   };
+  const nodeExtensionTypes = nodeExtensions.filter((ext) => ext.name !== "text").map((ext) => ext.name);
+  const markExtensionTypes = markExtensions.map((ext) => ext.name);
+  const allExtensionTypes = [...nodeExtensionTypes, ...markExtensionTypes];
   extensions.forEach((extension) => {
     const context = {
       name: extension.name,
@@ -1365,7 +1368,19 @@ function getAttributesFromExtensions(extensions) {
     }
     const globalAttributes = addGlobalAttributes();
     globalAttributes.forEach((globalAttribute) => {
-      globalAttribute.types.forEach((type) => {
+      let resolvedTypes;
+      if (Array.isArray(globalAttribute.types)) {
+        resolvedTypes = globalAttribute.types;
+      } else if (globalAttribute.types === "*") {
+        resolvedTypes = allExtensionTypes;
+      } else if (globalAttribute.types === "nodes") {
+        resolvedTypes = nodeExtensionTypes;
+      } else if (globalAttribute.types === "marks") {
+        resolvedTypes = markExtensionTypes;
+      } else {
+        resolvedTypes = [];
+      }
+      resolvedTypes.forEach((type) => {
         Object.entries(globalAttribute.attributes).forEach(([name, attribute]) => {
           extensionAttributes.push({
             type,
@@ -1983,6 +1998,9 @@ function isMarkActive(state, typeOrName, attributes = {}) {
     const from = $from.pos;
     const to = $to.pos;
     state.doc.nodesBetween(from, to, (node, pos) => {
+      if (type && node.inlineContent && !node.type.allowsMarkType(type)) {
+        return false;
+      }
       if (!node.isText && !node.marks.length) {
         return;
       }
@@ -3683,6 +3701,39 @@ var ExtensionManager = class {
       };
     }, 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) {
+    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],
+          editor,
+          type: getSchemaTypeByName(extension.name, this.schema)
+        };
+        const extensionTransform = getExtensionField(
+          extension,
+          "transformPastedHTML",
+          context
+        );
+        if (!extensionTransform) {
+          return transform;
+        }
+        return (html, view) => {
+          const transformedHtml = transform(html, view);
+          return extensionTransform.call(context, transformedHtml);
+        };
+      },
+      baseTransform || ((html) => html)
+    );
+  }
   get markViews() {
     const { editor } = this;
     const { markExtensions } = splitExtensions(this.extensions);
@@ -4705,7 +4756,7 @@ var Editor = class extends EventEmitter {
     return this.options.editable && this.view && this.view.editable;
   }
   /**
-   * Returns the editor state.
+   * Returns the editor view.
    */
   get view() {
     if (this.editorView) {
@@ -4874,6 +4925,8 @@ var Editor = class extends EventEmitter {
     const { editorProps, enableExtensionDispatchTransaction } = this.options;
     const baseDispatch = editorProps.dispatchTransaction || this.dispatchTransaction.bind(this);
     const dispatch = enableExtensionDispatchTransaction ? this.extensionManager.dispatchTransaction(baseDispatch) : baseDispatch;
+    const baseTransformPastedHTML = editorProps.transformPastedHTML;
+    const transformPastedHTML = this.extensionManager.transformPastedHTML(baseTransformPastedHTML);
     this.editorView = new EditorView(element, {
       ...editorProps,
       attributes: {
@@ -4882,6 +4935,7 @@ var Editor = class extends EventEmitter {
         ...editorProps == null ? void 0 : editorProps.attributes
       },
       dispatchTransaction: dispatch,
+      transformPastedHTML,
       state: this.editorState,
       markViews: this.extensionManager.markViews,
       nodeViews: this.extensionManager.nodeViews