Search code examples
javascriptquill

How to prevent Quill from switching to <p> on ENTER in header mode?


I'm using the Quill 2.0.2 JavaScript library to edit content with different heading styles (h1 to h4). Currently, when I'm typing with the h2 style and press ENTER, Quill switches to the "Normal" style (<p>). Instead, I want it to switch to the h3 style.

I've tried customizing the keyboard bindings, but with no success, and doesn't seems it is the right approach. How can I make Quill keep the header format and switch from h2 to h3 when ENTER is pressed?


Solution

  • I was not able to prevent quill from doing this, but I use the text-change event to identify the new line, and then modify the style of the new line according to the style of the previous line.

       quill = new Quill('#editor', {
            theme: 'snow',
        });
    
        quill.on('text-change', (delta, oldDelta, source) => {
            if (source == 'api') {
                // do nothing
    
            } else if (source == 'user') {
    
                // Target the delta that represent the simple Enter Key
                if (delta.ops.length === 3 && delta.ops[1].insert === '\n') {
    
                    let from = delta.ops[0].retain; // character index from where is initiated the enter key (previous line)
                    let to = from + 1; // First char index of the new line
    
                    let previousLineFormat = quill.getFormat(from);
                    let headerNb = previousLineFormat.header;
    
                    if (headerNb === 2) { // h2
                        this.quill.formatLine(to, 1, 'header', 'h3'); // --> Become h3
                    }
                    if (headerNb === 3) { // h3
                        this.quill.formatLine(to, 1, 'header', 'h4'); // --> Become h4
                    }
                }
            }
        });