How to get full HTML of a custom node created via Node View on editor.getHTML() call?

[bharadhwaj]

I have created a custom node and rendered it via NodeViewRenderer in React. But when calling the editor.getHTML(), only the value returned from the renderHTML() is returned. Can anyone help how to add the JSX from the custom react component we add to addNode to the getHTML() call.

Sample code:

Custom Sample Node Extension:

import { mergeAttributes, Node } from '@tiptap/core';
import { ReactNodeViewRenderer } from '@tiptap/react';

import SampleNodeComponent from './Sample';


export const SampleNode = Node.create({
  name: 'sampleNode',
  group: 'block',
  atom: true,

  parseHTML() {
    return [
      {
        tag: 'div',
        getAttrs(node) {
          if (typeof node === 'string') {
            return false;
          }

          if (node.id !== 'sample-node-id') {
            return false;
          }

          return null;
        },
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(HTMLAttributes, { id: 'sample-node-id' })];
  },

  addNodeView() {
    return ReactNodeViewRenderer(SampleNodeComponent);
  },
});

SampleNodeComponent.tsx:

import React from 'react';
import { NodeViewProps, NodeViewWrapper } from '@tiptap/react';

const SampleNodeComponent = (props: NodeViewProps) => {
  const { editor } = props;
  
  return (
    <NodeViewWrapper>
      <h1> Custom Node </h1>
     <div> This is the content of custom node </div>
     // some other custom JSX here
    </NodeViewWrapper>
  );
};

export default SampleNodeComponent;

Now when rendered and called editor.getHTML() it will return something as below which is the same syntax returned from renderHTML method.

<div class="ProseMirror">
  // custom node here
  <div id="sample-node-id"></div> // => Just the HTML returned from renderHTML but not from NodeView
  // other nodes which work fine
</div>

Any one know how to add the <h1> tag of the custom node to the getHTML()?

[bharadhwaj]

Screenshot of the same from console.

[marettialine]

I'm having the same problem, did you find a solution?

[bharadhwaj]

As a hack, I was able to make it work by directly fetching the HTML of the dom through editor.

editor.view.dom.innerHTML

But as mentioned above, it is a hack, any future improvements or changes done in getHTML() won't be reflected.

[Shreyansh-Sheth]

i am having the same issue, any solution

[xiangshu233]

Is there a solution? I have the same problem. I want to get HTML and then export it to Word through HTML rendering.