As a person using the dwyl App to capture my thoughts/ideas/tasks/nots
I want to have a rich text editor with (basic) controls for formatting
So that I can visually enhance my items so they are easier/faster to organise and read.

Features / Requirements

Each one of these feature/requirement checkboxes will link to a sub-issue with more detail.
If the feature is already available in our choice of (existing open source) package, then we can simply check it off once the feature is working (and covered by our end-to-end UI tests).

• Basic:
  • ability to apply styles to text:
    • bold
    • italic
    • underline (not standard markdown but we want it for completeness)
    • strikethrough
  • hyperlink existing text
  • pasting/typing a valid link should be automatically hyperlinked (ideally shortened for brevity)
    • links to Youtube/Vimeo should prompt: "embed or just link"?
  • embed an image by pasting a link to the image (display thumbnail inline no resizing yet)
    • Click/tap an image to enlarge/full-screen it
  • Use Keyboard Tab key to indent text.
    • Indenting text should create a "sub-item" where appropriate (acceptance criteria TBD)
  • Bullet points for presentation
  • Numbered (Ordered) lists
  • Checkbox for when an item becomes a task ✅
• Advanced:
  • Markdown support? How popular is this outside of the tech community? I know I would use Markdown if we supported it ... how about you? How important do you feel this is?
  • Emoji support
    • Emoji lookup? (is this available by default on mobile device keyboards?)
  • Mention another person in your team (or contact list) to inform them of or assign a task.
  • Upload images
  • Re-size images in the body of the text

Please add more features/requirements to this list as you think of them. 🙏
This is your product every bit as much as it's mine. Contribute! 🚀

Research

I've done a fair amount of research (8+ hours) into the available options in preparation for opening this issue.

For Web I think we need to use a existing JS package in the short term to ship faster.
As much as I (still) love Elm, there is no "pret-a-porter" editor we can use, and I think it will take us 1-2 months to develop our own. (see more detail below)

During the course of my research I looked at:

• https://github.com/basecamp/trix - used by basecamp. well tested.
• https://github.com/jaredreich/pell - describes itself as "the simplest and smallest WYSIWYG text editor for web, with no dependencies" ... zero dependencies. this really appeals to me!
• https://github.com/yabwe/medium-editor - an open source clone of the medium editor
• https://github.com/neilj/Squire - Squire is an HTML5 rich text editor, which provides powerful cross-browser normalisation in a flexible lightweight package (only 16.5KB of JS after minification and gzip, with no dependencies!) - used in production at ProtonMail, Tutanota, Zoho Mail and Superhuman ... Squire would be my close-second option, but it does not appear to have an efficient way of passing data for collaborative editing (see below)
• many more options: https://awesomeopensource.com/projects/rich-text-editor

Quill.js

My preliminary leaning is towards using Quill.js: https://github.com/quilljs/quill
I don't think Quill is necessarily "better" than any of the others, it just has a "kill feature"!
My reasoning for Quill is actually Delta the underlying format!

Deltas are a simple, yet expressive format that can be used to describe Quill’s contents and changes. The format is a strict subset of JSON, is human readable, and easily parsible by machines. Deltas can describe any Quill document, includes all text and formatting information, without the ambiguity and complexity of HTML.
Don’t be confused by its name Delta—Deltas represents both documents and changes to documents. If you think of Deltas as the instructions from going from one document to another, the way Deltas represent a document is by expressing the instructions starting from an empty document.
Deltas are implemented as a separate standalone library, allowing its use outside of Quill. It is suitable for Operational Transform and can be used in realtime, Google Docs like applications.

zefyr https://github.com/memspace/zefyr uses Delta:

So when we need to build our Cross-platform Native App in Flutter, we already have the format to allow us to efficiently pass minimal data over the wire to collaborate on work as a team. see: dwyl/learn-flutter#50

I like the approach taken by Medium (the blogging/writing) platform they don't show the editor controls at all until you highlight a block of text. At which point they show an ultra-minimalist contextual editor:

We definitely want to take the approach of hiding the interface until the interaction by the "user" invokes it. Having a cluttered interface is the worst!

Elm?

I obviously searched for "elm wysiwyg editor" and "elm rich text editor" both on Google and https://korban.net/elm/catalog (the package search that only includes v0.19 compatible packages) and looked at https://github.com/mweiss/elm-rte ... it hasn't had much traction since the RFP on Elm Discourse (still only 1 contributor last commit 26 Dec 2019), no (real) tests ... the author appears to have shifted focus to: https://github.com/mweiss/elm-rte-toolkit which is still in it's infancy but looks really promising.
See: https://discourse.elm-lang.org/t/a-toolkit-to-create-rich-text-editors-in-elm/5464

If we had unlimited time, we would write our own WYSIWYG editor in Elm for sure!
Having no runtime errors and a compiler to catch any type errors would be awesome!
But we really don't have a lot of time to spend months writing our own editor which will only be useable on the Web and then we would still need to re-write it for Mobile ... We need to Ship!

I don't think we will incur too much technical debt by using an existing JS editor, provided we are laser focussed in our use and it's self contained in the "form" template.

Thoughts?