code updates work like a charm

Author: prasanna1211

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Playground.js

@@ -23,7 +23,25 @@ class Playground extends React.Component {
       theme: 'custom',
       readOnly: false,
     });
+    this.editor.on('change', this.handleChange);
   }
+  
+  componentDidUpdate(prevProps) {
+    if (this.props.code !== prevProps.code) {
+      this.editor.setValue(this.props.code);
+    }
+  }
+
+  setCode = (code) => {
+    this.editor.getDoc().setValue(code);
+    this.handleChange();
+  }
+
+  handleChange = () => {
+    console.log('changed ', this.editor.getValue());
+    this.props.onChange(this.editor.getValue());
+  };
+
 
   render() {
     return (

docs/client/components/PlaygroundPage/PlaygroundWithPreview/Preview.js

@@ -80,17 +80,6 @@ class Preview extends React.Component {
       </div>
     );
   }
-
-  // render() {
-  //   return (
-  //     <div className={styles.preview}>
-  //       <div className="header">
-  //         Preview
-  //       </div>
-  //       {code}
-  //     </div>
-  //   );
-  // }
 }
 
 Preview.propTypes = {

docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

@@ -19,7 +19,15 @@ const defaultCode = `
 class PlaygroundWithPreview extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      code: defaultCode,
+    };
+  }
+
+  handleOnChangeCode = (code) => {
+    this.setState({
+      code,
+    });
   }
 
   render() {
@@ -32,13 +40,13 @@ class PlaygroundWithPreview extends React.Component {
         <div className="header">
           PlaygroundWithPreview
         </div>
-        
         <div>
           <Playground
             code={defaultCode}
+            onChange={this.handleOnChangeCode}
           />
           <Preview
-            code={defaultCode}
+            code={this.state.code}
           />
         </div>
         {activeComponent}