Open
Description
I am building a CMS with BlockNote, need a way to render blocknote document,
Did some research, but did not found a reliable way to generateHtml from blocknote document.
Where I ended up using BlockNote component to display the content for now, below.
"use client";
import {
BlockNoteViewProps,
useCreateBlockNote,
BlockNoteViewRaw,
} from "@blocknote/react";
export function RichText({
children,
value,
...props
}: React.PropsWithChildren<
Omit<BlockNoteViewProps<any, any, any>, "editable" | "editor"> & {
value: any;
}
>) {
const editor = useCreateBlockNote({
initialContent: value,
defaultStyles: false,
});
return (
<BlockNoteViewRaw
data-theming-ui-css-variables
editor={editor}
editable={false}
{...props}
/>
);
}
Even with the editable=false
, seems like the block note is trying to draw some toolbars & stuff. raising below
TypeError: Cannot read properties of undefined (reading 'FormattingToolbar')
This happens when I drag the text content, but wierdly only occurs from second entry (second text selection)
Using the mantine works, but is this supposed to be like this? (looking for a headless & lightest way possible to render blocknote contents, without styles)
"use client";
import {
BlockNoteViewProps,
useCreateBlockNote,
BlockNoteViewRaw,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
export function RichText({
children,
value,
...props
}: React.PropsWithChildren<
Omit<BlockNoteViewProps<any, any, any>, "editable" | "editor"> & {
value: any;
}
>) {
const editor = useCreateBlockNote({
initialContent: value,
defaultStyles: false,
});
return (
<BlockNoteView
data-theming-ui-css-variables
editor={editor}
editable={false}
{...props}
/>
);
}