`ReactNodeViewRenderer` crashes when nodes exist in initial document and renderHTML returns text

[rohmann]

Affected Packages

core, react

Version(s)

latest

Bug Description

When a custom atom node meets these conditions

• atom: true
• Uses ReactNodeViewRenderer for its node view
• Has a renderHTML that returns a string (text node, not an element)
• Exists in the initial document at parse time (via parseHTML rules or content)

ProseMirror crashes with this error

TypeError: dom.hasAttribute is not a function during EditorView construction.

Codesandbox Repro

It's not clear to me if this is a TipTap or a ProseMirror issue, but I was able to workaround it. The error fires when the component mounts, and when it unmounts.

• Mount - There's an empty object getting returned when the editor is unavailable, which happens here:

  tiptap/packages/react/src/ReactNodeViewRenderer.tsx

  Line 382 in 18f9afe

  return {} as unknown as ProseMirrorNodeView

• Unmount - When it unmounts, again there's no view for it to use:

  tiptap/packages/react/src/EditorContent.tsx

  Lines 168 to 170 in 18f9afe

  	editor.view.setProps({
  	nodeViews: {},
  	})

Looking at it from the ProseMirror side, maybe this is an issue with NodeViewDesc.create not handling the case where dom could be a text node.

Here's how I worked around the errors for now.

Before

addNodeView() {
  return ReactNodeViewRenderer(TemplateTagNodeView);
}

After

// Wrap `ReactNodeViewRenderer` to fix TypeError on mount
addNodeView() {
    const reactRenderer = ReactNodeViewRenderer(TemplateTagNodeView);
    return (props, ...rest) => {
      const spec = reactRenderer(props, ...rest);
      if (!spec.dom) {
        const placeholder = document.createElement('span');
        return { dom: placeholder };
      }
      return spec;
    };
  },

addProseMirrorPlugins() {
  return [
  // Keep a placeholder element to fix TypeError on unmount
    new Plugin({
      props: {
        nodeViews: {
          [this.name]: (node: ProseMirrorNode) => {
            const dom = document.createElement('span');
            dom.textContent = node.attrs.value;
            return { dom };
          },
        },
      },
    }),
  ];
},

Browser Used

Chrome

Code Example URL

https://codesandbox.io/p/sandbox/interesting-ully-826d7l?file=%2Fpackage.json%3A9%2C6-9%2C19

Expected Behavior

No type error should be thrown.

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[rohmann]

After looking into this further, I think it's a ProseMirror bug. ProseMirror/prosemirror#1566

[rohmann]

The way this got resolved on the ProseMirror side was to clarify the types and comments to align with this:

One of ProseMirror’s core principles is that the rendered representation of content contains all the information needed to parse it back into the original document. Rendering a mark as nothing, or a non-text node as plain text, would violate that principle, and simply not work (even inside the editor, changed content is often parsed after changes in order to figure out what changed).

I'm re-opening this because it could surface as a breaking change for TipTap users or plugin/extension maintainers depending on how people are using renderHTML.

Before

export type DOMOutputSpec = string | DOMNode HTMLElement | {dom: DOMNode, contentDOM?: HTMLElement} | readonly [string, ...any[]]

After

export type DOMOutputSpec = HTMLElement | {dom: HTMLElement, contentDOM?: HTMLElement} | readonly [string, ...any[]]

[bdbch]

@cyphercodes took over this issue in #7670