BlockNote
BlockNote copied to clipboard
TypeCellOS
Set HTML as initialContent
The documentation is not clear how to set HTML as initialContent. using this in an useEffect doesn't work for initial state:
const getInitialBlocks = async () => {
const blocks = await editor.HTMLToBlocks(
html
);
editor.replaceBlocks(editor.topLevelBlocks, blocks);
}
And the initialContent doesn't let me use an async await function to convert directly the html there.
The solution that i found best is to allow the initialContent prop to receive asynchronous functions. So i can do something like this:
const editor = useBlockNote({
initialContent: getInitialBlocks()
});
const getInitialBlocks = async () => {
const blocks = await editor.HTMLToBlocks(
html
);
return blocks
}
Yep good suggestion, will look into implementing this. Right now I think your best bet is to just call getInitialBlocks in the onEditorReady option (see https://www.blocknotejs.org/docs/editor). But ofc this isn't quite the same since the editor will still render before the initial content is created. You might also want the use the editor.isEditable getter/setter to make the editor read-only until the initial content is loaded.
The best way currently to do this is to have a setup similar to instantiate the editor yourself with empty "initialContent" and then replace the content with blocks converted from HTML
pseudocode:
const editor = useMemo(() => {
const editor = BlockNoteEditor.create();
editor.replaceBlocks(blocksfromHtml(initialHtml));
return editor
}, [initialContent]);
It's a bit of a workaround. We can make a more robust API that would make this nicer.
(consider adding a bounty for this if it's blocking you)
