TypeCellOS / BlockNote

A React Rich Text Editor that's block-based (Notion style) and extensible. Built on top of Prosemirror and Tiptap.

Home Page:https://www.blocknotejs.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

francesco-bosia opened this issue · 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

Any update on this?