Custom image type is not able to convert to HTML.

[AburizalAN]

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

[matthewlipski]

This is a known issue - in the progress of fixing serialization of custom blocks. By default, it will serialize to whatever you return in render, with the possibility of adding a custom serialization function to your blocks.