Interface MarkConfig<Options, Storage>

interface MarkConfig<Options = any, Storage = any> {
    addAttributes?: (
        this: {
            editor?: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => {} | Attributes) | undefined;
            storage: Storage;
        },
    ) => {}
    | Attributes;
    addCommands?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => ReturnType<Required<T>[P]>) | undefined;
            storage: Storage;
            type: MarkType;
        },
    ) => Partial<RawCommands>;
    addExtensions?: (
        this: {
            name: string;
            options: Options;
            parent: ((...args: []) => Extensions) | undefined;
            storage: Storage;
        },
    ) => Extensions;
    addGlobalAttributes?: (
        this: {
            extensions: (Mark<any, any> | Node<any, any>)[];
            name: string;
            options: Options;
            parent: ((...args: []) => GlobalAttributes) | undefined;
            storage: Storage;
        },
    ) => GlobalAttributes;
    addInputRules?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => InputRule[]) | undefined;
            storage: Storage;
            type: MarkType;
        },
    ) => InputRule[];
    addKeyboardShortcuts?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent:
                | ((...args: []) => { [key: string]: KeyboardShortcutCommand })
                | undefined;
            storage: Storage;
            type: MarkType;
        },
    ) => { [key: string]: KeyboardShortcutCommand };
    addMarkView?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }) => MarkViewRenderer<MarkViewRendererProps>) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
            ) => MarkViewRenderer
        )
        | null;
    addOptions?: (
        this: { name: string; parent: ((...args: []) => Options) | undefined },
    ) => Options;
    addPasteRules?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => PasteRule[]) | undefined;
            storage: Storage;
            type: MarkType;
        },
    ) => PasteRule[];
    addProseMirrorPlugins?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => Plugin<any>[]) | undefined;
            storage: Storage;
            type: MarkType;
        },
    ) => Plugin<any>[];
    addStorage?: (
        this: {
            name: string;
            options: Options;
            parent: ((...args: []) => Storage) | undefined;
        },
    ) => Storage;
    code?: | boolean
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean) | undefined;
                storage: Storage;
            },
        ) => boolean
    );
    dispatchTransaction?: | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, props: DispatchTransactionProps) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            props: DispatchTransactionProps,
        ) => void
    )
    | null;
    excludes?:
        | string
        | (
            (
                this: {
                    editor?: Editor;
                    name: string;
                    options: Options;
                    parent: string | ((this: { name: string; options: Options; storage: Storage; parent: string | ... | undefined; editor?: Editor | undefined; }) => string | undefined) | undefined;
                    storage: Storage;
                },
            ) => string
            | undefined
        );
    exitable?: boolean | (() => boolean);
    extendMarkSchema?:
        | (
            (
                this: {
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; }, extension: Mark<any, any>) => Record<string, any>) | null | undefined;
                    storage: Storage;
                },
                extension: Mark,
            ) => Record<string, any>
        )
        | null;
    extendNodeSchema?:
        | (
            (
                this: {
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; }, extension: Node<any, any>) => Record<string, any>) | null | undefined;
                    storage: Storage;
                },
                extension: Node,
            ) => Record<string, any>
        )
        | null;
    group?:
        | string
        | (
            (
                this: {
                    editor?: Editor;
                    name: string;
                    options: Options;
                    parent: string | ((this: { name: string; options: Options; storage: Storage; parent: string | ... | undefined; editor?: Editor | undefined; }) => string | undefined) | undefined;
                    storage: Storage;
                },
            ) => string
            | undefined
        );
    inclusive?:
        | boolean
        | (
            (
                this: {
                    editor?: Editor;
                    name: string;
                    options: Options;
                    parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean | undefined) | undefined;
                    storage: Storage;
                },
            ) => boolean
            | undefined
        );
    keepOnSplit?: boolean | (() => boolean);
    markdownOptions?: {
        htmlReopen?: { close: string; open: string };
        indentsContent?: boolean;
    };
    markdownTokenizer?: MarkdownTokenizer;
    markdownTokenName?: string;
    name: string;
    onBeforeCreate?: | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: { editor: Editor; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor },
        ) => void
    )
    | null;
    onBlur?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: { editor: Editor; event: FocusEvent; transaction: Transaction },
            ) => void
        )
        | null;
    onCreate?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: { editor: Editor; }) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: { editor: Editor },
            ) => void
        )
        | null;
    onDestroy?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: void) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: void,
            ) => void
        )
        | null;
    onFocus?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: { editor: Editor; event: FocusEvent; transaction: Transaction },
            ) => void
        )
        | null;
    onSelectionUpdate?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; }) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: { editor: Editor; transaction: Transaction },
            ) => void
        )
        | null;
    onTransaction?:
        | (
            (
                this: {
                    editor: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }) => void) | null | undefined;
                    storage: Storage;
                    type: MarkType;
                },
                event: {
                    appendedTransactions: Transaction[];
                    editor: Editor;
                    transaction: Transaction;
                },
            ) => void
        )
        | null;
    onUpdate?: | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: {
                appendedTransactions: Transaction[];
                editor: Editor;
                transaction: Transaction;
            },
        ) => void
    )
    | null;
    parseHTML?: (
        this: {
            editor?: Editor;
            name: string;
            options: Options;
            parent: ((...args: []) => readonly ParseRule[] | undefined) | undefined;
            storage: Storage;
        },
    ) => readonly ParseRule[]
    | undefined;
    parseMarkdown?: (
        token: MarkdownToken,
        helpers: MarkdownParseHelpers,
    ) => MarkdownParseResult;
    priority?: number;
    renderHTML?:
        | (
            (
                this: {
                    editor?: Editor;
                    name: string;
                    options: Options;
                    parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; editor?: Editor | undefined; }, props: { mark: Mark; HTMLAttributes: Record<string, any>; }) => DOMOutputSpec) | null | undefined;
                    storage: Storage;
                },
                props: { HTMLAttributes: Record<string, any>; mark: Mark },
            ) => DOMOutputSpec
        )
        | null;
    renderMarkdown?: (
        node: JSONContent,
        helpers: MarkdownRendererHelpers,
        ctx: RenderContext,
    ) => string;
    spanning?:
        | boolean
        | (
            (
                this: {
                    editor?: Editor;
                    name: string;
                    options: Options;
                    parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean | undefined) | undefined;
                    storage: Storage;
                },
            ) => boolean
            | undefined
        );
    transformPastedHTML?: (
        this: {
            editor: Editor;
            name: string;
            options: Options;
            parent: ((...args: [html: string]) => string) | undefined;
            storage: Storage;
            type: MarkType;
        },
        html: string,
    ) => string;
}

