From e7500a93624323a51be4ce8e6399cb221ff810c7 Mon Sep 17 00:00:00 2001
From: Daniel <info@danielvaladas.com>
Date: Thu, 7 Mar 2024 16:04:26 -0500
Subject: [PATCH] Made dnn-richtext form aware

This PR does 3 things:
- Makes dnn-richtext form aware so it can be a form input element.
- Fixes a css loading issue with the Jodit editor following package upgrades.
- Fixes an initial form value issue with monaco editor form integration
---
 packages/stencil-library/src/components.d.ts  |  8 +++++
 .../dnn-monaco-editor/dnn-monaco-editor.tsx   | 19 +++++++----
 .../components/dnn-richtext/dnn-richtext.scss |  4 ++-
 .../components/dnn-richtext/dnn-richtext.tsx  | 32 +++++++++++++++++--
 .../dnn-example-form/dnn-example-form.tsx     |  4 +++
 5 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts
index 605ffc063..a25337f98 100644
--- a/packages/stencil-library/src/components.d.ts
+++ b/packages/stencil-library/src/components.d.ts
@@ -418,6 +418,10 @@ export namespace Components {
         "value": number;
     }
     interface DnnRichtext {
+        /**
+          * Name of the field when used in a form.
+         */
+        "name": string;
         /**
           * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html
          */
@@ -1463,6 +1467,10 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     interface DnnRichtext {
+        /**
+          * Name of the field when used in a form.
+         */
+        "name"?: string;
         /**
           * Fires when the value changed.
          */
diff --git a/packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.tsx b/packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.tsx
index edca7c431..9a70c6477 100644
--- a/packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.tsx
+++ b/packages/stencil-library/src/components/dnn-monaco-editor/dnn-monaco-editor.tsx
@@ -30,7 +30,7 @@ export class DnnMonacoEditor {
   }
 
   /** The name of the control to use for forms. */
-  @Prop()name: string;
+  @Prop() name: string;
 
   /** Emits the new value of the content when it is changed. */
   @Event() contentChanged: EventEmitter<string>;
@@ -45,24 +45,31 @@ export class DnnMonacoEditor {
       theme: "vs-dark",
       automaticLayout: true,
     });
+    this.setFormValue();
     this.editor.onDidChangeModelContent(() => {
       this.value = this.editor.getValue();
       this.contentChanged.emit(this.value);
-      if (this.name){
-        var data = new FormData();
-        data.append(this.name, this.value);
-        this.internals.setFormValue(data);
-      }
+      this.setFormValue();
     });
   }
 
+  // eslint-disable-next-line @stencil-community/own-methods-must-be-private
   formResetCallback() {
     this.internals.setValidity({});
     this.value = this.originalValue;
+    this.setFormValue();
   }
 
   private originalValue: string;
 
+  private setFormValue() {
+    if (this.name != undefined){
+      var data = new FormData();
+      data.append(this.name, this.value);
+      this.internals.setFormValue(data);
+    }
+  }
+
   render() {
     return (
       <Host>
diff --git a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.scss b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.scss
index 5d4e87f30..e05b5c212 100644
--- a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.scss
+++ b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.scss
@@ -1,3 +1,5 @@
+@import "../../../../../node_modules/jodit/es2021/jodit.min.css";
+
 :host {
   display: block;
-}
+}
\ No newline at end of file
diff --git a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx
index 2b2ef0d23..e14f21719 100644
--- a/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx
+++ b/packages/stencil-library/src/components/dnn-richtext/dnn-richtext.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';
+import { Component, Host, h, Prop, Event, EventEmitter, Watch, AttachInternals } from '@stencil/core';
 import { Jodit } from "jodit";
 import type { Config } from "jodit/types/config";
 import { decodeHtml } from '../../utilities/stringUtilities';
@@ -7,6 +7,7 @@ import { decodeHtml } from '../../utilities/stringUtilities';
   tag: 'dnn-richtext',
   styleUrl: 'dnn-richtext.scss',
   shadow: false,
+  formAssociated: true,
 })
 export class DnnRichtext {
   /** Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html */
@@ -20,12 +21,16 @@ export class DnnRichtext {
 
   /** Sets the value of the content of the editor. */
   @Prop() value: string;
+
+  /** Name of the field when used in a form. */
+  @Prop() name: string;
   
   @Watch("value")
   watchValueChanged(newValue: string) {
-    if (this.editor) {
+    if (this.editor !== null && this.editor !== undefined) {
       this.editor.value = decodeHtml(newValue);
     }
+    this.setFormValue();
   }
 
   /** Fires when the value changed. */
@@ -34,6 +39,8 @@ export class DnnRichtext {
   /** Fires during value input. */
   @Event() valueInput: EventEmitter<string>;
 
+  @AttachInternals() internals: ElementInternals;
+
   componentDidLoad(){
     var mergedOptions = {
       ...this.dnnDefaultOptions,
@@ -41,10 +48,29 @@ export class DnnRichtext {
     };
     this.editor = Jodit.make(this.textArea, mergedOptions);
     this.editor.value = decodeHtml(this.value);
-    this.editor.e.on('change', newValue => this.valueChange.emit(newValue));
+    this.setFormValue();
+    this.editor.e.on('change', newValue => {
+      this.valueChange.emit(newValue);
+      this.setFormValue();
+    });
     this.editor.e.on('input', newValue => this.valueInput.emit(newValue));
   }
 
+  // eslint-disable-next-line @stencil-community/own-methods-must-be-private
+  formResetCallback() {
+    this.editor.value = decodeHtml(this.value);
+    this.internals.setValidity({});
+    this.setFormValue();
+  }
+
+  private setFormValue() {
+    if (this.name != undefined && this.name.length > 0){
+      var data = new FormData();
+      data.append(this.name, this.editor.value);
+      this.internals.setFormValue(data);
+    }
+  }
+
   render() {
     return (
       <Host>
diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
index b697d5311..5d13e267c 100644
--- a/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
+++ b/packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx
@@ -137,6 +137,10 @@ export class DnnExampleForm {
               Some code
               <dnn-monaco-editor name="code" value="<p>Some html</p>" />
             </label>
+            <label class="vertical">
+              Biography
+              <dnn-richtext name="biography" value="<p>Some html</p>" />
+            </label>
           </fieldset>
           <div class="controls">
             <dnn-button reversed formButtonType="reset">Reset</dnn-button>