Draft-js: Add React Native support

[tuckerconnelly]

[hellendag]

It would be awesome to see a React Native version. I don't have the bandwidth to build it, but I'd be happy to support anyone interested in creating one.

I would not recommend trying to port the existing Editor and its handlers directly. Rather, it probably makes sense to build a separate editor component that uses the Draft model.

[johnpaulmanoza]

Is there any updates to this?

[sophiebits]

No, we're not planning to work on this for the time being.

[navidmesbah]

Consider Using Draft.js for rich text editing on the web app, then convert the output to a json object with Draft.js convertToRaw function and _store_ it in the _database_.

if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?

thanks in advanced.

[hadynz]

if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?

I've just done something very similar. I went with rendering the rich text using a read-only Draft component that lives inside a WebView.

[navidmesbah]

@hadynz

I think this is the best approach at the time...

[hbarve1]

@hadynz can you give a simple example how you implemented it.

[TheTekton]

I've been working with RN+Draft on iOS for some time. It's fairly pleasant, however the WebView wrapper would need events/modifications that aren't currently supported in RN or the react-native-webview project, afaik. Having DraftJS support from RN would be awesome, although seems rife with challenges:

iOS

Draft+iOS works fairly well after establishing events. A major pain point is the editor toolbar, as I've yet to see a mobile editing toolbar work well inside a UIWebView. Plus, native toolbar would certainly require events between JS<->Native.

A custom keyboard toolbar is a fairly consistent alternative to a browser toolbar on iOS. The ZSS editor is a known-good implementation reference for this. Alternatively, swizzling a custom tooltip would save some screen space, although a nightmare to implement. The nightmare is in maintaining text selection with the tooltip while formatting, updating custom blocks, and whatnot. Perhaps I just haven't seen a proper implementation of a swizzled tooltip yet, but that's what been seen so far. Another issue with tooltips is that certain selectors are off-limits:

- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
  BOOL canPerform = NO;
  // ...
  if (action == @selector(format:) || action == @selector(cut:) || action == @selector(copy:) || action == @selector(paste:) || action == @selector(_promptForReplace:) || action == @selector(replace:) || action == @selector(_define:) || action == @selector(_share:)) {
    canPerform = YES;
  }
  return canPerform;
}

_define:, _promptForReplace:, _share:, and replacementText selectors above will build and run in development, only to be rejected on submission to iTunes Connect. Custom selectors, etc would be needed, if you wanted to provide the defaults like "Replace..." in the tooltip menu. Maybe not that bad to implement, just haven't been too far down that rabbit hole.

The app references non-public selectors in Frameworks/RNEditorWebViewBridge.framework/RNEditorWebViewBridge: _define:, _promptForReplace:, _share:, replacementText

@hbarve1 This comment doesn't cover the entire process, however it might provide a reference point, on iOS.

Android

The primary extent of my testing was to realize the issues already present for Android, here. I haven't seen many examples of a working contenteditable editor on Android, yet. AFAIK, Chrome and Gecko both had poor editor support, until recently. Also, until recently, Chrome wasn't supported on Android (consistently/sanely). I seem to recall reading that Gecko's contenteditable support works on Android, but I can't speak from experience.

It seems that if Android were to get some real love, time/effort would get focused into better supporting contenteditable in either Chrome, Gecko, both, or some other unknown engine. At least then support could be potentially provided to any common device, although perhaps unlikely for some models/API versions. It appears that there has been momentum with Gecko to support a standalone GeckoView, which if it does have working contenteditable support, etc., then that might the best candidate for best supporting an editor on Android. Seems like Android is quite a mountain, at least for now.

[darlenedms]

If anyone is still interested, we've developed a Draft.js render for React Native here: https://github.com/globocom/react-native-draftjs-render

[Liqiankun]

@darlenedms I am gonna use it! Thanks !

[shqld]

I'm currently trying to implement an editor for ReactNative compatible with draft-js.

[shqld]

Which will be made public soon, though it's still early alpha.

[zjaml]

@shqld please let us know.

[lucidlive]

@shqld Would be happy to join in on this

[hosembafer]

Hi folks!
Is there any news around this? Or maybe DraftJS's RawDraftContentState compatible editor for RN?

I have a big DB with existing comments which saved in DraftJS's RawDraftContentState serialized format and now I need to implement comments in RN app.

