Quill.getBounds function fails with error Uncaught TypeError: leaf.domNode.getBoundingClientRect is not a function

[bdovh]

Quill.getBounds function fails with error Uncaught TypeError: leaf.domNode.getBoundingClientRect is not a function when try to use the library inside the LWC in Salesforce

quill.js:2963 Uncaught TypeError: leaf.domNode.getBoundingClientRect is not a function
    at Selection.getBounds (quill.js:2963)
    at eval (eval at getBounds (quill.js:1), <anonymous>:1:16)
    at Quill.getBounds (quill.js:1264)
    at Repro.onTextChange (repro.js:63)
    at Emitter.emit (quill.js:8571)
    at Emitter.emit (quill.js:1893)
    at Quill.modify (quill.js:1628)
    at Emitter.eval (quill.js:1122)
    at Emitter.emit (quill.js:8570)
    at Emitter.emit (quill.js:1893)

Steps for Reproduction

1. Create LWC component with the following code
   repro.html:

<template>
    <div lwc:dom="manual" class="mention-container ql-editor slds-rich-text-area__content slds-text-color_weak slds-grow" contenteditable="true">
    </div>
</template>

repro.js:

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import QuillStaticResource from '@salesforce/resourceUrl/Quill';
export default class Repro extends LightningElement {
    renderedCallback() {
        if (!this.firstRender) {
            this.firstRender = true;
            Promise.all([
                //loadScript(this, QuillMention + '/src/quill.mention.js'),            
                loadScript(this, QuillStaticResource + '/quill.js'),
                loadStyle(this, QuillStaticResource + '/quill.snow.css')
            ])
                .then(() => {
                    this.initQuill(this.template.querySelector('div.mention-container'), this);
                })
                .catch(error => {
                    // eslint-disable-next-line no-alert
                    alert(error.message);
                });
        }
    }

    initQuill(nodeElement) {
        // eslint-disable-next-line no-undef
        let quill = new Quill(nodeElement, this.options);
        this.quill = quill;
        quill.on("text-change", this.onTextChange.bind(this));
    }

    onTextChange() {
        this.quill.getBounds(0);
    }
}

repro.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>51.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

2. Add this component to a FlexiPage and open it.
3. Open debugger and set breakpoint on line this.quill.getBounds(0);
4. Input any character into container.
5. In the debugger javascript console try to execute code this.quill.getBounds(0);
6. See the errror

Expected behavior:
There should not be an error when quill library is added to Salesforce LWC component.
Actual behavior:
It fails
Platforms:
Salesforce LWC. Chrome, Mac

Version:
"1.3.6"

[bdovh]

[igorbuts]

I also encounter this issue in my app. Is there any estimate of when it could be fixed?

[kblizeck]

Still encountering this issue in my Nextjs app, using the latest version of quill. Any estimates here?

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