From ce6588890a57d72c2530eaf653aa2dc5a18225f7 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Wed, 13 May 2026 09:42:18 +0200 Subject: [PATCH 1/4] fix: set width attribute on image element in editor render MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When the editor is rendered with editable: false, the tag did not include a width attribute even though the block's previewWidth prop was set — the width was only applied as inline style on the wrapper. This prevented the browser from reserving space before the image loaded (CLS) and made the rendered DOM lossy for downstream consumers reading innerHTML. Apply previewWidth directly to the element in the editor render path, mirroring what imageToExternalHTML and the core Video block already do. CSS width: 100% on .bn-visual-media still controls layout so resize behavior is unaffected. Fixes #2726 --- packages/core/src/blocks/Image/block.ts | 3 +++ packages/react/src/blocks/Image/block.tsx | 1 + .../context/__snapshots__/ServerBlockNoteEditor.test.ts.snap | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/src/blocks/Image/block.ts b/packages/core/src/blocks/Image/block.ts index 9de973bb49..e3ba986c6e 100644 --- a/packages/core/src/blocks/Image/block.ts +++ b/packages/core/src/blocks/Image/block.ts @@ -122,6 +122,9 @@ export const imageRender = image.alt = block.props.name || ""; image.contentEditable = "false"; image.draggable = false; + if (block.props.previewWidth) { + image.width = block.props.previewWidth; + } imageWrapper.appendChild(image); return createResizableFileBlockWrapper( diff --git a/packages/react/src/blocks/Image/block.tsx b/packages/react/src/blocks/Image/block.tsx index be682b47c2..870a16ec5c 100644 --- a/packages/react/src/blocks/Image/block.tsx +++ b/packages/react/src/blocks/Image/block.tsx @@ -32,6 +32,7 @@ export const ImagePreview = ( : resolved.downloadUrl } alt={alt} + width={props.block.props.previewWidth} contentEditable={false} draggable={false} /> diff --git a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap index 777d7a773f..f088373cc6 100644 --- a/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap +++ b/packages/server-util/src/context/__snapshots__/ServerBlockNoteEditor.test.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"

Heading 2

Paragraph

list item

Example
Caption

Example

Caption
"`; +exports[`Test ServerBlockNoteEditor > converts to HTML (blocksToFullHTML) 1`] = `"

Heading 2

Paragraph

list item

Example
Caption

Example

Caption
"`; exports[`Test ServerBlockNoteEditor > converts to and from HTML (blocksToHTMLLossy) 1`] = `"

Heading 2

Paragraph

Example
Caption
Example

Caption

"`; From eb47a569e1e4e5969b493580de178ca1ca5080b9 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Wed, 13 May 2026 09:46:53 +0200 Subject: [PATCH 2/4] fix: also apply width attribute to video block Apply the same fix as the image block to video: - React VideoPreview now sets width on the