1
9
10import { Mark, mergeAttributes } from "@tiptap/core";
11
12export interface HighlightOptions {
13 readonly HTMLAttributes: Record<string, unknown>;
14}
15
16declare module "@tiptap/core" {
17 interface Config {
18 options: HighlightOptions;
19 }
20}
21
22export const HighlightMark = Mark.create<HighlightOptions>({
23 name: "factoryHighlight",
24 group: "mark",
25
26 addOptions() {
27 return {
28 HTMLAttributes: {
29 class: "factory-highlight",
30 },
31 };
32 },
33
34 addAttributes() {
35 return {
36 color: {
37 default: null,
38 parseHTML: (element) => element.getAttribute("data-highlight"),
39 renderHTML: (attributes) =>
40 attributes.color === null
41 ? {}
42 : { "data-highlight": attributes.color },
43 },
44 };
45 },
46
47 parseHTML() {
48 return [{ tag: "span.factory-highlight" }];
49 },
50
51 renderHTML({ HTMLAttributes }) {
52 return [
53 "span",
54 mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
55 0,
56 ];
57 },
58});
59