preact-compat
preact-compat copied to clipboard
preactjs
preact-compat doesn't work properly with draft-js
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.
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!
@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
@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.
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.
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.
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…
@haggholm I haven't yet tried draft-js with the most recent versions of Preact (7.2) and preact-compat (3.11).
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:
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!
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.
