Add ImageWidget with upload/drop/external and inline/widget capabilities #5607

dobri1408 · 2024-01-09T13:02:09Z

No description provided.

netlify · 2024-01-09T13:02:15Z

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	`dfdabf2`
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/667670c8e9b3650008f3d25f

netlify · 2024-01-09T13:02:15Z

❌ Deploy Preview for volto failed.

Name	Link
🔨 Latest commit	`3c44490`
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/6628a245b1491900090e2c6c

dobri1408 · 2024-01-09T13:05:12Z

I have moved the #4142 here, because of the conflicts and the big changes since that pr.

dobri1408 · 2024-01-09T19:59:59Z

I have considered that is better to return always the URL of the image because it will be easier for developers to use if it is consistent. What do you think @sneridagh?

stevepiercy

Does documentation need to be updated to include the new configurable options?

Also I cannot tell whether the Storybook needs to be updated, but I assume it would.

packages/volto/news/5607.feature

Co-authored-by: Steve Piercy <web@stevepiercy.com>

stevepiercy

Looks good, pending review from a core developer and response to whether documentation is needed.

stevepiercy · 2024-02-05T10:14:27Z

I compared against production docs.

These look the same. Are they supposed to be the same? I'm not sure what I should expect or look for.

The controls appear broken in the Netlify build:

https://65c09ac45778640008535e9c--volto.netlify.app/storybook/?path=/story/edit-widgets-object-browser--image

against production:

https://6.docs.plone.org/storybook/?path=/story/edit-widgets-object-browser--image

Is the difference expected?

Both have a broken image. Should that be fixed?

Please let me know. Thank you!

dobri1408 · 2024-02-05T10:45:49Z

Hi @stevepiercy, @sneridagh added this for the storybook: https://65c09ac45778640008535e9c--volto.netlify.app/storybook/?path=/story/edit-widgets-image--default, in the old pr, that I have moved here. You can see that shows the Image Widget.

stevepiercy · 2024-02-05T11:06:34Z

@dobri1408 nice! Let's get a core contributor to review code.

* main: (46 commits) Removed word-break:break-word from contents table tbody (#5749) Fix Link to Item and Aliases view not updating content in multilingua… (#5821) Fix HMR problems, upgrade react-refresh and @pmmmwh/react-refresh-web… (#5833) Uses Plone 6.0.10.1 in tests (#5830) Improve wayfinding for various Volto audiences (#5809) Fix issue with HMR and register the same predicate-less component again (#5832) Reset global Form state onSubmit and onCancel in Add and Edit forms. (#5827) Show validation error message as string instead of list (#5808) Updated build-deps command to check if registry is newer than dist to force rebuild (#5825) Upgrade TSQ to latest, testing deployments (#5824) Release 18.0.0-alpha.16 Release @plone/slate 18.0.0-alpha.9 Release @plone/scripts 3.4.0 Release @plone/registry 1.5.1 Release generate-volto 9.0.0-alpha.8 Release @plone/components 2.0.0-alpha.4 Release @plone/client 1.0.0-alpha.13 Several dependencies updates to 18 (#5815) [components] Pass down the Popover context, if any, in Select (#5823) [Components] Improve build, get rid of lodash, renaming Views directory, deps cleaning, upgrade StoryBook and Vite (#5822) ...

sneridagh · 2024-03-05T08:10:10Z

@dobri1408 let's try to push this forward. I just merged, we need to fix the tests.
I would also be great that we could address what @tiberiuichim was proposing here as well #4286
(the link widget is too much, should happen in another phase, addressed by the other PLIP)

- Although title gives information on hover previous generation of the image widget didn't use title either or most of our widgets. In order to have some consistent behavior we use thus aria-label

dobri1408 · 2024-06-17T06:22:41Z

I have added back placeholderLinkInput = '', because there are tests that change the placeholder Link Input

- primary button adds a focus border which is not present on the other buttons breaking consistency.

- Removed brown override from toolbar-inner icons. This way when focused we can see opacity change, like it happens with other buttons - .slate-inline-toolbar.slate-toolbar .ui.basic.buttons have transparent box-shadow. We do this to avoid getting the outline focus on primary button outside of #main thus keeping things consistent.

- It makes it easier to use keyboard navigation and go to other buttons if using tab key plus you might want to clear what you had and enter another text

…eless div wrapper for link-form-container logic

ichim-david · 2024-06-21T07:35:07Z

@sneridagh I've removed the brown important color
ec7c2ea#diff-a584ff5e44089465e761b5e7077bbd875f0b92ed9307db7fea91df1240e76e78L404
from .toolbar-inner .ui.icon.button
In doing so the icons from the image widget have opacity changes when focused just like it happens
when using other object browser widget blocks such as map or video.
Have a look at this video and you will see what I mean

toolbar-inner-color.mp4

I also had to add this rule ec7c2ea#diff-cf128453bb126c12a2d763cd1afdbaf4d32ba380bd02702d0393f5ea4c666bb1R30
to avoid having a border looking box shadow when focusing on the primary submit button.
Without it since slate-inline-toolbar isn't part of main like our override there it looked like this

@plone/volto-team this is ready for final review

sneridagh

It does look amazing, however, I've found a couple of issues. See the video for reference.

The image placeholder inside a grid block it's too big.
The input link position is erratic, and depends on the block you selected or the position of the current block?

Could you please take a look?

Screen.Recording.2024-06-21.at.11.51.49.mov

- we don't want to fit to cover the placeholder svg - Added placeholder class to placeholder - use p tag instead of div for description bringing it in line with the teaser block

ichim-david · 2024-06-22T06:43:14Z

@sneridagh have another look now regarding the placeholder size when added within a grid and the
link popup.

I have one thing that bothers me which is the difference in placeholder svg when we have a grid
and we mix teasers and image blocks.
You can see this issue in this video:

grid-placeholder-position.mp4

If we remove center then things look better but if we only have teasers then they won't look as balanced
on the grid area as when the justify-content was set to center.
Given the fact that the grid was made primarily for teasers I leave it as it is however I had to add
at least a comment that it bothered me the non-alignment of teaser and image placeholder as changing
the current behavior would probably annoy other people thinking why the teasers are no longer centered :)

