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?
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
}
}
}
});