DraftJS Editor

[mxstbr]

Rebuild editor with DraftJS for better cross browser support.

EDITOR

• Implement first editor component
• Support markdown
• Support image additions
• Support image drag and drop
• Fix link preview
• Single line mode (messages)
• Make message sending and rendering work with plain text
• Save thread as draftjs state
• Save messages as draftjs state
• Render threads from draftjs state
• Render messages from draftjs state
• Convert plain text threads to draftjs
• Edit draftjs threads
• Write migration for Slate to Draft (pending some upstream bug fixes in draft-js-import-markdown)
• Fix markdown links
• Support drag and drop image uploading (the plugin for that is almost done, waiting for @nikgraf to finish it)
• Code highlighting in threads
• Fix image uploads inside of threads (upstream PR: Allow passing extra data with addImage call draft-js-plugins/draft-js-plugins#830)
• Fix image uploads when editing threads (upstream PR: Allow passing extra data with addImage call draft-js-plugins/draft-js-plugins#830)
• Fix .css files and SSR, ugh
• Fix link previews
• Pressing enter when on an image crashes the editor (upstream PR: Fix critical bug in image plugin draft-js-plugins/draft-js-plugins#880)
• Fix blockquotes
• Fix message emails
• Fix SSR checksum mismatches
• Fix focus

MIGRATION SCRIPT

• Doesn't move over markdown links and images (ref)
• Doesn't move over Slate links (need to convert these to markdown before?!)
• Doesn't move over blockquotes? (ref)
• Doesn't move over code blocks (ref)

Ref and closes #1254. Also closes #1148, closes #1018, closes #1151 and closes #1017 (invalid).

[mxstbr]

Brainstorm around how we're going to store the data created in the editor. This is the current state:

• Messages are converted from Slate state to plain text when you send them and the plain text is then stored in the database and rendered as plain text. On top of that we detect URLs in the plain text before it's stored and convert those URLs to markdown links, which are then rendered on the frontend as actual <a> tags.

• Threads are stored as JSON.stringified Slate state, then converted to plain text on the frontend and rendered as markdown. The reason we don't convert them to plain text before storing is because then editing wouldn't be possible, this allows us to implement editing.

The good thing about this storage model is that saving messages as plain text is easy and fast. We did that for threads too, but to implement editing we have to store the raw state. The downside is that to implement any kind of more advanced/interactive feature like mentions we have to actually render the Slate state rather than convert it to plain text and render as markdown.

[mxstbr]

We'll need to store raw DraftJS state for both threads and messages and then render it out as React components rather than convert it to plain text and render as markdown to support any kind of advanced feature we want to add.

From the awesome-draft-js list the one I found that seems to do what we need is redraft: https://github.com/lokiuz/redraft All the others convert to/from HTML.

I'll dig into that!

[mxstbr]

There's now a migration script from slate to draft which works almost 100%. There's some small bugs in the library I'm using. At least links and images are fixed by an open PR, maybe also fixes blockquotes and code blocks. (TBD) I've pinged the author to merge that PR so we can move forward with this, otherwise I'll publish a forked version from that PR.

[superbryntendo]

@mxstbr things are working right with one last issue: when the publish button is pressed on mobile, the url needs to change from /new/thread to / where the thread will be waiting at the top of their list. I fixed it on desktop, but didn't want to burn a lot of time on mobile since ik that it'll be quick for you. Mind knocking that out so we can ship this bad boy?

[mxstbr]

Done!

[superbryntendo]

@mxstbr can we move the PoC toolbar to a diff branch so we can just ship this?

I don't think that should block shipping tbh. We're way overdue on this imo.

[mxstbr]

Oh yeah for sure, let's ship this today!

[mxstbr]

Removed the PoC side toolbar, let's ship it tonight when you get up?

[superbryntendo]

I approved this, but not going to merge bc I don't want to do the migration work.

I'm ready to go on this. Down to stay up and ship in your AM too, Max.

[mxstbr]

Fuck prettier ugh. Cleaning this up then shipping.

[mxstbr]

Shipping this as soon as CI has passed.