Polymer cannot work with quilljs editor

[vikrantrathore]

Description

QuillJS do not work with polymer due to its shadow dom and how styles are treated. When calling a node id in polymer it returns null. For details please check: https://github.com/quilljs/quill/issues/904 The project maintainer mentioned its an issue with polymer so opened an issue here. Its built using app-drawer-template.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link href="https://cdn.quilljs.com/1.0.0-rc.3/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.0.0-rc.3/quill.js"></script>
<!--  <link href="../bower_components/quill/dist/quill.snow.css" rel="stylesheet"><script src="../bower_components/quill/dist/quill.js"></script>
-->
<dom-module id="my-view3">
    <template>
        <!--<link rel="import" type="css" href="https://cdn.quilljs.com/1.0.0-rc.3/quill.snow.css" /> -->
            <div id="editor">
                    <p>Hello World!</p>
                    <p>Some initial <strong>bold</strong> text</p>
                    <p>
                        <br>
                    </p>
            </div>
    </template>
    <script>
     Polymer({

         is: 'my-view3',

         attached: function() {
             /*this.scopeSubtree(this.$.container, true);*/
             var quill = new Quill(this.$.editor, {
                 modules: {
                     toolbar: true
                 },
                 theme: 'snow'
             });
             console.log(document.querySelector('#editor'));
         },
     });
    </script>
</dom-module>

Live Demo

https://plnkr.co/edit/KrymvseC04NUdRdmq3Hz?p=preview

Steps to Reproduce

Above works in firefox and safari and not in Chrome without loading webcomponents-lite.js explicitly.

Expected Results

Actual Results

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [] IE 11

  Versions

• Polymer: v1.6.1
• webcomponents: v0.7.22

[TimvdLippe]

I diaagree this is a problem in Polymer. If I understand the issue correctly, Quil uses document.querySelector to obtain the correcf target. This will break if you use shadow dom. Shadow dom is unrelated to Polymer.

A proper fix would be that Quil has a new constructor which accepts a HTMLElement instead of a String. However it seems that Quil breaks when passing a HTMLElement and therefore the bug is in Quill.

To demonstrate this is not an issue with Polymer, you can build a custom element in ES6 and attach it to the dom with a shadowRoot. Hopefully the maintainer is then convinced it is an issue with shadow dom instead.

On Fri, 2 Sep 2016, 04:30 vikrantrathore, notifications@github.com wrote:

Description

QuillJS do not work with polymer due to its shadow dom and how styles are treated. When calling a node id in polymer it returns null. For details please check: quilljs/quill#904 https://github.com/quilljs/quill/issues/904 The project maintainer mentioned its an issue with polymer so opened an issue here. Its built using app-drawer-template.

```

Live Demo

https://plnkr.co/edit/KrymvseC04NUdRdmq3Hz?p=preview Steps to Reproduce

Above works in firefox and safari and not in Chrome without loading webcomponents-lite.js explicitly. Expected Results

[image: quillexpected] https://cloud.githubusercontent.com/assets/6446997/18190692/26df76ce-70f7-11e6-960b-52459ce01909.png Actual Results

[image: quillerror] https://cloud.githubusercontent.com/assets/6446997/18190703/3350dca4-70f7-11e6-80f5-218313898244.png Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 9
• Safari 8
• [] IE 11

Versions

• Polymer: v1.6.1
• webcomponents: v0.7.22

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/Polymer/polymer/issues/3896, or mute the thread https://github.com/notifications/unsubscribe-auth/AFrDb4LsBSMtgakdvdhFIXOFQp5r_EADks5ql4pAgaJpZM4JzT8I .

[miztroh-zz]

Yeah, you're going to need an editor that supports Shadow DOM. I ran into this same issue myself. I was looking for an editor that would work in the context of my Polymer projects. I tried Quill and others, but couldn't find any solid entries, so I made An Element For That™. Feel free to check to check it out.

https://github.com/miztroh/wysiwyg-e

[jhchen]

A proper fix would be that Quil has a new constructor which accepts a HTMLElement instead of a String.

Quill does accept an HTMLElement in its constructor. Feel free to read the docs.

However it seems that Quil breaks when passing a HTMLElement and therefore the bug is in Quill.

Feel free to provide details.

[vikrantrathore]

@TimvdLippe thanks for all the help, we have seen the responses and based on teams feedback the issue is with Quill as it doesn't support web components Shandow Dom specification. So will be closing this ticket.

@jhchen Thanks for the responses and help, updated 904 with additional details.

@miztroh Thanks will look into it.

[chuckh]

I created an element polymer-quill which Quill is working with Polymer. You can find it at https://github.com/chuckh/polymer-quill.

Api and Demo: https://chuckh.github.io/polymer-quill/components/polymer-quill