Does anyone have experience with TipTap custom Nodes?
I have the following problem... I can't get the update event and value when my custom node changes... I am displaying 2 different elements inside my node, an input and a span. When the value of the input (contentDOM) changes I want to update the span as well... But I can't seem to get it working....
export default Node.create({
name: "KatexNode",
content: "text*",
marks: "",
group: "block",
defining: true,
parseHTML() {
return [
{
tag: "katex-node",
},
];
},
addNodeView() {
return ({
editor,
node,
getPos,
HTMLAttributes,
decorations,
extension,
}) => {
// Create a container for the node view
const dom = document.createElement("div");
dom.classList.add("katex-node");
// Create a container for the content
const content = document.createElement("div");
content.classList.add("content");
const katexContent = document.createElement("span");
katexContent.classList.add("katexContent");
// Append all elements to the node view container
dom.append(content, katexContent);
return {
// Pass the node view container …
dom,
// … and the content container:
contentDOM: content,
update(node, decorations, innerDecorations) {
// How do I get the value here?
return true;
},
};
};
},
addCommands() {
return {
setKatexNode:
(attributes) =>
({ commands }) => {
return commands.setNode(this.name, attributes);
},
};
},
onUpdate(this) {
// Or how do I get the value here?
},
});export default Node.create({
name: "KatexNode",
content: "text*",
marks: "",
group: "block",
defining: true,
parseHTML() {
return [
{
tag: "katex-node",
},
];
},
addNodeView() {
return ({
editor,
node,
getPos,
HTMLAttributes,
decorations,
extension,
}) => {
// Create a container for the node view
const dom = document.createElement("div");
dom.classList.add("katex-node");
// Create a container for the content
const content = document.createElement("div");
content.classList.add("content");
const katexContent = document.createElement("span");
katexContent.classList.add("katexContent");
// Append all elements to the node view container
dom.append(content, katexContent);
return {
// Pass the node view container …
dom,
// … and the content container:
contentDOM: content,
update(node, decorations, innerDecorations) {
// How do I get the value here?
return true;
},
};
};
},
addCommands() {
return {
setKatexNode:
(attributes) =>
({ commands }) => {
return commands.setNode(this.name, attributes);
},
};
},
onUpdate(this) {
// Or how do I get the value here?
},
});
