I’m trying to create a custom mark in Tiptap v3 that highlights tags written like value inside inline text.
Here’s my current extension:
import { Mark, mergeAttributes, markInputRule } from "@tiptap/core";
export const TagMark = Mark.create({
name: "tag-mark",
addAttributes() {
return {
type: { default: null },
class: { default: "tag-mark" },
};
},
parseHTML() {
return [{ tag: 'span[data-type="tag-mark"]' }];
},
renderHTML({ HTMLAttributes }) {
return [
"span",
mergeAttributes(HTMLAttributes, {
"data-type": "tag-mark",
style: "color: green",
}),
0,
];
},
addInputRules() {
return [
markInputRule({
find: /\[\w+:[^\]]+\]/,
type: this.type,
getAttributes: (match) => {
return {
type: "text",
text: match[0],
};
},
}),
];
},
});
I've tried Adjusting the regex (/[(\w+:[^]]+)]/), but then sometimes both brackets disappear.
Returning match[0] vs match[1] inside getAttributes.
What i want
- (tag:value) should stay intact (including both brackets).
- It should work inline (e.g. "This is (tag:hello) inline").
- ** PRETEND THE BRACKETS ARE SQUARE