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/CABsi40JnKm3HxJ_aitXAoGoPK9CpAORk0%3DUdsbd7LR_WoUvj_Q%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
