Merge pull request #33172 from ldanet/patch-1

[react-draft-wysiwyg] Fix `onContentStateChange` prop type

types/react-draft-wysiwyg/index.d.ts

@@ -2,6 +2,7 @@
 // Project: https://github.com/jpuri/react-draft-wysiwyg#readme
 // Definitions by: imechZhangLY <https://github.com/imechZhangLY>
 //                 brunoMaurice <https://github.com/brunoMaurice>
+//                 ldanet <https://github.com/ldanet>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -18,9 +19,9 @@ export class ContentBlock extends Draft.ContentBlock {}
 export class SelectionState extends Draft.SelectionState {}
 
 export interface EditorProps {
-    onChange?(contentState: ContentState): RawDraftContentState;
+    onChange?(contentState: RawDraftContentState): void;
     onEditorStateChange?(editorState: EditorState): void;
-    onContentStateChange?(contentState: ContentState): RawDraftContentState;
+    onContentStateChange?(contentState: RawDraftContentState): void;
     initialContentState?: RawDraftContentState;
     defaultContentState?: RawDraftContentState;
     contentState?: RawDraftContentState;

types/react-draft-wysiwyg/test/uncontrolled-raw-draft-content-state.tsx

@@ -0,0 +1,48 @@
+// From https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Docs/Props/EditorStateProp/index.js#L125
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Editor, RawDraftContentState } from "react-draft-wysiwyg";
+
+class UncontrolledEditor extends React.Component<
+    {},
+    { contentState: RawDraftContentState }
+> {
+    constructor(props: any) {
+        super(props);
+        this.state = {
+            contentState: JSON.parse(`{
+                "entityMap":{},
+                "blocks":[{
+                    "key":"1ljs",
+                    "text":"Initializing from content state",
+                    "type":"unstyled",
+                    "depth":0,
+                    "inlineStyleRanges":[],
+                    "entityRanges":[],
+                    "data":{}
+                }]
+            }`)
+        };
+    }
+
+    onContentStateChange = (contentState: RawDraftContentState) => {
+        this.setState({
+            contentState
+        });
+    }
+
+    render() {
+        const { contentState } = this.state;
+        return (
+            <Editor
+                initialContentState={contentState}
+                wrapperClassName="demo-wrapper"
+                editorClassName="demo-editor"
+                onContentStateChange={this.onContentStateChange}
+            />
+        );
+    }
+}
+
+ReactDOM.render(<UncontrolledEditor />, document.getElementById("target"));

types/react-draft-wysiwyg/tsconfig.json

@@ -24,6 +24,7 @@
         "test/basic-controlled-tests.tsx",
         "test/basic-tests.tsx",
         "test/custom-toolbar-tests.tsx",
-        "test/focus-blur-callbacks-tests.tsx"
+        "test/focus-blur-callbacks-tests.tsx",
+        "test/uncontrolled-raw-draft-content-state.tsx"
     ]
 }