Add form support to `Editor`

packages/primevue/src/editor/BaseEditor.vue

@@ -1,12 +1,11 @@
 <script>
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import EditorStyle from 'primevue/editor/style';
 
 export default {
     name: 'BaseEditor',
-    extends: BaseComponent,
+    extends: BaseEditableHolder,
     props: {
-        modelValue: String,
         placeholder: String,
         readonly: Boolean,
         formats: Array,

packages/primevue/src/editor/Editor.d.ts

@@ -217,6 +217,14 @@ export interface EditorProps {
      * Value of the content.
      */
     modelValue?: string | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: any;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Placeholder text to show when editor is empty.
      */
@@ -226,6 +234,11 @@ export interface EditorProps {
      * @defaultValue false
      */
     readonly?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * Whitelist of formats to display, see [here](https://quilljs.com/docs/formats/) for available options.
      */
@@ -238,6 +251,10 @@ export interface EditorProps {
      * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options.
      */
     modules?: any;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -278,6 +295,11 @@ export interface EditorEmitsOptions {
      * @param {string} value - New value.
      */
     'update:modelValue'(value: string): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {string} value - New value.
+     */
+    'value-change'(value: string): void;
     /**
      * Callback to invoke when text of editor changes.
      * @param {EditorTextChangeEvent} event - Custom text change event.

packages/primevue/src/editor/Editor.vue

@@ -63,7 +63,7 @@ export default {
     name: 'Editor',
     extends: BaseEditor,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
+    emits: ['text-change', 'selection-change', 'load'],
     data() {
         return {
             reRenderColorKey: 0
@@ -129,7 +129,7 @@ export default {
             }
         },
         initQuill() {
-            this.renderValue(this.modelValue);
+            this.renderValue(this.d_value);
 
             this.quill.on('text-change', (delta, oldContents, source) => {
                 if (source === 'user') {
@@ -140,7 +140,7 @@ export default {
                         html = '';
                     }
 
-                    this.$emit('update:modelValue', html);
+                    this.updateValue(html);
                     this.$emit('text-change', {
                         htmlValue: html,
                         textValue: text,

packages/primevue/src/editor/style/EditorStyle.js

@@ -1073,7 +1073,12 @@ const theme = ({ dt }) => `
 `;
 
 const classes = {
-    root: 'p-editor',
+    root: ({ instance }) => [
+        'p-editor',
+        {
+            'p-invalid': instance.$invalid
+        }
+    ],
     toolbar: 'p-editor-toolbar',
     content: 'p-editor-content'
 };