Closed
Description
Describe the bug
trying to add a Custom Image Type to a block, and then convert it to html using blocksToHTML()
, instead of returning the html string, it returns the div tag.
To Reproduce
Code Example:
"use client";
import { DefaultBlockSchema, defaultBlockSchema } from "@blocknote/core";
import {
BlockNoteView,
createReactBlockSpec,
useBlockNote,
InlineContent,
ReactSlashMenuItem,
defaultReactSlashMenuItems,
} from "@blocknote/react";
import { RiImage2Fill } from "react-icons/ri";
import * as React from "react";
const BlockNote = () => {
const ImageBlock = createReactBlockSpec({
type: "image",
propSchema: {
src: {
default: "https://via.placeholder.com/1000",
},
},
containsInlineContent: true,
render: ({ block }) => (
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<img src={block.props.src} alt={"Image"} contentEditable={false} />
<InlineContent />
</div>
),
});
const insertImage = new ReactSlashMenuItem<
DefaultBlockSchema & { image: typeof ImageBlock }
>(
"Insert Image",
(editor) => {
const src: string | null = prompt("Enter image URL");
editor.insertBlocks(
[
{
type: "image",
props: {
src: src || "https://via.placeholder.com/1000",
},
},
],
editor.getTextCursorPosition().block,
"after"
);
},
["image", "img", "picture", "media"],
"Media",
<RiImage2Fill />,
"Insert an image"
);
const editor = useBlockNote({
onEditorContentChange: (editor) => {
const saveBlocksAsHTML = async () => {
const html: string = await editor.blocksToHTML(editor.topLevelBlocks);
console.log("html", html);
};
saveBlocksAsHTML();
},
blockSchema: {
...defaultBlockSchema,
image: ImageBlock,
},
slashCommands: [...defaultReactSlashMenuItems, insertImage],
});
return (
<div className="blocknote-editor">
<BlockNoteView editor={editor} />
</div>
);
};
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<BlockNote />
</main>
);
}
block result:
[
{
"id": "563ed9a5-b127-4926-9078-1b3789a1918b",
"type": "image",
"props": {
"src": "https://images.unsplash.com/photo-1682685797498-3bad2c6e161a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
},
"content": [],
"children": []
}
]
HTML result:
<div></div>
Misc
- Node version: 18.16.0
- Framework: Next.js 13
- @blocknote/core version: 0.8.2
- @blocknote/react version: 0.8.2