fix: Fix Prettier formatting issues (#56)

Applies the following fixes: - Maintain undo history after formatting. - Support formatting within undocked editor. - Format current editor value, not last rendered code.
seek-oss · Apr 5, 2019 · 9ccae36 · 9ccae36
1 parent 0dc59d3
commit 9ccae36
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 20 deletions.
diff --git a/src/Playroom/Playroom.js b/src/Playroom/Playroom.js
@@ -90,8 +90,7 @@ export default class Playroom extends Component {
       code: null,
       renderCode: null,
       height: 200,
-      editorUndocked: false,
-      key: 0
+      editorUndocked: false
     };
   }
 
@@ -121,6 +120,7 @@ export default class Playroom extends Component {
         this.validateCode(code);
       }
     );
+
     window.addEventListener('keydown', this.handleKeyPress);
   };
 
@@ -147,7 +147,6 @@ export default class Playroom extends Component {
   };
 
   updateCode = code => {
-    this.setState({ code });
     this.props.updateCode(code);
     this.validateCode(code);
   };
@@ -197,19 +196,14 @@ export default class Playroom extends Component {
         cursor: this.cmRef.codeMirror.getCursor()
       });
 
-      this.setState(
-        {
-          code: formattedCode,
-          key: Math.random()
-        },
-        () => {
-          this.cmRef.codeMirror.focus();
-          this.cmRef.codeMirror.setCursor({
-            line,
-            ch
-          });
-        }
-      );
+      this.setState({ code: formattedCode });
+      this.updateCode(formattedCode);
+      this.cmRef.codeMirror.setValue(formattedCode);
+      this.cmRef.codeMirror.focus();
+      this.cmRef.codeMirror.setCursor({
+        line,
+        ch
+      });
     }
   };
 
@@ -220,7 +214,11 @@ export default class Playroom extends Component {
     store.setItem('editorSize', ref.offsetHeight);
   };
 
-  handleChange = debounce(this.updateCode, 200);
+  updateCodeDebounced = debounce(this.updateCode, 200);
+  handleChange = code => {
+    this.setState({ code });
+    this.updateCodeDebounced(code);
+  };
 
   handleResize = debounce(this.updateHeight, 200);
 
@@ -242,8 +240,7 @@ export default class Playroom extends Component {
       code,
       renderCode,
       height,
-      editorUndocked,
-      key
+      editorUndocked
     } = this.state;
 
     const themeNames = Object.keys(themes);
@@ -299,7 +296,6 @@ export default class Playroom extends Component {
 
     const codeMirrorEl = (
       <ReactCodeMirror
-        key={key}
         codeMirrorInstance={codeMirror}
         ref={this.storeCodeMirrorRef}
         value={code}
@@ -346,6 +342,7 @@ export default class Playroom extends Component {
             height={window.outerHeight}
             width={window.outerWidth}
             onClose={this.handleRedockEditor}
+            onKeyDown={this.handleKeyPress}
           >
             <div className={styles.undockedEditorContainer}>{codeMirrorEl}</div>
           </WindowPortal>

diff --git a/src/Playroom/WindowPortal/index.js b/src/Playroom/WindowPortal/index.js
@@ -28,6 +28,7 @@ export default class WindowPortal extends React.PureComponent {
   static propTypes = {
     height: PropTypes.number.isRequired,
     width: PropTypes.number.isRequired,
+    onKeyDown: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
     children: PropTypes.node.isRequired
   };
@@ -60,6 +61,7 @@ export default class WindowPortal extends React.PureComponent {
     externalWindow.document.title = 'Playroom Editor';
     externalWindow.document.body.appendChild(containerDiv);
     externalWindow.addEventListener('beforeunload', this.props.onClose);
+    externalWindow.addEventListener('keydown', this.props.onKeyDown);
 
     copyStyles(document, externalWindow.document);
     this.setState({ externalWindow, containerDiv });