Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: File resize UX #1223

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: File resize UX #1223

wants to merge 1 commit into from

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!

@@ -57,6 +57,17 @@ export const imageRender = (
block: BlockFromConfig<typeof imageBlockConfig, any, any>,
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?

@@ -372,20 +373,19 @@ NESTED BLOCKS
height: 24px;
}

[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?

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