[docs] Fix layout jump on first mistake (mui#35215)

Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
daniel-rabe · Nov 29, 2022 · 828055e · 828055e
1 parent 1a8f708
commit 828055e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -95,7 +95,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],
@@ -128,13 +128,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 }) => ({
@@ -423,11 +420,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 (
@@ -486,6 +485,8 @@ export default function Demo(props) {
           </NoSsr>
         )}
         <Collapse in={openDemoSource} unmountOnExit>
+          {/* A limitation from https://github.com/nihgwu/react-runner,
+            we can't inject the `window` of the iframe so we need a disableLiveEdit option. */}
           {demoOptions.disableLiveEdit ? (
             <DemoCodeViewer
               code={editorCode.value}
@@ -508,6 +509,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
@@ -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">