Quill.js Resets Text to Normal on Enter Instead of Keeping Selected Size

Question

I’m using Quill.js and need to:

1. Make "small" the default text size when the editor loads.
2. Ensure the text size persists when the user types.
3. Keep the selected size after pressing Enter (right now, it resets to "normal" instead of keeping the selected size).

Problem:

• The editor starts with "small" ✅.
• If the user selects another size, it works while typing ✅.
• When the user presses Enter, the new line always switches to "normal" ❌ instead of keeping the selected size.
• The toolbar still shows the previously selected size, but newly typed text is actually "normal."

Code:

html:

<div class="col-12">
    <div class="form-group">
        <label for="editor-container-ar">Content Arabic
           <span class="required" style="color: red">*</span></label>
<div id="editor-container-ar" style="height: 300px;"
    class="ql-container flex-snow"></div> </div></div>

javascript:

<script type="text/javascript">
    $(document)
            .ready(
                    function() {
                        var contentInput = document.getElementById('contentAr');

                        // Initialize Quill editor
                        var quillAr = new Quill('#editor-container-ar', {
                            theme : 'snow',
                            modules : {
                                toolbar : [
                                    [ {
                                        'font' : []
                                    } ],
                                    [ {
                                        'size' : [ 'small', 'normal', 'large',
                                            'huge' ]
                                    } ],
                                    [ 'bold', 'italic', 'underline',
                                        'strike' ], [ {
                                        'color' : []
                                    }, {
                                        'background' : []
                                    } ], [ {
                                        'script' : 'sub'
                                    }, {
                                        'script' : 'super'
                                    } ], [ {
                                        'header' : 1
                                    }, {
                                        'header' : 2
                                    } ], [ 'blockquote', 'code-block' ],
                                    [ {
                                        'list' : 'ordered'
                                    }, {
                                        'list' : 'bullet'
                                    } ], [ {
                                        'indent' : '-1'
                                    }, {
                                        'indent' : '+1'
                                    } ], [ {
                                        'direction' : 'rtl'
                                    } ], [ {
                                        'align' : []
                                    } ], [ 'link', 'image', 'video' ],
                                    [ 'clean' ] ]
                            }
                        });


                        console.log(quillAr);

                    let userSelectedSize = 'small'; // Track the user’s selected size

                    // ✅ Force "Small" as the default size on load
                    setTimeout(function () {
                        let editorContent = quillAr.root.innerHTML.trim();
                        console.log('Editor content:', editorContent);
                        if (editorContent === "<p><br></p>") {
                            quillAr.root.innerHTML = '<p><span class="ql-size-small"><br></span></p>'; // Ensure small visually
                        }
                        quillAr.format('size', 'small'); // Make sure new text starts as "small"
                    }, 100);

                    // ✅ Detect when the user selects a size
                    quillAr.on('selection-change', function (range) {
                        console.log('Selection changed:', range);
                        if (range) {
                            let format = quillAr.getFormat(range);
                            console.log('Format:', format);
                            userSelectedSize = format.size !== undefined ? format.size : 'normal'; // Store user-selected size
                        }
                    });

                    // ✅ Ensure newly typed text follows the selected size
                    quillAr.on('text-change', function (delta, oldDelta, source) {
                        console.log('Text changed:', delta, 'Source:', source);
                        if (source === 'user') {
                            let format = quillAr.getFormat();
                            console.log('Current format:', format, 'User selected size:', userSelectedSize);
                            if (!format.size || format.size !== userSelectedSize) {
                                quillAr.format('size', userSelectedSize); // Apply user-selected size
                            }
                        }
                    });

                    // ✅ Keep the selected size when pressing Enter
                    quillAr.keyboard.addBinding({ key: 'Enter' }, function (range) {
                        setTimeout(() => {
                            let newSize = userSelectedSize || 'small'; // Ensure we have a size

                            // Move cursor to the new line and apply formatting
                            quillAr.formatText(range.index, 1, 'size', newSize);

                            console.log('New line formatted to:', newSize);
                        }, 0);
                    });



                    // ✅ Force "Small" to always use <span>
                    quillAr.clipboard.addMatcher(Node.ELEMENT_NODE, function (node, delta) {
                        console.log('Pasted content:', node, delta);
                        delta.ops.forEach(op => {
                            if (op.attributes && !op.attributes.size) {
                                console.log('Applying small size to:', op);
                                op.attributes.size = 'small'; // Ensure "small" gets a <span>
                            }
                        });
                        return delta;
                    });
....
</script>

Issue:

• Even with this code, pressing Enter resets the text to "normal" instead of keeping the selected size.
• The toolbar still shows the correct size, but the actual text formatting is reset.