How to handle copy & paste when using a ReactNodeView with NodeViewContent

[thefinnomenon]

Hi, I've been struggling with this issue for a couple days so figured I would ask here.

I'm using a ReactNodeView with a NodeViewContent and I can't figure out how to handle preserving the NodeViewContent when the node is copy and pasted. I modify the renderHTML method in order to generate a email friendly HTML output so I'm thinking I need to add something to the parseHTML method in order to parse the contents of the node but can't figure out how to do it.

 <NodeViewWrapper>
    <Button>
        <NodeViewContent
          contentEditable={true}
          className="custom-button-input"
        />
   </Button>
</NodeViewWrapper>

renderHTML,

renderHTML({ node, HTMLAttributes }) {
    const title = node.textContent
    const html = `<a href="${HTMLAttributes.href}">${title}</a>`

    return ["div", { "data-type": this.name, html }]
},

The copied HTML,

<div data-type="customButton" html="<a>Button Title</a>"></div>

[thefinnomenon]

For anyone who ends up here, I ended up solving it with the following,

parseHTML() {
    return [
      {
        tag: 'div[data-type="callout"]',
        getContent: (node, schema) => {
          // Convert HTML into TipTap JSON
          const json = generateJSON(
            (node as HTMLElement).getAttribute("html") || "",
            extensions
          )

          // Create a Fragment from the JSON content
          const fragment = Fragment.fromJSON(schema, json.content)

          // Return this Fragment as the Node contents
          return fragment
        },
      },
    ]
  },