2020-10-23 05:21:52 +08:00
|
|
|
|
import {
|
2020-11-16 18:19:43 +08:00
|
|
|
|
DOMOutputSpec,
|
|
|
|
|
MarkSpec,
|
|
|
|
|
Mark as ProseMirrorMark,
|
|
|
|
|
MarkType,
|
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'
|
2021-02-17 05:59:45 +08:00
|
|
|
|
import { Command as ProseMirrorCommand } from 'prosemirror-commands'
|
2020-11-17 04:54:40 +08:00
|
|
|
|
import { InputRule } from 'prosemirror-inputrules'
|
2021-01-20 16:18:49 +08:00
|
|
|
|
import mergeDeep from './utilities/mergeDeep'
|
2021-03-31 19:44:56 +08:00
|
|
|
|
import { Attributes, RawCommands, GlobalAttributes } from './types'
|
|
|
|
|
import { MarkConfig } from '.'
|
2020-10-23 05:21:52 +08:00
|
|
|
|
import { Editor } from './Editor'
|
2020-10-22 03:13:38 +08:00
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
declare module '@tiptap/core' {
|
|
|
|
|
export interface MarkConfig<Options = any> {
|
2021-02-20 00:47:22 +08:00
|
|
|
|
[key: string]: any;
|
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* Name
|
|
|
|
|
*/
|
|
|
|
|
name: string,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Default options
|
|
|
|
|
*/
|
|
|
|
|
defaultOptions?: Options,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Global attributes
|
|
|
|
|
*/
|
|
|
|
|
addGlobalAttributes?: (this: {
|
2020-10-22 03:13:38 +08:00
|
|
|
|
options: Options,
|
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: {
|
2020-10-22 03:13:38 +08:00
|
|
|
|
options: Options,
|
2021-02-20 00:35:50 +08:00
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => Partial<RawCommands>,
|
2020-10-23 05:21:52 +08:00
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* Keyboard shortcuts
|
|
|
|
|
*/
|
|
|
|
|
addKeyboardShortcuts?: (this: {
|
2020-10-22 05:55:14 +08:00
|
|
|
|
options: Options,
|
2021-02-20 00:35:50 +08:00
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => {
|
|
|
|
|
[key: string]: ProseMirrorCommand,
|
2020-10-22 05:55:14 +08:00
|
|
|
|
},
|
2021-02-20 00:35:50 +08:00
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Input rules
|
|
|
|
|
*/
|
|
|
|
|
addInputRules?: (this: {
|
2020-11-30 21:12:36 +08:00
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
2021-02-20 00:35:50 +08:00
|
|
|
|
}) => InputRule[],
|
2020-11-30 21:12:36 +08:00
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* Paste rules
|
|
|
|
|
*/
|
|
|
|
|
addPasteRules?: (this: {
|
2020-11-30 21:12:36 +08:00
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
2021-02-20 00:35:50 +08:00
|
|
|
|
}) => Plugin[],
|
2020-11-30 21:12:36 +08:00
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* ProseMirror plugins
|
|
|
|
|
*/
|
|
|
|
|
addProseMirrorPlugins?: (this: {
|
2020-11-30 21:12:36 +08:00
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
2021-02-20 00:35:50 +08:00
|
|
|
|
}) => Plugin[],
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Extend Node Schema
|
|
|
|
|
*/
|
|
|
|
|
extendNodeSchema?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
},
|
|
|
|
|
extension: Node,
|
|
|
|
|
) => {
|
|
|
|
|
[key: string]: any,
|
|
|
|
|
}) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Extend Mark Schema
|
|
|
|
|
*/
|
|
|
|
|
extendMarkSchema?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
},
|
|
|
|
|
extension: Node,
|
|
|
|
|
) => {
|
|
|
|
|
[key: string]: any,
|
|
|
|
|
}) | null,
|
|
|
|
|
|
2021-04-02 06:07:40 +08:00
|
|
|
|
/**
|
|
|
|
|
* The editor is not ready yet.
|
|
|
|
|
*/
|
|
|
|
|
onBeforeCreate?: ((this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* The editor is ready.
|
|
|
|
|
*/
|
|
|
|
|
onCreate?: ((this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The content has changed.
|
|
|
|
|
*/
|
|
|
|
|
onUpdate?: ((this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The selection has changed.
|
|
|
|
|
*/
|
2021-04-02 00:42:31 +08:00
|
|
|
|
onSelectionUpdate?: ((this: {
|
2021-03-09 16:50:03 +08:00
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The view has changed.
|
|
|
|
|
*/
|
2021-04-02 00:42:31 +08:00
|
|
|
|
onViewUpdate?: ((this: {
|
2021-02-20 00:35:50 +08:00
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The editor state has changed.
|
|
|
|
|
*/
|
|
|
|
|
onTransaction?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
transaction: Transaction,
|
|
|
|
|
},
|
|
|
|
|
) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The editor is focused.
|
|
|
|
|
*/
|
|
|
|
|
onFocus?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
event: FocusEvent,
|
|
|
|
|
},
|
|
|
|
|
) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The editor isn’t focused anymore.
|
|
|
|
|
*/
|
|
|
|
|
onBlur?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
event: FocusEvent,
|
|
|
|
|
},
|
|
|
|
|
) => void) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The editor is destroyed.
|
|
|
|
|
*/
|
|
|
|
|
onDestroy?: ((this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
editor: Editor,
|
|
|
|
|
type: MarkType,
|
|
|
|
|
}) => void) | null,
|
|
|
|
|
|
2021-04-02 01:06:40 +08:00
|
|
|
|
/**
|
|
|
|
|
* Keep mark after split node
|
|
|
|
|
*/
|
|
|
|
|
keepOnSplit?: boolean | (() => boolean),
|
|
|
|
|
|
2021-02-20 00:35:50 +08:00
|
|
|
|
/**
|
|
|
|
|
* Inclusive
|
|
|
|
|
*/
|
|
|
|
|
inclusive?: MarkSpec['inclusive'] | ((this: { options: Options }) => MarkSpec['inclusive']),
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Excludes
|
|
|
|
|
*/
|
|
|
|
|
excludes?: MarkSpec['excludes'] | ((this: { options: Options }) => MarkSpec['excludes']),
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Group
|
|
|
|
|
*/
|
|
|
|
|
group?: MarkSpec['group'] | ((this: { options: Options }) => MarkSpec['group']),
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Spanning
|
|
|
|
|
*/
|
|
|
|
|
spanning?: MarkSpec['spanning'] | ((this: { options: Options }) => MarkSpec['spanning']),
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Parse HTML
|
|
|
|
|
*/
|
|
|
|
|
parseHTML?: (
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
},
|
|
|
|
|
) => MarkSpec['parseDOM'],
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Render HTML
|
|
|
|
|
*/
|
|
|
|
|
renderHTML?: ((
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
},
|
|
|
|
|
props: {
|
|
|
|
|
mark: ProseMirrorMark,
|
|
|
|
|
HTMLAttributes: { [key: string]: any },
|
|
|
|
|
}
|
|
|
|
|
) => DOMOutputSpec) | null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Attributes
|
|
|
|
|
*/
|
|
|
|
|
addAttributes?: (
|
|
|
|
|
this: {
|
|
|
|
|
options: Options,
|
|
|
|
|
},
|
|
|
|
|
) => Attributes | {},
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-10-22 03:13:38 +08:00
|
|
|
|
|
2021-02-10 16:59:35 +08:00
|
|
|
|
export class Mark<Options = any> {
|
2020-11-20 04:08:25 +08:00
|
|
|
|
type = 'mark'
|
|
|
|
|
|
2021-02-19 17:54:47 +08:00
|
|
|
|
config: MarkConfig = {
|
2020-11-16 06:25:25 +08:00
|
|
|
|
name: 'mark',
|
|
|
|
|
defaultOptions: {},
|
|
|
|
|
}
|
2020-10-22 03:13:38 +08:00
|
|
|
|
|
2020-11-16 06:25:25 +08:00
|
|
|
|
options!: Options
|
|
|
|
|
|
2021-02-10 16:59:35 +08:00
|
|
|
|
constructor(config: MarkConfig<Options>) {
|
2020-11-16 06:25:25 +08:00
|
|
|
|
this.config = {
|
|
|
|
|
...this.config,
|
2020-10-22 03:13:38 +08:00
|
|
|
|
...config,
|
2020-11-16 06:25:25 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.options = this.config.defaultOptions
|
2020-10-22 03:13:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-10 16:59:35 +08:00
|
|
|
|
static create<O>(config: MarkConfig<O>) {
|
|
|
|
|
return new Mark<O>(config)
|
2020-11-16 06:25:25 +08:00
|
|
|
|
}
|
2020-10-22 03:13:38 +08:00
|
|
|
|
|
2021-01-20 05:29:46 +08:00
|
|
|
|
configure(options: Partial<Options> = {}) {
|
2020-11-16 18:19:43 +08:00
|
|
|
|
return Mark
|
2021-02-10 16:59:35 +08:00
|
|
|
|
.create<Options>(this.config as MarkConfig<Options>)
|
2021-01-20 05:29:46 +08:00
|
|
|
|
.#configure(options)
|
2020-11-16 17:22:12 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-11-16 18:07:06 +08:00
|
|
|
|
#configure = (options: Partial<Options>) => {
|
2021-01-20 16:18:49 +08:00
|
|
|
|
this.options = mergeDeep(this.config.defaultOptions, options) as Options
|
2020-11-16 16:43:17 +08:00
|
|
|
|
|
|
|
|
|
return this
|
2020-10-22 03:13:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
2021-02-10 16:59:35 +08:00
|
|
|
|
extend<ExtendedOptions = Options>(extendedConfig: Partial<MarkConfig<ExtendedOptions>>) {
|
|
|
|
|
return new Mark<ExtendedOptions>({
|
2020-11-16 06:25:25 +08:00
|
|
|
|
...this.config,
|
|
|
|
|
...extendedConfig,
|
2021-02-10 16:59:35 +08:00
|
|
|
|
} as MarkConfig<ExtendedOptions>)
|
2020-11-16 06:25:25 +08:00
|
|
|
|
}
|
2020-10-22 03:13:38 +08:00
|
|
|
|
}
|