import { DOMOutputSpec, NodeSpec, Node as ProseMirrorNode, NodeType, } from 'prosemirror-model' import { Plugin, Transaction } from 'prosemirror-state' import { InputRule } from 'prosemirror-inputrules' import { ExtensionConfig } from './Extension' import { Attributes, NodeViewRenderer, Overwrite } from './types' import { Editor } from './Editor' export interface NodeConfig extends Overwrite, { /** * TopNode */ topNode?: boolean, /** * Content */ content?: NodeSpec['content'] | ((this: { options: Options }) => NodeSpec['content']), /** * Marks */ marks?: NodeSpec['marks'] | ((this: { options: Options }) => NodeSpec['marks']), /** * Group */ group?: NodeSpec['group'] | ((this: { options: Options }) => NodeSpec['group']), /** * Inline */ inline?: NodeSpec['inline'] | ((this: { options: Options }) => NodeSpec['inline']), /** * Atom */ atom?: NodeSpec['atom'] | ((this: { options: Options }) => NodeSpec['atom']), /** * Selectable */ selectable?: NodeSpec['selectable'] | ((this: { options: Options }) => NodeSpec['selectable']), /** * Draggable */ draggable?: NodeSpec['draggable'] | ((this: { options: Options }) => NodeSpec['draggable']), /** * Code */ code?: NodeSpec['code'] | ((this: { options: Options }) => NodeSpec['code']), /** * Defining */ defining?: NodeSpec['defining'] | ((this: { options: Options }) => NodeSpec['defining']), /** * Isolating */ isolating?: NodeSpec['isolating'] | ((this: { options: Options }) => NodeSpec['isolating']), /** * Parse HTML */ parseHTML?: ( this: { options: Options, }, ) => NodeSpec['parseDOM'], /** * Render HTML */ renderHTML?: (( this: { options: Options, }, props: { node: ProseMirrorNode, HTMLAttributes: { [key: string]: any }, } ) => DOMOutputSpec) | null, /** * Add Attributes */ addAttributes?: ( this: { options: Options, }, ) => Attributes | {}, /** * Commands */ addCommands?: (this: { options: Options, editor: Editor, type: NodeType, }) => Commands, /** * Keyboard shortcuts */ addKeyboardShortcuts?: (this: { options: Options, editor: Editor, type: NodeType, }) => { [key: string]: any }, /** * Input rules */ addInputRules?: (this: { options: Options, editor: Editor, type: NodeType, }) => InputRule[], /** * Paste rules */ addPasteRules?: (this: { options: Options, editor: Editor, type: NodeType, }) => Plugin[], /** * ProseMirror plugins */ addProseMirrorPlugins?: (this: { options: Options, editor: Editor, type: NodeType, }) => Plugin[], /** * Node View */ addNodeView?: ((this: { options: Options, editor: Editor, type: NodeType, }) => NodeViewRenderer) | null, /** * The editor is ready. */ onCreate?: ((this: { options: Options, editor: Editor, type: NodeType, }) => void) | null, /** * The content has changed. */ onUpdate?: ((this: { options: Options, editor: Editor, type: NodeType, }) => void) | null, /** * The selection has changed. */ onSelection?: ((this: { options: Options, editor: Editor, type: NodeType, }) => void) | null, /** * The editor state has changed. */ onTransaction?: (( this: { options: Options, editor: Editor, type: NodeType, }, props: { transaction: Transaction, }, ) => void) | null, /** * The editor is focused. */ onFocus?: (( this: { options: Options, editor: Editor, type: NodeType, }, props: { event: FocusEvent, }, ) => void) | null, /** * The editor isn’t focused anymore. */ onBlur?: (( this: { options: Options, editor: Editor, type: NodeType, }, props: { event: FocusEvent, }, ) => void) | null, /** * The editor is destroyed. */ onDestroy?: ((this: { options: Options, editor: Editor, type: NodeType, }) => void) | null, }> {} export class Node { type = 'node' config: Required = { name: 'node', defaultOptions: {}, addGlobalAttributes: () => [], addCommands: () => ({}), addKeyboardShortcuts: () => ({}), addInputRules: () => [], addPasteRules: () => [], addProseMirrorPlugins: () => [], topNode: false, content: null, marks: null, group: null, inline: null, atom: null, selectable: null, draggable: null, code: null, defining: null, isolating: null, parseHTML: () => null, renderHTML: null, addAttributes: () => ({}), addNodeView: null, onCreate: null, onUpdate: null, onSelection: null, onTransaction: null, onFocus: null, onBlur: null, onDestroy: null, } options!: Options constructor(config: NodeConfig) { this.config = { ...this.config, ...config, } this.options = this.config.defaultOptions } static create(config: NodeConfig) { return new Node(config) } configure(options?: Partial) { return Node .create(this.config as NodeConfig) .#configure({ ...this.config.defaultOptions, ...options, }) } #configure = (options: Partial) => { this.options = { ...this.config.defaultOptions, ...options, } return this } extend(extendedConfig: Partial>) { return new Node({ ...this.config, ...extendedConfig, } as NodeConfig) } }