Add theme config

Author: pomber

playground/src/app.jsx

@@ -25,7 +25,11 @@ function App() {
       readHash() || {
         mdx: defaultCode,
         css: defaultCss,
-        config: { lineNumbers: false, showCopyButton: false },
+        config: {
+          lineNumbers: false,
+          showCopyButton: false,
+          theme: "material-darker",
+        },
       }
     );
   }, []);

playground/src/editor.jsx

@@ -1,5 +1,6 @@
 import MonacoEditor from "@monaco-editor/react";
 import { useState } from "react";
+import { themeList } from "./themes";
 
 const tabs = {
   mdx: {
@@ -19,12 +20,8 @@ const tabs = {
 export function Editor({ setInput, input }) {
   const [tab, setTab] = useState("mdx");
 
-  function handleEditorChange(code, event) {
+  function handleEditorChange(code) {
     let value = code;
-    if (tab === "config") {
-      console.log({ code });
-      value = JSON.parse(code);
-    }
     setInput((prev) => ({ ...prev, [tab]: value }));
   }
 
@@ -53,28 +50,72 @@ export function Editor({ setInput, input }) {
           Config
         </span>
       </nav>
-      <MonacoEditor
-        className="editor"
-        onChange={handleEditorChange}
-        theme="vs-dark"
-        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: {
-            enabled: false,
-          },
-          lineNumbers: "off",
-          scrollBeyondLastLine: false,
-          hideCursorInOverviewRuler: true,
-          matchBrackets: false,
-          overviewRulerBorder: false,
-          renderLineHighlight: "none",
-          wordWrap: "on",
-          tabSize: 2,
-        }}
-      />
+      {tab === "config" ? (
+        <ConfigEditor config={input.config} onChange={handleEditorChange} />
+      ) : (
+        <div className="editor">
+          <MonacoEditor
+            onChange={handleEditorChange}
+            theme="vs-dark"
+            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: {
+                enabled: false,
+              },
+              lineNumbers: "off",
+              scrollBeyondLastLine: false,
+              hideCursorInOverviewRuler: true,
+              matchBrackets: false,
+              overviewRulerBorder: false,
+              renderLineHighlight: "none",
+              wordWrap: "on",
+              tabSize: 2,
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }
+
+function ConfigEditor({ config, onChange }) {
+  return (
+    <form className="editor config-editor">
+      <label>
+        <input
+          type="checkbox"
+          checked={config.lineNumbers}
+          onChange={(e) =>
+            onChange({ ...config, lineNumbers: e.target.checked })
+          }
+        />
+        Line Numbers
+      </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={config.showCopyButton}
+          onChange={(e) =>
+            onChange({ ...config, showCopyButton: e.target.checked })
+          }
+        />
+        Copy Button
+      </label>
+      <label>
+        Theme:
+        <br />
+        <select
+          value={config.theme}
+          onChange={(e) => onChange({ ...config, theme: e.target.value })}
+        >
+          {themeList().map((theme) => (
+            <option key={theme}>{theme}</option>
+          ))}
+        </select>
+      </label>
+    </form>
+  );
+}

playground/src/index.css

@@ -79,6 +79,7 @@ main {
   color: #fafafa;
   height: 2.2rem;
   min-height: 2rem;
+  max-height: 2rem;
   border-bottom: 1px solid #444;
   display: flex;
   align-items: center;
@@ -108,6 +109,31 @@ main {
 .editor-tab:hover {
   color: rgb(179, 209, 245);
 }
+
+.editor {
+  flex: 1;
+  background-color: #1e1e1e;
+  color: #d4d4d4;
+  color-scheme: dark;
+}
+
+.config-editor {
+  padding: 0.6rem 1.5rem;
+}
+
+.config-editor label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
+.config-editor input[type="checkbox"] {
+  margin-right: 0.5rem;
+}
+
+.config-editor select {
+  font-size: 1rem;
+}
+
 .preview {
   min-width: 600px;
   border-left: 2px solid cadetblue;

playground/src/preview.jsx

@@ -5,7 +5,7 @@ import { remarkCodeHike } from "@code-hike/mdx";
 import { CH } from "@code-hike/mdx/components";
 import "@code-hike/mdx/styles.css";
 import { ErrorBoundary } from "react-error-boundary";
-import theme from "shiki/themes/material-darker.json";
+import { getTheme } from "./themes";
 
 export function Preview(props) {
   return (
@@ -35,7 +35,14 @@ function InnerPreview({ input }) {
     compile(input.mdx, {
       outputFormat: "function-body",
       remarkPlugins: [
-        [remarkCodeHike, { ...input.config, autoImport: false, theme }],
+        [
+          remarkCodeHike,
+          {
+            ...input.config,
+            autoImport: false,
+            theme: getTheme(input.config.theme),
+          },
+        ],
       ],
     })
       .then((c) => {

playground/src/themes.js

@@ -0,0 +1,17 @@
+const modules = import.meta.globEager("../../node_modules/shiki/themes/*.json");
+
+const themes = {};
+Object.keys(modules).forEach((path) => {
+  const name = path.split("/").pop().replace(".json", "");
+  if (name !== "css-variables") {
+    themes[name] = modules[path].default;
+  }
+});
+
+export function themeList() {
+  return Object.keys(themes);
+}
+
+export function getTheme(name) {
+  return themes[name];
+}