This issue is literally making me crazy. Yes. I have no CLUE how to fix it.
On Wednesday, June 3, 2015 at 11:53:24 AM UTC-4, Eric Eslinger wrote: > > Hey folks, > > I know that the full webcomponents.js polyfill for shadow DOM currently > breaks contenteditable divs [1]. This was something I kind of glossed over > when first architecting stuff, but it's clearly the case. > > My specific problem is the interaction between the polyfill and the > quill.js [2] rich text editor. I love quill on principle- it uses a > non-HTML internal representation and is amenable to an OT-based > multi-editor realtime approach. There don't seem to be any other rich text > editors on the market that even come close to quill's delta representation > (if anyone has any suggestions, I'm all ears). > > My choices now seem to be: > > 1) implement some kind of iframe isolation booth for quill and handle > passing events into and out of the iframe. I *think* this will work, and > that the runtime environement that quill experiences inside the iframe will > not be polyfilled, and therefore the execCommand function will work > properly. > > 2) move from polymer 0.5 and the shadow dom to polymer 1.0 and the local > dom. This works nicely and quill runs in a local dom world, but breaks > Angular integration. > > 3) move from polymer 0.5 to some other front-end UI framework (probably > angular-material). If I'm going from the 0.5 polymer and components > libraries to polymer 1.0, there's already a lot of work in re-naming > elements, tweaking styles, and so forth. > > 4) Hope there's a webcomponents 0.8 release that fixes execCommand in the > full shadow DOM polyfill. > > 5) some other workaround that I hadn't thought of, and is why I'm writing > this email. > > Right now the app runs fine in all browsers, and it looks fine everywhere. > That is to say, it runs fine in all browsers, except that editing doesn't > work. You can type in the contenteditable div that Quill makes, but you > can't use the toolbar to style things and the backspace key doesn't work. > Under the 0.5 wc library even that didn't work, but the createTreeWalker > update in 0.6 helped some things. > > So, have other people run into these issues? If so, what approaches to > using rich-text editors in a webcomponents environment are you using? > > Eric > > [1]: https://github.com/webcomponents/webcomponentsjs/issues/212 > [2]: http://quilljs.com/ > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/f1d7d634-eeff-4f4a-a5fa-fa428af24841%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
