ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

make extension configs extendable

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-19 17:35:50 +01:00
parent 32af53d0f4
commit 6fb28a2741
6 changed files with 648 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
packages/core/src/Extension.ts
View File

@@ -4,162 +4,164 @@ import { InputRule } from 'prosemirror-inputrules'
import { Editor } from './Editor'
import { Node } from './Node'
import mergeDeep from './utilities/mergeDeep'
import { GlobalAttributes, RawCommands } from './types'
import { GlobalAttributes, RawCommands, ExtensionConfig } from './types'
export interface ExtensionConfig<Options = any> {
/**
* Name
*/
name: string,
declare module '@tiptap/core' {
interface ExtensionConfig<Options = any> {
/**
* Name
*/
name: string,
/**
* Default options
*/
defaultOptions?: Options,
/**
* Default options
*/
defaultOptions?: Options,
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
options: Options,
}) => GlobalAttributes | {},
/**
* Raw
*/
addCommands?: (this: {
options: Options,
editor: Editor,
}) => Partial<RawCommands>,
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
}) => {
[key: string]: ProseMirrorCommand,
},
/**
* Input rules
*/
addInputRules?: (this: {
options: Options,
editor: Editor,
}) => InputRule[],
/**
* Paste rules
*/
addPasteRules?: (this: {
options: Options,
editor: Editor,
}) => Plugin[],
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
options: Options,
editor: Editor,
}) => Plugin[],
/**
* Extend Node Schema
*/
extendNodeSchema?: ((
this: {
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
options: Options,
},
extension: Node,
) => {
[key: string]: any,
}) | null,
}) => GlobalAttributes | {},
/**
* Extend Mark Schema
*/
extendMarkSchema?: ((
this: {
options: Options,
},
extension: Node,
) => {
[key: string]: any,
}) | null,
/**
* The editor is ready.
*/
onCreate?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The content has changed.
*/
onUpdate?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The selection has changed.
*/
onSelection?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The editor state has changed.
*/
onTransaction?: ((
this: {
/**
* Raw
*/
addCommands?: (this: {
options: Options,
editor: Editor,
},
props: {
transaction: Transaction,
},
) => void) | null,
}) => Partial<RawCommands>,
/**
* The editor is focused.
*/
onFocus?: ((
this: {
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
}) => {
[key: string]: ProseMirrorCommand,
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor isn’t focused anymore.
*/
onBlur?: ((
this: {
/**
* Input rules
*/
addInputRules?: (this: {
options: Options,
editor: Editor,
},
props: {
event: FocusEvent,
},
) => void) | null,
}) => InputRule[],
/**
* The editor is destroyed.
*/
onDestroy?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* Paste rules
*/
addPasteRules?: (this: {
options: Options,
editor: Editor,
}) => Plugin[],
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
options: Options,
editor: Editor,
}) => 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,
/**
* The editor is ready.
*/
onCreate?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The content has changed.
*/
onUpdate?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The selection has changed.
*/
onSelection?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
/**
* The editor state has changed.
*/
onTransaction?: ((
this: {
options: Options,
editor: Editor,
},
props: {
transaction: Transaction,
},
) => void) | null,
/**
* The editor is focused.
*/
onFocus?: ((
this: {
options: Options,
editor: Editor,
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor isn’t focused anymore.
*/
onBlur?: ((
this: {
options: Options,
editor: Editor,
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor is destroyed.
*/
onDestroy?: ((this: {
options: Options,
editor: Editor,
}) => void) | null,
}
}
export class Extension<Options = any> {

371
packages/core/src/Mark.ts
View File

@@ -7,188 +7,235 @@ import {
import { Plugin, Transaction } from 'prosemirror-state'
import { Command as ProseMirrorCommand } from 'prosemirror-commands'
import { InputRule } from 'prosemirror-inputrules'
import { ExtensionConfig } from './Extension'
import mergeDeep from './utilities/mergeDeep'
import { Attributes, Overwrite, RawCommands } from './types'
import {
Attributes,
RawCommands,
GlobalAttributes,
MarkConfig,
} from './types'
import { Editor } from './Editor'
export interface MarkConfig<Options = any> extends Overwrite<ExtensionConfig<Options>, {
/**
* Inclusive
*/
inclusive?: MarkSpec['inclusive'] | ((this: { options: Options }) => MarkSpec['inclusive']),
declare module '@tiptap/core' {
export interface MarkConfig<Options = any> {
/**
* Name
*/
name: string,
/**
* Excludes
*/
excludes?: MarkSpec['excludes'] | ((this: { options: Options }) => MarkSpec['excludes']),
/**
* Default options
*/
defaultOptions?: Options,
/**
* Group
*/
group?: MarkSpec['group'] | ((this: { options: Options }) => MarkSpec['group']),
/**
* Spanning
*/
spanning?: MarkSpec['spanning'] | ((this: { options: Options }) => MarkSpec['spanning']),
/**
* Parse HTML
*/
parseHTML?: (
this: {
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
options: Options,
},
) => MarkSpec['parseDOM'],
}) => GlobalAttributes | {},
/**
* Render HTML
*/
renderHTML?: ((
this: {
options: Options,
},
props: {
mark: ProseMirrorMark,
HTMLAttributes: { [key: string]: any },
}
) => DOMOutputSpec) | null,
/**
* Attributes
*/
addAttributes?: (
this: {
options: Options,
},
) => Attributes | {},
/**
* Commands
*/
addCommands?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => Partial<RawCommands>,
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => {
[key: string]: ProseMirrorCommand,
},
/**
* Input rules
*/
addInputRules?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => InputRule[],
/**
* Paste rules
*/
addPasteRules?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => Plugin[],
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => Plugin[],
/**
* 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.
*/
onSelection?: ((this: {
options: Options,
editor: Editor,
type: MarkType,
}) => void) | null,
/**
* The editor state has changed.
*/
onTransaction?: ((
this: {
/**
* Raw
*/
addCommands?: (this: {
options: Options,
editor: Editor,
type: MarkType,
},
props: {
transaction: Transaction,
},
) => void) | null,
}) => Partial<RawCommands>,
/**
* The editor is focused.
*/
onFocus?: ((
this: {
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => {
[key: string]: ProseMirrorCommand,
},
props: {
event: FocusEvent,
},
) => void) | null,
/**
* The editor isn’t focused anymore.
*/
onBlur?: ((
this: {
/**
* Input rules
*/
addInputRules?: (this: {
options: Options,
editor: Editor,
type: MarkType,
},
props: {
event: FocusEvent,
},
) => void) | null,
}) => InputRule[],
/**
* The editor is destroyed.
*/
onDestroy?: ((this: {
options: Options,
editor: Editor,
type: MarkType,
}) => void) | null,
}> {}
/**
* Paste rules
*/
addPasteRules?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => Plugin[],
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
options: Options,
editor: Editor,
type: MarkType,
}) => 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,
/**
* 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.
*/
onSelection?: ((this: {
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,
/**
* 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 | {},
}
}
export class Mark<Options = any> {
type = 'mark'

475
packages/core/src/Node.ts
View File

@@ -7,251 +7,294 @@ import {
import { Command as ProseMirrorCommand } from 'prosemirror-commands'
import { Plugin, Transaction } from 'prosemirror-state'
import { InputRule } from 'prosemirror-inputrules'
import { ExtensionConfig } from './Extension'
import mergeDeep from './utilities/mergeDeep'
import {
Attributes,
NodeViewRenderer,
Overwrite,
GlobalAttributes,
RawCommands,
NodeConfig,
} from './types'
import { Editor } from './Editor'
export interface NodeConfig<Options = any> extends Overwrite<ExtensionConfig<Options>, {
/**
* TopNode
*/
topNode?: boolean,
declare module '@tiptap/core' {
interface NodeConfig<Options = any> {
/**
* Name
*/
name: string,
/**
* Content
*/
content?: NodeSpec['content'] | ((this: { options: Options }) => NodeSpec['content']),
/**
* Default options
*/
defaultOptions?: Options,
/**
* 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: {
/**
* Global attributes
*/
addGlobalAttributes?: (this: {
options: Options,
},
) => NodeSpec['parseDOM'],
}) => GlobalAttributes | {},
/**
* Render HTML
*/
renderHTML?: ((
this: {
options: Options,
},
props: {
node: ProseMirrorNode,
HTMLAttributes: { [key: string]: any },
}
) => DOMOutputSpec) | null,
/**
* Render Text
*/
renderText?: ((
this: {
/**
* Raw
*/
addCommands?: (this: {
options: Options,
editor: Editor,
type: NodeType,
},
props: {
node: ProseMirrorNode,
}
) => string) | null,
}) => Partial<RawCommands>,
/**
* Add Attributes
*/
addAttributes?: (
this: {
options: Options,
},
) => Attributes | {},
/**
* Commands
*/
addCommands?: (this: {
options: Options,
editor: Editor,
type: NodeType,
}) => Partial<RawCommands>,
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
type: NodeType,
}) => {
[key: string]: ProseMirrorCommand,
},
/**
* 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: {
/**
* Keyboard shortcuts
*/
addKeyboardShortcuts?: (this: {
options: Options,
editor: Editor,
type: NodeType,
}) => {
[key: string]: ProseMirrorCommand,
},
props: {
transaction: Transaction,
},
) => void) | null,
/**
* The editor is focused.
*/
onFocus?: ((
this: {
/**
* Input rules
*/
addInputRules?: (this: {
options: Options,
editor: Editor,
type: NodeType,
},
props: {
event: FocusEvent,
},
) => void) | null,
}) => InputRule[],
/**
* The editor isn’t focused anymore.
*/
onBlur?: ((
this: {
/**
* Paste rules
*/
addPasteRules?: (this: {
options: Options,
editor: Editor,
type: NodeType,
},
props: {
event: FocusEvent,
},
) => void) | null,
}) => Plugin[],
/**
* The editor is destroyed.
*/
onDestroy?: ((this: {
options: Options,
editor: Editor,
type: NodeType,
}) => void) | null,
}> {}
/**
* ProseMirror plugins
*/
addProseMirrorPlugins?: (this: {
options: Options,
editor: Editor,
type: NodeType,
}) => 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,
/**
* 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,
/**
* Node View
*/
addNodeView?: ((this: {
options: Options,
editor: Editor,
type: NodeType,
}) => NodeViewRenderer) | null,
/**
* 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,
/**
* Render Text
*/
renderText?: ((
this: {
options: Options,
editor: Editor,
type: NodeType,
},
props: {
node: ProseMirrorNode,
}
) => string) | null,
/**
* Add Attributes
*/
addAttributes?: (
this: {
options: Options,
},
) => Attributes | {},
}
}
export class Node<Options = any> {
type = 'node'

20
packages/core/src/helpers/getSchema.ts
View File

@@ -1,6 +1,10 @@
import { NodeSpec, MarkSpec, Schema } from 'prosemirror-model'
import { Extensions } from '../types'
import { ExtensionConfig } from '../Extension'
import {
Extensions,
ExtensionConfig,
NodeConfig,
MarkConfig,
} from '../types'
import splitExtensions from './splitExtensions'
import getAttributesFromExtensions from './getAttributesFromExtensions'
import getRenderedAttributes from './getRenderedAttributes'
@@ -22,8 +26,16 @@ export default function getSchema(extensions: Extensions): Schema {
const allAttributes = getAttributesFromExtensions(extensions)
const { nodeExtensions, markExtensions } = splitExtensions(extensions)
const topNode = nodeExtensions.find(extension => extension.config.topNode)?.config.name
const nodeSchemaExtenders: ExtensionConfig['extendNodeSchema'][] = []
const markSchemaExtenders: ExtensionConfig['extendMarkSchema'][] = []
const nodeSchemaExtenders: (
| ExtensionConfig['extendNodeSchema']
| NodeConfig['extendNodeSchema']
| MarkConfig['extendNodeSchema']
)[] = []
const markSchemaExtenders: (
| ExtensionConfig['extendNodeSchema']
| NodeConfig['extendNodeSchema']
| MarkConfig['extendNodeSchema']
)[] = []
extensions.forEach(extension => {
if (typeof extension.config.extendNodeSchema === 'function') {

9
packages/core/src/index.ts
View File

@@ -23,3 +23,12 @@ export { default as isCellSelection } from './helpers/isCellSelection'
export { default as findParentNodeClosestToPos } from './helpers/findParentNodeClosestToPos'
export interface Commands {}
// eslint-disable-next-line
export interface ExtensionConfig<Options = any> {}
// eslint-disable-next-line
export interface NodeConfig<Options = any> {}
// eslint-disable-next-line
export interface MarkConfig<Options = any> {}

14
packages/core/src/types.ts
View File

@@ -14,9 +14,19 @@ import { Extension } from './Extension'
import { Node } from './Node'
import { Mark } from './Mark'
import { Editor } from './Editor'
import { Commands } from '.'
import {
Commands,
ExtensionConfig,
NodeConfig,
MarkConfig,
} from '.'
export { Commands }
export {
Commands,
ExtensionConfig,
NodeConfig,
MarkConfig,
}
export type Extensions = (Extension | Node | Mark)[]