Draft-js: Switch back to draft.js from slate.js, requesting some basic features.

Created on 19 Jun 2017  路  5Comments  路  Source: facebook/draft-js

Do you want to request a feature or report a bug?
feature

  1. A lot of people using draft.js just to render a resizable textarea in React(or at least to start with),But
  2. draft.js makes it really hard to render a textarea with predetermined text. yes, we have EditorState.createEmpty(), but how to create initial state with text? With some digging I find EditorState.createWithContent(ContentState.createFromText(text)), not obvious to new users.
  3. Also how to extract text from state? state.getCurrentContent().getPlainText()

When I'm switching back from slate.js(because some bug they are not actively fixing), here's the comparison:

import { Editor, EditorState, ContentState } from 'draft-js'

const Plain = {
  deserialize: text =>
    EditorState.createWithContent(ContentState.createFromText(text)),

  serialize: state => state.getCurrentContent().getPlainText()
}

compare to import { Editor,Plain } from 'slate'
Is there some way to trim it down to more user friendly api like in slate.js? Or at least inform us on the tutorial starting demo?

  1. Also slate provide a method on <Editor/>, onDocumentChange when the actual content changes. I find it useful as onChange triggers way to often.

  2. And they provide a className property(makes more sense to me), instead of having to create a wrapper div.

Most helpful comment

@FateRiddle If I may ask, what made you move back? I was considering the switch due to the lack of mobile support in draft.js

All 5 comments

@FateRiddle If I may ask, what made you move back? I was considering the switch due to the lack of mobile support in draft.js

Ah I see Slate has the same issue: https://github.com/ianstormtaylor/slate/issues/725
Due to to chrome on android not implementing keyboard events properly

Yes, both draft.js and slate.js have the same issue. My text disappears after space input.

@stonecold123 Did you find a good solution to this problem?
I ran into the same issue. Is there any way i can make draft js work seamlessly on mobile?

I don't think we'll be making major changes to the API at the moment.

  • PRs to make the docs more beginner-friendly are always welcome.
  • A method like onDocumentChange needs you to define what exactly a 'document' is. This means different things in different editor use cases. One of the power features of Draft, in my opinion, is the flexibility to customize the input to what you want. onChange allows you to do that by exposing all the changes and letting you address whichever ones you want.
  • #1713 is open for adding an additional style prop. We'll try to review that soon.
  • #725 is the umbrella issue for the Android/mobile bugs mentioned here.

In view of this, I'm closing this issue. Let me know if you have further questions!

Was this page helpful?
0 / 5 - 0 ratings