[Msspl-PrashenjeetRoy]

I'm currently trying to implement an editor for ReactNative compatible with draft-js.

@shqld Are you working on it now & when it will be available to us? Are there no other solutions for react native editor?

For now:

• I am planning to use React draftjs editor for web app & also need the same editor for a mobile app. I need both the data structure same.
• Can I use https://github.com/wix/react-native-zss-rich-text-editor library as a mobile editor with the same data structure which actually draftjs saves in the database?
• Can we also save data from the react-native-zss-rich-text-editor editor to database and retrieve it back for web app(ex-using draft editor) & mobile(ex-react-native-zss-rich-text-editor editor).

I just want my data structure same for both the web and mobile app, that they can help me to edit and view the same data without any worry. Is it possible to do that for now without any react native draft editor (which is not available right now)?

How is Facebook using their post editor for mobile and web? Are they using react native for facebook app?
I also have seen Dropbox paper app using an editor which works awesome both in the web app as well as mobile. Are facebook & dropbox paper using native android or ios apps for their mobile app's editor?

[Leadrive]

https://github.com/rehashstudio/react-native-draft-js
this project support React Native

[suryakant-t-yadav]

I am adding a text-editor feature in my react-native app and https://github.com/rehashstudio/react-native-draft-js only support rendering but I want to add "draft js editor". Alternative https://github.com/wix/react-native-zss-rich-text-editor is available but it don't support #tags or @user like autocomplete like feature can. can any one help me with this and how to achieve this.

[martin-badin]

some progress?

[adamsythe]

https://github.com/globocom/react-native-draftjs-render

Does this help with having a text editor or does it only render?

[GuillaumeMunsch]

@adamsythe It only renders

[adamsythe]

@adamsythe It only renders

thanks i am writing a chat app but the backend saves all its messages in draft js, so i can render them but is there any way to convert my edit text data into draft js before sending it up?

[GuillaumeMunsch]

Converting plain text into a draft-js object is possible. Basically I've done it like this:

import { ContentState, EditorState, convertToRaw } from 'draft-js';

const contentState = ContentState.createFromText(this.state.input);
const editorState = EditorState.createWithContent(contentState);
const draftJsObject = convertToRaw(editorState.getCurrentContent());

The draftJsObject is basically your plain text into a draft-js object. No styling or anything else though

[adamsythe]

Converting plain text into a draft-js object is possible. Basically I've done it like this:

import { ContentState, EditorState, convertToRaw } from 'draft-js';

const contentState = ContentState.createFromText(this.state.input);
const editorState = EditorState.createWithContent(contentState);
const draftJsObject = convertToRaw(editorState.getCurrentContent());

The draftJsObject is basically your plain text into a draft-js object. No styling or anything else though

thanks so much for this, are you importing the official draft-js or is draft-js referring to https://github.com/globocom/react-native-draftjs-render?

[GuillaumeMunsch]

The official draft-js. Currently "draft-js": "^0.10.5", in my package.json

[adamsythe]

The official draft-js. Currently "draft-js": "^0.10.5", in my package.json

epic so i can use https://github.com/globocom/react-native-draftjs-render for rendering draft js from the server and then the official draft js to send back.

Thanks this helps a lot

[adamsythe]

The official draft-js. Currently "draft-js": "^0.10.5", in my package.json

Im still having a bit of a bug, not sure exactly how you solved this.

If i install just draft-js only i get the error, unable to resolve module react-dom.

If i install react-dom alongside draft js i get the error, undefined is not an object evaluating navigator.userAgent.indexOf

How did you manage to install draft js on a mobile?

[GuillaumeMunsch]

Probably some version problems. Here's my react and stuff versions:

"react": "16.5.0",
"react-dom": "^16.4.0",
"react-native": "0.57.1",

If not, maybe some babel issues or maybe you can check this out

[adamsythe]

argh i wonder if its because im on expo

[adamsythe]

Probably some version problems. Here's my react and stuff versions:

"react": "16.5.0",
"react-dom": "^16.4.0",
"react-native": "0.57.1",

If not, maybe some babel issues or maybe you can check this out

that link actually solved my problems thanks so much for all your help!

[mihirpathak97]

A react native port of Draftjs editor is available at https://github.com/DaniAkash/react-native-draftjs