Type Parameters

Options = any
Storage = any

Hierarchy (View Summary)

ExtendableConfig<Options, Storage, MarkConfig<Options, Storage>, MarkType$1>
- MarkConfig

Properties

`Optional`addAttributes

addAttributes?: (
    this: {
        editor?: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => {} | Attributes) | undefined;
        storage: Storage;
    },
) => {}
| Attributes

Attributes

`Optional`addCommands

addCommands?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => ReturnType<Required<T>[P]>) | undefined;
        storage: Storage;
        type: MarkType;
    },
) => Partial<RawCommands>

This function adds commands to the editor

See

https://tiptap.dev/docs/editor/guide/custom-extensions#commands

Example

addCommands() {
  return {
    myCommand: () => ({ chain }) => chain().setMark('type', 'foo').run(),
  }
}

`Optional`addExtensions

addExtensions?: (
    this: {
        name: string;
        options: Options;
        parent: ((...args: []) => Extensions) | undefined;
        storage: Storage;
    },
) => Extensions

This function adds additional extensions to the editor. This is useful for building extension kits.

Example

addExtensions() {
  return [
    BulletList,
    OrderedList,
    ListItem
  ]
}

`Optional`addGlobalAttributes

addGlobalAttributes?: (
    this: {
        extensions: (Mark<any, any> | Node<any, any>)[];
        name: string;
        options: Options;
        parent: ((...args: []) => GlobalAttributes) | undefined;
        storage: Storage;
    },
) => GlobalAttributes

This function adds globalAttributes to specific nodes.

See

https://tiptap.dev/docs/editor/guide/custom-extensions#global-attributes

Example

addGlobalAttributes() {
  return [
    {
        // Extend the following extensions
      types: [
        'heading',
        'paragraph',
      ],
      // … with those attributes
      attributes: {
        textAlign: {
          default: 'left',
          renderHTML: attributes => ({
            style: `text-align: ${attributes.textAlign}`,
          }),
          parseHTML: element => element.style.textAlign || 'left',
        },
      },
    },
  ]
}

