primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
10.3k stars 1.22k forks source link

Editor: "Normal" header style creates an <undefined> tag instead of a <p> tag #5649

Open loic-brtd opened 6 months ago

loic-brtd commented 6 months ago

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

  1. npm install quill@1.3.7 (v2 of Quill has breaking changes)
  2. 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("

Text

");


3. Select text in the editor and apply "Normal" styling to it.
4. The value is now `<undefined>Text</undefined>`.

### Expected behavior

I expect to see : `<p>Text</p>` in the value.
DouglasAR01 commented 3 days ago

Same issue here

Edit: I found a workaround, set the value of the option as an empty string. For example:

<span class="ql-formats">
  <select class="ql-header">
    <option value="1">Título</option>
    <option value="2">Subtítulo</option>
    <option :value="''">Normal</option>
  </select>
</span>