Cannot load quill in polymer component

[vikrantrathore]

We were trying to include polymer in polymer web component, but it throws an error.
Does quill work with web components and polymer library?

Steps for Reproduction
Add the following lines to your polymer component:

<dom-module id="my-view3">
    <template>
            <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',

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

Expected behavior: [expected]
An editor in the my-view3 component.

Actual behavior: [actual]
Just the plan text.
Error in the logs is "Invalid Quill container line 10283

Platforms: [ex. Chrome 48 on Mac 10.11]
Chrome, Mac 10.11

Version: [version]

[jhchen]

Right before you pass '#editor' into Quill, what does console.log(document.querySelector('#editor')) show?

[benbro]

A working polymer example
https://plnkr.co/edit/KrymvseC04NUdRdmq3Hz?p=preview

[vikrantrathore]

@jhchen it shows null, which is correct so as specified by benbro it needs to be accessed as this.$.editor (due to local dom). But in that case it cannot load the styles due to polymer restriction on External Styles, So it still doesn't work properly inspite of changing #editor to this.$.editor

[benbro]

@vikrantrathore external styles still works in polymer (but it's deprecated):
https://plnkr.co/edit/maMqUxJ6RFZbuqFdbBb5?p=preview

Not sure how to use "style modules"
In any case, I think this is a polymer question and out of scope of quill.

[vikrantrathore]

@benbro Its not just a polymer question since quill works on adding dom nodes, its relevant for quill as well. Quill in its current form will not work with webcomponents specification directly implemented in browser, it will only work with polyfilles using webcomponents-lite.js.

Also the way its implemented it will make it hard to convert into web components which can directly be used within react, angular or other frameworks.

[jhchen]

@vikrantrathore Can you post code that does not use Polymer that demonstrates Quill not working in Chrome, which has a stable implementation of all web component specs? I will reopen when it is demonstrated this has nothing to do with Polymer.

[TimvdLippe]

The problem here is that the styles defined by Quill assume access to the whole DOM tree. However, the new shadow dom specification (which is used in Polymer) defines that styles do not leak accross the shadow-root boundary. Therefore Quill is incompatible with shadow dom, not Polymer per se. For more information see the recent blog as it is shipped in Chrome 53: http://blog.chromium.org/2016/08/chrome-53-beta-shadow-dom.html. You can read a guide at https://developers.google.com/web/fundamentals/primers/shadowdom/

[jhchen]

The problem here is that the styles defined by Quill assume access to the whole DOM tree.

Can you give an example of Quill doing this?

[TimvdLippe]

https://github.com/quilljs/quill/blob/develop/core/quill.js#L363

document.querySelector does not traverse beyond shadow boundaries and therefore can not find elements inside the shadow dom.

[jhchen]

This is a convenience that allows you to do new Quill("#editor") instead of new Quill(myDOMNodeWhereverItIs) and documented in the project website. This was the source of @vikrantrathore 's original issue, but I'm not sure the lack of such conveniences makes Quill fundamentally incompatible with Web Components.

If the discussion here is not that Quill if fundamentally incompatible, but that it is currently inconvenient for early adoption of a draft web spec, early web components adopters are encouraged to contribute.

[vikrantrathore]

@jhchen The source of my original issue was quill not working with web components library. So based on your suggestion opened a ticket with polymer.

But indeed the issue is with quilljs itself not following the Web Component standards, as it doesn't work with W3C's web components Shadow Dom specification. Probably you should have kept the ticket open if you are expecting a contribution, otherwise people won't know that quill doesn't work with web components.

[jhchen]

1. I never suggested opening a ticket on the Polymer project blaming them.
2. I'm still waiting for code demonstrating Quill not working with web components, not any particular library, beyond inconveniences.

[vikrantrathore]

1. It wasn't a blame, the ticket was opened with Polymer project based on responses above check the message from @benbro . Indeed one of the Polymer community member responded to my tickets and also updated this ticket with details rather then just closing the ticket on Polymer list, which I will close given they have at least resolved it for me. I can understand if you do not want to tackle it expecting a contribution to fix it, probably too much on the plate before 1.0.0 magic release.
2. Indeed the very first code in this ticket still doesn't work. If the above component is used as part of other web components its not displayed at all unless Quill js is not imported via src in the the new component again, which means if quill is used in 5 different places in a progressive single page app (SPA) the js library will be downloaded 5 times. This is not how web components work. Also styles for toolbar needs to re-written otherwise cannot use it in Chrome.

So in my view this ticket is unresolved and not just minor inconvenience, still thanks for all the help and responses really appreciate it.

[TimvdLippe]

If I understand the responses in this thread (keep in mind I have zero experience with Quill) it seems you have to replace '#editor' with this.$.editor and then it should work?

[jhchen]

@TimvdLippe Yes and @benbro provided a demonstration but apparently for @vikrantrathore expected more.

[VoxelPerfect]

It is obvious that Polymer does not "like" external libraries with separate CSS files. That said, @jhchen quill.js compatibility with frameworks such as Polymer, is not those frameworks' responsibility.

The provided example is based on a deprecated feature of Polymer and using a style module does not seem to work out of the box. I will invest a few more hours on this but if it doesn't work I will have to move on to an alternative editor...

If I do make it work, then I will definitely share the solution here.

[jhchen]

@VoxelPerfect How is one supposed to styles at all? It is bad practice to inline styles; it is against many websites' security policies to dynamically create <style> nodes under Content Security Policy. What options remain? It should also be noted external stylesheets are utilized by some of the most popular libraries that exist, such as Bootstrap and jQuery UI.

[VoxelPerfect]

@jhchen Web Components are based on a very specific philosophy: each component is independent and all its CSS, HTML and Javascript code is encapsulated in one file. In a few months maybe a little bit more, most modern browsers will support this natively without the need of polyfills such as Polymer. React and Angular follow similar approaches.

By the way... the oldest and most popular HTML editor, does have a polymer wrapper provided by a third-party developer... :-)

