`pat-contentbrowser` implementation

petschki commented 8 months ago

This is the pat-relateditems replacement using a miller column content browser.

Feature completeness:

[x] Multiple pat-contenbrowser occurrences on a single page
[x] TinyMCE LinkModal implementation
[x] filtering current level list
[x] maximumSelectionSize
[x] pat-upload to current level
[x] selectable levels
[x] batchable levels
[x] drag&drop sortable items
[x] selectableTypes
[x] translations
[x] multiple items select in column browser
[x] keyboard navigation
[x] TESTS
[ ] favorites menu
[ ] recently used menu
[ ] use @plone/registry to allow overriding components

Test dependencies:

https://github.com/plone/plone.app.z3cform/pull/197
https://github.com/plone/plone.app.relationfield/pull/51
then run yarn start:webpack
then use http://localhost:8000/bundle.min.js as plone bundle in registry controlpanel

Regarding search mode: we decided to not implement this here. The pat-select2 pattern is better for this usecase. UPDATE: Since this should be a feature complete replacement for pat-relateditems, the search mode is available too.

Sneak Preview (updated 2024-05-16)

thet commented 8 months ago

looking at the video, great! how can this be tested? are there branches in plone repos using contentbrowser instead of relateditems? or should we maybe provide an alias "relateditems" for "contentbrowser"? i think this also needs some integration in docs.

petschki commented 8 months ago

This can be tested by using the mentioned branches of p.a.z3cform and p.a.relationfield and the webpack devel resources in the resource registry. The relationfield uses the contentbrowser widget already.

Updating all the core packages which use RelatedItemsFieldWidget isn't that hard but there are several addons which have to be updated too ... I'm not sure if its a problem when we "alias" RelatedItemsFieldWidget to ContentBrowserFieldWidget under the hood. Maybe that does work for the addons. I can give this a test ...

One more benefit from removing pat-relateditems is that we can get rid of the patched select2 3.5.x version.

thet commented 8 months ago

Cool! Sorry I didn't read the ticket description carefully enough.

petschki commented 8 months ago

@MrTango @thet I tried to figure out the jest setup for svelte apps using this link https://www.roboleary.net/2021/11/18/svelte-app-testing-jest.html ... now I get the following message:

Jest is being called in CJS mode. You must use ESM mode in Svelte 4+

Maybe someone of you can give me a hint how to setup the testing environment?

thet commented 7 months ago

@MrTango @petschki About sorting the selected items: What do you think about using pat-sortable from Patternslib? pat-sortable would need to be extended to make use of MutationObservers first. Currently the reinitialization only happens when a pat-update event is thrown with a added payload, which couples that pattern too tightly to internals of Patternslib, this is why I‌ think a MutationObserver should be used instead.

Ref: https://github.com/Patternslib/Patterns/issues/1197

petschki commented 7 months ago

@thet Thanks for your review!

About sorting: this only gets initialized on loading the first time and doesn't work during "first time" item selection indeed. (https://github.com/plone/mockup/pull/1377/files#diff-4b241e899bfbe65a8c35ffadf58f567fea3d4df013c56306db87d1517e10798dR83) this is a small change and I will fix it asap. I'm not sure if we should use pat-sortable for this usecase.

Features:

Multiselection is definitely on my list to implement.
keyboard navigation too
and restapi: yes, but this needs some more thoughts about "inplace" replacement of pat-relateditems and its options. We often use relateditems pattern as mode="search" with some additional index like portal_type=["Image", "File"] ... IMHO this should work here too ... and it's not clear to me which endpoint we should use here.

MrTango commented 7 months ago

regarding keyboard navigation, yes definitely, i think i had some key's already implemented like ESC to close the browser, but i had to disabled some stuff, when i did update to Svelte 4. Not sure if is enabled already. That was a plugin. But yeah, i want all the keyboard navigation we have in relateditems widget now and more.

regarding RestApi, here from today's classic UI meeting:

should we use plone.restapi for the JSON endpoints?
- talking with @mrTango, @jensens, @petschki we should do not because it should be possible to use Plone classic UI without restapi (jens mentioned circular dependency problems.)
- the vocabulary end point in Plone core has all features we need.

MrTango commented 7 months ago

and also multiselection is already on the list, even if we didn't had it before in relateditems.

MrTango commented 7 months ago

btw the sorting code, we have right now is for sorting the selected items, not for sorting the items in the browser ;) But sorting in a column would be nice to have. Regarding global search in content browser?

we decided to not do it, one can use ajax select widget to have this, no need to also have it here

petschki commented 7 months ago

I do not think the levels should be sortable. thats too much magic for this package.

The problem was, that initially when there are no selectedItems and you added some, they weren't sortable immediately in the field ... I've fixed that here https://github.com/plone/mockup/pull/1377/commits/c2648431302ab5b4a18499fd9388ec5ded047ea7

+1 for using a different pattern for search mode. AjaxSelectFieldWidget would fit best for this.

petschki commented 6 months ago

Made some progress here:

levels are loaded now as batch
translations
multiselection with shift and cmd/ctrl key

see the updated videos above.

@MrTango I could need some help with the keyboard navigation, maybe you have some pointers for me how to manage this in svelte.

MrTango commented 6 months ago

cool, great work. Have a look at https://github.com/metonym/svelte-keydown. It's currently disabled i think, because i had problems when updating to Svelte 4. But the repository was updated 2 months ago, so just try to enable it again. There should be some comment out examples for closing the content browser with ESC and maybe others. But navigating was not fished yet, i think.

MrTango commented 6 months ago

here an example how the closing of the browser done

<!-- <Keydown paused={!$showContentBrowser} on:Escape={cancelSelection} /> -->

thet commented 6 months ago

I fixed the tests in https://github.com/plone/mockup/pull/1383 the css.escape polyfill was needed for jsdom as this is used by tinymce.

yurj commented 5 months ago

Hi! can I ask if this browser can select the Plone Site object? The Plone Site is a content type and should be selectable by the internal browser.

petschki commented 5 months ago

Hi! can I ask if this browser can select the Plone Site object? The Plone Site is a content type and should be selectable by the internal browser.

Thanks for the tip. The Portal Content is now selectable (as long its not disabled via selectableTypes). I also polished the path label and removed the physical portal path from it.

petschki commented 2 months ago

We have new robottests and fixed the existing ones for the contentbrowser implementation. This tests the implementation in tinymce and relationfield for relatedItems. See https://github.com/plone/Products.CMFPlone/pull/4008 ... thanks to @1letter !

thet commented 2 months ago

@petschki If you think this is ready, just go ahead and merge :)

petschki commented 2 months ago

OK ... I'll merge the current state and release another alpha of that.

Next week I'll work on :

favorites menu
recently used menu

and eventually :

use @plone/registry to allow overriding components

plone / mockup