Is there a way to add a custom card node to lexical extending the element node

Question

I want to be able to add a card like a bootstrap card that can be written in with elements such as paragraphs etc.

I have the following state and config

const CONTENT = '{"root":{"children":[{"children":[

[{"children":[
[{"children":[],"type":"text","text": "text"}]
],"type":"heading", "number": 1,}]
],"type":"page","number": 1,}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';

const editorConfig = {
  editorState: EMPTY_CONTENT,
  theme: ExampleTheme,
  onError(error) {
    throw error;
  },
  nodes: [
    HeadingNode,
    CardNode
  ]
};

at the moment my card node looks like this, I cant seem to get it working and when I managed to get the card showing with just text init I couldn't edit the text.

export function $createCardNode(question) {
  return new CardNode(question);
}

export function $isCardNode(
  node,
){
  return node instanceof CardNode;
}

export class CardNode extends ElementNode {
 

  static getType() {
    return 'card';
  }

  static clone(node) {
    return new CardNode();
  }

  static importJSON(serializedNode) {
    const node = $createCardNode();
    return node;
  }

  constructor() {
  let key = 'test'
    super(key);
  }

  exportJSON() {
    return {
      type: 'card',
      version: 1,
    };
  }

 

  static importDOM() {
    return {
     //data
    };
  }

  exportDOM() {
    const element = document.createElement('div');
    element.classList.add('card');
    return {element};
  }

  createDOM() {
    const element = document.createElement('div');
    element.classList.add('card');
    return element;
  }

  updateDOM() {
    return false;
  }

  decorate() {
    return (
     <div class="card"> </div>
    );
  }
}