integrate html editor into compose box

[tomholub]

continuation from #1630 and final part of #1621

[##########] cannot do rich text emails or include inline images. (which depends on #1522 which depends on #1620 )

[tomholub]

This just got unblocked!

This issue is somewhat tricky. Currently we use our own contenteditable div for email body input. This does not offer any formatting options.

We want to integrate Quill instead. In particular, we have a prototype with our own image-paste-plugin that we want to use available at https://github.com/FlowCrypt/flowcrypt-browser/tree/experimental/issue-1630/Quill%20Editor - I want to use the particular settings as demoed in the prototype

But there are a few gotchas:

1. The default should remain that messages are a simple text (not rich text)
2. User can switch to rich text using a popover toggle, "Rich text" (see below)
3. When user switches to rich text, the contenteditable div content should be retrieved, the div removed? and Quill inserted instead? And then the content pasted into the Quill editor?
4. If user switches from rich text to simple text, the Quill content should be read? Then converted to text using Xss.sanitizeStripAllTags? Then contenteditable div should be inserted, and the textual representation of the previous Quill put in?

As you see it feels a bit more complex then it should be. One thing you could investigate is to see if it's possible to always use Quill, so that we don't have to switch back and forth, but have some way to enable/disable to Quill formatting functionality, so that it can sometimes behave as a rich text editor and sometimes as an unformatted text field (and make sure to remove formatting using the Xss method when switching to unformatted). That would be the easiest.

The toggle is curently only available on our testing account flowcrypt.compatibility@gmail.com because of this snippet:

if (popoverOpt === 'richText' && !['flowcrypt.compatibility@gmail.com', 'tom@flowcrypt.com'].includes(this.urlParams.acctEmail)) {
  continue; // richText not supported yet. Only used for testing
}

You can either add your email in for debugging, or I can give you access to the compatibility email.

[limonte]

We want to integrate Quill instead

I took a quick look at Quill repo and it doesn't seem good, the project seems to be stale. Year and a half ago they announced the upcoming major release which still didn't happen: slab/quill@a5b203a

There is a truckload of issues and nobody is fixing or even answering them.

All that means that if (when) we'll face an issue with an editor we most probably won't be able to get the fix even if we fix it by ourselves and submit a PR, the possibility of it being merged and released is low.

---

Alternative: https://github.com/basecamp/trix

• releases are happening on a regular basis: https://github.com/basecamp/trix/releases
• issues are answered and resolved when possible: https://github.com/basecamp/trix/issues
• backed by a trusted company
• TypeScript

---

@tomholub let me know you thoughts this

[tomholub]

Reviewing quill repo, it is true it didn't receive a whole lot of development this year. There's some, not much. More notably, even PRs are not getting merged, even simple ones like docs updates.

But I like how it works, in particular I like the air/bubble mode, when the formatting buttons only show when I highlight something.

Trix seems to be geared too much towards a wiki/document type of editing.

If we're going to search for yet another editor, have a look at https://github.com/neilj/Squire - it's similar to trix, but has been used specifically for email (handling of arbitrary html, blockquotes, etc). Actually Squire may be a really good choice for us. But no air mode.

Given there's no air mode, how would you incorporate the editor visually into the compose window?

[tomholub]

I also really like that using Quill we were able to choose size of images, like Gmail lets me, after pasting. But I'm ok to just ignore that feature (don't let perfect be enemy of good).

[tomholub]

Squire has also been designed to use with DOMPurify which we already use. Given it's designed for mail, and FastMail has a reputation for lightweight / responsive ui, it seems to be a good fit for us.

[tomholub]

To clarify my intention, and what I want to be able to do:

1. I want to be able to paste an image into text
2. I want to highlight some text and press "ctrl+b", "ctrl+u" or "ctrl+i"
3. I want pasted links to be clickable

I don't need any rich text UI for any of these actions.

Therefore I propose we make the first version with no visible UI!

[limonte]

About neilj/Squire:

• The project seems to be stale as well, the latest release was 1.5 years ago, there are some recent commits, but the latest test was written a year ago which indicates the low quality.
• I was not able to paste image in their demo both with Firefox and Chrome on Linux.

---

I also checked https://github.com/summernote/summernote/ (found it in @michael-volynets pinned repos)
It has a Bootstrap dependency which doesn't seem like an option for us.