tiptap/packages/core/src/Node.ts

579 lines
13 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'
import { mergeDeep } from './utilities/mergeDeep'
import { callOrReturn } from './utilities/callOrReturn'
import { getExtensionField } from './helpers/getExtensionField'
2021-02-10 16:59:35 +08:00
import {
2021-10-22 14:52:54 +08:00
AnyConfig,
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' {
2021-10-22 14:52:54 +08:00
interface NodeConfig<Options = any, Storage = 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,
/**
* Default Options
*/
addOptions?: (this: {
name: string,
parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addOptions'], undefined>,
}) => Options,
2021-10-22 14:52:54 +08:00
/**
* Default Storage
*/
addStorage?: (this: {
name: string,
options: Options,
parent: Exclude<ParentConfig<NodeConfig<Options, Storage>>['addStorage'], undefined>,
2021-10-22 14:52:54 +08:00
}) => Storage,
2021-02-20 00:35:50 +08:00
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
2021-04-21 05:11:35 +08:00
name: string,
2020-10-22 03:13:38 +08:00
options: Options,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-01-20 03:27:51 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2020-11-30 21:12:36 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2020-11-30 21:12:36 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-04-02 06:07:40 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2020-11-30 21:12:36 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
2021-02-20 00:35:50 +08:00
editor: Editor,
type: NodeType,
2021-10-22 14:52:54 +08:00
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['code'],
}) => NodeSpec['code']),
2021-02-20 00:35:50 +08:00
2022-01-04 17:02:24 +08:00
/**
* Whitespace
*/
whitespace?: NodeSpec['whitespace'] | ((this: {
name: string,
options: Options,
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['whitespace'],
}) => NodeSpec['whitespace']),
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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['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,
2021-10-22 14:52:54 +08:00
storage: Storage,
parent: ParentConfig<NodeConfig<Options, Storage>>['addAttributes'],
2021-02-20 00:35:50 +08:00
},
) => Attributes | {},
}
}
2020-10-21 21:17:05 +08:00
2021-10-22 14:52:54 +08:00
export class Node<Options = any, Storage = 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
2021-10-22 14:52:54 +08:00
storage: Storage
2021-04-16 04:03:45 +08:00
config: NodeConfig = {
name: this.name,
defaultOptions: {},
}
2021-10-22 14:52:54 +08:00
constructor(config: Partial<NodeConfig<Options, Storage>> = {}) {
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
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
2020-11-16 06:25:25 +08:00
this.options = this.config.defaultOptions
if (this.config.addOptions) {
this.options = callOrReturn(getExtensionField<AnyConfig['addOptions']>(
this,
'addOptions',
{
name: this.name,
},
))
}
2021-10-22 14:52:54 +08:00
this.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
this,
'addStorage',
{
name: this.name,
options: this.options,
},
)) || {}
2020-09-09 05:44:45 +08:00
}
2020-10-10 04:59:25 +08:00
2021-10-22 14:52:54 +08:00
static create<O = any, S = any>(config: Partial<NodeConfig<O, S>> = {}) {
return new Node<O, S>(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
extension.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
extension,
'addStorage',
{
name: extension.name,
options: extension.options,
},
))
return extension
2020-10-10 04:59:25 +08:00
}
2021-10-22 14:52:54 +08:00
extend<ExtendedOptions = Options, ExtendedStorage = Storage>(extendedConfig: Partial<NodeConfig<ExtendedOptions, ExtendedStorage>> = {}) {
const extension = new Node<ExtendedOptions, ExtendedStorage>(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
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<AnyConfig['addOptions']>(
extension,
'addOptions',
{
name: extension.name,
},
))
2021-10-22 14:52:54 +08:00
extension.storage = callOrReturn(getExtensionField<AnyConfig['addStorage']>(
extension,
'addStorage',
{
name: extension.name,
options: extension.options,
},
))
return extension
2020-11-16 06:25:25 +08:00
}
2019-12-17 06:20:05 +08:00
}