Add tab interaction

Author: pomber

playground/src/app.jsx

@@ -14,8 +14,14 @@ print("This is Code Hike")
 
 `;
 
+const defaultInput = {
+  mdx: defaultCode,
+  css: ".preview-container { border: 1px solid blue; }",
+  config: {},
+};
+
 function App() {
-  const [code, setCode] = useState(defaultCode);
+  const [input, setInput] = useState(defaultInput);
 
   return (
     <div className="app">
@@ -29,8 +35,8 @@ function App() {
         </a>
       </header>
       <main>
-        <Editor setCode={setCode} defaultCode={defaultCode} />
-        <Preview code={code} />
+        <Editor setInput={setInput} input={input} />
+        <Preview input={input} />
       </main>
     </div>
   );

playground/src/editor.jsx

@@ -1,12 +1,33 @@
 import MonacoEditor from "@monaco-editor/react";
 import { useState } from "react";
 
-export function Editor({ setCode, defaultCode }) {
-  function handleEditorChange(value, event) {
-    setCode(value);
-  }
+const tabs = {
+  mdx: {
+    lang: "markdown",
+    code: (input) => input.mdx,
+  },
+  css: {
+    lang: "css",
+    code: (input) => input.css,
+  },
+  config: {
+    lang: "json",
+    code: (input) => JSON.stringify(input.config, null, 2),
+  },
+};
 
+export function Editor({ setInput, input }) {
   const [tab, setTab] = useState("mdx");
+
+  function handleEditorChange(code, event) {
+    let value = code;
+    if (tab === "config") {
+      console.log({ code });
+      value = JSON.parse(code);
+    }
+    setInput((prev) => ({ ...prev, [tab]: value }));
+  }
+
   return (
     <div className="editor-side">
       <nav>
@@ -35,9 +56,10 @@ export function Editor({ setCode, defaultCode }) {
       <MonacoEditor
         className="editor"
         onChange={handleEditorChange}
-        defaultLanguage="markdown"
         theme="vs-dark"
-        defaultValue={defaultCode}
+        path={tab}
+        defaultLanguage={tabs[tab].lang}
+        defaultValue={tabs[tab].code(input)}
         options={{
           // https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IEditorConstructionOptions.html
           minimap: {

playground/src/index.css

@@ -77,7 +77,7 @@ main {
 .editor-side nav {
   background-color: #111;
   color: #fafafa;
-  height: 2rem;
+  height: 2.2rem;
   min-height: 2rem;
   border-bottom: 1px solid #444;
   display: flex;
@@ -94,6 +94,9 @@ main {
   box-sizing: border-box;
   padding-top: 3px;
   padding-bottom: 3px;
+  font-size: 0.95em;
+  display: inline-flex;
+  align-items: center;
 }
 
 .editor-tab[data-active="true"] {

playground/src/preview.jsx

@@ -10,7 +10,10 @@ import theme from "shiki/themes/material-darker.json";
 export function Preview(props) {
   return (
     <div className="preview">
-      <ErrorBoundary resetKeys={[props.code]} FallbackComponent={ErrorFallback}>
+      <ErrorBoundary
+        resetKeys={[props.input.mdx, props.input.css, props.input.config]}
+        FallbackComponent={ErrorFallback}
+      >
         <InnerPreview {...props} />
       </ErrorBoundary>
     </div>
@@ -25,13 +28,15 @@ function ErrorFallback({ error }) {
   );
 }
 
-function InnerPreview({ code }) {
+function InnerPreview({ input }) {
   const [Content, setContent] = useState(undefined);
   const [error, setError] = useState(undefined);
   useEffect(() => {
-    compile(code, {
+    compile(input.mdx, {
       outputFormat: "function-body",
-      remarkPlugins: [[remarkCodeHike, { autoImport: false, theme }]],
+      remarkPlugins: [
+        [remarkCodeHike, { ...input.config, autoImport: false, theme }],
+      ],
     })
       .then((c) => {
         return run(String(c), runtime);
@@ -44,7 +49,7 @@ function InnerPreview({ code }) {
         setError(e.message);
         console.error({ e });
       });
-  }, [code]);
+  }, [input.mdx, input.css, input.config]);
   // console.log(error);
   return (
     <>