From 112d3eca776d3b3d8f13c1e74b65a3ead9e061f1 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 21 Oct 2024 14:25:35 +0100
Subject: [PATCH] Add form support to `Editor`

---
 packages/primevue/src/editor/BaseEditor.vue   |  5 ++---
 packages/primevue/src/editor/Editor.d.ts      | 22 +++++++++++++++++++
 packages/primevue/src/editor/Editor.vue       |  6 ++---
 .../primevue/src/editor/style/EditorStyle.js  |  7 +++++-
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/primevue/src/editor/BaseEditor.vue b/packages/primevue/src/editor/BaseEditor.vue
index 118376197..c14db9417 100644
--- a/packages/primevue/src/editor/BaseEditor.vue
+++ b/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,
diff --git a/packages/primevue/src/editor/Editor.d.ts b/packages/primevue/src/editor/Editor.d.ts
index 5d56f6a4d..5b812df92 100755
--- a/packages/primevue/src/editor/Editor.d.ts
+++ b/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.
diff --git a/packages/primevue/src/editor/Editor.vue b/packages/primevue/src/editor/Editor.vue
index 072f28fab..659a86003 100755
--- a/packages/primevue/src/editor/Editor.vue
+++ b/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,
diff --git a/packages/primevue/src/editor/style/EditorStyle.js b/packages/primevue/src/editor/style/EditorStyle.js
index 8e9d485e4..28eb84b3b 100644
--- a/packages/primevue/src/editor/style/EditorStyle.js
+++ b/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'
 };