slab/quill

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 (

  • ) into new list items. I want to preserve the
    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