how to attach buttons to Lexical TextNodes

Question

i have a project that uses lexical where i want to attach a button to a specific part of the the text in my editor and onClick apply an edit to this text.

my current approach is to create a class that inherits from TextNode but has a different render method. then replace textnode with this custom node. But this seems very complicated and i was wondering if there was a smarter approach.

function MountButtonTextNode(editor : LexicalEditor, nodecontext : nodeContext, edit : Edit) {
  const { node, index } = nodecontext;
  
  
  editor.update(() => {
    
    const root = $getRoot();
    const allTextNodes = root.getAllTextNodes();
    const currentNode = findNode(node, allTextNodes) as TextNode;
    
    if (currentNode) {
  
      const [leftNode, restNode] = currentNode.splitText(index);
      const [midNode, rightNode] = restNode.splitText(edit.quote.length);
      const editableTextNode = new ButtonTextNode(edit);

      midNode.replace(editableTextNode);
    
      } else {
        console.error("the node wasn't found");
      }
    
  });
}

class ButtonTextNode extends TextNode {
  private edit: Edit;

  static getType(): string {
    return 'buttonTextNode';
  }

  static clone(node: ButtonTextNode): ButtonTextNode {
    return new ButtonTextNode(node.edit);
  }

  constructor(edit : Edit) {
    super(edit.quote);
    this.__text = edit.proposed_edit;
    this.edit = edit;
  }


  render() {
    return (
      <span>
        {this.edit.proposed_edit}
        <button onClick={this.applyEdit}>Click me</button>
      </span>
    );
  }

  applyEdit() {
    this.__text = this.edit.proposed_edit;
    console.log("edit applied");
  }
}

as mentioned i have tried to make an extension of a Textnode that has a different rendering method.