Thread renderer

[mxstbr]

Status

• WIP
• Ready for review
• Needs testing

Deploy after merge (delete what needn't be deployed)

• hyperion (frontend)

This is a heavy WIP/prototype. I want to try to kick DraftJS + ImmutableJS + plugins out of our JavaScript bundle entirely. This is feasible since #4564 and #4472 were merged, as the only thing they are still used for on the frontend is editing and rendering threads.

It is definitely possible to move thread editing to plaintext, so I am investigating the possibility of creating a thread content renderer with redraft. If that is possible, I am going to continue with editing.

To make sure I cover all features, I created an extensive markdown test file:

Click to see test markdown file

A paragraph with some *italic* and **bold** text, some `inline code` and a [link](https://google.com). It also has a link to a YouTube video, which should be rendered as an embed and linkified https://www.youtube.com/watch?v=BmlBxJOb1lY, and it mentions @mxstbr

# Heading 1

## Heading 2

### Heading 3

> A blockquote

* An
* unordered
* list

```javascript
const code = true;
\```

1. An
1. ordered
1. list

Note: remove the backslash at the end of the code block

Here is what the test file renders right now (yes, embeds are appended at the end instead of the middle... that's a bug):

Let's see if I can get to that exact result with redraft! Wish me luck 🤞

[spectrum-bot]

	Warnings
⚠️	These modified files do not have Flow enabled: src/components/composer/style.js src/components/globals/index.js src/components/threadComposer/style.js

Generated by 🚫 dangerJS

[mxstbr]

I do not want to celebrate too soon but this is rendered fully with the thread renderer, no DraftJS / plugins or immutablejs necessary:

😱

This is definitely feasible! Will continue down this path

[mxstbr]

TODO

• Syntax highlighting
• Image rendering
• Integrate ThreadRenderer into ThreadDetail
• Delete rich-text-editor
• Move thread editing to plaintext
• Remove all usage of DraftJS, draft-js-plugins and ImmutableJS from the frontend JavaScript

[mxstbr]

Most satisfying commit ever, deleting the entire rich-text-editor and with it all the DraftJS plugins: 806858c 😍

Threads are now also rendered with the thread renderer, so all that's really left to do is to fix syntax highlighting and move thread editing to plaintext!!!

[mxstbr]

Latest commit moves thread editing to plaintext 🤯I extracted the thread input components and re-used them—this leads to a bit of a strange UX right now, but we can clean that up for sure. Most importantly it works!

[mxstbr]

I have started the process of completely removing the DraftJS and ImmutableJS dependencies from the frontend bundles, and it is going alright so far!

The one big hangup that I have right now is editing.
Both message- and thread editing work by first converting the raw draft content state from the API to actual Content State (which is the DraftJS import) and then convert that to markdown using draft-js-export-markdown.

That initial conversion is unnecessary, it should be possible to convert the raw content state directly to markdown. We might have to fork draft-js-export-markdown to add support for that though.

/cc @sstur

[mxstbr]

Actually, now that I think about it the inverse is also true: when showing the preview we also first convert the markdown to DraftJS EditorState and then convert that to raw.

So essentially, we have to build a converter from markdown to raw content state and another one from raw content state to markdown without the conversion to DraftJS in the middle.

[brianlovin]

If I edit the example thread you posted in the top of this PR, the code block backticks don't appear:

[brianlovin]

It appears to be removing the code block completely. If I preview the edit without changing anything, it renders:

[brianlovin]

I edited that thread, deleted all the body content, and hit save and got this error:

[brianlovin]

In the db it appears to have saved this:

[brianlovin]

Found a pretty bad bug:

• edit a post
• press command + enter
• it publishes a new post

[brianlovin]

Line breaks aren't preserved:

[mxstbr]

If I edit the example thread you posted in the top of this PR, the code block backticks don't appear:

You did not remove the \ in front of the code block closing fences like I said.

Also, when you edit a code block it is transformed into a normal-markdown-style-codeblock with four spaces, not a GFM markdown one. Still a code block, at least if you remove the \ like I said you should! 😉

Good catches on the other bugs, will clean that up!

[mxstbr]

Found a pretty bad bug: edit a post press command + enter it publishes a new post

I have fixed everything except for this, I cannot replicate this. Pressing CMD+Enter while editing a thread does not do anything for me.

[mxstbr]

Actually, I think I know what this is: you were probably editing the thread in the slider. We have a global event listener in the composer, I will clean that up to be local that should fix it!

[mxstbr]

Okay the latest commit makes CMD+Enter work while editing and should also fix the bug because I have moved the CMD+Enter listener to be local to the editor, rather than global to the entire doc! 🎉

This should be ready to go now 💯

[sstur]

I have started the process of completely removing the DraftJS and ImmutableJS dependencies from the frontend bundles, and it is going alright so far!
The one big hangup that I have right now is editing.
Both message- and thread editing work by first converting the raw draft content state from the API to actual Content State (which is the DraftJS import) and then convert that to markdown using draft-js-export-markdown.
That initial conversion is unnecessary, it should be possible to convert the raw content state directly to markdown. We might have to fork draft-js-export-markdown to add support for that though.

With regards to: "it should be possible to convert the raw content state directly to markdown"
Yes, I think that is totally doable without any great re-architecture of the logic. It sounds like you've got it going on your fork, which is good because I'm very short on bandwidth these next few weeks. If you can think of a strong use case to support this in draft-js-export-markdown without the need for a fork, let me know and we can coordinate getting some form of that merged upstream, behind a flag.

[brianlovin]

it is transformed into a normal-markdown-style-codeblock with four spaces

We should just use GFM - this is really weird :P

[brianlovin]

Just pushed some layout fixes. Please double check that overflowing and layout all looks good on your end, on both mobile + desktop. I think it's solid now.

[mxstbr]

We should just use GFM - this is really weird :P

I agree but unfortunately draft-js-export-markdown does not support that right now. I will see if I can do an upstream patch on Monday.

Scratch that, I just realised I already did an upstream patch for this for the chat input 🤦‍♂️ Just need to use the gfm option, commit incoming!

[mxstbr]

Thanks for cleaning this up, will double check on Mon! 💯

[mxstbr]

This should be good to go now @brianlovin, ready to ship! 🎉

[brianlovin]

Excellent work!! I'll prod cut today