Skip to content
This repository has been archived by the owner on Oct 11, 2022. It is now read-only.

DraftJS Editor #1256

Merged
merged 83 commits into from
Oct 4, 2017
Merged

DraftJS Editor #1256

merged 83 commits into from
Oct 4, 2017

Conversation

mxstbr
Copy link
Contributor

@mxstbr mxstbr commented Jul 19, 2017

Rebuild editor with DraftJS for better cross browser support.

EDITOR

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
Copy link
Contributor Author

mxstbr commented Jul 20, 2017

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
Copy link
Contributor Author

mxstbr commented Jul 20, 2017

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
Copy link
Contributor Author

mxstbr commented Jul 22, 2017

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
Copy link
Contributor

@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?

superbryntendo
superbryntendo previously approved these changes Sep 29, 2017
@mxstbr
Copy link
Contributor Author

mxstbr commented Sep 29, 2017

Done!

@superbryntendo
Copy link
Contributor

@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
Copy link
Contributor Author

mxstbr commented Sep 30, 2017

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

@mxstbr
Copy link
Contributor Author

mxstbr commented Sep 30, 2017

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

superbryntendo
superbryntendo previously approved these changes Oct 2, 2017
@superbryntendo
Copy link
Contributor

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.

brianlovin
brianlovin previously approved these changes Oct 3, 2017
@mxstbr
Copy link
Contributor Author

mxstbr commented Oct 4, 2017

screen shot 2017-10-04 at 10 24 09 am

Fuck prettier ugh. Cleaning this up then shipping.

@mxstbr
Copy link
Contributor Author

mxstbr commented Oct 4, 2017

Shipping this as soon as CI has passed.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants