Skip to content

Errors when using blocksToFullHTML with Image block #1049

@JacobGalati

Description

@JacobGalati

Describe the bug
When using editor.blocksToFullHTML you get errors when your blocks include an Image block.
The error is different depending on if you are using client side useCreateBlockNote or serverside ServerBlockNoteEditor.create()

Given the following editor blocks

[
  {
    id: "e6f5b974-86e8-4d80-ba65-2ccd2e620478",
    type: "image",
    props: {
      backgroundColor: "default",
      textAlignment: "left",
      name: "Realfoto-Logo-Blue-Main-Header.png",
      url: "https://realfoto.ca/app/uploads/2023/08/Realfoto-Logo-Blue-Main-Header.png",
      caption: "",
      showPreview: true,
      previewWidth: 512,
    },
    children: [],
  },
]

On the server side attempting to use blocksToFullHTML if the blocks contains an Image block causes the server to crash with the following error.

TypeError: Cannot read properties of undefined (reading 'view')
    at get domElement [as domElement] (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:7:59473)
    at Object.Et [as render] (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:22136)
    at toInternalHTML (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:10378)
    at Xe (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:3036)
    at i.serializeNodeInner (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:5776)
    at /project/workspace/node_modules/prosemirror-model/dist/index.cjs:2707:32
    at Fragment.forEach (/project/workspace/node_modules/prosemirror-model/dist/index.cjs:229:9)
    at DOMSerializer.serializeFragment (/project/workspace/node_modules/prosemirror-model/dist/index.cjs:2682:16)
    at Xe (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:3379)
    at i.serializeNodeInner (/project/workspace/node_modules/@blocknote/core/dist/blocknote.umd.cjs:5:5776)

On the client side the html rendered is

<div class="bn-block-group" data-node-type="blockGroup">
  <div
    class="bn-block-outer"
    data-node-type="blockOuter"
    data-id="1bdf0f1e-eea1-4bde-a151-c178ac583288"
  >
    <div
      class="bn-block"
      data-node-type="blockContainer"
      data-id="1bdf0f1e-eea1-4bde-a151-c178ac583288"
    >
      <div
        class="bn-block-content"
        data-content-type="image"
        data-name="Realfoto-Logo-Blue-Main-Header.png"
        data-url="https://realfoto.ca/app/uploads/2023/08/Realfoto-Logo-Blue-Main-Header.png"
        data-file-block=""
      >
        <div class="bn-file-block-content-wrapper">
          <div class="bn-file-and-caption-wrapper">
            <div class="bn-visual-media-wrapper">
              <img
                class="bn-visual-media"
                alt="Realfoto-Logo-Blue-Main-Header.png"
                contenteditable="false"
                draggable="false"
                width="512"
              />
            </div>
            <p class="bn-file-caption"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This doesn't appropriately apply the src to the img element and so you end up with a broken image.

To Reproduce
A client side example can be found here.
A server side example can be found here.

Misc

  • Node version: 18 & 20
  • Package manager: yarn and npm
  • Browser: Chrome
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions