From 4e2a07fe01a297108a58fa92907be54c0bfb5603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phil=20Pl=C3=BCckthun?= <phil@plckthn.me>
Date: Wed, 1 Nov 2017 17:18:31 +0000
Subject: [PATCH 1/2] Fix ComponentPlayground invalid props and key events

- Prevent passing invalid HTML attributes as props to emotion
- Stop propagation of key events in the Editor to be able to use all
keys

(Otherwise space, arrows, etc, would still change slides/modes)
---
 src/components/component-playground.js | 105 ++++++++++++++-----------
 1 file changed, 60 insertions(+), 45 deletions(-)

diff --git a/src/components/component-playground.js b/src/components/component-playground.js
index 346881df5..ac4752f7b 100644
--- a/src/components/component-playground.js
+++ b/src/components/component-playground.js
@@ -18,13 +18,13 @@ export const PlaygroundProvider = styled(LiveProvider)`
   overflow: hidden;
 `;
 
-const PlaygroundPreview = styled(LivePreview)`
+const PlaygroundPreview = styled(({ className }) => (
+  <LivePreview className={className} />
+))`
   padding: 0.5rem;
   min-height: 100%;
 
-  background: ${(props) => (
-    props.previewBackgroundColor || '#fff'
-  )};
+  background: ${p => p.previewBackgroundColor || '#fff'};
 `;
 
 const PlaygroundEditor = styled(LiveEditor)`
@@ -86,48 +86,63 @@ const PlaygroundError = styled(LiveError)`
   padding: 0.5rem;
 `;
 
-const ComponentPlayground = ({
-  code,
-  previewBackgroundColor,
-  scope = {},
-  theme = 'dark'
-}) => {
-  const useDarkTheme = theme === 'dark';
-
-  if (useDarkTheme) {
-    require('../themes/default/prism.dark.css');
-  } else {
-    require('../themes/default/prism.light.css');
+class ComponentPlayground extends Component {
+  onKeyUp = evt => {
+    evt.stopPropagation();
+  };
+
+  onKeyDown = evt => {
+    evt.stopPropagation();
+  };
+
+  render() {
+    const {
+      code,
+      previewBackgroundColor,
+      scope = {},
+      theme = 'dark'
+    } = this.props;
+
+    const useDarkTheme = theme === 'dark';
+
+    if (useDarkTheme) {
+      require('../themes/default/prism.dark.css');
+    } else {
+      require('../themes/default/prism.light.css');
+    }
+
+    return (
+      <PlaygroundProvider
+        className={`react-live-${useDarkTheme ? 'dark' : 'light'}`}
+        mountStylesheet={false}
+        code={(code || defaultCode).trim()}
+        scope={{ Component, ...scope }}
+        noInline
+      >
+        <PlaygroundRow>
+          <Title>Live Preview</Title>
+          <Title useDarkTheme={useDarkTheme}>Source Code</Title>
+        </PlaygroundRow>
+
+        <PlaygroundRow>
+          <PlaygroundColumn>
+            <PlaygroundPreview
+              previewBackgroundColor={previewBackgroundColor}
+            />
+            <PlaygroundError />
+          </PlaygroundColumn>
+
+          <PlaygroundColumn>
+            <PlaygroundEditor
+              onKeyUp={this.onKeyUp}
+              onKeyDown={this.onKeyDown}
+            />
+          </PlaygroundColumn>
+        </PlaygroundRow>
+      </PlaygroundProvider>
+    );
   }
-
-  return (
-    <PlaygroundProvider
-      className={`react-live-${useDarkTheme ? 'dark' : 'light'}`}
-      mountStylesheet={false}
-      code={(code || defaultCode).trim()}
-      scope={{ Component, ...scope }}
-      noInline
-    >
-      <PlaygroundRow>
-        <Title>Live Preview</Title>
-        <Title useDarkTheme={useDarkTheme}>Source Code</Title>
-      </PlaygroundRow>
-
-      <PlaygroundRow>
-        <PlaygroundColumn>
-          <PlaygroundPreview
-            previewBackgroundColor={previewBackgroundColor}
-          />
-          <PlaygroundError />
-        </PlaygroundColumn>
-
-        <PlaygroundColumn>
-          <PlaygroundEditor useDarkTheme={useDarkTheme} />
-        </PlaygroundColumn>
-      </PlaygroundRow>
-    </PlaygroundProvider>
-  );
-};
+}
 
 ComponentPlayground.propTypes = {
   code: PropTypes.string,

From 3b3a9ca84cdac4d8a8aece2151588e75749bd6eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Phil=20Pl=C3=BCckthun?= <phil@plckthn.me>
Date: Wed, 1 Nov 2017 17:26:29 +0000
Subject: [PATCH 2/2] Update ComponentPlayground snapshots

---
 src/components/__snapshots__/component-playground.test.js.snap | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/__snapshots__/component-playground.test.js.snap b/src/components/__snapshots__/component-playground.test.js.snap
index 2f6696f6c..df7c06ed8 100644
--- a/src/components/__snapshots__/component-playground.test.js.snap
+++ b/src/components/__snapshots__/component-playground.test.js.snap
@@ -1069,7 +1069,6 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
     >
       <div
         class="react-live-preview css-cv4xj2"
-        previewbackgroundcolor="#ff0"
       >
         <div>
           <h1
@@ -1591,7 +1590,6 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
     >
       <div
         class="react-live-preview css-cv4xj2"
-        previewbackgroundcolor="#ff0"
       >
         
       </div>