Image dissappearing (width=0) from image block if BlockNote is not visible (not in viewport)

[kblt]

Describe the bug <what's going wrong!?> I have embedded BlockNotes in the cards on the big whiteboard. Sometimes cards can be outside the viewport. While refreshing images are not showing up. Some investigations showed it's because all images which are outside the viewport have width=0.

If go to docs: @blocknote/reacr/src/blocks/ImageBlockContent.tsx

const [width, setWidth] = useState<number>(
    Math.min(
      props.block.props.previewWidth!,
      props.editor.domElement.firstElementChild!.clientWidth
    )
  );

So if we check props.editor.domElement.firstElementChild - it will be div with className = "bn-block-group" and while refreshing the whole and card is outside viewport - this element will be returning clientWidth = 0. If card (embedded blocknote) is visible the clientWidth will be > 0. If check size of BlockNote component it's fine - width > 0.

It was possible to fix by manual change size of the image block to set attribute width of image. p.s. please don't be mad on my code - i hope it's ok

editor.document.forEach((block, _) => {
      if (block.type === "image" && block.props.showPreview == true) {
        const outerBlocks = editor?.domElement?.getElementsByClassName("bn-block-outer")
        if (outerBlocks != null) {
            const innerBlock = Array.from(outerBlocks).find((item) => item.getAttribute("data-id") === block.id);
            if (innerBlock != null) {
                const imageBlocks = innerBlock.getElementsByClassName("bn-visual-media");
                Array.from(imageBlocks).forEach((imageBlock) => {
                    if (imageBlock.getAttribute("width") === "0") {
                        imageBlock.setAttribute("width", block.props.previewWidth.toString());
                    }
                });                            
            }
        }
      }
  })

Please let me know if there are any ways to avoid manual change parameters in DOM - maybe override ImageBlockContent or pass some other parameter to blocknote to remove clientWidth checking. Or maybe other ways to fix it. Thanks

here is some example how it works:

https://github.com/user-attachments/assets/6b52aed9-eca3-4d6d-9afd-8ec9547716fb

To Reproduce <clear steps to reproduce are super helpful! Best is to provide an online sandbox, click to create one>

We are using TLDraw with cards with BlockNote component inside card.

Tried to make 2 blocknotes with one outside the screen, but seems working ok in this case.

Misc

• Node version: node: '22.5.1',

• Package manager: npm: '10.7.0',

• Browser: Chrome Version 128.0.6613.85 (Official Build) (64-bit)

• [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[matthewlipski]

Thanks for reporting this! We didn't consider the edge case before, but I think we might be able to fix this by using getBoundingClientRect().width instead of clientWidth. For now, keep using the workaround if it's working for you, and in the meantime I'll look into fixing this👍

[kblt]

Thanks for reporting this! We didn't consider the edge case before, but I think we might be able to fix this by using getBoundingClientRect().width instead of clientWidth. For now, keep using the workaround if it's working for you, and in the meantime I'll look into fixing this👍

Thanks a lot for your fast answer and for your work! Looking forward for future updates. 💪

Thanks for your suggestion. I also checked getBoundingClientRect().width and it's also returning zeros while blocknote is outside the viewport. console.log(editor?.domElement?.firstElementChild?.getBoundingClientRect()); is returning DOMRect {x: 0, y: 0, width: 0, height: 0, top: 0,width: 0,x: 0, y: 0} in our case. If blocknote is visible - all values are fine.

Maybe it's possible to work around value "0", but i'm not sure about other edge cases.

[matthewlipski]

Ah damn, that's a shame - it might be annoying to come up with a robust fix for this in that case