Merge pull request #187 from code-hike/more-playground

Better playground

Author: pomber

package.json

@@ -11,6 +11,7 @@
   "scripts": {
     "build": "lerna run --stream build",
     "build:lib": "lerna run --stream --scope @*/mdx build",
+    "build:playground": "lerna run --stream --scope playground build",
     "test": "lerna run --stream test",
     "dev": "lerna run --stream --scope @*/mdx dev",
     "release": "auto shipit"

packages/mdx/dev/content/markdown.mdx

@@ -0,0 +1,27 @@
+Test nested syntax highlighting
+
+````md hi.md
+# Hi
+
+```js
+export default {
+  data() {
+    return {
+      greeting: "Hello World!",
+    }
+  },
+}
+```
+
+[lorem](https://loremipsum.com)
+````
+
+```js hi.js
+export default {
+  data() {
+    return {
+      greeting: "Hello World!",
+    }
+  },
+}
+```

packages/mdx/package.json

@@ -34,6 +34,7 @@
   "scripts": {
     "dev": "next",
     "build": "rollup -c rollup.config.js",
+    "watch": "rollup --watch -c  rollup.config.js",
     "test": "vitest",
     "coverage": "vitest run --coverage"
   },

packages/mdx/src/highlighter/index.tsx

@@ -33,11 +33,17 @@ export async function highlight({
     }
   }
   if (highlighterPromise === null) {
+    const isBrowser = typeof window !== "undefined"
+    // if we are on the server we load all the languages
+    // if we are on the browser just load the first language
+    // subsequent calls with different languages will lazy load
+    const langs = isBrowser ? [lang as Lang] : undefined
+
     // TODO add version
     setCDN("https://unpkg.com/shiki/")
     highlighterPromise = getHighlighter({
       theme: theme as IShikiTheme,
-      // langs: [lang as Lang], // TODO change lang from string to Lang
+      langs,
     })
   }
 

playground/package.json

@@ -11,9 +11,11 @@
     "@code-hike/mdx": "^0.5.1",
     "@mdx-js/mdx": "^2.1.1",
     "@monaco-editor/react": "^4.4.5",
+    "lz-string": "^1.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-error-boundary": "^3.1.4"
+    "react-error-boundary": "^3.1.4",
+    "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
     "@types/react": "^17.0.2",

playground/src/app.jsx

@@ -1,23 +1,53 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Editor } from "./editor";
+import { readHash, writeHash } from "./hash";
 import { Preview } from "./preview";
+import SplitPane from "react-split-pane";
+import "./resizer.css";
 
 const defaultCode = `
 # Hello
 
 Edit me.
 
-~~~python hello.py
+\`\`\`python hello.py
 # mark[16:24]
 print("This is Code Hike")
-~~~
+\`\`\`
 
 `;
 
+const defaultCss = `.preview-container { 
+  margin: 8px; 
+}`;
+
 function App() {
-  const [code, setCode] = useState(defaultCode);
+  const data = React.useMemo(() => {
+    const input = readHash() || {
+      mdx: defaultCode,
+      css: defaultCss,
+      config: {
+        lineNumbers: false,
+        showCopyButton: false,
+        theme: "material-darker",
+      },
+    };
+    const params = new URL(location).searchParams;
+    const standalonePreview = !!params.get("preview");
+    return { input, standalonePreview };
+  }, []);
+  const [input, setInput] = useState(data.input);
 
-  return (
+  React.useEffect(() => {
+    writeHash(input);
+  }, [input]);
+
+  // when the width changes we want to re-render the preview
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  return data.standalonePreview ? (
+    <Preview input={input} standalone={true} />
+  ) : (
     <div className="app">
       <header>
         <a className="code-hike" href="https://codehike.org">
@@ -27,10 +57,19 @@ function App() {
             <span>v0.5.1</span>
           </h1>
         </a>
+        <a href="https://codehike.org/docs">Docs</a>
+        <a href="https://codehike.org/#demos">Demos</a>
       </header>
       <main>
-        <Editor setCode={setCode} defaultCode={defaultCode} />
-        <Preview code={code} />
+        <SplitPane
+          split="vertical"
+          minSize={200}
+          defaultSize="50%"
+          onDragFinished={(e) => setRefreshKey(e)}
+        >
+          <Editor setInput={setInput} input={input} />
+          <Preview input={input} refreshKey={refreshKey} />
+        </SplitPane>
       </main>
     </div>
   );

playground/src/editor.jsx

@@ -1,12 +1,30 @@
 import MonacoEditor from "@monaco-editor/react";
 import { useState } from "react";
+import { themeList } from "./themes";
 
-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) {
+    let value = code;
+    setInput((prev) => ({ ...prev, [tab]: value }));
+  }
+
   return (
     <div className="editor-side">
       <nav>
@@ -32,27 +50,72 @@ export function Editor({ setCode, defaultCode }) {
           Config
         </span>
       </nav>
-      <MonacoEditor
-        className="editor"
-        onChange={handleEditorChange}
-        defaultLanguage="markdown"
-        theme="vs-dark"
-        defaultValue={defaultCode}
-        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/hash.js

@@ -0,0 +1,27 @@
+import LZString from "lz-string";
+
+export function toHash(input) {
+  return LZString.compressToEncodedURIComponent(JSON.stringify(input));
+}
+
+export function fromHash(hash) {
+  return JSON.parse(LZString.decompressFromEncodedURIComponent(hash));
+}
+
+export function writeHash(input) {
+  const hash = toHash(input);
+  window.location.hash = hash;
+}
+
+export function readHash() {
+  const hash = document.location.hash.slice(1);
+  if (!hash) {
+    return null;
+  }
+
+  try {
+    return fromHash(hash);
+  } catch {
+    return {};
+  }
+}