sneridagh · 2024-06-22T11:04:58Z

@ichim-david I see... difficult question :/ indeed removing it will look better overall. It's been long time that I wanted to change that (and remove the semanticUI class from there).

I like https://react-spectrum.adobe.com/react-spectrum/IllustratedMessage.html but I don't see that we are doing anything extraordinary like in there.

ichim-david

I could spend another week on this issue and still find things todo but it's one week I don't have at my disposal.
Accessibility, validation, performance improvements, there are all there waiting to be fixed or improved :).

Since a big portion of the code was ripping the image uploading from object browser to a widget the issues that were with it are mostly still here.

For instance you can drag a file or choose upload and select a file instead of an image and you just get a loading image spinner

The object browser navigation using the keybord only is impossible.

None of these issues are though the fault of this ticket and this work is a start from which we can improve in the future as such I accept this work from my part knowing that we will still have more work todo on polishing Volto.

sneridagh · 2024-06-22T16:39:10Z

@ichim-david I can't agree more. Let's merge this, since it was the original purpose of this PR.
@dobri1408 @ichim-david Thanks a lot for the contribution, this is awesome, and very much needed.
Merging now.

* main: (73 commits) Release 18.0.0-alpha.36 Rename missing command Image widget PR as breaking (#6125) Release @plone/slate 18.0.0-alpha.14 Release @plone/registry 1.7.0 Rename Makefile targets (#6104) fix: nonContentRoutes diff path (#6102) Automatically set the label to `03 type: feature (plip)` for PLIPs (#6122) Add ImageWidget with upload/drop/external and inline/widget capabilities (#5607) Ensure that sidebar field will not steal focus when metadata is edited (#5983) Prevent duplicated UUUIDs in inner blocks when copying container blocks (#6112) feat: handle breakList in detached TextBlockEditor (#6106) Make dynamic/live teaser without additional requests (#6024) Fix issue of duplicated blocks upon pasting an image into the Slate E… (#5818) Remove `api` folder. Add `backend` folder using latest backend best practices (#6110) Rename files with wrong extension `js->jsx` when they contain JSX. (#6114) Improve shadowing by including the support for `js->jsx` extensions in… (#6113) issue-5452 markdown shortcut (#5495) Release 18.0.0-alpha.35 Release @plone/types 1.0.0-alpha.16 ...

dobri1408 added 2 commits January 9, 2024 14:50

image widget

adddef2

locales

83019e4

change log

caca524

dobri1408 mentioned this pull request Jan 9, 2024

Add ImageWidget with upload/drop/external and inline/widget capabilities #4142

Closed

update sanpshot

f50a857

stevepiercy requested changes Jan 9, 2024

View reviewed changes

packages/volto/news/5607.feature Outdated Show resolved Hide resolved

Update packages/volto/news/5607.feature

256ab0d

Co-authored-by: Steve Piercy <web@stevepiercy.com>

stevepiercy approved these changes Jan 9, 2024

View reviewed changes

dobri1408 requested a review from davisagli January 10, 2024 11:09

Merge branch 'main' into enhanceimagewidget_newbranch

ccd205b

pbauer mentioned this pull request Jan 10, 2024

Provide a simple ImageUploadWidget that can be reused in addons #4286

Open

Merge branch 'main' into enhanceimagewidget_newbranch

10cf0cc

sneridagh added the 32 needs: review label Feb 2, 2024

dobri1408 added 4 commits February 5, 2024 08:54

fix conflict

77ee320

remove locales

4f65e9b

fix conflicts

0dbe68e

fix conflicts

b66a0cc

claudiaifrim and others added 2 commits February 22, 2024 21:45

Merge branch 'main' into enhanceimagewidget_newbranch

bb19246

claudiaifrim and others added 3 commits March 5, 2024 13:52

Merge branch 'main' into enhanceimagewidget_newbranch

46207ab

Merge branch 'main' into enhanceimagewidget_newbranch

f2d0924

Merge branch 'main' into enhanceimagewidget_newbranch

00790ef

ichim-david and others added 4 commits June 16, 2024 18:15

Use aria-label instead of title with information about buttons

a5937d9

- Although title gives information on hover previous generation of the image widget didn't use title either or most of our widgets. In order to have some consistent behavior we use thus aria-label

generate i18n

8873d1a

Update 5607.feature

df548c3

Make ImageWidget to have the ability to customize placeholderLinkInput

2422259

dobri1408 and others added 10 commits June 17, 2024 09:23

fix eslint

c4bc327

fix tests

d9e4426

Update pnpm-lock.yaml to master

177dbc6

Removed primary prop from Submit button

e7828ca

- primary button adds a focus border which is not present on the other buttons breaking consistency.

Merge branch 'main' into enhanceimagewidget_newbranch

2f276c5

Focus back on input after hitting clear button

002831e

- It makes it easier to use keyboard navigation and go to other buttons if using tab key plus you might want to clear what you had and enter another text

Merge branch 'main' into enhanceimagewidget_newbranch

ccf1e84

Moved inline styles to less files, use Icon for link icon, removed us…

46a995c

…eless div wrapper for link-form-container logic

Added history entry for volto-slate

5344a43

sneridagh requested changes Jun 21, 2024

View reviewed changes

dobri1408 and others added 3 commits June 21, 2024 12:59

Merge branch 'main' into enhanceimagewidget_newbranch

35f1992

Make useLinkEditor to rerender when to block suffers changes

fe81f30

avoid placeholder image distortion for image widget

dfdabf2

- we don't want to fit to cover the placeholder svg - Added placeholder class to placeholder - use p tag instead of div for description bringing it in line with the teaser block

ichim-david approved these changes Jun 22, 2024

View reviewed changes

sneridagh merged commit 13012ae into main Jun 22, 2024
70 checks passed

sneridagh deleted the enhanceimagewidget_newbranch branch June 22, 2024 16:39

JeffersonBledsoe mentioned this pull request Jun 25, 2024

Added the ability to use the image block URL field from the sidebar collective/volto-hydra#72

Merged

dobri1408 mentioned this pull request Jun 28, 2024

Backport image widget to Volto 17 #6136

Merged

ichim-david mentioned this pull request Jul 4, 2024

Fixes for Image widget #6151

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ImageWidget with upload/drop/external and inline/widget capabilities #5607

Add ImageWidget with upload/drop/external and inline/widget capabilities #5607

dobri1408 commented Jan 9, 2024

netlify bot commented Jan 9, 2024 •

edited

Loading

netlify bot commented Jan 9, 2024 •

edited

Loading

dobri1408 commented Jan 9, 2024

dobri1408 commented Jan 9, 2024

stevepiercy left a comment

stevepiercy left a comment

stevepiercy commented Feb 5, 2024

dobri1408 commented Feb 5, 2024

stevepiercy commented Feb 5, 2024

sneridagh commented Mar 5, 2024

dobri1408 commented Jun 17, 2024

ichim-david commented Jun 21, 2024

sneridagh left a comment •

edited

Loading

ichim-david commented Jun 22, 2024

sneridagh commented Jun 22, 2024 •

edited

Loading

ichim-david left a comment

sneridagh commented Jun 22, 2024

Add ImageWidget with upload/drop/external and inline/widget capabilities #5607

Add ImageWidget with upload/drop/external and inline/widget capabilities #5607

Conversation

dobri1408 commented Jan 9, 2024

netlify bot commented Jan 9, 2024 • edited Loading

✅ Deploy Preview for plone-components canceled.

netlify bot commented Jan 9, 2024 • edited Loading

❌ Deploy Preview for volto failed.

dobri1408 commented Jan 9, 2024

dobri1408 commented Jan 9, 2024

stevepiercy left a comment

Choose a reason for hiding this comment

stevepiercy left a comment

Choose a reason for hiding this comment

stevepiercy commented Feb 5, 2024

dobri1408 commented Feb 5, 2024

stevepiercy commented Feb 5, 2024

sneridagh commented Mar 5, 2024

dobri1408 commented Jun 17, 2024

ichim-david commented Jun 21, 2024

sneridagh left a comment • edited Loading

Choose a reason for hiding this comment

ichim-david commented Jun 22, 2024

sneridagh commented Jun 22, 2024 • edited Loading

ichim-david left a comment

Choose a reason for hiding this comment

sneridagh commented Jun 22, 2024

netlify bot commented Jan 9, 2024 •

edited

Loading

netlify bot commented Jan 9, 2024 •

edited

Loading

sneridagh left a comment •

edited

Loading

sneridagh commented Jun 22, 2024 •

edited

Loading