Hi folks, i am using tiptap editor and trying to build the comment extension in that and everything is working fine but i am facing the issue in specific to overlap
Example: Proemirror is best tool so let’s say i select the “best” word and write the comment over it it work fine and create a span like this
<span data-comment="29e4b0ee-6565-4f45-9694-cf3c1b5599f6">best</span>
but as soon as i select text example “is best tool” the initial comment goes away and now i have only thing which is
<span data-comment="29edsgsd4f-6565-4f45-9694-cf3c1b5599f6">is best tool</span>
But ideally it should look like this
<span data-comment="29edsgsd4f-6565-4f45-9694-cf3c1b5599f6">is</span>
<span data-comment="29e4b0ee-6565-4f45-9694-cf3c1b5599f6 29edsgsd4f-6565-4f45-9694-cf3c1b5599f6">best</span>
<span data-comment="29edsgsd4f-6565-4f45-9694-cf3c1b5599f6">tool</span>
How should i achieve this can anyone help me out
I am attaching my extension
import { getMarkRange, Mark, mergeAttributes } from "@tiptap/react";
import { Plugin, TextSelection } from "prosemirror-state";
export const Comment = Mark.create({
name: "comment",
excludes: "",
addOptions() {
return {
HTMLAttributes: {},
};
},
addAttributes() {
return {
comment: {
default: null,
parseHTML: (el) => el.getAttribute("data-comment"),
renderHTML: (attrs) => ({ "data-comment": attrs.comment }),
},
};
},
parseHTML() {
return [
{
tag: "span[data-comment]",
getAttrs: (el) => !!el.getAttribute("data-comment")?.trim() && null,
},
];
},
renderHTML({ HTMLAttributes }) {
return [
"span",
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
0,
];
},
addCommands() {
return {
setComment:
(comment) =>
({ commands }) =>
commands.setMark("comment", { comment }),
toggleComment:
() =>
({ commands }) =>
commands.toggleMark("comment"),
unsetComment:
() =>
({ commands }) =>
commands.unsetMark("comment"),
};
},
addProseMirrorPlugins() {
return [
new Plugin({
props: {
handleClick(view, pos) {
const { schema, doc, tr } = view.state;
const range = getMarkRange(doc.resolve(pos), schema.marks.comment);
if (!range) return false;
const [$start, $end] = [
doc.resolve(range.from),
doc.resolve(range.to),
];
view.dispatch(tr.setSelection(new TextSelection($start, $end)));
return true;
},
},
}),
];
},
});