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