Theo's Typesafe Cult•2y ago

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?
  },
});

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Does anyone have experience with TipTap custom Nodes?