Quill editor lists (bulleted list and ordered list) do not render

[jelyware]

Discussed in #4245

^{Originally posted by ChabbehAymen June 7, 2024}
screen shot below shows the issue:

The text in the middle should appear like this if numbered (ordered type):

1. line one
2. line tow
3. line tree

OR like this if unordered (bullet type):

• line one
• line tow
• line tree

---

This issue appears to be due to quill v2 no longer providing support for the list bullet or ordered types. I compared the packages/quill/formats/list.ts files from quill v1 with that of quill v2.

quill v1:

  static formats(domNode) {
    if (domNode.tagName === 'OL') return 'ordered';
    if (domNode.tagName === 'UL') {
      if (domNode.hasAttribute('data-checked')) {
        return domNode.getAttribute('data-checked') === 'true' ? 'checked' : 'unchecked';
      } else {
        return 'bullet';
      }
    }
    return undefined;
  }

  constructor(domNode) {
    super(domNode);
    const listEventHandler = (e) => {
      if (e.target.parentNode !== domNode) return;
      let format = this.statics.formats(domNode);
      let blot = Parchment.find(e.target);
      if (format === 'checked') {
        blot.format('list', 'unchecked');
      } else if(format === 'unchecked') {
        blot.format('list', 'checked');
      }
    }

    domNode.addEventListener('touchstart', listEventHandler);
    domNode.addEventListener('mousedown', listEventHandler);
  }

quill v2:

  constructor(scroll: Scroll, domNode: HTMLElement) {
    super(scroll, domNode);
    const ui = domNode.ownerDocument.createElement('span');
    const listEventHandler = (e: Event) => {
      if (!scroll.isEnabled()) return;
      const format = this.statics.formats(domNode, scroll);
      if (format === 'checked') {
        this.format('list', 'unchecked');
        e.preventDefault();
      } else if (format === 'unchecked') {
        this.format('list', 'checked');
        e.preventDefault();
      }
    };
    ui.addEventListener('mousedown', listEventHandler);
    ui.addEventListener('touchstart', listEventHandler);
    this.attachUI(ui);
  }

  format(name: string, value: string) {
    if (name === this.statics.blotName && value) {
      this.domNode.setAttribute('data-list', value);
    } else {
      super.format(name, value);
    }
  }
}

quill v2 appears to be missing the domNode.tagName checks to ensure that the list type is correctly defined, e.g. if (domNode.tagName === 'OL') return 'ordered';

[jelyware]

NOTE: This issue may be related to #4273.

[jelyware]

This issue is also related to #4103 which points to KillerCodeMonkey/ngx-quill#1888 and let the user know that [innerhtml] and quill view html is broken in quill v2

• https://github.com/KillerCodeMonkey/ngx-quill/tree/v26.0.5?tab=readme-ov-file#quillviewhtmlcomponent---using-an[…]innerhtml-deprecated-with-quill-v2

[jelyware]

CLOSING this issue since it is already being addressed here #4103