@tiptap/core 3.19.0 → 3.20.1

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,
@@ -1416,6 +1431,67 @@ function getAttributesFromExtensions(extensions) {
 }
 
 // src/utilities/mergeAttributes.ts
+function splitStyleDeclarations(styles) {
+  const result = [];
+  let current = "";
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let parenDepth = 0;
+  const length = styles.length;
+  for (let i = 0; i < length; i += 1) {
+    const char = styles[i];
+    if (char === "'" && !inDoubleQuote) {
+      inSingleQuote = !inSingleQuote;
+      current += char;
+      continue;
+    }
+    if (char === '"' && !inSingleQuote) {
+      inDoubleQuote = !inDoubleQuote;
+      current += char;
+      continue;
+    }
+    if (!inSingleQuote && !inDoubleQuote) {
+      if (char === "(") {
+        parenDepth += 1;
+        current += char;
+        continue;
+      }
+      if (char === ")" && parenDepth > 0) {
+        parenDepth -= 1;
+        current += char;
+        continue;
+      }
+      if (char === ";" && parenDepth === 0) {
+        result.push(current);
+        current = "";
+        continue;
+      }
+    }
+    current += char;
+  }
+  if (current) {
+    result.push(current);
+  }
+  return result;
+}
+function parseStyleEntries(styles) {
+  const pairs = [];
+  const declarations = splitStyleDeclarations(styles || "");
+  const numDeclarations = declarations.length;
+  for (let i = 0; i < numDeclarations; i += 1) {
+    const declaration = declarations[i];
+    const firstColonIndex = declaration.indexOf(":");
+    if (firstColonIndex === -1) {
+      continue;
+    }
+    const property = declaration.slice(0, firstColonIndex).trim();
+    const value = declaration.slice(firstColonIndex + 1).trim();
+    if (property && value) {
+      pairs.push([property, value]);
+    }
+  }
+  return pairs;
+}
 function mergeAttributes(...objects) {
   return objects.filter((item) => !!item).reduce((items, item) => {
     const mergedAttributes = { ...items };
@@ -1431,17 +1507,7 @@ function mergeAttributes(...objects) {
         const insertClasses = valueClasses.filter((valueClass) => !existingClasses.includes(valueClass));
         mergedAttributes[key] = [...existingClasses, ...insertClasses].join(" ");
       } else if (key === "style") {
-        const newStyles = value ? value.split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-        const existingStyles = mergedAttributes[key] ? mergedAttributes[key].split(";").map((style2) => style2.trim()).filter(Boolean) : [];
-        const styleMap = /* @__PURE__ */ new Map();
-        existingStyles.forEach((style2) => {
-          const [property, val] = style2.split(":").map((part) => part.trim());
-          styleMap.set(property, val);
-        });
-        newStyles.forEach((style2) => {
-          const [property, val] = style2.split(":").map((part) => part.trim());
-          styleMap.set(property, val);
-        });
+        const styleMap = new Map([...parseStyleEntries(mergedAttributes[key]), ...parseStyleEntries(value)]);
         mergedAttributes[key] = Array.from(styleMap.entries()).map(([property, val]) => `${property}: ${val}`).join("; ");
       } else {
         mergedAttributes[key] = value;
@@ -1983,6 +2049,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 +3752,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 +4807,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 +4976,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 +4986,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