primevue icon indicating copy to clipboard operation
primevue copied to clipboard

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

Open loic-brtd opened this issue 9 months ago • 1 comments

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 [email protected] (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("<h2>Text</h2>");
</script>

<template>
  <Editor v-model="value" editorStyle="height: 80px" />
  <pre><code>{{ value }}</code></pre>
</template>
  1. Select text in the editor and apply "Normal" styling to it.
  2. The value is now <undefined>Text</undefined>.

Expected behavior

I expect to see : <p>Text</p> in the value.

loic-brtd avatar Apr 26 '24 12:04 loic-brtd