That said, every product is designed for a specific target group; therefore, I totally respect your choices. You cannot satisfy everyone.

[benbro]

A demo of quill polymer element with scoped styles:
https://plnkr.co/edit/rlysj0CzZl9xq33nAySp?p=preview

I had to add ":host ::content" to workaround a polymer bug when styling dynamic elements.
A third party polymer-quill package can just load quill and add a task to generate the quill-styles dom-module

[chuckh]

@benbro thanks for quill polymer demo!!! 👍 Everything worked fine except when I added link.

When I try to add a link I get this error:

VM1905 quill.js:9420 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at SnowTooltip.position (VM1905 quill.js:9420)
    at SnowTooltip.edit (VM1905 quill.js:9872)
    at Toolbar.link (VM1905 quill.js:10041)
    at HTMLButtonElement.<anonymous> (VM1905 quill.js:8674)position @ VM1905 quill.js:9420edit @ VM1905 quill.js:9872link @ VM1905 quill.js:10041(anonymous) @ VM1905 quill.js:8674

When I click on existing link I get this error:

VM1905 quill.js:9420 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at SnowTooltip.position (VM1905 quill.js:9420)
    at Emitter.<anonymous> (VM1905 quill.js:10102)
    at Emitter.emit (VM1905 quill.js:4142)
    at Emitter.emit (VM1905 quill.js:3972)
    at Selection.update (VM1905 quill.js:5792)

You can try it here:
https://plnkr.co/edit/Lpxoqo2YNgWXZE0TbMi1?p=preview

[benbro]

@chuckh I've updated the plunker example.

• Added height to the editor container:

#editor {
    height: 400px;
}

• Added bounds config.
  It won't be needed in the next quill release.
  See Set the tooltip bounds container to document.body if undefined #944

var quill = new Quill(this.$.editor, {
     modules: {
         toolbar: true
     },
     bounds: document.body,
     theme: 'snow'
 });

[VoxelPerfect]

Great job @benbro !

That could become the official "wrapper" for Polymer in Quill website / repo. And then "wrappers" for Angular and React could follow. Web app development has changed a lot the last couple of years.

[chuckh]

@benbro thank you. You inspired me to create polymer-quill element. You can find it at https://github.com/chuckh/polymer-quill. To install do a bower install --save polymer-quill. Demo and API docs are at: https://chuckh.github.io/polymer-quill/.

I based it on @benbro Plunker at https://plnkr.co/edit/rlysj0CzZl9xq33nAySp?p=preview and @jhchen Codepen at http://codepen.io/quill/pen/RRYBEP.

PTAL.

[gersonfa]

Someone have the implementation in angular 2?

[chuckh]

polymer-quill has just been updated to Quill 1.1.8. Lots more demos, added Quill HTML render see at https://chuckh.github.io/polymer-quill/components/polymer-quill/#polymer-quill-html-render.

Learn more at: https://beta.webcomponents.org/element/chuckh/polymer-quill.

[herberthobregon]

@chuckh Bold and italic dosent work

[skcorroh]

@chuckh Is there a Polymer 2.0 version? running the command bower install --save polymer-quill (as stated by the repo) is returning an

ECONFLICT Unable to find suitable version for iron-resizable-behavior