Adjust editor size

Author: Ives van Hoorne

content/docs/state-and-lifecycle.md

@@ -13,13 +13,13 @@ So far we have only learned one way to update the UI.
 
 We call `ReactDOM.render()` to change the rendered output:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-1.js{11})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-1.js{11}?editorsize=70)
 
 In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
 
 We can start by encapsulating how the clock looks:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-2.js{6,7,8,9,14})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-2.js{6,7,8,9,14}?editorsize=70)
 
 However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
 
@@ -52,7 +52,7 @@ You can convert a functional component like `Clock` to a class in five steps:
 
 5. Delete the remaining empty function declaration.
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-3.js)
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-3.js?editorsize=70)
 
 `Clock` is now defined as a class rather than a function.
 
@@ -121,7 +121,7 @@ We will later add the timer code back to the component itself.
 
 The result looks like this:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-4.js{5,6,7,8,14,20})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-4.js{5,6,7,8,14,20}?editorsize=70)
 
 Next, we'll make the `Clock` set up its own timer and update itself every second.
 
@@ -192,7 +192,7 @@ Finally, we will implement a method called `tick()` that the `Clock` component w
 
 It will use `this.setState()` to schedule updates to the component local state:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-5.js{18,19,20,21,22})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-5.js{18,19,20,21,22}?editorsize=70)
 
 Now the clock ticks every second.
 
@@ -321,15 +321,15 @@ This also works for user-defined components:
 
 The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-6.js{4,5,6})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-6.js{4,5,6}?editorsize=70)
 
 This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
 
 If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
 
 To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
 
-[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-7/index.js{9,10,11})
+[Run example.](source:examples/single-file-examples/src/state-and-lifecycle/state-and-lifecycle-7/index.js{9,10,11}?editorsize=70)
 
 Each `Clock` sets up its own timer and updates independently.
 

package.json

@@ -38,7 +38,7 @@
     "gatsby-plugin-sharp": "^1.6.2",
     "gatsby-plugin-twitter": "^1.0.10",
     "gatsby-remark-autolink-headers": "^1.4.4",
-    "gatsby-remark-codesandbox": "^1.2.21",
+    "gatsby-remark-codesandbox": "^1.2.23",
     "gatsby-remark-copy-linked-files": "^1.5.2",
     "gatsby-remark-images": "^1.5.11",
     "gatsby-remark-prismjs": "^1.2.1",

src/components/MarkdownPage/MarkdownPage.js

@@ -27,12 +27,9 @@ class MarkdownPage extends React.Component {
 
     codeSandboxLinks.forEach(link => {
       link.onclick = e => {
-        const [codeBlock] = Array.prototype.filter.call(
-          link.parentNode.children,
-          node => node.className === 'gatsby-highlight',
-        );
+        const codeBlock = link.previousSibling;
 
-        if (codeBlock) {
+        if (codeBlock && codeBlock.className === 'gatsby-highlight') {
           const [child] = codeBlock.children;
           if (child && child.tagName !== 'IFRAME') {
             e.preventDefault();

yarn.lock

@@ -3934,9 +3934,9 @@ gatsby-remark-autolink-headers@^1.4.4:
     mdast-util-to-string "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-codesandbox@^1.2.21:
-  version "1.2.21"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-codesandbox/-/gatsby-remark-codesandbox-1.2.21.tgz#2a14bc7c97d296a03f4e7bd16f7f46a00ee62ca4"
+gatsby-remark-codesandbox@^1.2.23:
+  version "1.2.23"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-codesandbox/-/gatsby-remark-codesandbox-1.2.23.tgz#7da743b0160bf6ef0a8518f9fab4de5881e98741"
   dependencies:
     babel-runtime "^6.26.0"
     git-branch "^1.0.0"