I have encountered an odd CSS issue while using the vue-quill package in my project. Each comment has its own quill editor for replying, and I temporarily set the isOpen prop to true for debugging purposes. This results in a quill editor being displayed underneath every comment by default.
However, I noticed that the snow theme CSS is only applied to the first quill editor, and all subsequent ones are left unstyled.
Let's take a look at my CommentList.vue component:
<template>
<div id="comments">
<p class="font-semibold mb-3">Comments</p>
<div v-if="comments" v-for="comment in comments">
<CommentListItem :comment="comment" :key="comment.id" />
</div>
</div>
</template>
Here's the CommentListItem.vue component structure:
<template>
<div :id="'comment-' + props.comment.id">
<div>
{{ props.comment.content }}
</div>
<util-quill v-model:is-open="isOpen" :comment-id="props.comment.id"></util-quill>
</div>
</template>
And now, let's dive into the UtilQuill.vue component details:
<template>
<div v-if="isOpen" class="quill-editor-wrapper">
<QuillEditor toolbar="#toolbar" theme="snow">
<template #toolbar>
<div id="toolbar">
<button class="ql-image"></button>
<button class="ql-link"></button>
</div>
</template>
</QuillEditor>
</div>
</template>
<script>
import { QuillEditor } from '@vueup/vue-quill'
// CSS styles
import 'quill/dist/quill.snow.css'
export default {
props: ['isOpen'],
setup: (props, { emit }) => {
return { isOpen: props.isOpen };
},
components: {
QuillEditor,
},
};
</script>
I attempted importing the snow theme in my main.scss file within my Nuxt 3 project but the issue remains unresolved. Only the first quill editor appears styled. What could be causing this behavior?
In an effort to troubleshoot, I removed my UtilQuill.vue component and placed the QuillEditor directly inside the v-for loop of my CommentListItem.vue component. Unfortunately, the outcome was unchanged.
It's worth noting that the snow theme CSS should apply universally to all quill editors based on classes, not IDs, which implies that styling should propagate to each instance.
If you have any insights or suggestions on how to rectify this issue, please share them. I've created a playground to demonstrate the problem – feel free to check it out.