`Optional`addInputRules

addInputRules?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => InputRule[]) | undefined;
        storage: Storage;
        type: MarkType;
    },
) => InputRule[]

This function adds input rules to the editor.

See

https://tiptap.dev/docs/editor/guide/custom-extensions#input-rules

Example

addInputRules() {
  return [
    markInputRule({
      find: inputRegex,
      type: this.type,
    }),
  ]
},

`Optional`addKeyboardShortcuts

addKeyboardShortcuts?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent:
            | ((...args: []) => { [key: string]: KeyboardShortcutCommand })
            | undefined;
        storage: Storage;
        type: MarkType;
    },
) => { [key: string]: KeyboardShortcutCommand }

This function registers keyboard shortcuts.

See

https://tiptap.dev/docs/editor/guide/custom-extensions#keyboard-shortcuts

Example

addKeyboardShortcuts() {
  return {
    'Mod-l': () => this.editor.commands.toggleBulletList(),
  }
},

`Optional`addMarkView

addMarkView?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }) => MarkViewRenderer<MarkViewRendererProps>) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
        ) => MarkViewRenderer
    )
    | null

Mark View

`Optional`addOptions

addOptions?: (
this: { name: string; parent: ((...args: []) => Options) | undefined },
) => Options

This method will add options to this extension

See

https://tiptap.dev/docs/editor/guide/custom-extensions#settings

Example

addOptions() {
 return {
   myOption: 'foo',
   myOtherOption: 10,
}

`Optional`addPasteRules

addPasteRules?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => PasteRule[]) | undefined;
        storage: Storage;
        type: MarkType;
    },
) => PasteRule[]

This function adds paste rules to the editor.

See

https://tiptap.dev/docs/editor/guide/custom-extensions#paste-rules

Example

addPasteRules() {
  return [
    markPasteRule({
      find: pasteRegex,
      type: this.type,
    }),
  ]
},

`Optional`addProseMirrorPlugins

addProseMirrorPlugins?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => Plugin<any>[]) | undefined;
        storage: Storage;
        type: MarkType;
    },
) => Plugin<any>[]

This function adds Prosemirror plugins to the editor

See

https://tiptap.dev/docs/editor/guide/custom-extensions#prosemirror-plugins

Example

addProseMirrorPlugins() {
  return [
    customPlugin(),
  ]
}

`Optional`addStorage

addStorage?: (
    this: {
        name: string;
        options: Options;
        parent: ((...args: []) => Storage) | undefined;
    },
) => Storage

The default storage this extension can save data to.

See

https://tiptap.dev/docs/editor/guide/custom-extensions#storage

Example

defaultStorage: {
  prefetchedUsers: [],
  loading: false,
}

`Optional`code

code?:
    | boolean
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean) | undefined;
                storage: Storage;
            },
        ) => boolean
    )

Code

`Optional`dispatchTransaction

dispatchTransaction?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, props: DispatchTransactionProps) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            props: DispatchTransactionProps,
        ) => void
    )
    | null

This hook allows you to intercept and modify transactions before they are dispatched.

Example

dispatchTransaction({ transaction, next }) {
  console.log('Dispatching transaction:', transaction)
  next(transaction)
}

Param: props

The dispatch transaction props

`Optional`excludes

excludes?:
    | string
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: string | ((this: { name: string; options: Options; storage: Storage; parent: string | ... | undefined; editor?: Editor | undefined; }) => string | undefined) | undefined;
                storage: Storage;
            },
        ) => string
        | undefined
    )

Excludes

`Optional`exitable

exitable?: boolean | (() => boolean)

Marks this Mark as exitable

`Optional`extendMarkSchema

extendMarkSchema?:
    | (
        (
            this: {
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; }, extension: Mark<any, any>) => Record<string, any>) | null | undefined;
                storage: Storage;
            },
            extension: Mark,
        ) => Record<string, any>
    )
    | null

This function extends the schema of the mark.

Example

extendMarkSchema() {
  return {
    group: 'inline',
    selectable: false,
  }
}

`Optional`extendNodeSchema

extendNodeSchema?:
    | (
        (
            this: {
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; }, extension: Node<any, any>) => Record<string, any>) | null | undefined;
                storage: Storage;
            },
            extension: Node,
        ) => Record<string, any>
    )
    | null

