Merge fix-event/onChange

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rich-text",
   "widgetName": "RichText",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Rich inline or toolbar text editing",
   "scripts": {
     "start": "nodemon --watch webpack.config.js --watch Gruntfile.js --exec grunt",

src/components/RichText.ts

@@ -28,8 +28,8 @@ export interface CommonRichTextProps {
 
 export interface RichTextProps extends CommonRichTextProps {
     className?: string;
-    onChange: (value: string) => void;
-    onBlur: () => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
     style?: object;
 }
 
@@ -178,15 +178,15 @@ export class RichText extends Component<RichTextProps> {
     private handleTextChange() {
         if (this.quill) {
             const value = this.quill.root.innerHTML !== this.undoDefault ? this.quill.root.innerHTML : "";
-            if (this.props.value !== value) {
+            if (this.props.value !== value && this.props.onChange) {
                 this.props.onChange(value);
                 this.textChanged = true;
             }
         }
     }
 
     private handleSelectionChange() {
-        if (this.textChanged && this.quill && !this.quill.hasFocus()) {
+        if (this.textChanged && this.quill && !this.quill.hasFocus() && this.props.onBlur) {
             this.props.onBlur();
             this.textChanged = false;
         }

src/components/RichTextContainer.ts

@@ -35,7 +35,7 @@ export type ReadOnlyStyle = "bordered" | "text" | "borderedToolbar";
 
 export default class RichTextContainer extends Component<RichTextContainerProps, RichTextContainerState> {
     private subscriptionHandles: number[] = [];
-    private defaultValue: string | null;
+    private defaultValue: string | null | undefined;
     private isEditing = false;
 
     constructor(props: RichTextContainerProps) {
@@ -56,6 +56,7 @@ export default class RichTextContainer extends Component<RichTextContainerProps,
     }
 
     render() {
+        const readOnly = this.isReadOnly();
         return createElement(ValidateConfigs, { ...this.props as RichTextContainerProps, showOnError: false },
             createElement(RichText, {
                 editorOption: this.props.editorOption,
@@ -68,9 +69,9 @@ export default class RichTextContainer extends Component<RichTextContainerProps,
                 style: parseStyle(this.props.style),
                 sanitizeContent: this.props.sanitizeContent,
                 value: this.state.value,
-                onChange: this.handleOnChange,
-                onBlur: this.executeOnChangeAction,
-                readOnly: this.isReadOnly(),
+                onChange: !readOnly ? this.handleOnChange : undefined,
+                onBlur: !readOnly ? this.executeOnChangeAction : undefined,
+                readOnly,
                 alertMessage: this.state.alertMessage
             })
         );

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="RichText" version="1.2.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="RichText" version="1.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="RichText.xml"/>
         </widgetFiles>