From 7b0e3bd99eff2add1ededbc5fdd49719a06c12ec Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 4 Oct 2022 15:05:41 +0100
Subject: [PATCH] [beta] Sandpack: fix package.json dependencies & remove
 cm-markdown dependency (#5151)

* Update 6 files

* Update 3 files

* Update _app.tsx and _document.tsx
---
 beta/next.config.js                           |  7 +-
 beta/package.json                             |  2 +-
 .../components/MDX/Sandpack/SandpackRoot.tsx  |  9 ---
 beta/src/pages/_document.tsx                  | 39 +++++------
 beta/src/utils/codemirrorMarkdownShim.js      |  7 --
 beta/yarn.lock                                | 64 +++----------------
 6 files changed, 29 insertions(+), 99 deletions(-)
 delete mode 100644 beta/src/utils/codemirrorMarkdownShim.js

diff --git a/beta/next.config.js b/beta/next.config.js
index ed3f22bb2..5fd3bd9a5 100644
--- a/beta/next.config.js
+++ b/beta/next.config.js
@@ -2,7 +2,6 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-const path = require('path');
 const redirects = require('./src/redirects.json');
 
 /**
@@ -46,12 +45,8 @@ const nextConfig = {
     // Don't bundle the shim unnecessarily.
     config.resolve.alias['use-sync-external-store/shim'] = 'react';
 
-    const {IgnorePlugin, NormalModuleReplacementPlugin} = require('webpack');
+    const {IgnorePlugin} = require('webpack');
     config.plugins.push(
-      new NormalModuleReplacementPlugin(
-        /@codemirror\/lang-markdown/,
-        require.resolve('./src/utils/codemirrorMarkdownShim.js')
-      ),
       new IgnorePlugin({
         checkResource(resource, context) {
           if (
diff --git a/beta/package.json b/beta/package.json
index a912bf3ce..3bc7b0898 100644
--- a/beta/package.json
+++ b/beta/package.json
@@ -22,7 +22,7 @@
     "check-all": "npm-run-all prettier lint:fix tsc"
   },
   "dependencies": {
-    "@codesandbox/sandpack-react": "1.7.2",
+    "@codesandbox/sandpack-react": "1.11.0",
     "@docsearch/css": "3.0.0-alpha.41",
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.7.0",
diff --git a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
index e05bdb141..163a33ecc 100644
--- a/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
+++ b/beta/src/components/MDX/Sandpack/SandpackRoot.tsx
@@ -9,7 +9,6 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client';
 import {CustomPreset} from './CustomPreset';
 import {createFileMap} from './createFileMap';
 import {CustomTheme} from './Themes';
-import type {SandpackSetup} from '@codesandbox/sandpack-react';
 
 type SandpackProps = {
   children: React.ReactNode;
@@ -78,19 +77,11 @@ function SandpackRoot(props: SandpackProps) {
     hidden: true,
   };
 
-  let setup: SandpackSetup | undefined;
-  if (files['/package.json']) {
-    setup = {
-      dependencies: JSON.parse(files['/package.json'].code).dependencies,
-    };
-  }
-
   return (
     <div className="sandpack sandpack--playground sandbox my-8">
       <SandpackProvider
         template="react"
         files={files}
-        customSetup={setup}
         theme={CustomTheme}
         options={{
           autorun,
diff --git a/beta/src/pages/_document.tsx b/beta/src/pages/_document.tsx
index bcb32eb5c..faad29f77 100644
--- a/beta/src/pages/_document.tsx
+++ b/beta/src/pages/_document.tsx
@@ -65,14 +65,14 @@ export default MyDocument;
 
 const sandpackReactVersion =
   require('@codesandbox/sandpack-react/package.json').version;
-if (sandpackReactVersion !== '1.7.2') {
+if (sandpackReactVersion !== '1.11.0') {
   throw Error('You need to manually regenerate getSandpackCssText_PATCHED.');
 }
 
 // HACK(css-in-js): We don't want to use runtime CSS-in-JS, so let's save whatever Stitches injected.
 // Unfortunately, Stitches' own CSS SSR output isn't reliable and doesn't include some necessary styles.
 // To update this:
-//   1. Comment out the disableRuntimeCSSInJS() call in _app.js
+//   1. Comment out the disableAllRuntimeStyleInjection() call in _app.js
 //   2. Use the real getSandpackCssText instead of the patched version below
 //   3. Open a page that contains a sandbox
 //   4. Copy the output of running this in the console:
@@ -97,21 +97,21 @@ function getSandpackCssText_PATCHED() {
   100% { transform: rotateX(-25.5deg) rotateY(405deg); }
 }
 }
---sxs { --sxs:2 sp-c-gMfcns sp-c-hfoyCM sp-c-fWymNx sp-c-dVXmCU sp-c-bpmgvy sp-c-kLppIp sp-c-PJLV sp-c-fVPbOs sp-c-dyHYiL sp-c-gGbYbQ sp-c-hWvPKr sp-c-ctabmA sp-c-bNbSGz sp-c-jcgexo sp-c-jkvvao; }
+--sxs { --sxs:2 sp-c-gMfcns sp-c-hfoyCM sp-c-fWymNx sp-c-dRhJti sp-c-bpmgvy sp-c-kLppIp sp-c-PJLV sp-c-fVPbOs sp-c-dyHYiL sp-c-gGbYbQ sp-c-kuvqxy sp-c-ctabmA sp-c-bNbSGz sp-c-jOWzsE sp-c-jkvvao; }
 @media  {
   .sp-c-gMfcns svg { margin: auto; }
   .sp-c-hfoyCM { padding: 0 var(--sp-space-1) 0 var(--sp-space-1); border-radius: var(--sp-border-radius); margin-left: var(--sp-space-1); width: var(--sp-space-5); visibility: hidden; }
   .sp-c-hfoyCM svg { width: var(--sp-space-3); height: var(--sp-space-3); display: block; position: relative; top: 1px; }
   .sp-c-fWymNx { margin: 0px; display: block; font-family: var(--sp-font-mono); font-size: var(--sp-font-size); color: var(--sp-syntax-color-plain); line-height: var(--sp-font-lineHeight); }
-  .sp-c-dVXmCU { appearance: none; border: 0px; outline: none; display: flex; align-items: center; font-size: inherit; font-family: inherit; background-color: transparent; transition: color var(--sp-transitions-default), background var(--sp-transitions-default); cursor: pointer; color: var(--sp-colors-clickable); }
-  .sp-c-dVXmCU:disabled { color: var(--sp-colors-disabled); }
-  .sp-c-dVXmCU svg { width: var(--sp-space-4); height: var(--sp-space-4); }
-  .sp-c-dVXmCU.sp-c-gMfcns { padding: var(--sp-space-1); width: var(--sp-space-7); height: var(--sp-space-7); display: flex; }
+  .sp-c-dRhJti { appearance: none; border: 0px; outline: none; display: flex; align-items: center; font-size: inherit; font-family: inherit; background-color: transparent; transition: color var(--sp-transitions-default), background var(--sp-transitions-default); cursor: pointer; color: var(--sp-colors-clickable); }
+  .sp-c-dRhJti:disabled { color: var(--sp-colors-disabled); }
+  .sp-c-dRhJti svg { min-width: var(--sp-space-4); width: var(--sp-space-4); height: var(--sp-space-4); }
+  .sp-c-dRhJti.sp-c-gMfcns { padding: var(--sp-space-1); width: var(--sp-space-7); height: var(--sp-space-7); display: flex; }
   .sp-c-bpmgvy { transform: translate(-4px, 9px) scale(0.13, 0.13); }
   .sp-c-bpmgvy * { position: absolute; width: 96px; height: 96px; }
   .sp-c-kLppIp { display: flex; flex-direction: column; width: 100%; position: relative; background-color: var(--sp-colors-surface1); transition: flex var(--sp-transitions-default); gap: 1px; }
   .sp-c-kLppIp:has(.sp-stack) { background-color: var(--sp-colors-surface2); }
-  .sp-c-fVPbOs { color: initial; font-family: var(--sp-font-body); font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-palette: initial; font-size: var(--sp-font-size); font-stretch: initial; font-style: initial; font-synthesis: initial; font-variant: initial; font-variation-settings: initial; font-weight: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: optimizelegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; accent-color: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; app-region: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; inset: initial; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-block-size: initial; contain-intrinsic-size: initial; contain-intrinsic-inline-size: initial; container: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: initial; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; line-height: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; object-view-box: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-clip-margin: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; page-transition-tag: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; rotate: initial; ruby-position: initial; rx: initial; ry: initial; scale: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; scrollbar-gutter: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-emphasis: initial; text-emphasis-position: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; translate: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; border-spacing: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: transparent; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial; }
+  .sp-c-fVPbOs { color: initial; font-family: var(--sp-font-body); font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-palette: initial; font-size: var(--sp-font-size); font-stretch: initial; font-style: initial; font-synthesis: initial; font-variant: initial; font-variation-settings: initial; font-weight: initial; forced-color-adjust: initial; text-orientation: initial; text-rendering: optimizelegibility; -webkit-font-smoothing: subpixel-antialiased; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; accent-color: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; animation: initial; app-region: initial; appearance: initial; aspect-ratio: initial; backdrop-filter: initial; backface-visibility: initial; background: initial; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block: initial; border: initial; border-radius: initial; border-collapse: initial; border-end-end-radius: initial; border-end-start-radius: initial; border-inline: initial; border-start-end-radius: initial; border-start-start-radius: initial; inset: initial; box-shadow: initial; box-sizing: border-box; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; color-scheme: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-block-size: initial; contain-intrinsic-size: initial; contain-intrinsic-inline-size: initial; container: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: block; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: initial; hover-pop-up-delay: initial; hover-pop-up-hide-delay: initial; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; inset-block: initial; inset-inline: initial; isolation: initial; letter-spacing: initial; lighting-color: initial; line-break: initial; line-height: initial; line-height-step: initial; list-style: initial; margin-block: initial; margin: initial; margin-inline: initial; marker: initial; mask: initial; mask-type: initial; math-depth: initial; math-shift: initial; math-style: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: initial; mix-blend-mode: initial; object-fit: initial; object-position: initial; object-view-box: initial; offset: initial; opacity: initial; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-clip-margin: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block: initial; padding: initial; padding-inline: initial; page: initial; page-orientation: initial; page-transition-tag: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: initial; quotes: initial; r: initial; resize: initial; rotate: initial; ruby-position: initial; rx: initial; ry: initial; scale: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; scrollbar-gutter: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-emphasis: initial; text-emphasis-position: initial; text-indent: initial; text-justify: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-offset: initial; text-underline-position: initial; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; transition: initial; translate: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: initial; border-spacing: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: transparent; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: initial; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: initial; }
   @media screen and (min-resolution: 2dppx) {
   .sp-c-fVPbOs { -webkit-font-smoothing: antialiased; }
 }
@@ -119,9 +119,8 @@ function getSandpackCssText_PATCHED() {
   .sp-c-fVPbOs .sp-wrapper:focus { outline: 0px; }
   .sp-c-dyHYiL { border-bottom: 1px solid var(--sp-colors-surface2); background: var(--sp-colors-surface1); }
   .sp-c-gGbYbQ { padding: 0 var(--sp-space-2); overflow: auto; display: flex; flex-wrap: nowrap; align-items: stretch; min-height: 40px; margin-bottom: -1px; }
-  .sp-c-hWvPKr { padding: 0 var(--sp-space-2); height: var(--sp-layout-headerHeight); white-space: nowrap; }
-  .sp-c-hWvPKr:focus { outline: none; }
-  .sp-c-hWvPKr:focus-visible { box-shadow: inset 0 0 0 2px var(--sp-colors-accent); }
+  .sp-c-kuvqxy { padding: 0 var(--sp-space-2); height: var(--sp-layout-headerHeight); white-space: nowrap; }
+  .sp-c-kuvqxy:focus { outline: none; }
   .sp-c-ctabmA { border: 1px solid var(--sp-colors-surface2); display: flex; flex-wrap: wrap; align-items: stretch; border-radius: var(--sp-border-radius); overflow: hidden; position: relative; background-color: var(--sp-colors-surface2); gap: 1px; }
   @media print {
 }
@@ -130,10 +129,7 @@ function getSandpackCssText_PATCHED() {
   .sp-c-bNbSGz { flex: 1 1 0%; position: relative; overflow: auto; background: var(--sp-colors-surface1); }
   .sp-c-bNbSGz .cm-scroller { padding: var(--sp-space-4) 0; }
   .sp-c-bNbSGz .sp-c-fWymNx { padding: var(--sp-space-4) 0; }
-  .sp-c-jcgexo { margin: 0px; outline: none; height: 100%; }
-  .sp-c-jcgexo:focus-visible { box-shadow: inset 0 0 0 4px var(--sp-colors-accent); padding-left: var(--sp-space-1); padding-right: var(--sp-space-1); }
-  .sp-c-jcgexo:focus-visible .cm-line { padding: 0 var(--sp-space-2); }
-  .sp-c-jcgexo:focus-visible .cm-gutter.cm-lineNumbers { padding-left: 0px; padding-right: var(--sp-space-2); }
+  .sp-c-jOWzsE { margin: 0px; outline: none; height: 100%; }
   .sp-c-jkvvao .sp-syntax-string { color: var(--sp-syntax-color-string); font-style: var(--sp-syntax-fontStyle-string); }
   .sp-c-jkvvao .sp-syntax-plain { color: var(--sp-syntax-color-plain); font-style: var(--sp-syntax-fontStyle-plain); }
   .sp-c-jkvvao .sp-syntax-comment { color: var(--sp-syntax-color-comment); font-style: var(--sp-syntax-fontStyle-comment); }
@@ -145,11 +141,11 @@ function getSandpackCssText_PATCHED() {
   .sp-c-jkvvao .sp-syntax-static { color: var(--sp-syntax-color-static); font-style: var(--sp-syntax-fontStyle-static); }
   .sp-c-kKzdnH { position: absolute; inset: 0px; margin: 0px; overflow: auto; height: 100%; z-index: var(--sp-zIndices-top); }
   .sp-c-flHYPS { background-color: var(--sp-colors-surface1); }
-  .sp-c-kkdexE { position: absolute; right: var(--sp-space-2); bottom: var(--sp-space-2); z-index: var(--sp-zIndices-top); width: 32px; height: 32px; border-radius: var(--sp-border-radius); }
-  .sp-c-kkdexE .sp-c-bpmgvy { display: block; }
-  .sp-c-kkdexE .sp-c-dVXmCU { display: none; }
-  .sp-c-kkdexE:hover .sp-c-dVXmCU { display: block; }
-  .sp-c-kkdexE:hover .sp-c-bpmgvy { display: none; }
+  .sp-c-laEVxU { position: absolute; right: var(--sp-space-2); bottom: var(--sp-space-2); z-index: var(--sp-zIndices-top); width: 32px; height: 32px; border-radius: var(--sp-border-radius); }
+  .sp-c-laEVxU .sp-c-bpmgvy { display: block; }
+  .sp-c-laEVxU .sp-c-dRhJti { display: none; }
+  .sp-c-laEVxU:hover .sp-c-dRhJti { display: block; }
+  .sp-c-laEVxU:hover .sp-c-bpmgvy { display: none; }
   .sp-c-hPyEbM { animation: 1s linear 0s infinite normal forwards running sp-k-iOHdLQ; transform-style: preserve-3d; transform: rotateX(-25.5deg) rotateY(45deg); }
   .sp-c-hPyEbM * { border: 10px solid var(--sp-colors-clickable); border-radius: 8px; background: var(--sp-colors-surface1); }
   .sp-c-hPyEbM .top { transform: rotateX(90deg) translateZ(44px); transform-origin: 50% 50%; }
@@ -181,6 +177,5 @@ function getSandpackCssText_PATCHED() {
 }
 --sxs { --sxs:6; }
 @media  {
-}
-`;
+}`;
 }
diff --git a/beta/src/utils/codemirrorMarkdownShim.js b/beta/src/utils/codemirrorMarkdownShim.js
deleted file mode 100644
index 18e816e72..000000000
--- a/beta/src/utils/codemirrorMarkdownShim.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Copyright (c) Facebook, Inc. and its affiliates.
- */
-
-export function markdown() {
-  return 'Not used on React Beta site.';
-}
diff --git a/beta/yarn.lock b/beta/yarn.lock
index 947a0a5e1..67cd47442 100644
--- a/beta/yarn.lock
+++ b/beta/yarn.lock
@@ -571,18 +571,6 @@
     "@codemirror/state" "^0.19.0"
     "@codemirror/view" "^0.19.23"
 
-"@codemirror/highlight@^0.19.0":
-  version "0.19.8"
-  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
-  integrity sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==
-  dependencies:
-    "@codemirror/language" "^0.19.0"
-    "@codemirror/rangeset" "^0.19.0"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/view" "^0.19.39"
-    "@lezer/common" "^0.15.0"
-    style-mod "^4.0.0"
-
 "@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
   version "0.19.7"
   resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
@@ -614,7 +602,7 @@
     "@codemirror/state" "^0.19.0"
     "@lezer/css" "^0.15.2"
 
-"@codemirror/lang-html@^0.19.0", "@codemirror/lang-html@^0.19.4":
+"@codemirror/lang-html@^0.19.4":
   version "0.19.4"
   resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.4.tgz#e6eec28462f18842a0e108732a214a7416b5e333"
   integrity sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==
@@ -641,19 +629,6 @@
     "@codemirror/view" "^0.19.0"
     "@lezer/javascript" "^0.15.1"
 
-"@codemirror/lang-markdown@^0.19.3":
-  version "0.19.6"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-markdown/-/lang-markdown-0.19.6.tgz#761301d276fcfbdf88440f0333785efd71c2a4f5"
-  integrity sha512-ojoHeLgv1Rfu0GNGsU0bCtXAIp5dy4VKjndHScITQdlCkS/+SAIfuoeowEx+nMAQwTxI+/9fQZ3xdZVznGFYug==
-  dependencies:
-    "@codemirror/highlight" "^0.19.0"
-    "@codemirror/lang-html" "^0.19.0"
-    "@codemirror/language" "^0.19.0"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/view" "^0.19.0"
-    "@lezer/common" "^0.15.0"
-    "@lezer/markdown" "^0.15.0"
-
 "@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
   version "0.19.7"
   resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.7.tgz#9eef8e827692d93a701b18db9d46a42be34ecca6"
@@ -734,29 +709,18 @@
     style-mod "^4.0.0"
     w3c-keyname "^2.2.4"
 
-"@codemirror/view@^0.19.39":
-  version "0.19.48"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.48.tgz#1c657e2b0f8ed896ac6448d6e2215ab115e2a0fc"
-  integrity sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==
-  dependencies:
-    "@codemirror/rangeset" "^0.19.5"
-    "@codemirror/state" "^0.19.3"
-    "@codemirror/text" "^0.19.0"
-    style-mod "^4.0.0"
-    w3c-keyname "^2.2.4"
-
-"@codesandbox/sandpack-client@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.7.0.tgz#cae07db91da3ef2893f20c0d11d58641e7af2a33"
-  integrity sha512-13nL7+OX7iefVXeO+cvEntZD/hBuXLPjv72e5tiCjwuq/oor8jR2NGxzJ0pozUfZmJhvDIAxw5isJvhiIdgcWA==
+"@codesandbox/sandpack-client@^1.10.1":
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.10.1.tgz#c1dfd59c853fb9b6532a3dfdfe14736df36e6f4b"
+  integrity sha512-BZAfseNTO2a3AFZfGH+zKkbg6nMMy2bjg43trgGVdZyuu6mC7X/VBEdHF3ULl3AsEM5CsrSmu3SbDCNitmUHQQ==
   dependencies:
     codesandbox-import-utils "^1.2.3"
     lodash.isequal "^4.5.0"
 
-"@codesandbox/sandpack-react@1.7.2":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.7.2.tgz#5559797f2d405a7fb59577d92097c88628f79d20"
-  integrity sha512-oOaGzzqcFcDgoHMZ1cuQKYGTdQPgtmMHNgingSbzxcxTCIsA0hkwm+2ilVH1d1AZSgbIPoLqbYVjrdtsO4lJJg==
+"@codesandbox/sandpack-react@1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.11.0.tgz#ce58b754dd4105bfc568878ba23336479163ef73"
+  integrity sha512-0kzMFhO1MUFJv69kuuJmdTKq1xZVTdXVxFW7lEON+42lxIctQJuzo5ooCJnjWU6QhSvKRQQ7NLrtJrDXYLP2Kg==
   dependencies:
     "@code-hike/classer" "^0.0.0-aa6efee"
     "@codemirror/closebrackets" "^0.19.0"
@@ -768,12 +732,11 @@
     "@codemirror/lang-css" "^0.19.3"
     "@codemirror/lang-html" "^0.19.4"
     "@codemirror/lang-javascript" "^0.19.3"
-    "@codemirror/lang-markdown" "^0.19.3"
     "@codemirror/language" "^0.19.7"
     "@codemirror/matchbrackets" "^0.19.3"
     "@codemirror/state" "^0.19.6"
     "@codemirror/view" "^0.19.32"
-    "@codesandbox/sandpack-client" "^1.7.0"
+    "@codesandbox/sandpack-client" "^1.10.1"
     "@react-hook/intersection-observer" "^3.1.1"
     "@stitches/core" "^1.2.6"
     clean-set "^1.1.2"
@@ -910,13 +873,6 @@
   dependencies:
     "@lezer/common" "^0.15.0"
 
-"@lezer/markdown@^0.15.0":
-  version "0.15.6"
-  resolved "https://registry.yarnpkg.com/@lezer/markdown/-/markdown-0.15.6.tgz#2a826a507399b32176efdc35554397f05227d2aa"
-  integrity sha512-1XXLa4q0ZthryUEfO47ipvZHxNb+sCKoQIMM9dKs5vXZOBbgF2Vah/GL3g26BFIAEc2uCv4VQnI+lSrv58BT3g==
-  dependencies:
-    "@lezer/common" "^0.15.0"
-
 "@mdx-js/mdx@^2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-2.1.3.tgz#d5821920ebe546b45192f4c7a64dcc68a658f7f9"