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 💖

[stefan-krajnik]

@matthewlipski I'm experiencing the same issue

[matthewlipski]

Thanks for reporting this, what a weird bug - especially since blocksToHTMLLossy doesn't seem to have this issue despite using the same base code.

[YousefED]

This is because editor.domElement is undefined when using the server function, but we use it to calculate some widths. We should rethink how we can best solve this (and add tests)