When using data from quill 1.6 in 2.0 bullet points disappear.

[LOUKOUKOU]

In this image I've got the text in Strapi which is quill 1.6, here you can see I've added the lists.

Then here we have it being loaded in our front-end which is 2.0.0-rc.2

As you can see, it breaks the ordered list, and straight up removes the unordered list. This is a problem because we have a lot of data with the 1.6 editor that now needs to be used by the 2.0 editor. We can loose data this way.

Here is the code we use to read it in, in the front end.

[luin]

The HTML structure has changed in v2 but the best practices is to pass Delta values between v1 and v2 (and also for the same version editors):

quillEditor.value.setContents(v1Editor.getContents())

[immortaly007]

A workaround seems to be to use quillEditor.clipboard.dangerouslyPasteHTML(value); , instead of setting the innerHTML. Or at least, that way the old <ul> blocks are rendered correctly (note that you might have to clear the history after this).

Note that setting HTML without sanitization is not a security best practice.

However, quill will update the <ul> tags to be <ol> tags. So it's not really backwards compatible if you also use the HTML content outside of Quill. In our case, we use quill in a CMS-like situation and render the generated HTML in an app. So we have to update the styling in the app to render <ol> with bullets instead of numbers in case the li tag has the data-list="bullet" attribute like so: <li data-list="bullet">. This is especially annoying because people using the old version of the app will see "broken" styling.

[blumewas]

Another possible work-around (I am not sure if this is the intended way) if you have the data in html format would be to register a legacy list format which uses <ul> as container.

import type Delta from 'quill-delta';
import Quill from 'quill';

import { ListContainer } from 'quill/formats/list';
import ListItem from 'quill/formats/list';
import type Scroll from 'quill/blots/scroll';

/**
 * Register custom blot for legacy list.
 * This is a workaround for the changed list format in Quill 2.0
 *
 * @class LegacyListContainer
 * @extends {ListContainer}
 */
class LegacyListContainer extends ListContainer {
    static blotName = 'legacy-list-container';
    static tagName = 'UL';
}

class LegacyListItem extends ListItem {
    static blotName = 'legacy-list-item';
    static tagName = 'LI';

    static register() {
        Quill.register(LegacyListContainer);
    }

    constructor(scroll: Scroll, domNode: HTMLElement) {
        super(scroll, domNode);

        if (!domNode.getAttribute('data-list')) {
            domNode.setAttribute('data-list', 'bullet');
        }
    }
}

LegacyListItem.requiredContainer = LegacyListContainer;
LegacyListContainer.allowedChildren = [LegacyListItem];

Quill.register('formats/legacy-list', LegacyListItem);

I must admit that I've tried to transform the list to the new format but I am not sure on how to approach this.

[wpaap]

This not only happens in Quill 1.6, this issue is still present in Quill 2.0.2.

The data-list="bullet" is missing from the list-items when the html is rendered. Resulting in a missing :before on the inner spans, that contain the content with the bullet.

My "stupid" fix for now is:

/* START: Fix for https://github.com/slab/quill/issues/4103 */
.ql-editor ol li {
  list-style-type: disc;
  margin-block-start: 0px;
  margin-block-end: 0px;
}

.ql-editor li[data-list="bullet"] > .ql-ui:before {
  content: "";
}
/* END: Fix */

[hashan-m]

@luin do we have any update regarding this issue? :)

[zaslavskyv]

Ha. And you call that "WYSIWYG" :D