Skip to content

Conversation

matthewlipski
Copy link
Collaborator

@matthewlipski matthewlipski commented Nov 7, 2024

This PR fixes 2 bugs regarding file resize UX:

  1. File blocks with captions have incorrect width when caption is longer than the editor is wide (see Default Schema Showcase demo with a narrow browser window).
  2. Resizing file blocks with captions only resizes the caption once the mouse button is released, yet the file preview is resized while moving the mouse.
  3. Blocks which have an initial width wider than the editor don't get resized on the first attempt.

TODO:
Currently unit tests fail as something is going wrong when calling updateBlock on the initial render. getBlockFromPos is throwing an error as getPos() returns 0.

An alternative approach I got working was to check whether the default previewWidth is higher than the editor width when a file is initially added. However, that approach doesn't fix the case where the editor initial contents have a file that is too wide. So I think checking the width on update is the only solution that covers all cases.

Copy link

vercel bot commented Nov 7, 2024

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

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Nov 7, 2024 1:11pm
blocknote-website ✅ Ready (Inspect) Visit Preview Nov 7, 2024 1:11pm

Copy link
Collaborator

@YousefED YousefED left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit concerned about this approach, see comment!

editor: BlockNoteEditor<any, any, any>
) => {
// Immediately updates & re-renders the block if it's wider than the editor.
if (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My first feeling is I don't really like this approach:

  • what if a user opens the document on a small screen, and later on a large screen?
  • what if the user is in read-only mode?

}

[data-file-block] .bn-visual-media-wrapper {
[data-file-block] .bn-resize-handles-wrapper {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make sure DO etc isn't using the old classnames. I suppose you didn't like the earlier name / just a cleanup right?

@matthewlipski
Copy link
Collaborator Author

Closing in favor of #1305

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants