2020-10-02 21:28:00 +08:00
|
|
|
import {
|
2020-11-06 20:42:40 +08:00
|
|
|
Command,
|
2020-11-16 18:19:43 +08:00
|
|
|
Mark,
|
2020-11-06 20:42:40 +08:00
|
|
|
markInputRule,
|
|
|
|
markPasteRule,
|
2020-10-02 21:28:00 +08:00
|
|
|
} from '@tiptap/core'
|
|
|
|
|
2020-11-13 23:44:22 +08:00
|
|
|
export interface HighlightOptions {
|
|
|
|
HTMLAttributes: {
|
|
|
|
[key: string]: any
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
2020-10-28 05:14:40 +08:00
|
|
|
export const inputRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))$/gm
|
|
|
|
export const pasteRegex = /(?:^|\s)((?:==)((?:[^~]+))(?:==))/gm
|
|
|
|
|
2020-11-16 18:19:43 +08:00
|
|
|
const Highlight = Mark.create({
|
2020-10-28 04:21:20 +08:00
|
|
|
name: 'highlight',
|
|
|
|
|
2020-11-13 23:44:22 +08:00
|
|
|
defaultOptions: <HighlightOptions>{
|
|
|
|
HTMLAttributes: {},
|
|
|
|
},
|
|
|
|
|
2020-10-28 04:21:20 +08:00
|
|
|
addAttributes() {
|
|
|
|
return {
|
2020-10-03 03:39:16 +08:00
|
|
|
color: {
|
|
|
|
default: null,
|
2020-10-28 04:21:20 +08:00
|
|
|
parseHTML: element => {
|
2020-10-03 03:39:16 +08:00
|
|
|
return {
|
2020-11-06 20:42:40 +08:00
|
|
|
color: element.getAttribute('data-color') || element.style.backgroundColor,
|
2020-10-28 04:21:20 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
renderHTML: attributes => {
|
|
|
|
if (!attributes.color) {
|
|
|
|
return {}
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2020-10-28 05:14:40 +08:00
|
|
|
'data-color': attributes.color,
|
2020-10-28 04:21:20 +08:00
|
|
|
style: `background-color: ${attributes.color}`,
|
2020-10-03 03:39:16 +08:00
|
|
|
}
|
|
|
|
},
|
2020-10-02 21:28:00 +08:00
|
|
|
},
|
2020-10-28 04:21:20 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
parseHTML() {
|
|
|
|
return [
|
|
|
|
{
|
|
|
|
tag: 'mark',
|
|
|
|
},
|
|
|
|
]
|
|
|
|
},
|
|
|
|
|
2020-11-13 23:07:20 +08:00
|
|
|
renderHTML({ HTMLAttributes }) {
|
|
|
|
return ['mark', HTMLAttributes, 0]
|
2020-10-28 04:21:20 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
addCommands() {
|
|
|
|
return {
|
2020-11-18 04:59:04 +08:00
|
|
|
/**
|
|
|
|
* Set a highlight mark
|
|
|
|
*/
|
|
|
|
setHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
|
|
|
|
return commands.addMark('highlight', attributes)
|
|
|
|
},
|
2020-11-13 22:08:30 +08:00
|
|
|
/**
|
|
|
|
* Toggle a highlight mark
|
|
|
|
*/
|
2020-11-18 04:59:04 +08:00
|
|
|
toggleHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
|
2020-11-06 07:13:18 +08:00
|
|
|
return commands.toggleMark('highlight', attributes)
|
2020-10-28 04:21:20 +08:00
|
|
|
},
|
2020-11-18 04:59:04 +08:00
|
|
|
/**
|
|
|
|
* Set a highlight mark
|
|
|
|
*/
|
|
|
|
unsetHighlight: (): Command => ({ commands }) => {
|
|
|
|
return commands.removeMark('highlight')
|
|
|
|
},
|
2020-10-28 04:21:20 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
addKeyboardShortcuts() {
|
|
|
|
return {
|
2020-11-18 04:59:04 +08:00
|
|
|
'Mod-e': () => this.editor.commands.toggleHighlight(),
|
2020-10-28 04:21:20 +08:00
|
|
|
}
|
|
|
|
},
|
2020-10-28 05:14:40 +08:00
|
|
|
|
|
|
|
addInputRules() {
|
|
|
|
return [
|
|
|
|
markInputRule(inputRegex, this.type),
|
|
|
|
]
|
|
|
|
},
|
|
|
|
|
|
|
|
addPasteRules() {
|
|
|
|
return [
|
|
|
|
markPasteRule(inputRegex, this.type),
|
|
|
|
]
|
|
|
|
},
|
2020-10-28 04:21:20 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
export default Highlight
|
|
|
|
|
2020-11-16 23:58:30 +08:00
|
|
|
declare module '@tiptap/core' {
|
|
|
|
interface AllExtensions {
|
|
|
|
Highlight: typeof Highlight,
|
2020-10-28 04:21:20 +08:00
|
|
|
}
|
|
|
|
}
|