Errors when using blocksToFullHTML with Image block

[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 💖