Made dnn-richtext form aware

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.
          */

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>

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;
-}
+}

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,17 +39,38 @@ export class DnnRichtext {
   /** Fires during value input. */
   @Event() valueInput: EventEmitter<string>;
 
+  @AttachInternals() internals: ElementInternals;
+
   componentDidLoad(){
     var mergedOptions = {
       ...this.dnnDefaultOptions,
       ...this.options,
     };
     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>

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>