This function extends the schema of the node.

Example

extendNodeSchema() {
  return {
    group: 'inline',
    selectable: false,
  }
}

`Optional`group

group?:
    | string
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: string | ((this: { name: string; options: Options; storage: Storage; parent: string | ... | undefined; editor?: Editor | undefined; }) => string | undefined) | undefined;
                storage: Storage;
            },
        ) => string
        | undefined
    )

Group

`Optional`inclusive

inclusive?:
    | boolean
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean | undefined) | undefined;
                storage: Storage;
            },
        ) => boolean
        | undefined
    )

Inclusive

`Optional`keepOnSplit

keepOnSplit?: boolean | (() => boolean)

Keep mark after split node

`Optional`markdownOptions

markdownOptions?: {
htmlReopen?: { close: string; open: string };
indentsContent?: boolean;
}

Optional markdown options for indentation

Type Declaration

OptionalhtmlReopen?: { close: string; open: string }
Lets a mark tell the Markdown serializer which inline HTML tags it can safely use when plain markdown delimiters would become ambiguous.

This is mainly useful for overlapping marks. For example, bold followed by bold+italic followed by italic cannot always be written back with only * and ** in a way that still parses correctly. In that case, the serializer can close the overlapping section with markdown and reopen the remaining tail with HTML instead.

Example:
- desired formatting: **123 + *456* + 789 italic
- serialized result: **123*456***<em>789</em>
If your extension defines custom mark names, set htmlReopen on that extension so the serializer can reuse its HTML form for overlap cases.
OptionalindentsContent?: boolean
Defines if this markdown element should indent it's child elements

`Optional`markdownTokenizer

markdownTokenizer?: MarkdownTokenizer

The markdown tokenizer responsible for turning a markdown string into tokens

Custom tokenizers are only needed when you want to parse non-standard markdown token.

`Optional`markdownTokenName

markdownTokenName?: string

The markdown token name

This is the name of the token that this extension uses to parse and render markdown and comes from the Marked Lexer.

See

https://github.com/markedjs/marked/blob/master/src/Tokens.ts

name

name: string

The extension name - this must be unique. It will be used to identify the extension.

Example

'myExtension'

`Optional`onBeforeCreate

onBeforeCreate?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: { editor: Editor; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor },
        ) => void
    )
    | null

The editor is not ready yet.

`Optional`onBlur

onBlur?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor; event: FocusEvent; transaction: Transaction },
        ) => void
    )
    | null

The editor isn’t focused anymore.

`Optional`onCreate

onCreate?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: { editor: Editor; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor },
        ) => void
    )
    | null

The editor is ready.

`Optional`onDestroy

onDestroy?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | null | undefined; }, event: void) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: void,
        ) => void
    )
    | null

The editor is destroyed.

`Optional`onFocus

onFocus?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; event: FocusEvent; transaction: Transaction; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor; event: FocusEvent; transaction: Transaction },
        ) => void
    )
    | null

The editor is focused.

`Optional`onSelectionUpdate

onSelectionUpdate?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: { editor: Editor; transaction: Transaction },
        ) => void
    )
    | null

The selection has changed.

`Optional`onTransaction

onTransaction?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: {
                appendedTransactions: Transaction[];
                editor: Editor;
                transaction: Transaction;
            },
        ) => void
    )
    | null

The editor state has changed.

`Optional`onUpdate

onUpdate?:
    | (
        (
            this: {
                editor: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; editor: Editor; type: MarkType; parent: ... | ... 1 more ... | undefined; }, event: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }) => void) | null | undefined;
                storage: Storage;
                type: MarkType;
            },
            event: {
                appendedTransactions: Transaction[];
                editor: Editor;
                transaction: Transaction;
            },
        ) => void
    )
    | null

The content has changed.

`Optional`parseHTML

parseHTML?: (
    this: {
        editor?: Editor;
        name: string;
        options: Options;
        parent: ((...args: []) => readonly ParseRule[] | undefined) | undefined;
        storage: Storage;
    },
) => readonly ParseRule[]
| undefined

Parse HTML

`Optional`parseMarkdown

parseMarkdown?: (
token: MarkdownToken,
helpers: MarkdownParseHelpers,
) => MarkdownParseResult

The parse function used by the markdown parser to convert markdown tokens to ProseMirror nodes.

