Merge pull request #132 from FormidableLabs/fix/update-issues

Fix onChange related errors

Author: sofiapoh

src/components/Editor/index.js

@@ -55,7 +55,7 @@ class CodeEditor extends Component {
   );
 
   render() {
-    const { style, code: _, ...rest } = this.props;
+    const { style, code: _code, onChange, language, ...rest } = this.props;
     const { code } = this.state;
 
     return (

src/components/Live/LiveProvider.js

@@ -64,12 +64,18 @@ export default class LiveProvider extends Component {
     this.transpile({ code, scope, transformCode, noInline });
   }
 
-  componentDidUpdate({ code, scope, noInline, transformCode }) {
+  componentDidUpdate({
+    code: prevCode,
+    scope: prevScope,
+    noInline: prevNoInline,
+    transformCode: prevTransformCode
+  }) {
+    const { code, scope, noInline, transformCode } = this.props;
     if (
-      code !== this.props.code ||
-      scope !== this.props.scope ||
-      noInline !== this.props.noInline ||
-      transformCode !== this.props.transformCode
+      code !== prevCode ||
+      scope !== prevScope ||
+      noInline !== prevNoInline ||
+      transformCode !== prevTransformCode
     ) {
       this.transpile({ code, scope, transformCode, noInline });
     }

stories/Live.js

@@ -76,20 +76,46 @@ const StyledLivePreview = styled(LivePreview)`
 `;
 
 const StyledEditor = styled(LiveEditor)`
-  background: #222031;
+  background: #322e3c;
+`;
+
+const StyledTextarea = styled.textarea`
+  height: 300px;
+  width: 600px;
+  font-family: monospace;
+  font-size: 16px;
+  white-space: pre;
+  background: #322e3c;
+  color: white;
 `;
 
 const TestComponent = ({ live }) => {
   const Result = live.element;
   return (
-    <div style={{ backgroundColor: 'darkslategray', color: 'white' }}>
+    <div style={{ backgroundColor: '#322e3c', color: 'white' }}>
       <LiveEditor />
       <Result />
       <pre>{live.error}</pre>
     </div>
   );
 };
 
+const CustomEditor = () => {
+  const [code, updateCode] = React.useState(functionExample);
+
+  const handleChange = e => {
+    updateCode(e.target.value);
+  };
+
+  return (
+    <LiveProvider code={code}>
+      <StyledTextarea onChange={handleChange} value={code} />
+      <LivePreview />
+      <LiveError />
+    </LiveProvider>
+  );
+};
+
 const LiveComponent = withLive(TestComponent);
 
 storiesOf('Live', module)
@@ -143,4 +169,5 @@ storiesOf('Live', module)
     <LiveProvider code={hooksExample}>
       <LiveComponent />
     </LiveProvider>
-  ));
+  ))
+  .add('with custom editor', () => <CustomEditor />);