Quill Editor takes a really long time to load when initializing with insertContent and a lot of text

[sferoze]

I have an application which allows users to take notes.

I use Quill as the editor and save the contents when the user is done. Next time the user loads the app, I initialize Quill again and set its contents to the saved document using the setContents function.

Athough if the text content is more than 1 letter page, the Quill editor takes a really long time to load (like about a minute or more!). By comparison using a regular content editable div loads instantly with the same amount of text. So something is wrong here.

Here is the code I am using to initialize the Quill Editor, pretty standard stuff:

 @editor = new Quill(@find('.quill-editor'),
      modules:
        'authorship':
          authorId: username
          enabled: true
        toolbar:
          container: @find('.quill-toolbar')
        "link-tooltip": true,
        'image-tooltip': true
      theme: "snow"
    )

self.editor.addStyles
    'body':
      'height': 'auto'
      'min-height': '50px'
      'overflow': 'hidden'
      'font-family': '"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif'
      'letter-spacing': '0.008rem'
      'font-weight': '400'
      'line-height': '1.5'
      'font-size': '14px'
    'img':
      'max-width': '80% !important'
    '.editor-container':
      'overflow': 'hidden'
    '.spacer-container':
        'height': '20px'
        'display': 'block'
        'clear': 'both'

self.editor.addContainer('spacer-container')
self.$('.quill-editor').height(self.editor.root.ownerDocument.body.scrollHeight)

note = Notes.findOne({_id: self.data._id}, {fields: {fullDelta: 1}})
self.editor.setContents note.fullDelta

[jhchen]

Is there a sample note whose Delta contents you can post? This might be related to #175 but this seems to be even slower.

[sferoze]

Here is the link to the Delta contents that I am trying to load in my editor (extracted using getContents()): http://memri.meteor.com/public/note/a3zLTXKMyzezDCfpr

Here is the link to the same contents but in HTML. I extracted the html using Quill's Editor using getHTML: http://memri.meteor.com/public/note/PCFDCp2xGFgAGGGH8

both setHTML or setContents seem to take equally long time to load this note.

[jhchen]

I tried the content on the new v0.18.0 release and it seems to fixed now

[sferoze]

Hi @jhchen

I just tried the update. It works fast now, but it is not backwards compatible which is a big bummer! The quill editor will not load the saved full Delta with the new version, but as soon as I replace the js file with version v0.17.4 the contents load just fine.

So the issue is the the new v.0.18.0 will not load saved fullDeltas from previous version, so this new version is not backwards compatible. Can this be fixed? Thanks!

[sferoze]

@jhchen Ah I just read the comment for the v0.18.0 commit and read about the upgrade guide. Thanks I will be taking a look at the upgrade guide. Thanks!

[Pushkraj19]

On slower PCs, the textarea contents might not be loaded immediately and you will get truncated data, because document.readyState when you initialise your JS wrapper (CodeMirror, Quill, etc.) is not loaded yet.

The correct way of initialising a textarea wrapper is:

function initQuill() {
    const editorInstance = new Quill("...");
}

// In your hook
if (document.readyState == "complete") {
    initQuill();
} else {
    document.addEventListener("readystatechange", () => {
        if (document.readyState == "complete") {
            initQuill();
        }
    });
}

[shaikhsameershabbir]

same issue with me I am adding click event it it and uploading the image and after upload i am trying to insert img tag with my server link of image while inserting img tag it shows not initialized

import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
import React, { useRef, useCallback, useState, useEffect } from 'react';
import ReactQuill, { Quill } from 'react-quill';

const QuillNoSSRWrapper = dynamic(() => import('react-quill'), {
    ssr: false,
    loading: () => <p>Loading ...</p>,
}) as typeof ReactQuill;

const QuillEditor: React.FC<{ onChange: (content: string) => void }> = ({ onChange }) => {
    const quillRef = useRef<ReactQuill>(null);
    const [editorReady, setEditorReady] = useState(false);

    useEffect(() => {
        if (quillRef.current) {
            setEditorReady(true);
        }
    }, []);

    const handleImageUpload = useCallback(() => {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();

        input.onchange = async () => {
            const file = input.files?.[0];
            if (file) {
                const formData = new FormData();
                formData.append('image', file);
                formData.append('Domain', 'Moa');
                formData.append('Title', `image_${Date.now()}.${file.name.split('.').pop()}`);
                formData.append('Folder', 'images');

                try {
                    const response = await fetch('EndPoint
', {
                        method: 'POST',
                        body: formData,
                    });

                    if (response.ok) {
                        const result = await response.json();
                        const imageUrl = `endpoint${result}`;
                        console.log(imageUrl);

                        const quill = quillRef.current?.getEditor();
                        if (quill) {
                            const range = quill.getSelection(true);
                            quill.insertEmbed(range.index, 'image', imageUrl);
                            quill.setSelection(range.index + 1);
                        } else {
                            console.error('Quill editor is not initialized');
                        }
                    } else {
                        console.error('Error uploading image:', response.statusText);
                    }
                } catch (error) {
                    console.error('Error uploading image:', error);
                }
            }
        };
    }, []);

    const modules = {
        toolbar: {
            container: [
                [{ header: '1' }, { header: '2' }, { font: [] }],
                [{ size: [] }],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
                ['link', 'image', 'video'],
                ['clean'],
            ],
            handlers: {
                image: handleImageUpload,
            },
        },
        clipboard: { matchVisual: false },
    };

    const formats = [
        'header', 'font', 'size', 'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent', 'link', 'image', 'video'
    ];

    return (
        <div className="my-4">

            <QuillNoSSRWrapper
                ref={quillRef}
                modules={modules}
                formats={formats}
                theme="snow"
                onChange={(content, delta, source, editor) => onChange(editor.getHTML())}
            />

        </div>
    );
};

export default QuillEditor;