Primevue Editor bullet list option in toolbar adds ordered list

[AlexBindevald]

Hello,

I have a problem when using Primevue Editor in my very basic Vue application. Without any modifications to Editor component, the bullet list option in toolbar creates ordered list instead of unordered list. In primevue homepage and stackblitz it works fine. What could be the issue?

Steps I have done so far:
Created new Vue 3 app, installed primevue and quill according to instructions

[cortvi]

Same thing here

[netkreacije]

Same here, did anyone maybe found a solution for this issue?

[asakahn]

More information here:
slab/quill#2614 (comment)

[asakahn]

The new Quill Editor v2 uses <ol> tags even for unordered (bullet) lists and uses the data-list='bullet' attribute on the <li> to determine whether it's an ordered or bullet list. More info: slab/quill#3957 (comment)

Currently, PrimeVue's Editor component style file node_modules/primevue/editor/style/index.mjs has this code, which is automatically adding the numbered list to all <li> tags:

.ql-editor ol li:before {\n content: counter(list-0, decimal) '. ';\n}

Another line of CSS should be added like so to make it more specific to the attribute type:

.ql-editor ol li[data-list="bullet"]::before { content: '\2022'; }

A temporary fix for people coming across issue is this:

Editor.vue

<script setup lang="ts">
import Editor from 'primevue/editor';
</script>

<template>
<Editor />
</template>

<style>
.ql-editor ol li[data-list="bullet"]::before {
    content: '\2022';
}
</style>