diff --git a/docs/api/nodes/code-block.md b/docs/api/nodes/code-block.md index 1208d24d..1c881d8b 100644 --- a/docs/api/nodes/code-block.md +++ b/docs/api/nodes/code-block.md @@ -22,17 +22,6 @@ npm install @tiptap/extension-code-block ## Settings -### HTMLAttributes -Custom HTML attributes that should be added to the rendered HTML tag. - -```js -CodeBlock.configure({ - HTMLAttributes: { - class: 'my-custom-class', - }, -}) -``` - ### languageClassPrefix Adds a prefix to language classes that are applied to code tags. @@ -44,6 +33,39 @@ CodeBlock.configure({ }) ``` +### exitOnTripleEnter +Define whether the node should be exited on triple enter. + +Default: `true` + +```js +CodeBlock.configure({ + exitOnTripleEnter: false, +}) +``` + +### exitOnArrowDown +Define whether the node should be exited on arrow down if there is no node after it. + +Default: `true` + +```js +CodeBlock.configure({ + exitOnArrowDown: false, +}) +``` + +### HTMLAttributes +Custom HTML attributes that should be added to the rendered HTML tag. + +```js +CodeBlock.configure({ + HTMLAttributes: { + class: 'my-custom-class', + }, +}) +``` + ## Commands ### setCodeBlock() diff --git a/packages/extension-code-block/src/code-block.ts b/packages/extension-code-block/src/code-block.ts index 5d9f6651..14fab268 100644 --- a/packages/extension-code-block/src/code-block.ts +++ b/packages/extension-code-block/src/code-block.ts @@ -2,7 +2,24 @@ import { Node, textblockTypeInputRule } from '@tiptap/core' import { Plugin, PluginKey, TextSelection } from 'prosemirror-state' export interface CodeBlockOptions { + /** + * Adds a prefix to language classes that are applied to code tags. + * Defaults to `'language-'`. + */ languageClassPrefix: string, + /** + * Define whether the node should be exited on triple enter. + * Defaults to `true`. + */ + exitOnTripleEnter: boolean, + /** + * Define whether the node should be exited on arrow down if there is no node after it. + * Defaults to `true`. + */ + exitOnArrowDown: boolean, + /** + * Custom HTML attributes that should be added to the rendered HTML tag. + */ HTMLAttributes: Record, } @@ -30,6 +47,8 @@ export const CodeBlock = Node.create({ addOptions() { return { languageClassPrefix: 'language-', + exitOnTripleEnter: true, + exitOnArrowDown: true, HTMLAttributes: {}, } }, @@ -119,8 +138,12 @@ export const CodeBlock = Node.create({ return false }, - // escape node on triple enter + // exit node on triple enter Enter: ({ editor }) => { + if (!this.options.exitOnTripleEnter) { + return false + } + const { state } = editor const { selection } = state const { $from, empty } = selection @@ -147,8 +170,12 @@ export const CodeBlock = Node.create({ .run() }, - // escape node on arrow down + // exit node on arrow down ArrowDown: ({ editor }) => { + if (!this.options.exitOnArrowDown) { + return false + } + const { state } = editor const { selection, doc } = state const { $from, empty } = selection