primevue
primevue copied to clipboard
Editor: "Normal" header style creates an <undefined> tag instead of a <p> tag
Describe the bug
Hi!
In the Editor component with default configuration, when applying "Normal" styling to a text, it renders as <undefined>Text</undefined>
instead of <p>Text</p>
.
I think this problem comes from how the default config for the Quill toolbar, which is configured here : https://github.com/primefaces/primevue/blob/cc9fa3891c5f326a7d9a49b53b5bb81b7672b7a3/components/lib/editor/Editor.vue#L6-L10
The value
for the "Normal" style should be value=""
instead of value="0"
, same for defaultValue=""
.
I didn't find any documentation about this on https://v1.quilljs.com/docs/modules/toolbar but I found an example here https://stackoverflow.com/a/56846200.
Reproducer
https://stackblitz.com/edit/primevue-issue-editor-undefined-tag?file=src%2FApp.vue
PrimeVue version
3.47.2
Vue version
3.x
Language
ALL
Build / Runtime
Vue CLI App
Browser(s)
No response
Steps to reproduce the behavior
-
npm install [email protected]
(v2 of Quill has breaking changes) - Add a PrimeVue Editor component with default config, initialized with an h2 tag and display its value on the page :
<script setup>
import { ref } from 'vue';
import Editor from 'primevue/editor';
const value = ref("<h2>Text</h2>");
</script>
<template>
<Editor v-model="value" editorStyle="height: 80px" />
<pre><code>{{ value }}</code></pre>
</template>
- Select text in the editor and apply "Normal" styling to it.
- The value is now
<undefined>Text</undefined>
.
Expected behavior
I expect to see : <p>Text</p>
in the value.