add support to configure the languageClassPrefix

This commit is contained in:
Hans Pagel 2020-09-30 16:33:13 +02:00
parent 576f3e1caa
commit ecfa26b28a
2 changed files with 17 additions and 7 deletions

View File

@ -17,9 +17,10 @@ yarn add @tiptap/extension-code-block
```
## Settings
| Option | Type | Default | Description |
| ------ | ------ | ------- | -------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| Option | Type | Default | Description |
| ------------------- | ------ | --------- | ---------------------------------------------------------------- |
| class | string | | Add a custom class to the rendered HTML tag. |
| languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. |
## Commands
| Command | Options | Description |

View File

@ -1,6 +1,10 @@
import { Command, Node } from '@tiptap/core'
import { textblockTypeInputRule } from 'prosemirror-inputrules'
export interface CodeBlockOptions {
languageClassPrefix: string,
}
export type CodeBlockCommand = () => Command
declare module '@tiptap/core/src/Editor' {
@ -11,9 +15,12 @@ declare module '@tiptap/core/src/Editor' {
export const inputRegex = /^```(?<language>[a-z]*)? $/
export default new Node()
export default new Node<CodeBlockOptions>()
.name('code_block')
.schema(() => ({
.defaults({
languageClassPrefix: 'language-',
})
.schema(({ options }) => ({
attrs: {
language: {
default: null,
@ -42,11 +49,13 @@ export default new Node()
return null
}
return { language: classAttribute.replace(/^(language-)/, '') }
const regexLanguageClassPrefix = new RegExp(`^(${options.languageClassPrefix})`)
return { language: classAttribute.replace(regexLanguageClassPrefix, '') }
},
},
],
toDOM: node => ['pre', ['code', { class: node.attrs.language && `language-${node.attrs.language}` }, 0]],
toDOM: node => ['pre', ['code', { class: node.attrs.language && options.languageClassPrefix + node.attrs.language }, 0]],
}))
.commands(({ name }) => ({
codeBlock: attrs => ({ commands }) => {