File size: 1,666 Bytes
561e6f0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | import { Mark, mergeAttributes } from "@tiptap/core";
export interface CommentOptions {
HTMLAttributes: Record<string, string>;
}
declare module "@tiptap/core" {
interface Commands<ReturnType> {
comment: {
setComment: (commentId: string) => ReturnType;
unsetComment: () => ReturnType;
};
}
}
export const Comment = Mark.create<CommentOptions>({
name: "comment",
addOptions() {
return {
HTMLAttributes: {},
};
},
addAttributes() {
return {
commentId: {
default: null,
parseHTML: (el) => el.getAttribute("data-comment-id"),
renderHTML: (attrs) => {
if (!attrs.commentId) return {};
return { "data-comment-id": attrs.commentId };
},
},
resolved: {
default: false,
parseHTML: (el) => el.getAttribute("data-resolved") === "true",
renderHTML: (attrs) => {
if (!attrs.resolved) return {};
return { "data-resolved": "true" };
},
},
};
},
parseHTML() {
return [{ tag: "span[data-comment-id]" }];
},
renderHTML({ HTMLAttributes }) {
return [
"span",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
class: `comment-mark ${HTMLAttributes["data-resolved"] === "true" ? "resolved" : ""}`,
}),
0,
];
},
addCommands() {
return {
setComment:
(commentId: string) =>
({ commands }) => {
return commands.setMark(this.name, { commentId });
},
unsetComment:
() =>
({ commands }) => {
return commands.unsetMark(this.name);
},
};
},
});
|