Allow empty code steps

Author: pomber

packages/mdx/dev/content/scrollycoding-preview-jsx.mdx

@@ -90,28 +90,6 @@ You will also want to import a theme. You can import one from shiki, or make a c
 
 Pass the theme into Code Hike's config object, there are a few more settings you can use, like lineNumbers for example.
 
-{/* prettier-ignore */}
-```js next.config.js focus=1:2,7:9
-const { remarkCH } = require("@code-hike/mdx")
-const theme = require("shiki/themes/nord.json")
-
-const withMDX = require("@next/mdx")({
-  extension: /\.mdx?$/,
-  options: {
-    remarkPlugins: [
-      [remarkCH, { theme }]
-    ],
-  },
-})
-
-module.exports = withMDX({
-  pageExtensions: [
-    "ts", "tsx", "js", 
-    "jsx", "md", "mdx"
-  ],
-})
-```
-
 ---
 
 ### Step 4

packages/mdx/src/remark/steps.tsx

@@ -51,7 +51,7 @@ export async function extractStepsInfo(
         const baseStep =
           merge === "merge steps with header"
             ? steps[0].editorStep
-            : steps[stepIndex - 1].editorStep
+            : previousEditorStep(steps, stepIndex)
 
         step.editorStep = reduceStep(
           baseStep,
@@ -113,14 +113,41 @@ export async function extractStepsInfo(
     parent.children = parent.children.concat(previewSteps)
   }
 
+  // fill editor steps holes
+  const editorSteps = steps.map(step => step.editorStep)
+  editorSteps.forEach((editorStep, i) => {
+    if (!editorStep) {
+      editorSteps[i] =
+        merge === "merge steps with header"
+          ? editorSteps[0]
+          : editorSteps[i - 1]
+    }
+  })
+
   return {
-    editorSteps: steps.map(step => step.editorStep),
+    editorSteps,
     hasPreviewSteps,
 
     presetConfig,
   }
 }
 
+function previousEditorStep(
+  steps: {
+    editorStep?: EditorStep
+  }[],
+  index: number
+) {
+  if (index === 0) {
+    throw new Error("The first step should have some code")
+  }
+
+  return (
+    steps[index - 1].editorStep ||
+    previousEditorStep(steps, index - 1)
+  )
+}
+
 /**
  * Extracts the `show` prop from <CH.Code show={["foo.js", "bar.html"]} />
  */