BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Shadcn and Tailwind error: "forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?"

Open francesco-bosia opened this issue 1 year ago • 0 comments

Describe the bug Instantiating the editor with Shadcn and Tailwindcss in NextJS produces the following error: Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?

To Reproduce

  • Set up NextJS with create-next-app
  • Create a client component
  • `const schema = BlockNoteSchema.create({ blockSpecs: { // Adds all default blocks. paragraph: defaultBlockSpecs.paragraph, bulletListItem: defaultBlockSpecs.bulletListItem }, });

function CustomEditor ({ config }: { config: EditorProps }) { // Creates a new editor instance. const editor = useCreateBlockNote({schema});

// For initialization; on mount, convert the initial HTML to blocks and replace the default editor's content
useEffect(() => {
    async function loadInitialHTML() {
        //const blocks = await editor.tryParseHTMLToBlocks(config.inputData);
        const blocks = await editor.tryParseHTMLToBlocks(config.inputData);
        editor.replaceBlocks(editor.document, blocks);
    }
    loadInitialHTML();
}, [editor]);

const onChange = async () => {
    // Converts the editor's contents from Block objects to HTML and store to state.
    const html = await editor.blocksToHTMLLossy(editor.document);
    //config.onChange(html)
    console.log(html)
  };

// Renders the editor instance using a React component.
return (
    <div className="editor-container style-for-editor border-2 border-gray-100 rounded-md px-4 py-3 max-w-full">
    <BlockNoteView editor={editor} onChange={onChange} />
    </div>
);

}`

  • Integrate multiple instances of the editor in another component const SectionBlock = dynamic(() => import("@/components/CustomEditor"), { ssr: false, }); ... <SectionBlock config={{ inputData: field.value, onChange: (data) => { field.onChange(data) }, }} />

Misc

  • Node version: 21.7.1
  • Package manager: npm
  • Browser: Edge 124.0.2478.80

francesco-bosia avatar May 17 '24 07:05 francesco-bosia