feat: add exitOnTripleEnter and exitOnArrowDown options to CodeBlock extension
This commit is contained in:
@@ -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()
|
||||
|
||||
@@ -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<string, any>,
|
||||
}
|
||||
|
||||
@@ -30,6 +47,8 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
||||
addOptions() {
|
||||
return {
|
||||
languageClassPrefix: 'language-',
|
||||
exitOnTripleEnter: true,
|
||||
exitOnArrowDown: true,
|
||||
HTMLAttributes: {},
|
||||
}
|
||||
},
|
||||
@@ -119,8 +138,12 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
|
||||
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<CodeBlockOptions>({
|
||||
.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
|
||||
|
||||
Reference in New Issue
Block a user