Bullet lists appearing as numbered lists with custom toolbar implementation

[jmaitlandsoto]

After upgrading to v2.0.0 bulleted lists started showing as numbered lists. This works fine on previous versions.

I'm not sure if this has to do with my custom toolbar implementation, but I'll explain it anyway. My use case requires multiple different editors to share a single toolbar which is not supported out of the box. So I built a system that tracks which editor is currently selected, and implemented custom functions that apply formats (bold, italics, color, list, etc.) to the selected text.

This was inspired by the following comment https://github.com/quilljs/quill/issues/633#issuecomment-307709326

To do this I created the toolbar UI which consists of a collection of buttons that each trigger some function that formats the selected text.

Below is the function that applies the bullet format. (The onNumberedList function is almost identical, instead it sets "list" format to "ordered")

  const onBulletedList = React.useCallback(() => {
    if (!currentFormats || !currentEditor) {
      return;
    }

    const range = currentEditor.getSelection();
    if (!range) {
      return;
    }
    currentEditor.formatLine(
      range.index,
      range.length,
      "list",
      currentFormats.list === "bullet" ? false : "bullet"
    );
    setCurrentFormats?.(currentEditor.getFormat());
  }, [currentFormats, currentEditor]);

Steps for Reproduction

1. Install quill v2.0.0
2. Create a Quill editor
3. Apply the list format with value "bullet" via some custom function as shown above

Expected behavior:

To appear as an unordered (bullet) list.

Actual behavior:

Appears as an ordered list.

Platforms:

Firefox 124.0.2, Windows 10 Home

Version:

2.0.0

[c0ldst0rage]

For some reason... v2.0 doesn't use <ul>, it uses <ol> and then specifies that items are bulleted using <li data-list="bullet">" Not only this, but if you have any old v1.6 content that you insert using JavaScript that has <ul> then v2.0 actually sanitises (removes) it, leaving you with nothing and scratching your head. I struggled with this, staring into my code thinking I was doing something wrong. So I've had to pre-treat v1.6 by replacing <ul> with <ol> and then all the <li> with <li data-list="bullet">". This seems like the beginning of a nightmare too, as I believe <code></code> may no longer work either as a <div> is used... I'll need to look into that too. I've done some digging and I can't see a way of calling a function to convert 1.6 text to 2.0 text, that would be a godsend!

[jraoult]

@luin I'm attempting a migration to v2 and I stumble upon the same behaviour which fails one of our regression test. I just want to know if this behaviour is intentional in v2 or a regression so I can act accordingly?

For reference this is what is generated in v2.0.2:

<ol>
  <li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>an
    example
  </li>
</ol>

and what v1 produces:

<ul>
  <li>an example</li>
</ol>

[jmplahitko]

I found that the while the html within the editor is rendering ordered lists instead of unordered lists, using quill.getSemanticHtml() will correctly return unordered list elements. Not sure if this helps any of your use cases, but it does appear to be a bug only in the presentation of the content within the editor.

[jraoult]

@jmaitlandsoto interesting, thanks you for the insight. Let me check if I get the same result, but if I do, then it would be good enough for me indeed.

[jmaitlandsoto]

Thanks for all the input, hopefully someone picks it up and fixes it. I'm surprised this issue isn't getting more traction. I imagine anyone migrating to v2 would notice right away, and any new users of the package would stumble on it eventually.

Fingers crossed 🤞. I'll be staying on v1.3.7 until further notice.

[jttommy]

Having the same issue. I tried cloning the repo to diagnose, but it looks like I needed environment variables to get webpack running. Any idea where I can find those? I can try to work it out.

[sayinmehmet47]

Is there any progress here ?

[Delagen]

Is there any progress here ?

Because styles only affect editor mode with parent class .quill-editor, no way to include styles as default. I just copied some styles in separate scss to implement the same logic as in project.

[jmplahitko]

This can be a workaround:

.ql-editor li[data-list="bullet"] {
	list-style-type: disc;
}