feat: File previewWidth prop defaults to undefined

[matthewlipski]

This PR makes it so file blocks with a previewWidth prop have it default to undefined. This makes it so that when an image is inserted into the document, it retains its original resolution, or spans the editor width, whichever is lower.

Closes #1600

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	May 7, 2025 3:32pm
blocknote-website	✅ Ready (Inspect)	Visit Preview	May 7, 2025 3:32pm

[nperez0111]

When the width is undefined like this. What is the behaviour for very large, and very small images?

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1664

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1664

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1664

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1664

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1664

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1664

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1664

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1664

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1664

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1664

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1664

commit: 0c73d9f

[matthewlipski]

When the width is undefined like this. What is the behaviour for very large, and very small images?

Very large images are max. the width of the editor, set in CSS.

Very small images will just be very small resizing and stuff should still work, though we have a min-width when resizing of 64px, otherwise the resize handles don't have enough space. If an image is less than 64px wide, it will get resized to 64px immediately when dragging the resize handles. I think it's a pretty minor edge case that someone uploads an image or video <64px wide, as even things like icons are not usually smaller than that, so imo no need to add extra logic for this.