Use Trix editor as WYSIWYG

RachL commented 3 years ago

What is the need / problem?

Our WYSIWYG does not allow to insert HTML code for the moment:

Which type of users does this problem affect (and how many, if known)?

- Shoppers - Hub Managers (MCFEs) - Producers - Instance Managers

Hubs or producers with no websites have few options to customize their home and about tab. If a hub or a producer would like to copy paste an iframe for let’s say a video or a widget to subscribe to their newsletter they can’t. Yes they might f*** up completely their home page, but they can also ask support to design it nicely for them. I can’t name drop hubs here but we have some pretty awful home pages with the current customizations available.

Potential solutions that will solve the problem ?[[brainstorming to list feature candidates]

One WYSIWYG editor that I love: https://summernote.org/

But we don’t need to go that far, just being able to insert html would be nice I think.

Connected wishlist and discovery discussions* [list precedent discussions]

https://community.openfoodnetwork.org/t/be-able-to-add-html-to-an-enterprise-about-page-or-home-tab/2096

Additional context

Is Papercut or feature candidate?

Potential papercut

jaycmb commented 3 years ago

I think depends on if only enable to (1) insert html or also (2) preview and/or (3) to convert other formats into code, like "code view" option https://summernote.org/.

(1) could be papercut, the rest I d say requires more

Matt-Yorkley commented 3 years ago

A couple of tech notes:

Rails 6 now has a new built-in rich text editing feature called ActionText. We haven't tried using it yet, but it's designed for this kind of thing. It uses https://trix-editor.org/
Allowing users to input arbitrary HTML and then showing it on the site has the potential to open up very serious security issues if it's not handled really carefully, which is one of the reasons we've mostly avoided this kind of thing in the past.

jaycmb commented 3 years ago

Confirmed in Papercut meeting: more than a papercut. We would need a spike first to investigate which editor could be used. @Rachel to create

RachL commented 3 years ago

@jaycmb @andrewpbrett I've created https://github.com/openfoodfoundation/wishlist/issues/122 . I tweaked a bit the template as I guess we want in that case to write a clear papercut, as we want to work on it.

RachL commented 2 years ago

https://github.com/openfoodfoundation/openfoodnetwork/issues/8768 concluded in favor of https://trix-editor.org/. I'm putting this back in the candidates column to see if introducing trix editor could be a papercut at next meeting.

RachL commented 2 years ago

This needs a migration from the old editor to the new one.

Not a papercut.

amdweb82 commented 1 year ago

Just curious, is there an update to this task? And to add, I assume the same editor would also replace the editor for product descriptions?

RachL commented 1 year ago

@amdweb82 no we are really busy currently with the prioritize feature, so we didn't have room to prioritize this one :(

lin-d-hop commented 1 year ago

Hi @amdweb82, To start we are just rolling out this editor as we switch from AngularJS to StimulusReflex on the Enterprise Settings pages. @binarygit is working on this :)

binarygit commented 1 year ago

Hello @openfoodfoundation/train-drivers-product-owners I had a couple of questions about this and your answers will help me move forward with this :smile:

The major requirements as I understand (correct me if I'm wrong in some of them or if I missed something) are:

It needs to enable users to insert HTML From my research, however, it doesn't look like trix allows arbitrary HTML insertion. It's more or less limited to text based tags or text based styles. So things like <p> or text-decoration: underlined are some examples of what trix will let us insert. But things are <div>, <input> etc are ignored by trix. So, something like a newsletter subscription box isn't something we can let the user insert into the site using trix.

This behavior is similar to the text-angular editor we have right now, where user entered text will never be evaluated as HTML and you'll need to create buttons to let users add the extra styling(s). https://github.com/basecamp/trix/issues/120#issuecomment-161064186
It needs to let the user embed videos Only YT videos right?
It needs to support markdown Trix doesn't support MD, and it doesn't intend to. So, is this a deal breaker? https://github.com/basecamp/trix/issues/626#issuecomment-800338265

Trix functionalities that we don't want
1. Letting users insert images/attachments Trix lets users insert images/attachments by default into its editor. I don't think we want that right?

lin-d-hop commented 1 year ago

So if Trix doesn't support html or markdown what does it do?

I agree with @Matt-Yorkley that HTML is very risky and I'd prefer markdown based input.

@RachL Can you comment on why full HTML is required? Do you have specific needs so we can compare to markdown options to avoid the vulnerabilities?

RachL commented 1 year ago

@lin-d-hop As described in the spike: https://github.com/openfoodfoundation/openfoodnetwork/issues/8768 the main need is for hub managers to be able to insert videos or newsletter subscription box in their about tab. In CMS like wordpress this is often done or edited straight in html, that's why the original issue mentions html.

We discussed this in delivery circle yesterday and came to the conclusion we cannot do newsletter subscription. We will still pursue with adding trix editor.

openfoodfoundation / wishlist