Skip to content

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

Closed
@kblt

Description

@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:

Screen.record.ClienWidth.issue.BlockNote.mp4

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 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions