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