How to prevent quill from converting <br /> to new <li> items in list elements?
bartek-p-adRespect opened this issue · 0 comments
I am experiencing an issue where Quill automatically converts
tags inside list elements (
tags as line breaks within the same list item, instead of creating a new list item.
My quill editor initializes when i click on a given element, and i destroy it when bluring or clicking on other element that can initialize editor on itself.
I've created a snippet that adds a custom binding for Shift+Enter inside lists and adds
instead of creating a new list item.
I've created a custom br element like this:
let Embed = Quill.import('blots/embed');
class CustomBR extends Embed {};
CustomBR.blotName = 'custombr';
CustomBR.tagName = 'br';
CustomBR.className = 'custombr';
Quill.register(CustomBR);
My quill editor is set up as follows:
currentEditor = new Quill(editableTarget, {
modules: {
toolbar: toolbarOptions,
keyboard: {
bindings: {
linebreak: {
key: 13,
shiftKey: true,
handler: function(range, context) {
// If we're inside a list, insert a <br> tag instead of creating a new list item
if (context.format.list) {
this.quill.insertEmbed(range.index, 'custombr', true, Quill.sources.USER);
this.quill.setSelection(range.index + 1, Quill.sources.SILENT);
return false; // prevent the default behavior
}
// Otherwise, allow default behavior
return true;
}
}
}
}
}
});
It seems that Quill's internal handling of lists automatically normalizes the content by converting
tags into new list items when focusing the editor. I need a way to prevent this behavior so that line breaks can be maintained inside list items. Is there a way to prevent it from doing so just for the list elements?
Quill version: 1.3.7
Browser: Chrome
OS: Windows 11