tiptap/packages/extension-highlight/src/highlight.ts
2021-04-21 09:43:31 +02:00

115 lines
2.3 KiB
TypeScript

import {
Command,
Mark,
markInputRule,
markPasteRule,
mergeAttributes,
} from '@tiptap/core'
export interface HighlightOptions {
multicolor: boolean,
HTMLAttributes: Record<string, any>,
}
declare module '@tiptap/core' {
interface Commands {
highlight: {
/**
* Set a highlight mark
*/
setHighlight: (attributes?: { color: string }) => Command,
/**
* Toggle a highlight mark
*/
toggleHighlight: (attributes?: { color: string }) => Command,
/**
* Unset a highlight mark
*/
unsetHighlight: () => Command,
}
}
}
export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
export const Highlight = Mark.create<HighlightOptions>({
name: 'highlight',
defaultOptions: {
multicolor: false,
HTMLAttributes: {},
},
addAttributes() {
if (!this.options.multicolor) {
return {}
}
return {
color: {
default: null,
parseHTML: element => {
return {
color: element.getAttribute('data-color') || element.style.backgroundColor,
}
},
renderHTML: attributes => {
if (!attributes.color) {
return {}
}
return {
'data-color': attributes.color,
style: `background-color: ${attributes.color}`,
}
},
},
}
},
parseHTML() {
return [
{
tag: 'mark',
},
]
},
renderHTML({ HTMLAttributes }) {
return ['mark', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
},
addCommands() {
return {
setHighlight: attributes => ({ commands }) => {
return commands.setMark('highlight', attributes)
},
toggleHighlight: attributes => ({ commands }) => {
return commands.toggleMark('highlight', attributes)
},
unsetHighlight: () => ({ commands }) => {
return commands.unsetMark('highlight')
},
}
},
addKeyboardShortcuts() {
return {
'Mod-Shift-h': () => this.editor.commands.toggleHighlight(),
}
},
addInputRules() {
return [
markInputRule(inputRegex, this.type),
]
},
addPasteRules() {
return [
markPasteRule(inputRegex, this.type),
]
},
})