refactor(image-plugin-redesign): Improve Image Plugin UX

[shn-srl]

First step of Image Plugin redesign, ticket here: https://github.com/orgs/serlo/projects/45/views/8?pane=issue&itemId=65339955

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
frontend	✅ Ready (Inspect)	Visit Preview	Jun 27, 2024 10:53am

[github-actions[bot]]

📦 Next.js Bundle Analysis for @serlo/frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
global	104.31 KB (🟡 +49 B)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Seven Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
/___editor_preview	508.2 KB (🟡 +849 B)	612.51 KB
/entity/create/[type]/[taxonomyId]	509.15 KB (🟡 +837 B)	613.46 KB
/entity/repository/add-revision/[...id]	508.42 KB (🟡 +845 B)	612.73 KB
/page/create	508.43 KB (🟡 +846 B)	612.75 KB
/taxonomy/term/create/[parent_id]/[id]	508.2 KB (🟡 +832 B)	612.51 KB
/taxonomy/term/update/[id]	508.14 KB (🟡 +828 B)	612.45 KB
/user/settings	507.37 KB (🟡 +842 B)	611.68 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

[elbotho]

Preview Link

[hejtful]

A specific case, but: When adding an image answer to DropzoneImage plugin, and typing in a caption/alt-text, the toolbar can't fit in all the buttons. Might look better once the translation strings are there, but it will again look worse once the hint/help icon is visible. @GregorZupan @elbotho , how would you deal with this? A wider modal window? Or something more sophisticated?

[GregorZupan]

A specific case, but: When adding an image answer to DropzoneImage plugin, and typing in a caption/alt-text, the toolbar can't fit in all the buttons. Might look better once the translation strings are there, but it will again look worse once the hint/help icon is visible. @GregorZupan @elbotho , how would you deal with this? A wider modal window? Or something more sophisticated?

When adding a caption in the image, the toolbar should switch to the text toolbar (I made it a Subissue as well). Does this solve your issue? @hejtful

[hejtful]

@GregorZupan That will be quite hard to implement, but it would solve the issue with the modal. As a side note: Are you sure that all text formatting options should be enabled for image captions?

[GregorZupan]

@GregorZupan That will be quite hard to implement, but it would solve the issue with the modal. As a side note: Are you sure that all text formatting options should be enabled for image captions?

Ah, damn. For the Caption, i need to kick some options out.

• Headings and Lists will be kicked out
• Font Color: Kicked Out!
• Itallic is default (and button is not shown, so it can't be unselected)

I'll change it in my prototype!

[GregorZupan]

It should look like this :)

[shn-srl]

It should look like this :)

Let's please move further conversation to the issue :pray:

[GregorZupan]

Edited into the correct subissue