Merge pull request #143 from chvmvd/fix-playground

chvmvd · web-flow · commit 8c5b39ee47af · 2022-12-29T14:23:46.000+09:00
Fix playground #123
diff --git a/src/components/BrowserWindow/index.tsx b/src/components/BrowserWindow/index.tsx
@@ -12,17 +12,17 @@ import styles from "./styles.module.css";
 
 interface Props {
   children: ReactNode;
-  minHeight: number;
-  url: string;
+  height: string;
+  url?: string;
 }
 
 export default function BrowserWindow({
   children,
-  minHeight,
+  height,
   url = "http://localhost:3000",
 }: Props): JSX.Element {
   return (
-    <div className={styles.browserWindow} style={{ minHeight }}>
+    <div className={styles.browserWindow} style={{ height }}>
       <div className={styles.browserWindowHeader}>
         <div className={styles.buttons}>
           <span className={styles.dot} style={{ background: "#f25f58" }} />
@@ -41,7 +41,9 @@ export default function BrowserWindow({
         </div>
       </div>
 
-      <div className={styles.browserWindowBody}>{children}</div>
+      <div className={styles.browserWindowBody} style={{ height: "90%" }}>
+        {children}
+      </div>
     </div>
   );
 }
diff --git a/src/components/IframeOutput.tsx b/src/components/IframeOutput.tsx
@@ -1,10 +1,16 @@
 import React from "react";
 import BrowserWindow from "@site/src/components/BrowserWindow";
 
-export default function IframeOutput({ children }: { children: string }) {
+export default function IframeOutput({
+  children,
+  height,
+}: {
+  children: string;
+  height?: string;
+}) {
   return (
     <>
-      <BrowserWindow minHeight={200}>
+      <BrowserWindow height={height === undefined ? "200px" : height}>
         <iframe
           width="100%"
           height="100%"
@@ -13,10 +19,12 @@ export default function IframeOutput({ children }: { children: string }) {
           onLoad={(e) => {
             setInterval(
               (e) => {
-                const iframe = e.target as HTMLIFrameElement;
-                iframe.height = "100%";
-                iframe.height =
-                  iframe.contentDocument.documentElement.scrollHeight + "px";
+                if (height == undefined) {
+                  const iframe = e.target as HTMLIFrameElement;
+                  iframe.height = "100%";
+                  iframe.height =
+                    iframe.contentDocument.documentElement.scrollHeight + "px";
+                }
               },
               3000,
               e
diff --git a/src/pages/HTMLPlayground.tsx b/src/pages/HTMLPlayground.tsx
@@ -11,22 +11,34 @@ export default function Home(): JSX.Element {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      description="This is a playground of HTML"
     >
       <Box p={2} mt={2}>
         <Grid container direction="row" spacing={2}>
           <Grid item xs={6}>
             <Editor
-              height="400px"
+              height="80vh"
               defaultLanguage="html"
-              defaultValue={"aouesa"}
+              defaultValue={`\
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <p>Hello World!</p>
+  </body>
+</html>\
+`}
               onChange={(value) => {
                 setHTML(value);
               }}
             />
           </Grid>
           <Grid item xs={6}>
-            <IframeOutput>{html}</IframeOutput>
+            <IframeOutput height="80vh">{html}</IframeOutput>
           </Grid>
         </Grid>
       </Box>