`Optional`priority

priority?: number

The priority of your extension. The higher, the earlier it will be called and will take precedence over other extensions with a lower priority.

Default

Example

`Optional`renderHTML

renderHTML?:
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: ((this: { name: string; options: Options; storage: Storage; parent: ... | null | undefined; editor?: Editor | undefined; }, props: { mark: Mark; HTMLAttributes: Record<string, any>; }) => DOMOutputSpec) | null | undefined;
                storage: Storage;
            },
            props: { HTMLAttributes: Record<string, any>; mark: Mark },
        ) => DOMOutputSpec
    )
    | null

Render HTML

`Optional`renderMarkdown

renderMarkdown?: (
    node: JSONContent,
    helpers: MarkdownRendererHelpers,
    ctx: RenderContext,
) => string

The serializer function used by the markdown serializer to convert ProseMirror nodes to markdown tokens.

`Optional`spanning

spanning?:
    | boolean
    | (
        (
            this: {
                editor?: Editor;
                name: string;
                options: Options;
                parent: boolean | ((this: { name: string; options: Options; storage: Storage; parent: boolean | ... | undefined; editor?: Editor | undefined; }) => boolean | undefined) | undefined;
                storage: Storage;
            },
        ) => boolean
        | undefined
    )

Spanning

`Optional`transformPastedHTML

transformPastedHTML?: (
    this: {
        editor: Editor;
        name: string;
        options: Options;
        parent: ((...args: [html: string]) => string) | undefined;
        storage: Storage;
        type: MarkType;
    },
    html: string,
) => string

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, '')
}

Interface MarkConfig<Options, Storage>

Type Parameters

Hierarchy (View Summary)

Index

Properties

Properties

OptionaladdAttributes

OptionaladdCommands

See

Example

OptionaladdExtensions

Example

OptionaladdGlobalAttributes

See

Example

OptionaladdInputRules

See

Example

OptionaladdKeyboardShortcuts

See

Example

OptionaladdMarkView

OptionaladdOptions

See

Example

OptionaladdPasteRules

See

Example

OptionaladdProseMirrorPlugins

See

Example

OptionaladdStorage

See

Example

Optionalcode

OptionaldispatchTransaction

Param: props

Optionalexcludes

Optionalexitable

OptionalextendMarkSchema

Example

OptionalextendNodeSchema

Example

Optionalgroup

Optionalinclusive

OptionalkeepOnSplit

OptionalmarkdownOptions

Type Declaration

OptionalhtmlReopen?: { close: string; open: string }

OptionalindentsContent?: boolean

OptionalmarkdownTokenizer

OptionalmarkdownTokenName

See

name

Example

OptionalonBeforeCreate

OptionalonBlur

OptionalonCreate

OptionalonDestroy

OptionalonFocus

OptionalonSelectionUpdate

OptionalonTransaction

OptionalonUpdate

OptionalparseHTML

OptionalparseMarkdown

Optionalpriority

Default

Example

OptionalrenderHTML

OptionalrenderMarkdown

Optionalspanning

OptionaltransformPastedHTML

See

Example

Settings

On This Page

`Optional`addAttributes

`Optional`addCommands

`Optional`addExtensions

`Optional`addGlobalAttributes

`Optional`addInputRules

`Optional`addKeyboardShortcuts

`Optional`addMarkView

`Optional`addOptions

`Optional`addPasteRules

`Optional`addProseMirrorPlugins

`Optional`addStorage

`Optional`code

`Optional`dispatchTransaction

`Optional`excludes

`Optional`exitable

`Optional`extendMarkSchema

`Optional`extendNodeSchema

`Optional`group

`Optional`inclusive

`Optional`keepOnSplit

`Optional`markdownOptions

`Optional`htmlReopen?: { close: string; open: string }

`Optional`indentsContent?: boolean

`Optional`markdownTokenizer

`Optional`markdownTokenName

`Optional`onBeforeCreate

`Optional`onBlur

`Optional`onCreate

`Optional`onDestroy

`Optional`onFocus

`Optional`onSelectionUpdate

`Optional`onTransaction

`Optional`onUpdate

`Optional`parseHTML

`Optional`parseMarkdown

`Optional`priority

`Optional`renderHTML

`Optional`renderMarkdown

`Optional`spanning

`Optional`transformPastedHTML