Add default value to RichTextEditor component (#1115)

- Update DraftEditor component only when default value is changed

frontend/src/Editor/Components/DraftEditor.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-string-refs */
 import React from 'react';
-import { Editor, EditorState, RichUtils, getDefaultKeyBinding } from 'draft-js';
+import { Editor, EditorState, RichUtils, getDefaultKeyBinding, ContentState } from 'draft-js';
 import 'draft-js/dist/Draft.css';
 import { stateToHTML } from 'draft-js-export-html';
 
@@ -127,7 +127,7 @@ const InlineStyleControls = (props) => {
 class DraftEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { editorState: EditorState.createEmpty() };
+    this.state = { editorState: EditorState.createWithContent(ContentState.createFromText(this.props.defaultValue)) };
 
     this.focus = () => this.refs.editor.focus();
     this.onChange = (editorState) => {
@@ -142,6 +142,18 @@ class DraftEditor extends React.Component {
     this.toggleInlineStyle = this._toggleInlineStyle.bind(this);
   }
 
+  componentDidUpdate(prevProps) {
+    if (prevProps.defaultValue !== this.props.defaultValue) {
+      const newContentState = ContentState.createFromText(this.props.defaultValue);
+      const newEditorState = EditorState.createWithContent(newContentState);
+      const newEditorStateWithFocus = EditorState.moveFocusToEnd(newEditorState);
+      const html = stateToHTML(newContentState);
+
+      this.props.handleChange(html);
+      this.setState({ editorState: newEditorStateWithFocus });
+    }
+  }
+
   _handleKeyCommand(command, editorState) {
     const newState = RichUtils.handleKeyCommand(editorState, command);
     if (newState) {

frontend/src/Editor/Components/RichTextEditor.jsx

@@ -15,6 +15,7 @@ export const RichTextEditor = function RichTextEditor({
   const placeholder = component.definition.properties.placeholder.value;
   const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
   const disabledState = component.definition.styles?.disabledState?.value ?? false;
+  const defaultValue = component.definition.properties?.defaultValue?.value ?? '';
 
   const parsedDisabledState =
     typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
@@ -40,7 +41,13 @@ export const RichTextEditor = function RichTextEditor({
         onComponentClick(id, component);
       }}
     >
-      <DraftEditor handleChange={handleChange} height={height} width={width} placeholder={placeholder}></DraftEditor>
+      <DraftEditor
+        handleChange={handleChange}
+        height={height}
+        width={width}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+      ></DraftEditor>
     </div>
   );
 };

frontend/src/Editor/Components/components.js

@@ -852,6 +852,7 @@ export const componentTypes = [
     },
     properties: {
       placeholder: { type: 'code', displayName: 'Placeholder' },
+      defaultValue: { type: 'code', displayName: 'Default Value' },
     },
     events: {},
     styles: {
@@ -859,7 +860,7 @@ export const componentTypes = [
       disabledState: { type: 'code', displayName: 'Disable' },
     },
     exposedVariables: {
-      value: {},
+      value: '',
     },
     definition: {
       others: {
@@ -868,6 +869,7 @@ export const componentTypes = [
       },
       properties: {
         placeholder: { value: 'Placeholder text' },
+        defaultValue: { value: '' },
       },
       events: [],
       styles: {