Provide a Rich Text Editor option for snippets

[nanometrenat]

Issue

Further to the below, and other conversations, we need to add a Rich Text Editor for Snippets

• COVID-8 // Rich-text editor go-frontend#1011
• Formatting of text input fields -  go-frontend#931
• Change fields' type to be Rich Text Editor types #667

Particular driver right now is on Emergency pages, but Country and Regional pages also have snippets and it could be useful there too.

The Emergency Page snippets have

• a text box (not Rich Text) where users can paste in EITHER an iframe/URL link to embed e.g. a dashboard (this is the main use case and is critical to keep being supported) OR users can paste in html (this is the use case we're trying to help here - e.g. the Technical Guidance section of COVID-19 is html from another source copied and pasted in)
• an option to select an image for display (also need to keep this option)
• other options for visibility/position/tab/delete (these options also need to stay

What we'd like to have is a way for users to write Rich Text content (including ability to hyperlink to other sites, or to link to documents on GO) within the snippet so they don't have to create html elsewhere to paste in.

Hope this helps explain things but shout if further info required.

[GergiH]

Just copying @teklal 's comment here from a duplicate of this and closing that issue: #667 (comment)

• Surge alerts, the "Message" field https://prddsgocdnapi.azureedge.net/notifications/surgealert/add/ here the messages that are shared already most of the time have bulleted lists but they don't show on the frontend in the desired way
• in field reports people sometimes add links to the "source" field so it would be good to be able to support the sharing of links there and having them properly show as links on the frontend too
• snippets Provide a Rich Text Editor option for snippets #670

I'll add more when I think of other places.

[GergiH]

@nanometrenat @teklal @karitotp Country, Region and Emergency Snippets are now RTE fields, deployed to staging.

[nanometrenat]

Thanks @GregoryHorvath Unfortunately now I can't just copy and paste an iframe link into the snippet and have it display - if I just copy and paste directly then it shows as normal paragraph rather than as an iframe. As per the description above iframes are our base use case for snippets.

In order to get an iframe to display I need to go into "Tools"/"Source code" and paste it there...
@teklal @LukeCaley and team, in terms of usability what do you think about the extra steps for iframe? Might be simpler for the user to have to actively choose if they want rich text for snippets or just to copy in code? Or alternatively perhaps we could put explanatory text to help the users?

[teklal]

That's a good point @nanometrenat and I was thinking about the exact same myself the other day when testing this.

I think an explanatory text may be a good way to go. In the end, the number of users that have been embedding the iframes is not that big (often it's the same people doing it for different emergencies) and these people would be tech-savvy enough to figure out the extra steps (especially with a help text). I think having to actively choose between RTE or code may be more confusing? I do agree though that as iframes have so far been the main way to use snippets it's a bit cumbersome having to go through those extra steps when previously one could just copy paste directly. I wonder if with the new tabs feature and RTE we'll see snippets being used in more different ways?

Luckily it seems the already embedded iframes automatically work and do not need to be reconfigured.

[nanometrenat]

NOTE ALSO - we need to consider migration - what happens on the first edit after the new functionality is in place. For my test page, as soon as I edited anything then the system automatically added p tags to all the existing snippets (whether iframes or not), and the existing snippet that was just text but with an html a href hyperlink was automatically turned into text with no hyperlink. So we would need to make a plan re migration checks (and potential data updates) when this is implemented, to make sure that editing something _else on an emergency page doesn't break existing snippets...

https://dsgocdnapi.azureedge.net/api/event/3833/history/

[nanometrenat]

Also noting that the css doesn't seem to be being applied to the snippets - as you can see, my double-indented bullets etc. look fine in back end but not in front end:
https://dsgoproxyapp.azurewebsites.net/emergencies/3833#additional-information
Same thing as IFRCGo/go-frontend#1011 (comment)

[GergiH]

Latest changes are on staging:

• Added the Embed media button to a toolbar for RTEs on the backend, which should be used for adding <iframe>s
• Removed the automatic <p> tag which was added by RTE fields by default on the backend, and added it on the frontend

Checked changing the fields' type back-and-forth, didn't find any current content which would be affected by the change, except the <p> tags which shouldn't happen by the latest changes, though I checked manually.

cc @teklal @karitotp