tiptap ReactNodeViewRenderer how to render the original view

Question

I'm using tiptap and trying to extend the Paragraph node to wrap some extra stuff around its view. I used <NodeViewWrapper> and <NodeViewContent> as the guides said.

const ParagraphWrapper = () => {
  return (
    <NodeViewWrapper>
      <NodeViewContent />
    </NodeViewWrapper>
  )
}

const ParagraphExt = Paragraph.extend({
  addNodeView() {
    return ReactNodeViewRenderer(ParagraphWrapper)
  }
})

export default function App() {
  const editor = useEditor({
    extensions: [
      Document,
      Text,
      ParagraphExt,  // <<<< text-align was not rendered
      // Paragraph,   // <<<< This worked
      TextAlign.configure({
        types: ["paragraph"]
      }),
    ],
    content: `<p style="text-align: center">This is a paragraph</p>`,
  })

  return (
    <>
      <EditorContent editor={editor} />
     <pre>{JSON.stringify(editor?.getJSON?.(), null, 2)}</pre>
    </>
  );
}

However, this seems to render the node from scratch. Thus, other extensions, such as textAlign no longer works.

I only need to wrap a thin layer around whatever was rendered originally. How do I do that?

Code Sandbox

Answer 1

You still get access to the attrs being passed to the node which is available in props. You can use that info to style your rendered content as you wish.

const ParagraphWrapper = (props) => {
  const textAlign = props.node.attrs.textAlign;
  return (
    <NodeViewWrapper>
      <NodeViewContent style={{textAlign}} />
    </NodeViewWrapper>
  );
};