Skip to content

Custom image type is not able to convert to HTML. #282

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Closed
AburizalAN opened this issue Jul 25, 2023 · 1 comment
Closed

Custom image type is not able to convert to HTML. #282

AburizalAN opened this issue Jul 25, 2023 · 1 comment
Labels
bug Something isn't working prio:high High priority

Comments

@AburizalAN
Copy link

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
@AburizalAN AburizalAN added the bug Something isn't working label Jul 25, 2023
@matthewlipski
Copy link
Collaborator

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.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug Something isn't working prio:high High priority
Projects
None yet
Development

No branches or pull requests

2 participants