tiptap/packages/core/src/Node.ts

464 lines
9.9 KiB
TypeScript
Raw Normal View History

2020-10-23 05:21:52 +08:00
import {
DOMOutputSpec,
NodeSpec,
Node as ProseMirrorNode,
NodeType,
2020-10-23 05:21:52 +08:00
} from 'prosemirror-model'
2020-11-30 21:12:36 +08:00
import { Plugin, Transaction } from 'prosemirror-state'
import { InputRule } from './InputRule'
import { PasteRule } from './PasteRule'
2021-01-20 16:18:49 +08:00
import mergeDeep from './utilities/mergeDeep'
2021-02-10 16:59:35 +08:00
import {
2021-05-07 16:08:30 +08:00
Extensions,
2021-02-19 17:09:25 +08:00
Attributes,
NodeViewRenderer,
2021-02-20 00:35:50 +08:00
GlobalAttributes,
2021-02-19 17:09:25 +08:00
RawCommands,
ParentConfig,
KeyboardShortcutCommand,
2021-02-10 16:59:35 +08:00
} from './types'
2021-03-31 19:44:56 +08:00
import { NodeConfig } from '.'
2020-10-23 05:21:52 +08:00
import { Editor } from './Editor'
2020-10-21 21:17:05 +08:00
2021-02-20 00:35:50 +08:00
declare module '@tiptap/core' {
interface NodeConfig<Options = any> {
[key: string]: any;
2021-02-20 00:35:50 +08:00
/**
* Name
*/
name: string,
/**
* Priority
*/
priority?: number,
2021-02-20 00:35:50 +08:00
/**
* Default options
*/
defaultOptions?: Options,
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-10-22 03:13:38 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['addGlobalAttributes'],
2021-02-20 00:35:50 +08:00
}) => GlobalAttributes | {},
2020-10-23 05:21:52 +08:00
2021-02-20 00:35:50 +08:00
/**
* Raw
*/
addCommands?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-10-22 03:13:38 +08:00
options: Options,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addCommands'],
2021-02-20 00:35:50 +08:00
}) => Partial<RawCommands>,
2020-10-23 05:21:52 +08:00
2021-02-20 00:35:50 +08:00
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-01-20 03:27:51 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addKeyboardShortcuts'],
2021-02-20 00:35:50 +08:00
}) => {
[key: string]: KeyboardShortcutCommand,
2021-01-20 03:27:51 +08:00
},
2021-02-20 00:35:50 +08:00
/**
* Input rules
*/
addInputRules?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addInputRules'],
2021-02-20 00:35:50 +08:00
}) => InputRule[],
/**
* Paste rules
*/
addPasteRules?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-11-30 21:12:36 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addPasteRules'],
}) => PasteRule[],
2020-11-30 21:12:36 +08:00
2021-02-20 00:35:50 +08:00
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-11-30 21:12:36 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addProseMirrorPlugins'],
2021-02-20 00:35:50 +08:00
}) => Plugin[],
2021-05-07 00:39:47 +08:00
/**
* Extensions
*/
addExtensions?: (this: {
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['addExtensions'],
2021-05-07 16:08:30 +08:00
}) => Extensions,
2021-05-07 00:39:47 +08:00
2021-02-20 00:35:50 +08:00
/**
* Extend Node Schema
*/
extendNodeSchema?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['extendNodeSchema'],
2021-02-20 00:35:50 +08:00
},
extension: Node,
2021-04-21 15:43:31 +08:00
) => Record<string, any>) | null,
2021-02-20 00:35:50 +08:00
/**
* Extend Mark Schema
*/
extendMarkSchema?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['extendMarkSchema'],
2021-02-20 00:35:50 +08:00
},
extension: Node,
2021-04-21 15:43:31 +08:00
) => Record<string, any>) | null,
2021-02-20 00:35:50 +08:00
2021-04-02 06:07:40 +08:00
/**
* The editor is not ready yet.
*/
2021-04-21 05:11:35 +08:00
onBeforeCreate?: ((this: {
name: string,
2021-04-02 06:07:40 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onBeforeCreate'],
2021-04-02 06:07:40 +08:00
}) => void) | null,
2021-02-20 00:35:50 +08:00
/**
* The editor is ready.
*/
onCreate?: ((this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onCreate'],
2021-02-20 00:35:50 +08:00
}) => void) | null,
2020-11-30 21:12:36 +08:00
2021-02-20 00:35:50 +08:00
/**
* The content has changed.
*/
onUpdate?: ((this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-11-30 21:12:36 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onUpdate'],
2021-02-20 00:35:50 +08:00
}) => void) | null,
/**
* The selection has changed.
*/
onSelectionUpdate?: ((this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onSelectionUpdate'],
2021-02-20 00:35:50 +08:00
}) => void) | null,
/**
* The editor state has changed.
*/
onTransaction?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onTransaction'],
2021-02-20 00:35:50 +08:00
},
props: {
transaction: Transaction,
},
) => void) | null,
/**
* The editor is focused.
*/
onFocus?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onFocus'],
2021-02-20 00:35:50 +08:00
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor isnt focused anymore.
*/
onBlur?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onBlur'],
2021-02-20 00:35:50 +08:00
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor is destroyed.
*/
onDestroy?: ((this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['onDestroy'],
2021-02-20 00:35:50 +08:00
}) => void) | null,
/**
* Node View
*/
addNodeView?: ((this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
editor: Editor,
type: NodeType,
parent: ParentConfig<NodeConfig<Options>>['addNodeView'],
2021-02-20 00:35:50 +08:00
}) => NodeViewRenderer) | null,
/**
* TopNode
*/
topNode?: boolean,
/**
* Content
*/
content?: NodeSpec['content'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['content'],
}) => NodeSpec['content']),
2021-02-20 00:35:50 +08:00
/**
* Marks
*/
marks?: NodeSpec['marks'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['marks'],
}) => NodeSpec['marks']),
2021-02-20 00:35:50 +08:00
/**
* Group
*/
group?: NodeSpec['group'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['group'],
}) => NodeSpec['group']),
2021-02-20 00:35:50 +08:00
/**
* Inline
*/
inline?: NodeSpec['inline'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['inline'],
}) => NodeSpec['inline']),
2021-02-20 00:35:50 +08:00
/**
* Atom
*/
atom?: NodeSpec['atom'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['atom'],
}) => NodeSpec['atom']),
2021-02-20 00:35:50 +08:00
/**
* Selectable
*/
selectable?: NodeSpec['selectable'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['selectable'],
}) => NodeSpec['selectable']),
2021-02-20 00:35:50 +08:00
/**
* Draggable
*/
draggable?: NodeSpec['draggable'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['draggable'],
}) => NodeSpec['draggable']),
2021-02-20 00:35:50 +08:00
/**
* Code
*/
code?: NodeSpec['code'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['code'],
}) => NodeSpec['code']),
2021-02-20 00:35:50 +08:00
/**
* Defining
*/
defining?: NodeSpec['defining'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['defining'],
}) => NodeSpec['defining']),
2021-02-20 00:35:50 +08:00
/**
* Isolating
*/
isolating?: NodeSpec['isolating'] | ((this: {
2021-04-21 05:11:35 +08:00
name: string,
options: Options,
parent: ParentConfig<NodeConfig<Options>>['isolating'],
}) => NodeSpec['isolating']),
2021-02-20 00:35:50 +08:00
/**
* Parse HTML
*/
parseHTML?: (
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['parseHTML'],
2021-02-20 00:35:50 +08:00
},
) => NodeSpec['parseDOM'],
/**
* Render HTML
*/
renderHTML?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['renderHTML'],
2021-02-20 00:35:50 +08:00
},
props: {
node: ProseMirrorNode,
2021-04-21 15:43:31 +08:00
HTMLAttributes: Record<string, any>,
2021-02-20 00:35:50 +08:00
}
) => DOMOutputSpec) | null,
/**
* Render Text
*/
renderText?: ((
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['renderText'],
2021-02-20 00:35:50 +08:00
},
props: {
node: ProseMirrorNode,
pos: number,
parent: ProseMirrorNode,
index: number,
2021-02-20 00:35:50 +08:00
}
) => string) | null,
/**
* Add Attributes
*/
addAttributes?: (
this: {
2021-04-21 05:11:35 +08:00
name: string,
2021-02-20 00:35:50 +08:00
options: Options,
parent: ParentConfig<NodeConfig<Options>>['addAttributes'],
2021-02-20 00:35:50 +08:00
},
) => Attributes | {},
}
}
2020-10-21 21:17:05 +08:00
2021-02-10 16:59:35 +08:00
export class Node<Options = any> {
2020-11-20 04:08:25 +08:00
type = 'node'
2021-04-16 04:03:45 +08:00
name = 'node'
parent: Node | null = null
2020-11-16 06:25:25 +08:00
child: Node | null = null
2021-04-16 04:03:45 +08:00
options: Options
config: NodeConfig = {
name: this.name,
defaultOptions: {},
}
constructor(config: Partial<NodeConfig<Options>> = {}) {
2020-11-16 06:25:25 +08:00
this.config = {
...this.config,
2020-10-21 21:17:05 +08:00
...config,
2020-11-16 06:25:25 +08:00
}
2021-04-16 04:03:45 +08:00
this.name = this.config.name
2020-11-16 06:25:25 +08:00
this.options = this.config.defaultOptions
2020-09-09 05:44:45 +08:00
}
2020-10-10 04:59:25 +08:00
static create<O>(config: Partial<NodeConfig<O>> = {}) {
2021-02-10 16:59:35 +08:00
return new Node<O>(config)
2020-11-16 06:25:25 +08:00
}
2020-10-21 21:17:05 +08:00
2021-01-20 05:29:46 +08:00
configure(options: Partial<Options> = {}) {
// 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, options) as Options
return extension
2020-10-10 04:59:25 +08:00
}
extend<ExtendedOptions = Options>(extendedConfig: Partial<NodeConfig<ExtendedOptions>> = {}) {
const extension = new Node<ExtendedOptions>(extendedConfig)
2021-04-14 15:48:38 +08:00
extension.parent = this
this.child = extension
2021-04-16 04:03:45 +08:00
extension.name = extendedConfig.name
? extendedConfig.name
2021-04-18 03:25:29 +08:00
: extension.parent.name
2021-04-16 04:03:45 +08:00
2021-04-18 03:25:29 +08:00
extension.options = extendedConfig.defaultOptions
? extendedConfig.defaultOptions
: extension.parent.options
return extension
2020-11-16 06:25:25 +08:00
}
2019-12-17 06:20:05 +08:00
}