RangeError: Content hole not allowed in a leaf node spec

[techtitan1998]

I'm getting this error I have made custom nodes in the Tip Tap editor

import { mergeAttributes, Node } from '@tiptap/core';
import {
  NodeViewContent,
  NodeViewWrapper,
  ReactNodeViewRenderer,
} from '@tiptap/react';
const ViewWrapper = (props: any) => {
  return (
    <NodeViewWrapper>
      <NodeViewContent />
    </NodeViewWrapper>
  );
};
export default Node.create({
  name: 'agreement',
  group: 'block+',
  content: 'block*',

  parseHTML() {
    return [{ tag: 'wc-agreement' }];
  },
  renderHTML({ HTMLAttributes }) {
    return ['wc-agreement', mergeAttributes(HTMLAttributes)];
  },

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

can you please describe us what's the issue

[dillahCodes]

same error bro

[dillahCodes]

const ImageNode = Node.create({
name: "imageNode",
group: "block",
atom: true,
draggable: true,

// your code here...

});

add atom: true bro it's will fix error

[nperez0111]

A "content hole" is Prosmirror's way of describing how to inject content from a prosemirror managed element (i.e. a normal paragraph without a nodeview) to a nodeview managed element (like a custom paragraph component). The "hole" describes the renderHTML method wherein you'd usually have:

  renderHTML({ HTMLAttributes }) {
    return ['element', mergeAttributes(HTMLAttributes), 0];
  },

//////////////// VS

  renderHTML({ HTMLAttributes }) {
    return ['element', mergeAttributes(HTMLAttributes)];
  },

where the 0 describes where to place child content into (like if you made a custom header, allowing it to accept rich text as sub-content.

In this case, specifically, the renderHTML method is correct, but you are attempting to use a content hole by providing <NodeViewContent /> in the template, this is used only for giving prosemirror an element it can listen for changes on to enable rich-text editing on. Removing this would remove the error.