import { DOMOutputSpec, Node as ProseMirrorNode, NodeSpec, NodeType, } from '@tiptap/pm/model' import { Plugin, Transaction } from '@tiptap/pm/state' import { Editor } from './Editor.js' import { getExtensionField } from './helpers/getExtensionField.js' import { NodeConfig } from './index.js' import { InputRule } from './InputRule.js' import { PasteRule } from './PasteRule.js' import { AnyConfig, Attributes, Extensions, GlobalAttributes, KeyboardShortcutCommand, NodeViewRenderer, ParentConfig, RawCommands, } from './types.js' import { callOrReturn } from './utilities/callOrReturn.js' import { mergeDeep } from './utilities/mergeDeep.js' declare module '@tiptap/core' { interface NodeConfig { [key: string]: any /** * Name */ name: string /** * Priority */ priority?: number /** * Default options */ defaultOptions?: Options /** * Default Options */ addOptions?: (this: { name: string parent: Exclude>['addOptions'], undefined> }) => Options /** * Default Storage */ addStorage?: (this: { name: string options: Options parent: Exclude>['addStorage'], undefined> }) => Storage /** * Global attributes */ addGlobalAttributes?: (this: { name: string options: Options storage: Storage parent: ParentConfig>['addGlobalAttributes'] }) => GlobalAttributes | {} /** * Raw */ addCommands?: (this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addCommands'] }) => Partial /** * Keyboard shortcuts */ addKeyboardShortcuts?: (this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addKeyboardShortcuts'] }) => { [key: string]: KeyboardShortcutCommand } /** * Input rules */ addInputRules?: (this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addInputRules'] }) => InputRule[] /** * Paste rules */ addPasteRules?: (this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addPasteRules'] }) => PasteRule[] /** * ProseMirror plugins */ addProseMirrorPlugins?: (this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addProseMirrorPlugins'] }) => Plugin[] /** * Extensions */ addExtensions?: (this: { name: string options: Options storage: Storage parent: ParentConfig>['addExtensions'] }) => Extensions /** * Extend Node Schema */ extendNodeSchema?: | (( this: { name: string options: Options storage: Storage parent: ParentConfig>['extendNodeSchema'] }, extension: Node, ) => Record) | null /** * Extend Mark Schema */ extendMarkSchema?: | (( this: { name: string options: Options storage: Storage parent: ParentConfig>['extendMarkSchema'] editor?: Editor }, extension: Node, ) => Record) | null /** * The editor is not ready yet. */ onBeforeCreate?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onBeforeCreate'] }) => void) | null /** * The editor is ready. */ onCreate?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onCreate'] }) => void) | null /** * The content has changed. */ onUpdate?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onUpdate'] }) => void) | null /** * The selection has changed. */ onSelectionUpdate?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onSelectionUpdate'] }) => void) | null /** * The editor state has changed. */ onTransaction?: | (( this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onTransaction'] }, props: { transaction: Transaction }, ) => void) | null /** * The editor is focused. */ onFocus?: | (( this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onFocus'] }, props: { event: FocusEvent }, ) => void) | null /** * The editor isn’t focused anymore. */ onBlur?: | (( this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onBlur'] }, props: { event: FocusEvent }, ) => void) | null /** * The editor is destroyed. */ onDestroy?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['onDestroy'] }) => void) | null /** * Node View */ addNodeView?: | ((this: { name: string options: Options storage: Storage editor: Editor type: NodeType parent: ParentConfig>['addNodeView'] }) => NodeViewRenderer) | null /** * TopNode */ topNode?: boolean /** * Content */ content?: | NodeSpec['content'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['content'] editor?: Editor }) => NodeSpec['content']) /** * Marks */ marks?: | NodeSpec['marks'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['marks'] editor?: Editor }) => NodeSpec['marks']) /** * Group */ group?: | NodeSpec['group'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['group'] editor?: Editor }) => NodeSpec['group']) /** * Inline */ inline?: | NodeSpec['inline'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['inline'] editor?: Editor }) => NodeSpec['inline']) /** * Atom */ atom?: | NodeSpec['atom'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['atom'] editor?: Editor }) => NodeSpec['atom']) /** * Selectable */ selectable?: | NodeSpec['selectable'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['selectable'] editor?: Editor }) => NodeSpec['selectable']) /** * Draggable */ draggable?: | NodeSpec['draggable'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['draggable'] editor?: Editor }) => NodeSpec['draggable']) /** * Code */ code?: | NodeSpec['code'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['code'] editor?: Editor }) => NodeSpec['code']) /** * Whitespace */ whitespace?: | NodeSpec['whitespace'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['whitespace'] editor?: Editor }) => NodeSpec['whitespace']) /** * Defining */ defining?: | NodeSpec['defining'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['defining'] editor?: Editor }) => NodeSpec['defining']) /** * Isolating */ isolating?: | NodeSpec['isolating'] | ((this: { name: string options: Options storage: Storage parent: ParentConfig>['isolating'] editor?: Editor }) => NodeSpec['isolating']) /** * Parse HTML */ parseHTML?: (this: { name: string options: Options storage: Storage parent: ParentConfig>['parseHTML'] editor?: Editor }) => NodeSpec['parseDOM'] /** * Render HTML */ renderHTML?: | (( this: { name: string options: Options storage: Storage parent: ParentConfig>['renderHTML'] editor?: Editor }, props: { node: ProseMirrorNode HTMLAttributes: Record }, ) => DOMOutputSpec) | null /** * Render Text */ renderText?: | (( this: { name: string options: Options storage: Storage parent: ParentConfig>['renderText'] editor?: Editor }, props: { node: ProseMirrorNode pos: number parent: ProseMirrorNode index: number }, ) => string) | null /** * Add Attributes */ addAttributes?: (this: { name: string options: Options storage: Storage parent: ParentConfig>['addAttributes'] editor?: Editor }) => Attributes | {} } } export class Node { type = 'node' name = 'node' parent: Node | null = null child: Node | null = null options: Options storage: Storage config: NodeConfig = { name: this.name, defaultOptions: {}, } constructor(config: Partial> = {}) { this.config = { ...this.config, ...config, } this.name = this.config.name if (config.defaultOptions) { console.warn( `[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${this.name}".`, ) } // TODO: remove `addOptions` fallback this.options = this.config.defaultOptions if (this.config.addOptions) { this.options = callOrReturn( getExtensionField(this, 'addOptions', { name: this.name, }), ) } this.storage = callOrReturn( getExtensionField(this, 'addStorage', { name: this.name, options: this.options, }), ) || {} } static create(config: Partial> = {}) { return new Node(config) } configure(options: Partial = {}) { // return a new instance so we can use the same extension // with different calls of `configure` const extension = this.extend() extension.options = mergeDeep(this.options as Record, options) as Options extension.storage = callOrReturn( getExtensionField(extension, 'addStorage', { name: extension.name, options: extension.options, }), ) return extension } extend( extendedConfig: Partial> = {}, ) { const extension = new Node(extendedConfig) extension.parent = this this.child = extension extension.name = extendedConfig.name ? extendedConfig.name : extension.parent.name if (extendedConfig.defaultOptions) { console.warn( `[tiptap warn]: BREAKING CHANGE: "defaultOptions" is deprecated. Please use "addOptions" instead. Found in extension: "${extension.name}".`, ) } extension.options = callOrReturn( getExtensionField(extension, 'addOptions', { name: extension.name, }), ) extension.storage = callOrReturn( getExtensionField(extension, 'addStorage', { name: extension.name, options: extension.options, }), ) return extension } }