Open tylerc opened 3 weeks ago
When embedding Quill inside a custom web component that uses the shadow DOM, Quill exhibits a number of odd behaviors:
Text cursor moves incorrectly when typing the first couple of characters. In this GIF, I type ABC but it comes out BCA:
Some styling options in toolbar do not have any effect:
Also, shortcuts like CTRL+C and CTRL+X for copy/paste do not appear to function at all.
There may be other issues I haven't yet discovered.
Steps for Reproduction
Expected behavior:
Quill should behave the same whether embedded inside Shadow DOM or not.
Actual behavior:
Quill exhibits cursor, toolbar, and keyboard shortcut issues.
Platforms:
Tested on Chrome 125.0.6422.142 on Windows, and Safari 17.5 on iOS.
Version:
Quill 2.0.2
2.0.2
The fiddle to reproduce these issues is very small, it is merely this code:
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script> <h1>Quill here:</h1> <quill-component></quill-component> <script> class QuillComponent extends HTMLElement { initialized = false; constructor() { super(); this.attachShadow({mode: 'open'}); this.shadowRoot.innerHTML = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" /><div><div class="quill-inside" style="height: 200px;"></div></div>'; } connectedCallback() { if (!this.initialized) { this.initialized = true; new Quill(this.shadowRoot.querySelector('.quill-inside'), { theme: "snow", }); } } } customElements.define('quill-component', QuillComponent); </script>
When embedding Quill inside a custom web component that uses the shadow DOM, Quill exhibits a number of odd behaviors:
Text cursor moves incorrectly when typing the first couple of characters. In this GIF, I type ABC but it comes out BCA:
Some styling options in toolbar do not have any effect:
Also, shortcuts like CTRL+C and CTRL+X for copy/paste do not appear to function at all.
There may be other issues I haven't yet discovered.
Steps for Reproduction
Expected behavior:
Quill should behave the same whether embedded inside Shadow DOM or not.
Actual behavior:
Quill exhibits cursor, toolbar, and keyboard shortcut issues.
Platforms:
Tested on Chrome 125.0.6422.142 on Windows, and Safari 17.5 on iOS.
Version:
Quill
2.0.2
The fiddle to reproduce these issues is very small, it is merely this code: