From c7ef64accf06e6cd41448f2250e7b6d049673dfc Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 21 Nov 2022 01:12:06 +0100
Subject: [PATCH 1/3] [docs] Fix layout jump on first mistake

---
 docs/src/modules/components/Demo.js        | 22 +++++++++++++---------
 docs/src/modules/components/DemoEditor.tsx |  5 +++--
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 01e1c45e4438b9..dbc63779f14e11 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -94,7 +94,7 @@ function useDemoData(codeVariant, demo, githubLocation) {
   }, [canonicalAs, codeVariant, demo, githubLocation, userLanguage]);
 }
 
-function useDemoElement({ demoOptions, demoData, editorCode, setDebouncedError }) {
+function useDemoElement({ demoData, editorCode, setDebouncedError, liveDemoActive }) {
   const debouncedSetError = React.useMemo(
     () => debounce(setDebouncedError, 300),
     [setDebouncedError],
@@ -127,13 +127,10 @@ function useDemoElement({ demoOptions, demoData, editorCode, setDebouncedError }
     [demoData, debouncedSetError, editorCode.isPreview, editorCode.value],
   );
 
-  const renderBundledComponent =
-    // No need for a live environment if the code matches with the component rendered server-side.
-    editorCode.value === editorCode.initialEditorCode ||
-    // A limitation from https://github.com/nihgwu/react-runner, we can inject the `window` of the iframe
-    demoOptions.disableLiveEdit;
-
-  return renderBundledComponent ? BundledComponent : LiveComponent;
+  // No need for a live environment if the code matches with the component rendered server-side.
+  return editorCode.value === editorCode.initialEditorCode && liveDemoActive === false
+    ? BundledComponent
+    : LiveComponent;
 }
 
 const Root = styled('div')(({ theme }) => ({
@@ -396,11 +393,13 @@ export default function Demo(props) {
 
   const [debouncedError, setDebouncedError] = React.useState(null);
 
+  const [liveDemoActive, setLiveDemoActive] = React.useState(false);
+
   const demoElement = useDemoElement({
-    demoOptions,
     demoData,
     editorCode,
     setDebouncedError,
+    liveDemoActive,
   });
 
   return (
@@ -459,6 +458,8 @@ export default function Demo(props) {
           </NoSsr>
         )}
         <Collapse in={openDemoSource} unmountOnExit>
+          {/* A limitation from https://github.com/nihgwu/react-runner,
+            we can inject the `window` of the iframe so we need a disableLiveEdit option. */}
           {demoOptions.disableLiveEdit ? (
             <DemoCodeViewer
               code={editorCode.value}
@@ -481,6 +482,9 @@ export default function Demo(props) {
                   value,
                 });
               }}
+              onFocus={() => {
+                setLiveDemoActive(true);
+              }}
               id={demoSourceId}
               language={demoData.sourceLanguage}
               copyButtonProps={{
diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
index 54058116f3aa63..a193aa944b76da 100644
--- a/docs/src/modules/components/DemoEditor.tsx
+++ b/docs/src/modules/components/DemoEditor.tsx
@@ -57,7 +57,7 @@ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({
   },
 }));
 
-interface DemoEditorProps {
+interface DemoEditorProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   copyButtonProps: {};
   id: string;
@@ -67,7 +67,7 @@ interface DemoEditorProps {
 }
 
 export default function DemoEditor(props: DemoEditorProps) {
-  const { language, value, onChange, copyButtonProps, children, id } = props;
+  const { language, value, onChange, copyButtonProps, children, id, ...other } = props;
   const t = useTranslate();
   const contextTheme = useTheme();
   const wrapperRef = React.useRef<HTMLElement | null>(null);
@@ -100,6 +100,7 @@ export default function DemoEditor(props: DemoEditorProps) {
           }
         }
       }}
+      {...other}
     >
       <div className="MuiCode-root" {...handlers}>
         <div className="scrollContainer">

From 48ce028bd15f3e090465dff8d7cb7d4df6911007 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 23 Nov 2022 15:08:35 +0100
Subject: [PATCH 2/3] Fix typo

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
---
 docs/src/modules/components/Demo.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index dbc63779f14e11..dbb2c3f126048d 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -459,7 +459,7 @@ export default function Demo(props) {
         )}
         <Collapse in={openDemoSource} unmountOnExit>
           {/* A limitation from https://github.com/nihgwu/react-runner,
-            we can inject the `window` of the iframe so we need a disableLiveEdit option. */}
+            we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
           {demoOptions.disableLiveEdit ? (
             <DemoCodeViewer
               code={editorCode.value}

From cb9468085b5224b5716b5e08a7566f1871cbb529 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 23 Nov 2022 15:22:46 +0100
Subject: [PATCH 3/3] run ci