import { Mark, markInputRule, markPasteRule, mergeAttributes, } from '@tiptap/core' export interface HighlightOptions { multicolor: boolean, HTMLAttributes: Record, } declare module '@tiptap/core' { interface Commands { highlight: { /** * Set a highlight mark */ setHighlight: (attributes?: { color: string }) => ReturnType, /** * Toggle a highlight mark */ toggleHighlight: (attributes?: { color: string }) => ReturnType, /** * Unset a highlight mark */ unsetHighlight: () => ReturnType, } } } export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm export const Highlight = Mark.create({ 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), ] }, })