Admin, add trix editor to product description editor (both new and edit) #11140

jibees · 2023-06-29T07:21:15Z

What? Why?

Also, I've factorized custom tab, in order to have common rules for both shopfront product modal and custom tab.

Closes Add Trix editor to Product Description Editor #11129

New

Editing

Product modal in shopfront

Custom tab edition

Custom tab in shopfront

What should we test?

We should test that htmlized product description is still well designed, so we need to test before and after content has been modified by shop manager.

Before staging the PR

Prepare some product description with all options (strong, italic, ...)
Observe the rendering on shop and on modal (when clicking on a product description)

After staging the PR

Check that the rendering for all product is still the same
Then, go to a production description edition, and modify.
Check that the rendering is still accurate

Test that the custom tab edition (in admin) is accurate to custom tab viewing (in shopfront)

Release notes

Changelog Category: User facing changes

mkllnk

Nice work! ✨

rioug · 2023-07-07T02:06:44Z

app/webpacker/controllers/trixeditor_controller.js

+    this.#trixInitialize();
+    window.addEventListener("trix-initialize", this.#trixInitialize);


Do we need both line here ? You would think the listener on trix-initialize would be enough ?

I thought so, and that's the normal way of doing it. Unfortunately, for some reasons, trix-initialize can be triggered before the stimulus controller is connected to the trixeditor. But, sometimes, that's the opposite. That's why I've added the two ways....

Tricky one, I can't think of any other solution 🤷‍♂️

drummer83 · 2023-08-03T13:39:53Z

Hi @jibees,
There is a conflict here. I will move this back to In Dev for a resolution.

mkllnk · 2023-08-03T22:51:41Z

I resolved the conflicts.

jibees · 2023-08-08T13:43:56Z

I resolved the (others ones) conflicts.

drummer83 · 2023-08-10T23:02:43Z

Hi @jibees,
I like the new editor. Looking great! 💪

Before staging

After staging

There are a few little things we should fix before merging.

First of all we should update the page /admin/products/new at the same time. Otherwise we might end up in a mess and it was requested in the issue: #11129 (comment).

In the shopfront:

If possible a link should open in a new tab.
The header should be bigger (in my opinion).
Ordered lists (1., 2., 3.) are not displayed in the shopfront.

In the editor:

When adding an unordered list, a horizontal line is displayed instead.

The good thing is: Previously formatted descriptions are still displayed nicely, just underlined is not supported anymore. 👍

I will move this back to In Dev to fix the last bits.

Thanks! 🙏

jibees · 2023-08-11T14:34:52Z

Thanks @drummer83
Made some changes, this needs some Code Review one again. Sorry!

rioug

👍

mkllnk

I like the use of the shared CSS. Thanks.

drummer83 · 2023-08-18T18:52:47Z

Hi @jibees,
Sorry we have a conflict here (again).
I will to In Dev to resolve it.
Thanks!

trix doesn't allow the use of `<p>` as block separator since it can not contain `<figure>`: use `<div>` and _emulate_ as `<p>` with margin bottom

Use the TrixSanitizer | TrixScrubber

Will be used elsewhere (in shopfront in particular)

jibees · 2023-09-04T13:47:48Z

Hi @jibees, Sorry we have a conflict here (again). I will to In Dev to resolve it. Thanks!

@drummer83
👋
Back into Test Ready !

drummer83 · 2023-09-04T18:21:41Z

Thanks, @jibees!

Here we go again.

Shopfront ✔️

Before:

After:

Product modal ✔️

Before:

After:

Edit product ✔️

Before:

After:

Create new product ✔️

Before:

After:

Newly created product ✔️

After:

Custom tab ✔️

Before:

After:
The header is much smaller now.

Lists ❓

Before:
Same as after.

After:
Unordered and ordered lists have different margins (out of scope here, not a regression).

Conclusion

Great! This seems to work very well now! 🎉
Two minor things which I will add to the wishlist because they are no bugs and no regressions:

Increase the size of the header. ➡️ wishlist #467
Make styles (margins) of ordered and unordered lists the same. ➡️ [Trix] Unordered and ordered lists are not designed uniformly (different margin) #11491

Those things are out of scope here and this is ready to merge! 🚀
Thanks again!

jibees self-assigned this Jun 29, 2023

jibees marked this pull request as ready for review June 29, 2023 07:48

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch from dd80f3e to c04f29a Compare June 29, 2023 07:49

mkllnk approved these changes Jun 30, 2023

View reviewed changes

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch from c04f29a to e413a16 Compare July 6, 2023 14:42

jibees requested a review from mkllnk July 6, 2023 20:24

rioug reviewed Jul 7, 2023

View reviewed changes

rioug approved these changes Jul 10, 2023

View reviewed changes

drummer83 self-assigned this Aug 3, 2023

drummer83 added the no-staging-AU A tag which does not trigger deployments, indicating a server is being used label Aug 3, 2023

drummer83 removed the no-staging-AU A tag which does not trigger deployments, indicating a server is being used label Aug 3, 2023

drummer83 removed their assignment Aug 3, 2023

mkllnk force-pushed the 11129-add-trix-editor-to-product-description-editor branch from f3e49af to e05633a Compare August 3, 2023 22:51

mkllnk approved these changes Aug 3, 2023

View reviewed changes

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch 2 times, most recently from 4fce3ff to b970339 Compare August 8, 2023 13:22

drummer83 self-assigned this Aug 10, 2023

drummer83 added the pr-staged-au staging.openfoodnetwork.org.au label Aug 10, 2023

drummer83 removed the pr-staged-au staging.openfoodnetwork.org.au label Aug 10, 2023

drummer83 removed their assignment Aug 10, 2023

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch from b970339 to c4d0742 Compare August 11, 2023 08:47

jibees changed the title ~~Admin, add trix editor to product description editor~~ Admin, add trix editor to product description editor (both new and edit) Aug 11, 2023

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch from 991adca to 2ff2a5a Compare August 11, 2023 14:35

jibees requested review from mkllnk and rioug August 11, 2023 14:42

rioug approved these changes Aug 13, 2023

View reviewed changes

mkllnk approved these changes Aug 13, 2023

View reviewed changes

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch 3 times, most recently from 2400d9c to 0884887 Compare September 4, 2023 13:32

jibees added 11 commits September 4, 2023 15:46

Replace angular editor by trix editor

e200ecc

Update trixEditor rendering <a /> element: should be green

b6e0470

We used to use <p> to seperate block between them. now use <div>

f9bc00e

trix doesn't allow the use of `<p>` as block separator since it can not contain `<figure>`: use `<div>` and _emulate_ as `<p>` with margin bottom

Sanitize content when display it on shop

4c27e79

Use the TrixSanitizer | TrixScrubber

Add horizontal rule to trix editor

a8a3531

Actually, this should not be sanitize before going through trix editor

3225c52

Actually, used in the shopfront context, links are orange

ca6d12e

Special case for unordered list in trix editor: should be overwritten

c402093

Create a mixin that include list of styles for trix editor + content

34dab40

Will be used elsewhere (in shopfront in particular)

Include trix-styles mixin in where content from trix is displayed

1d5d1c5

Add trix editor to new product form

b6b64e9

jibees force-pushed the 11129-add-trix-editor-to-product-description-editor branch from 0884887 to b6b64e9 Compare September 4, 2023 13:46

drummer83 self-assigned this Sep 4, 2023

drummer83 merged commit 406577e into openfoodfoundation:master Sep 4, 2023
56 checks passed

drummer83 mentioned this pull request Sep 4, 2023

[Trix] Unordered and ordered lists are not designed uniformly (different margin) #11491

Closed

sigmundpetersen removed the pr-staged-au staging.openfoodnetwork.org.au label Sep 6, 2023

cillian mentioned this pull request Aug 2, 2024

Replace text angular editor with trix editor in About Us and Shopfront message fields #12734

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Admin, add trix editor to product description editor (both new and edit) #11140

Admin, add trix editor to product description editor (both new and edit) #11140

jibees commented Jun 29, 2023 •

edited

Loading

mkllnk left a comment

rioug Jul 7, 2023 •

edited

Loading

jibees Jul 7, 2023

rioug Jul 10, 2023

drummer83 commented Aug 3, 2023

mkllnk commented Aug 3, 2023

jibees commented Aug 8, 2023

drummer83 commented Aug 10, 2023 •

edited

Loading

jibees commented Aug 11, 2023

rioug left a comment

mkllnk left a comment

drummer83 commented Aug 18, 2023

jibees commented Sep 4, 2023

drummer83 commented Sep 4, 2023 •

edited

Loading

		this.#trixInitialize();
		window.addEventListener("trix-initialize", this.#trixInitialize);

Admin, add trix editor to product description editor (both new and edit) #11140

Admin, add trix editor to product description editor (both new and edit) #11140

Conversation

jibees commented Jun 29, 2023 • edited Loading

What? Why?

New

Editing

Product modal in shopfront

Custom tab edition

Custom tab in shopfront

What should we test?

Before staging the PR

After staging the PR

Test that the custom tab edition (in admin) is accurate to custom tab viewing (in shopfront)

Release notes

mkllnk left a comment

Choose a reason for hiding this comment

rioug Jul 7, 2023 • edited Loading

Choose a reason for hiding this comment

jibees Jul 7, 2023

Choose a reason for hiding this comment

rioug Jul 10, 2023

Choose a reason for hiding this comment

drummer83 commented Aug 3, 2023

mkllnk commented Aug 3, 2023

jibees commented Aug 8, 2023

drummer83 commented Aug 10, 2023 • edited Loading

Before staging

After staging

jibees commented Aug 11, 2023

rioug left a comment

Choose a reason for hiding this comment

mkllnk left a comment

Choose a reason for hiding this comment

drummer83 commented Aug 18, 2023

jibees commented Sep 4, 2023

drummer83 commented Sep 4, 2023 • edited Loading

Shopfront ✔️

Product modal ✔️

Edit product ✔️

Create new product ✔️

Newly created product ✔️

Custom tab ✔️

Lists ❓

Conclusion

jibees commented Jun 29, 2023 •

edited

Loading

rioug Jul 7, 2023 •

edited

Loading

drummer83 commented Aug 10, 2023 •

edited

Loading

drummer83 commented Sep 4, 2023 •

edited

Loading