Skip to content

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

New issue

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

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

Already on GitHub? Sign in 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.

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

No branches or pull requests

2 participants