[SPIKE-101] Kill Quill

[CowMuon]

Description

Quill is a legacy editor with limited support for markdown, which is heavily favored by communities in Common. We need to get off the tortured workaround carousel wheel and introduce a more modern solution that provides better markdown support.

As such we need to investigate what the full implications are for alternate approaches, with an emphasis on mobile editing experience.*

Engineering Requirements

Research into:

• List of supported features & functionality needed for chosen solution
• Elaboration of how MDXEditor & react-md-editor (ca. react-markdown?) compare across such categories.
• PKIM offline content editing support. Do we know how that is expected to work? (Cf. Tuesday's convo with Kevin discussing WAL, conflict log & resolution, etc) Which editor has the highest compatibility with offline editing requirements?

Acceptance Criteria

Findings write up added to Spikes folder on ENG drive and linked on this ticket.

Additional context

I think Marcin best expressed what everyone is feeling:

current editor is pain for everybody - engineers, code reviewers, product team, end users. Pretty bad if we consider creating content as our core of the app

NB. Beyond "Mobile experience" is the distributed front-end, for example having a one-click reply widget that can be shared, Farcaster Frame, etc.

Spike numbering starting with 101 since we have previous unindexed spikes.

[lzach83]

First pass can be found: https://docs.google.com/document/d/1ltk3M_g6cFNKz9wjEKbrteCisEDsKV31o3__xGNnljQ/edit

When we all return to the office tomorrow I will gather input from other Prod engineers.

CC; @mzparacha @Miaplacidus @masvelio @Israellund

[masvelio]

• Seems like react-markdown is not a good option for us
• Have you tried to find other libraries? I proposed MDXEditor & react-md-editor initially without any previous research. Just picked two first options from search results (but they were on top so might assume that they are the best).
• for me personally I like MDX better, it just feels good when I use it. But yeah, most important thing would be for us to a. have good DX b. support as much as product wants natively c. works well on mobile

[mzparacha]

I think React Markdown or any markdown editor based on textarea will be limited if certain features (link rendering, mentions, real-time preview, accessibility, etc) are not provided out of the box by the library.

MDX doesn't seem to be built on textarea (I may be wrong) so I like it better. I found this -> https://github.com/mundimark/awesome-markdown-editors which is a collection of popular Markdown editors, gave a brief look and from that list i found

• https://github.com/benweet/stackedit (play -> https://stackedit.io/app#)
• https://github.com/joemccann/dillinger (play -> https://dillinger.io/)

to be good alternatives (but I only had a short look).

I think any editor we chose should at least be able to easily support most of these things (even if some of these features won't be used soon, the idea is editor is super configurable)

• Link Preview
• User @ Mentions (this could also be used for threads @ mentions)
• Accessibility (keyboard shortcuts)
• Content Copy/Paste + handle different formattings
• File Upload
• File embeds (+ file pasting from clipboard)
• Mobile responsiveness
• Content Draft Export options (.pdf, .HTML, .md etc)
• Plugins or any type of extensibility option
• An active community

[lzach83]

@mzparacha I have seen those editors in my adventures but they both either:

1. Are abandoned projects or
2. Have deep rooted dependencies on other projects

which i would love to avoid both if possible

[mzparacha]

That's fine @lzach83, like I said I only had a short look. But again i think we should have an editor with a good amount of configurability

Link Preview User @ Mentions (this could also be used for threads @ mentions) Accessibility (keyboard shortcuts) Content Copy/Paste + handle different formattings File Upload File embeds (+ file pasting from clipboard) Mobile responsiveness Content Draft Export options (.pdf, .HTML, .md etc) Plugins or any type of extensibility option An active community

[dillchen]

Could we evaluate https://codemirror.net/docs/guide/#extension

as well, it's used by Obisidian for reference and supports decent amount of functionality out of the box

[dillchen]

Some notes, definitely love to powwow by the end of the week

Rendering -> how to customize / can you list the plugins / and or if they are not supported we should have a "litespec" aka bullet points / story point estimation

Basically for the following do these exist, add yes no, link to plugin, or need to build

Link Preview User @ Mentions (this could also be used for threads @ mentions) Accessibility (keyboard shortcuts) Content Copy/Paste + handle different formattings File Upload File embeds (+ file pasting from clipboard) Mobile responsiveness Content Draft Export options (.pdf, .HTML, .md etc) Plugins or any type of extensibility option An active community

Additionally I'm personally curious:

• about favicon + Link rendering (like what Github does with PRs / Issues -> #4497)
• Twitter cards / em it’s a type of block or use native rendering (we had this in Quill)

Outside of this discussion a "solution to blocks"

3552

6550

Right now there are three desired / supported modes for visualizing

Similar to Obsidian, we want to break up and insert thread, whatever special chars denote a code / poll, then come back to thread Needs special syntax: [[ obsidian specific syntax]]

Viewing Blocks - We want to support 3 types

Text at the top: Like this

• Implementation assumptions: We will have an ordered list of Blocks (I.e Polls, Proposals and more, each would have a name)
• Implementation assumptions: We will have some kind of boolean / enum that will control the display logic based on blocks / text

Block / Embed at the top, I.e a poll:

• Implementation assumptions: We will have an ordered list of Blocks (I.e Polls, Proposals and more, each would have a name)
• We will have some kind of boolean / enum that will control the display logic based on blocks / text

Block in between (the third does not need to be shipped now, but would be desired to support): Ex

I.e display

• Thread
• Code / Poll
• Thread

---

I know that the block based conversation is out of scope for the Spike, but it seems important to answer / where the editor and or data model fits together

[lzach83]

Taking a look at everything @dillchen added here, will update the doc with findings

[zakhap]

Bumping this!