search

preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
949 stars 148 forks source link

preact-compat doesn't work properly with draft-js #220

Open gabriel-miranda opened 8 years ago

gabriel-miranda commented 8 years ago

Hello! How are you? My name is Gabriel, I'm a front-end developer in a spanish speaker social network from Argentina that serves content to +60M unique users per month.

We're currently re-developing our entire application using react and its whole ecosystem. (webpack, redux, react-router, es6 and stuff) as a SPA.

In the few past months we've been developing a beauty rich text editing tool based on draft-js, it's an awesome library for the job.

And also we're currently trying to lower the size of our bundle.js generated and saw that the 25% size of ours it's only react.

The truth is that we want to switch to preact and preact-compat and everything works fine (react components, containers, redux, react-router and stuff). Everything but draft-js. I tried to reproduce the error in a webpack bin: http://www.webpackbin.com/Vyc5O3_TZ

You can try there toggling the comments made (the switch from react to preact-compat) or you can paste the code and use an alias on a real webpack environment.

The editor doesn't work at all, but we really want to use preact in our project.

If you need any help and you want to solve this issue so we can use it, please let me know, it'd be really good for us.

Thanks in advance, best regards, Gabriel.

developit commented 8 years ago

Absolutely! Hopefully it's just an oversight, but either way we'll get it solved so draft-js and preact can work in perfect harmony :)

I'll take a look at your repro, thanks for taking the time to set that up!

developit commented 8 years ago

@gabriel-miranda I downloaded the demo from Webpackbin to set up aliases, and with preact 6.2.0, almost everything it working. There seems to be an issue with cursor focus, which makes it difficult/impossible to apply text formatting. However, block formatting does work. You clone the demo here, then run npm i && npm start:

https://gist.github.com/developit/831d9fb2bc5abc9583c96a320e28f822

gabriel-miranda commented 8 years ago

@developit Hi! Thanks for the heads up on this! I'll try to look at both, the source code from preact and draft-js to see what's happening, we tested this with a previous version of preact and didn't work at all with the alias, so sorry about that, now is much better! I'll take a look when I can to help you out! (Probably tomorrow or wednesday)

Our team really, REALLY apreciate what you're doing. We'll hopefully solve this in a few days/weeks. You're awesome.

developit commented 8 years ago

Definitely! I'm glad you were willing to test again with the new version, it fixed a lot of stuff for sure (and is way faster). Now that we've got a full reproduction of the issue I think it should be pretty easy to debug. I'll let you know if I find anything once I have a few spare minutes to look deeper into it.

matthewmueller commented 8 years ago

@gabriel-miranda were you able to get this working?

stevewillard commented 7 years ago

@gabriel-miranda Also curious - any luck using preact with draft-js?

developit commented 7 years ago

Lot of interest in this one. I have a repro locally I've been plugging away on and it's improved considerably, but something is still awry with the editor focus.

haggholm commented 7 years ago

In a tedious echo of @stevewillard : any news, @developit ? This is (I think) the one thing preventing us from switching to preact, which would be awfully nice…

developit commented 7 years ago

@haggholm I haven't yet tried draft-js with the most recent versions of Preact (7.2) and preact-compat (3.11).

developit commented 7 years ago

Just tried out the gist from above against the latest versions and it's much better! Still something awry with the inline styles (bold/italic/underline) but it doesn't duplicate text or anything:

preview

jschroeter commented 6 years ago

We're also trying getting Preact 8.2.7 and DraftJS 0.10.5 working together; but still having issues with focus and cursor. Already tried some workarounds but without success. Someone has some news or ideas? Thanks a lot!

Aurailus commented 3 years ago

Hey there, I know this is quite a bit later but has there been any progress on this issue? I really need a Rich Text Editor for my project and so far I've found none that work properly with Preact.