replace NodeExtension with Node, replace MarkExtension with Mark

This commit is contained in:
Philipp Kühn
2020-11-16 11:19:43 +01:00
parent b44aafa97c
commit 8a7603edaf
31 changed files with 105 additions and 99 deletions

View File

@@ -38,15 +38,15 @@ In tiptap every node, mark and extension is living in its own file. This allows
```js ```js
// the tiptap schema API // the tiptap schema API
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
const Document = NodeExtension.create({ const Document = Node.create({
name: 'document', name: 'document',
topNode: true, topNode: true,
content: 'block+', content: 'block+',
}) })
const Paragraph = NodeExtension.create({ const Paragraph = Node.create({
name: 'paragraph', name: 'paragraph',
group: 'block', group: 'block',
content: 'inline*', content: 'inline*',
@@ -60,7 +60,7 @@ const Paragraph = NodeExtension.create({
}, },
}) })
const Text = NodeExtension.create({ const Text = Node.create({
name: 'text', name: 'text',
group: 'inline', group: 'inline',
}) })
@@ -79,7 +79,7 @@ Marks can be applied to specific parts of a node. Thats the case for **bold**
The content attribute defines exactly what kind of content the node can have. ProseMirror is really strict with that. That means, content which doesnt fit the schema is thrown away. It expects a name or group as a string. Here are a few examples: The content attribute defines exactly what kind of content the node can have. ProseMirror is really strict with that. That means, content which doesnt fit the schema is thrown away. It expects a name or group as a string. Here are a few examples:
```js ```js
NodeExtension.create({ Node.create({
// must have one ore more blocks // must have one ore more blocks
content: 'block+', content: 'block+',
@@ -99,7 +99,7 @@ NodeExtension.create({
You can define which marks are allowed inside of a node with the `marks` setting of the schema. Add a one or more names or groups of marks, allow all or disallow all marks like this: You can define which marks are allowed inside of a node with the `marks` setting of the schema. Add a one or more names or groups of marks, allow all or disallow all marks like this:
```js ```js
NodeExtension.create({ Node.create({
// allows only the 'bold' mark // allows only the 'bold' mark
marks: 'bold', marks: 'bold',
@@ -118,7 +118,7 @@ NodeExtension.create({
Add this node to a group of extensions, which can be referred to in the [content](#content) attribute of the schema. Add this node to a group of extensions, which can be referred to in the [content](#content) attribute of the schema.
```js ```js
NodeExtension.create({ Node.create({
// add to 'block' group // add to 'block' group
group: 'block', group: 'block',
@@ -134,7 +134,7 @@ NodeExtension.create({
Nodes can be rendered inline, too. When setting `inline: true` nodes are rendered in line with the text. Thats the case for mentions. The result is more like a mark, but with the functionality of a node. One difference is the resulting JSON document. Multiple marks are applied at once, inline nodes would result in a nested structure. Nodes can be rendered inline, too. When setting `inline: true` nodes are rendered in line with the text. Thats the case for mentions. The result is more like a mark, but with the functionality of a node. One difference is the resulting JSON document. Multiple marks are applied at once, inline nodes would result in a nested structure.
```js ```js
NodeExtension.create({ Node.create({
// renders nodes in line with the text, for example // renders nodes in line with the text, for example
inline: true, inline: true,
}) })
@@ -144,7 +144,7 @@ NodeExtension.create({
Nodes with `atom: true` arent directly editable and should be treated as a single unit. Its not so likely to use that in a editor context, but this is how it would look like: Nodes with `atom: true` arent directly editable and should be treated as a single unit. Its not so likely to use that in a editor context, but this is how it would look like:
```js ```js
NodeExtension.create({ Node.create({
atom: true, atom: true,
}) })
``` ```
@@ -153,7 +153,7 @@ NodeExtension.create({
Besides the already visible text selection, there is an invisible node selection. If you want to make your nodes selectable, you can configure it like this: Besides the already visible text selection, there is an invisible node selection. If you want to make your nodes selectable, you can configure it like this:
```js ```js
NodeExtension.create({ Node.create({
selectable: true, selectable: true,
}) })
``` ```
@@ -162,7 +162,7 @@ NodeExtension.create({
All nodes can be configured to be draggable (by default they arent) with this setting: All nodes can be configured to be draggable (by default they arent) with this setting:
```js ```js
NodeExtension.create({ Node.create({
draggable: true, draggable: true,
}) })
``` ```
@@ -171,7 +171,7 @@ NodeExtension.create({
Users expect code to behave very differently. For all kind of nodes containing code, you can set `code: true` to take this into account. Users expect code to behave very differently. For all kind of nodes containing code, you can set `code: true` to take this into account.
```js ```js
NodeExtension.create({ Node.create({
code: true, code: true,
}) })
``` ```
@@ -182,7 +182,7 @@ Nodes get dropped when their entire content is replaced (for example, when pasti
Typically, that applies to [`Blockquote`](/api/node/blockquote), [`CodeBlock`](/api/node/code-block), [`Heading`](/api/node/heading), and [`ListItem`](/api/node/list-item). Typically, that applies to [`Blockquote`](/api/node/blockquote), [`CodeBlock`](/api/node/code-block), [`Heading`](/api/node/heading), and [`ListItem`](/api/node/list-item).
```js ```js
NodeExtension.create({ Node.create({
defining: true, defining: true,
}) })
``` ```
@@ -191,7 +191,7 @@ NodeExtension.create({
For nodes that should fence the cursor for regular editing operations like backspacing, for example a TableCell, set `isolating: true`. For nodes that should fence the cursor for regular editing operations like backspacing, for example a TableCell, set `isolating: true`.
```js ```js
NodeExtension.create({ Node.create({
isolating: true, isolating: true,
}) })
``` ```
@@ -201,7 +201,7 @@ NodeExtension.create({
If you dont want the mark to be active when the cursor is at its end, set inclusive to `false`. For example, thats how its configured for [`Link`](/api/marks/link) marks: If you dont want the mark to be active when the cursor is at its end, set inclusive to `false`. For example, thats how its configured for [`Link`](/api/marks/link) marks:
```js ```js
MarkExtension.create({ Mark.create({
inclusive: false, inclusive: false,
}) })
``` ```
@@ -210,7 +210,7 @@ MarkExtension.create({
By default all nodes can be applied at the same time. With the excludes attribute you can define which marks must not coexist with the mark. For example, the inline code mark excludes any other mark (bold, italic, and all others). By default all nodes can be applied at the same time. With the excludes attribute you can define which marks must not coexist with the mark. For example, the inline code mark excludes any other mark (bold, italic, and all others).
```js ```js
MarkExtension.create({ Mark.create({
// must not coexist with the bold mark // must not coexist with the bold mark
excludes: 'bold' excludes: 'bold'
// exclude any other mark // exclude any other mark
@@ -222,7 +222,7 @@ MarkExtension.create({
Add this mark to a group of extensions, which can be referred to in the content attribute of the schema. Add this mark to a group of extensions, which can be referred to in the content attribute of the schema.
```js ```js
MarkExtension.create({ Mark.create({
// add this mark to the 'basic' group // add this mark to the 'basic' group
group: 'basic', group: 'basic',
// add this mark to the 'basic' and the 'foobar' group // add this mark to the 'basic' and the 'foobar' group
@@ -234,7 +234,7 @@ MarkExtension.create({
Users expect code to behave very differently. For all kind of marks containing code, you can set `code: true` to take this into account. Users expect code to behave very differently. For all kind of marks containing code, you can set `code: true` to take this into account.
```js ```js
MarkExtension.create({ Mark.create({
code: true, code: true,
}) })
``` ```
@@ -243,7 +243,7 @@ MarkExtension.create({
By default marks can span multiple nodes when rendered as HTML. Set `spanning: false` to indicate that a mark must not span multiple nodes. By default marks can span multiple nodes when rendered as HTML. Set `spanning: false` to indicate that a mark must not span multiple nodes.
```js ```js
MarkExtension.create({ Mark.create({
spanning: false, spanning: false,
}) })
``` ```

View File

@@ -386,24 +386,24 @@ const CustomLink = Link.extend({
There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/advanced-node-views) for more information. If youre looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes. There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/advanced-node-views) for more information. If youre looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
## Start from scratch ## Start from scratch
You can also build your own extensions from scratch with the `NodeExtension`, `MarkExtension`, and `Extension` classes. Pass an option with your code and configuration. You can also build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.
And if everything is working fine, dont forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose). And if everything is working fine, dont forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
### Create a node ### Create a node
```js ```js
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
const CustomNode = NodeExtension.create({ const CustomNode = Node.create({
// Your code goes here. // Your code goes here.
}) })
``` ```
### Create a mark ### Create a mark
```js ```js
import { MarkExtension } from '@tiptap/core' import { Mark } from '@tiptap/core'
const CustomMark = MarkExtension.create({ const CustomMark = Mark.create({
// Your code goes here. // Your code goes here.
}) })
``` ```

View File

@@ -44,9 +44,9 @@ new Editor({
In case youve built some custom extensions for your project, youre required to rewrite them to fit the new API. No worries, you can keep a lot of your work though. The `schema`, `commands`, `keys`, `inputRules` and `pasteRules` all work like they did before. Its just different how you register them. In case youve built some custom extensions for your project, youre required to rewrite them to fit the new API. No worries, you can keep a lot of your work though. The `schema`, `commands`, `keys`, `inputRules` and `pasteRules` all work like they did before. Its just different how you register them.
```js ```js
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
const CustomExtension = NodeExtension.create({ const CustomExtension = Node.create({
name: 'custom_extension' name: 'custom_extension'
defaultOptions: { defaultOptions: {

View File

@@ -15,8 +15,8 @@ import CommandManager from './CommandManager'
import ExtensionManager from './ExtensionManager' import ExtensionManager from './ExtensionManager'
import EventEmitter from './EventEmitter' import EventEmitter from './EventEmitter'
import { Extension } from './Extension' import { Extension } from './Extension'
import { NodeExtension } from './NodeExtension' import { Node } from './Node'
import { MarkExtension } from './MarkExtension' import { Mark } from './Mark'
import { Extensions, UnionToIntersection } from './types' import { Extensions, UnionToIntersection } from './types'
import * as extensions from './extensions' import * as extensions from './extensions'
import style from './style' import style from './style'
@@ -43,10 +43,10 @@ export interface AllExtensions {}
export type UnfilteredCommands = { export type UnfilteredCommands = {
[Item in keyof AllExtensions]: AllExtensions[Item] extends Extension<any, infer ExtensionCommands> [Item in keyof AllExtensions]: AllExtensions[Item] extends Extension<any, infer ExtensionCommands>
? ExtensionCommands ? ExtensionCommands
: AllExtensions[Item] extends NodeExtension<any, infer NodeExtensionCommands> : AllExtensions[Item] extends Node<any, infer NodeCommands>
? NodeExtensionCommands ? NodeCommands
: AllExtensions[Item] extends MarkExtension<any, infer MarkExtensionCommands> : AllExtensions[Item] extends Mark<any, infer MarkCommands>
? MarkExtensionCommands ? MarkCommands
: never : never
} }

View File

@@ -1,5 +1,8 @@
import { import {
DOMOutputSpec, MarkSpec, Mark, MarkType, DOMOutputSpec,
MarkSpec,
Mark as ProseMirrorMark,
MarkType,
} from 'prosemirror-model' } from 'prosemirror-model'
import { Plugin } from 'prosemirror-state' import { Plugin } from 'prosemirror-state'
import { ExtensionSpec } from './Extension' import { ExtensionSpec } from './Extension'
@@ -44,7 +47,7 @@ export interface MarkExtensionSpec<Options = any, Commands = {}> extends Overwri
options: Options, options: Options,
}, },
props: { props: {
mark: Mark, mark: ProseMirrorMark,
HTMLAttributes: { [key: string]: any }, HTMLAttributes: { [key: string]: any },
} }
) => DOMOutputSpec) | null, ) => DOMOutputSpec) | null,
@@ -106,7 +109,7 @@ export interface MarkExtensionSpec<Options = any, Commands = {}> extends Overwri
}) => Plugin[], }) => Plugin[],
}> {} }> {}
export class MarkExtension<Options = any, Commands = {}> { export class Mark<Options = any, Commands = {}> {
config: Required<MarkExtensionSpec> = { config: Required<MarkExtensionSpec> = {
name: 'mark', name: 'mark',
defaultOptions: {}, defaultOptions: {},
@@ -137,11 +140,11 @@ export class MarkExtension<Options = any, Commands = {}> {
} }
static create<O, C>(config: MarkExtensionSpec<O, C>) { static create<O, C>(config: MarkExtensionSpec<O, C>) {
return new MarkExtension<O, C>(config) return new Mark<O, C>(config)
} }
configure(options: Partial<Options>) { configure(options: Partial<Options>) {
return MarkExtension return Mark
.create<Options, Commands>(this.config as MarkExtensionSpec<Options, Commands>) .create<Options, Commands>(this.config as MarkExtensionSpec<Options, Commands>)
.#configure({ .#configure({
...this.config.defaultOptions, ...this.config.defaultOptions,
@@ -159,7 +162,7 @@ export class MarkExtension<Options = any, Commands = {}> {
} }
extend<ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<MarkExtensionSpec<ExtendedOptions, ExtendedCommands>>) { extend<ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<MarkExtensionSpec<ExtendedOptions, ExtendedCommands>>) {
return new MarkExtension<ExtendedOptions, ExtendedCommands>({ return new Mark<ExtendedOptions, ExtendedCommands>({
...this.config, ...this.config,
...extendedConfig, ...extendedConfig,
} as MarkExtensionSpec<ExtendedOptions, ExtendedCommands>) } as MarkExtensionSpec<ExtendedOptions, ExtendedCommands>)

View File

@@ -1,5 +1,8 @@
import { import {
DOMOutputSpec, NodeSpec, Node, NodeType, DOMOutputSpec,
NodeSpec,
Node as ProseMirrorNode,
NodeType,
} from 'prosemirror-model' } from 'prosemirror-model'
import { Plugin } from 'prosemirror-state' import { Plugin } from 'prosemirror-state'
import { ExtensionSpec } from './Extension' import { ExtensionSpec } from './Extension'
@@ -79,7 +82,7 @@ export interface NodeExtensionSpec<Options = any, Commands = {}> extends Overwri
options: Options, options: Options,
}, },
props: { props: {
node: Node, node: ProseMirrorNode,
HTMLAttributes: { [key: string]: any }, HTMLAttributes: { [key: string]: any },
} }
) => DOMOutputSpec) | null, ) => DOMOutputSpec) | null,
@@ -150,7 +153,7 @@ export interface NodeExtensionSpec<Options = any, Commands = {}> extends Overwri
}) => NodeViewRenderer) | null, }) => NodeViewRenderer) | null,
}> {} }> {}
export class NodeExtension<Options = any, Commands = {}> { export class Node<Options = any, Commands = {}> {
config: Required<NodeExtensionSpec> = { config: Required<NodeExtensionSpec> = {
name: 'node', name: 'node',
defaultOptions: {}, defaultOptions: {},
@@ -189,11 +192,11 @@ export class NodeExtension<Options = any, Commands = {}> {
} }
static create<O, C>(config: NodeExtensionSpec<O, C>) { static create<O, C>(config: NodeExtensionSpec<O, C>) {
return new NodeExtension<O, C>(config) return new Node<O, C>(config)
} }
configure(options: Partial<Options>) { configure(options: Partial<Options>) {
return NodeExtension return Node
.create<Options, Commands>(this.config as NodeExtensionSpec<Options, Commands>) .create<Options, Commands>(this.config as NodeExtensionSpec<Options, Commands>)
.#configure({ .#configure({
...this.config.defaultOptions, ...this.config.defaultOptions,
@@ -211,7 +214,7 @@ export class NodeExtension<Options = any, Commands = {}> {
} }
extend<ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<NodeExtensionSpec<ExtendedOptions, ExtendedCommands>>) { extend<ExtendedOptions = Options, ExtendedCommands = Commands>(extendedConfig: Partial<NodeExtensionSpec<ExtendedOptions, ExtendedCommands>>) {
return new NodeExtension<ExtendedOptions, ExtendedCommands>({ return new Node<ExtendedOptions, ExtendedCommands>({
...this.config, ...this.config,
...extendedConfig, ...extendedConfig,
} as NodeExtensionSpec<ExtendedOptions, ExtendedCommands>) } as NodeExtensionSpec<ExtendedOptions, ExtendedCommands>)

View File

@@ -6,8 +6,8 @@ export {
} from './Editor' } from './Editor'
export * from './Extension' export * from './Extension'
export * from './NodeExtension' export * from './Node'
export * from './MarkExtension' export * from './Mark'
export * from './types' export * from './types'
export { default as nodeInputRule } from './inputRules/nodeInputRule' export { default as nodeInputRule } from './inputRules/nodeInputRule'

View File

@@ -1,11 +1,11 @@
import { Node } from 'prosemirror-model' import { Node as ProseMirrorNode } from 'prosemirror-model'
import { Decoration, NodeView } from 'prosemirror-view' import { Decoration, NodeView } from 'prosemirror-view'
import { Extension } from './Extension' import { Extension } from './Extension'
import { NodeExtension } from './NodeExtension' import { Node } from './Node'
import { MarkExtension } from './MarkExtension' import { Mark } from './Mark'
import { Editor } from './Editor' import { Editor } from './Editor'
export type Extensions = (Extension | NodeExtension | MarkExtension)[] export type Extensions = (Extension | Node | Mark)[]
export type Attribute = { export type Attribute = {
default: any, default: any,
@@ -46,7 +46,7 @@ export type AnyObject = {
export type NodeViewRendererProps = { export type NodeViewRendererProps = {
editor: Editor, editor: Editor,
node: Node, node: ProseMirrorNode,
getPos: (() => number) | boolean, getPos: (() => number) | boolean,
decorations: Decoration[], decorations: Decoration[],
HTMLAttributes: { [key: string]: any }, HTMLAttributes: { [key: string]: any },

View File

@@ -1,12 +1,12 @@
import { Extensions } from '../types' import { Extensions } from '../types'
import { Extension } from '../Extension' import { Extension } from '../Extension'
import { NodeExtension } from '../NodeExtension' import { Node } from '../Node'
import { MarkExtension } from '../MarkExtension' import { Mark } from '../Mark'
export default function splitExtensions(extensions: Extensions) { export default function splitExtensions(extensions: Extensions) {
const baseExtensions = extensions.filter(extension => extension instanceof Extension) as Extension[] const baseExtensions = extensions.filter(extension => extension instanceof Extension) as Extension[]
const nodeExtensions = extensions.filter(extension => extension instanceof NodeExtension) as NodeExtension[] const nodeExtensions = extensions.filter(extension => extension instanceof Node) as Node[]
const markExtensions = extensions.filter(extension => extension instanceof MarkExtension) as MarkExtension[] const markExtensions = extensions.filter(extension => extension instanceof Mark) as Mark[]
return { return {
baseExtensions, baseExtensions,

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface BlockquoteOptions { export interface BlockquoteOptions {
@@ -9,7 +9,7 @@ export interface BlockquoteOptions {
export const inputRegex = /^\s*>\s$/gm export const inputRegex = /^\s*>\s$/gm
const Blockquote = NodeExtension.create({ const Blockquote = Node.create({
name: 'blockquote', name: 'blockquote',
defaultOptions: <BlockquoteOptions>{ defaultOptions: <BlockquoteOptions>{

View File

@@ -1,5 +1,5 @@
import { import {
Command, MarkExtension, markInputRule, markPasteRule, Command, Mark, markInputRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
export interface BoldOptions { export interface BoldOptions {
@@ -13,7 +13,7 @@ export const starPasteRegex = /(?:^|\s)((?:\*\*)((?:[^*]+))(?:\*\*))/gm
export const underscoreInputRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/gm export const underscoreInputRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))$/gm
export const underscorePasteRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))/gm export const underscorePasteRegex = /(?:^|\s)((?:__)((?:[^__]+))(?:__))/gm
const Bold = MarkExtension.create({ const Bold = Mark.create({
name: 'bold', name: 'bold',
defaultOptions: <BoldOptions>{ defaultOptions: <BoldOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface BulletListOptions { export interface BulletListOptions {
@@ -9,7 +9,7 @@ export interface BulletListOptions {
export const inputRegex = /^\s*([-+*])\s$/ export const inputRegex = /^\s*([-+*])\s$/
const BulletList = NodeExtension.create({ const BulletList = Node.create({
name: 'bulletList', name: 'bulletList',
defaultOptions: <BulletListOptions>{ defaultOptions: <BulletListOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { textblockTypeInputRule } from 'prosemirror-inputrules' import { textblockTypeInputRule } from 'prosemirror-inputrules'
export interface CodeBlockOptions { export interface CodeBlockOptions {
@@ -11,7 +11,7 @@ export interface CodeBlockOptions {
export const backtickInputRegex = /^```(?<language>[a-z]*)? $/ export const backtickInputRegex = /^```(?<language>[a-z]*)? $/
export const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/ export const tildeInputRegex = /^~~~(?<language>[a-z]*)? $/
const CodeBlock = NodeExtension.create({ const CodeBlock = Node.create({
name: 'codeBlock', name: 'codeBlock',
defaultOptions: <CodeBlockOptions>{ defaultOptions: <CodeBlockOptions>{

View File

@@ -1,6 +1,6 @@
import { import {
Command, Command,
MarkExtension, Mark,
markInputRule, markInputRule,
markPasteRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
@@ -14,7 +14,7 @@ export interface CodeOptions {
export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/gm export const inputRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))$/gm
export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/gm export const pasteRegex = /(?:^|\s)((?:`)((?:[^`]+))(?:`))/gm
const Code = MarkExtension.create({ const Code = Mark.create({
name: 'code', name: 'code',
defaultOptions: <CodeOptions>{ defaultOptions: <CodeOptions>{

View File

@@ -1,6 +1,6 @@
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
const Document = NodeExtension.create({ const Document = Node.create({
name: 'document', name: 'document',
topNode: true, topNode: true,
content: 'block+', content: 'block+',

View File

@@ -1,7 +1,7 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { exitCode } from 'prosemirror-commands' import { exitCode } from 'prosemirror-commands'
const HardBreak = NodeExtension.create({ const HardBreak = Node.create({
name: 'hardBreak', name: 'hardBreak',
inline: true, inline: true,

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { textblockTypeInputRule } from 'prosemirror-inputrules' import { textblockTypeInputRule } from 'prosemirror-inputrules'
type Level = 1 | 2 | 3 | 4 | 5 | 6 type Level = 1 | 2 | 3 | 4 | 5 | 6
@@ -10,7 +10,7 @@ export interface HeadingOptions {
}, },
} }
const Heading = NodeExtension.create({ const Heading = Node.create({
name: 'heading', name: 'heading',
defaultOptions: <HeadingOptions>{ defaultOptions: <HeadingOptions>{

View File

@@ -1,6 +1,6 @@
import { import {
Command, Command,
MarkExtension, Mark,
markInputRule, markInputRule,
markPasteRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
@@ -14,7 +14,7 @@ export interface HighlightOptions {
export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
const Highlight = MarkExtension.create({ const Highlight = Mark.create({
name: 'highlight', name: 'highlight',
defaultOptions: <HighlightOptions>{ defaultOptions: <HighlightOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension, nodeInputRule } from '@tiptap/core' import { Command, Node, nodeInputRule } from '@tiptap/core'
export interface HorizontalRuleOptions { export interface HorizontalRuleOptions {
HTMLAttributes: { HTMLAttributes: {
@@ -6,7 +6,7 @@ export interface HorizontalRuleOptions {
}, },
} }
const HorizontalRule = NodeExtension.create({ const HorizontalRule = Node.create({
name: 'horizontalRule', name: 'horizontalRule',
defaultOptions: <HorizontalRuleOptions>{ defaultOptions: <HorizontalRuleOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension, nodeInputRule } from '@tiptap/core' import { Command, Node, nodeInputRule } from '@tiptap/core'
export interface ImageOptions { export interface ImageOptions {
inline: boolean, inline: boolean,
@@ -9,7 +9,7 @@ export interface ImageOptions {
export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/ export const inputRegex = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
const Image = NodeExtension.create({ const Image = Node.create({
name: 'image', name: 'image',
defaultOptions: <ImageOptions>{ defaultOptions: <ImageOptions>{

View File

@@ -1,6 +1,6 @@
import { import {
Command, Command,
MarkExtension, Mark,
markInputRule, markInputRule,
markPasteRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
@@ -16,7 +16,7 @@ export const starPasteRegex = /(?:^|\s)((?:\*)((?:[^*]+))(?:\*))/gm
export const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/gm export const underscoreInputRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))$/gm
export const underscorePasteRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))/gm export const underscorePasteRegex = /(?:^|\s)((?:_)((?:[^_]+))(?:_))/gm
const Italic = MarkExtension.create({ const Italic = Mark.create({
name: 'italic', name: 'italic',
defaultOptions: <ItalicOptions>{ defaultOptions: <ItalicOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, MarkExtension, markPasteRule } from '@tiptap/core' import { Command, Mark, markPasteRule } from '@tiptap/core'
import { Plugin, PluginKey } from 'prosemirror-state' import { Plugin, PluginKey } from 'prosemirror-state'
export interface LinkOptions { export interface LinkOptions {
@@ -10,7 +10,7 @@ export interface LinkOptions {
export const pasteRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/()]*)/gi export const pasteRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z]{2,}\b(?:[-a-zA-Z0-9@:%._+~#=?!&/()]*)/gi
const Link = MarkExtension.create({ const Link = Mark.create({
name: 'link', name: 'link',
inclusive: false, inclusive: false,

View File

@@ -1,4 +1,4 @@
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
export interface ListItemOptions { export interface ListItemOptions {
HTMLAttributes: { HTMLAttributes: {
@@ -6,7 +6,7 @@ export interface ListItemOptions {
}, },
} }
const ListItem = NodeExtension.create({ const ListItem = Node.create({
name: 'listItem', name: 'listItem',
defaultOptions: <ListItemOptions>{ defaultOptions: <ListItemOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface OrderedListOptions { export interface OrderedListOptions {
@@ -9,7 +9,7 @@ export interface OrderedListOptions {
export const inputRegex = /^(\d+)\.\s$/ export const inputRegex = /^(\d+)\.\s$/
const OrderedList = NodeExtension.create({ const OrderedList = Node.create({
name: 'orderedList', name: 'orderedList',
defaultOptions: <OrderedListOptions>{ defaultOptions: <OrderedListOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension } from '@tiptap/core' import { Command, Node } from '@tiptap/core'
export interface ParagraphOptions { export interface ParagraphOptions {
HTMLAttributes: { HTMLAttributes: {
@@ -6,7 +6,7 @@ export interface ParagraphOptions {
}, },
} }
const Paragraph = NodeExtension.create({ const Paragraph = Node.create({
name: 'paragraph', name: 'paragraph',
defaultOptions: <ParagraphOptions>{ defaultOptions: <ParagraphOptions>{

View File

@@ -1,6 +1,6 @@
import { import {
Command, Command,
MarkExtension, Mark,
markInputRule, markInputRule,
markPasteRule, markPasteRule,
} from '@tiptap/core' } from '@tiptap/core'
@@ -14,7 +14,7 @@ export interface StrikeOptions {
export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm export const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm export const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
const Strike = MarkExtension.create({ const Strike = Mark.create({
name: 'strike', name: 'strike',
defaultOptions: <StrikeOptions>{ defaultOptions: <StrikeOptions>{

View File

@@ -1,4 +1,4 @@
import { NodeExtension, mergeAttributes } from '@tiptap/core' import { Node, mergeAttributes } from '@tiptap/core'
import { wrappingInputRule } from 'prosemirror-inputrules' import { wrappingInputRule } from 'prosemirror-inputrules'
export interface TaskItemOptions { export interface TaskItemOptions {
@@ -10,7 +10,7 @@ export interface TaskItemOptions {
export const inputRegex = /^\s*(\[([ |x])\])\s$/ export const inputRegex = /^\s*(\[([ |x])\])\s$/
const TaskItem = NodeExtension.create({ const TaskItem = Node.create({
name: 'taskItem', name: 'taskItem',
defaultOptions: <TaskItemOptions>{ defaultOptions: <TaskItemOptions>{

View File

@@ -1,4 +1,4 @@
import { Command, NodeExtension, mergeAttributes } from '@tiptap/core' import { Command, Node, mergeAttributes } from '@tiptap/core'
export interface TaskListOptions { export interface TaskListOptions {
HTMLAttributes: { HTMLAttributes: {
@@ -6,7 +6,7 @@ export interface TaskListOptions {
}, },
} }
const TaskList = NodeExtension.create({ const TaskList = Node.create({
name: 'taskList', name: 'taskList',
defaultOptions: <TaskListOptions>{ defaultOptions: <TaskListOptions>{

View File

@@ -1,6 +1,6 @@
import { Command, MarkExtension, getMarkAttrs } from '@tiptap/core' import { Command, Mark, getMarkAttrs } from '@tiptap/core'
const TextStyle = MarkExtension.create({ const TextStyle = Mark.create({
name: 'textStyle', name: 'textStyle',
parseHTML() { parseHTML() {

View File

@@ -1,6 +1,6 @@
import { NodeExtension } from '@tiptap/core' import { Node } from '@tiptap/core'
const Text = NodeExtension.create({ const Text = Node.create({
name: 'text', name: 'text',
group: 'inline', group: 'inline',
}) })

View File

@@ -1,4 +1,4 @@
import { Command, MarkExtension } from '@tiptap/core' import { Command, Mark } from '@tiptap/core'
export interface UnderlineOptions { export interface UnderlineOptions {
HTMLAttributes: { HTMLAttributes: {
@@ -6,7 +6,7 @@ export interface UnderlineOptions {
}, },
} }
const Underline = MarkExtension.create({ const Underline = Mark.create({
name: 'underline', name: 'underline',
defaultOptions: <UnderlineOptions>{ defaultOptions: <UnderlineOptions>{