fix of #666

Author: AJIXuMuK

package-lock.json

@@ -37,7 +37,7 @@
     "office-ui-fabric-react": "6.214.0",
     "react": "16.8.5",
     "react-dom": "16.8.5",
-    "react-quill": "1.3.3"
+    "react-quill": "1.3.5"
   },
   "devDependencies": {
     "@microsoft/rush-stack-compiler-3.3": "0.3.5",

package.json

@@ -195,6 +195,14 @@ export class RichText extends React.Component<IRichTextProps, IRichTextState> {
     return true;
   }
 
+  public componentWillReceiveProps(nextProps: IRichTextProps) {
+    if (nextProps.value !== this.props.value && nextProps.value !== this.state.text) {
+      this.setState({
+        text: nextProps.value
+      });
+    }
+  }
+
   /**
    * Returns a handle to the Quill editor
    */
@@ -619,7 +627,7 @@ id="DropDownStyles"
         <ReactQuill ref={this.linkQuill}
                     placeholder={placeholder}
                     modules={modules}
-                    defaultValue={text || ''} //property value causes issues, defaultValue does not
+                    value={text || ''} //property value causes issues, defaultValue does not
                     onChange={this.handleChange}
                     onChangeSelection={this.handleChangeSelection}
                     onFocus={this.handleOnFocus} />
@@ -637,7 +645,7 @@ id="DropDownStyles"
         {
           this.renderImageDialog()
         }
-        
+
       </div>
     );
   }
@@ -731,7 +739,7 @@ id="DropDownStyles"
    * Hides the insert image dialog
    */
   private closeImageDialog = () => {
-    this.setState({ 
+    this.setState({
       hideImageDialog: true,
       insertImageUrl: undefined,
      });

src/controls/richText/RichText.tsx

@@ -875,7 +875,8 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
           maxDate={new Date("05/01/2020")} />
 
         {/* <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.richTextValue = value; return value; }} /> */}
-        <RichText isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.setState({ richTextValue: value }); return value; }} />
+        <RichText value={this.state.richTextValue} isEditMode={this.props.displayMode === DisplayMode.Edit} onChange={value => { this.setState({ richTextValue: value }); return value; }} />
+        <PrimaryButton text='Reset text' onClick={() => { this.setState({ richTextValue: 'test' }); }} />
 
         {/* <ListItemAttachments listId='0ffa51d7-4ad1-4f04-8cfe-98209905d6da'
           itemId={1}