Unordered list icon in the toolbar produces an ordered list element

Steps for Reproduction

1. Visit

https://stackblitz.com/edit/typescript-pdcugs

1. Step Two

Open the console and look at the list element

Expected behavior:

That the unordered list should have <ul> tag

Actual behavior:

The unordered list has a <ol> tag which is a ordered list. It looks like a unordered list in the editor, because of the replaced numbers with bullets, but pasting out the html content makes it to an ordered list.

Platforms:

Chrome - Version 79.0.3945.130 (Official Build) (64-bit)

Version:

2.0.0-dev.4

[47arathore]

I have written a function to convert the

tag to
. Use this just at the place where you take data from quill and store it.

correctULTagFromQuill = (str) => {
    if (str) {
      let re = /(<ol><li data-list="bullet">)(.*?)(<\/ol>)/;
      let strArr = str.split(re);

      while (
        strArr.findIndex((ele) => ele === '<ol><li data-list="bullet">') !== -1
      ) {
        let indx = strArr.findIndex(
          (ele) => ele === '<ol><li data-list="bullet">'
        );
        if (indx) {
          strArr[indx] = '<ul><li data-list="bullet">';
          let endTagIndex = strArr.findIndex((ele) => ele === "</ol>");
          strArr[endTagIndex] = "</ul>";
        }
      }
      return strArr.join("");
    }
    return str;
  };


let content = this.correctULTagFromQuill(this.state.quill.root.innerHTML);

[paulm17]

@47arathore Thanks for your efforts. I’m sure future viewers would find that helpful.

Like @kjantzer I moved over to tiptap. It’s so much easier and much more powerful functionality. In-fact I’m able to write my own extensions much more easily. I recommend everyone to switch over. I consider QuillJS to be legacy software. 😄