Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to prevent quill from converting <br /> to new <li> items in list elements? #4385

Open
bartek-p-adRespect opened this issue Aug 22, 2024 · 0 comments

Comments

@bartek-p-adRespect
Copy link

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

  • Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Labels
    None yet
    Projects
    None yet
    Development

    No branches or pull requests

    1 participant