Add shareable playground links

DigitecGalaxus · Jul 19, 2024 · a514214 · a514214
1 parent ebefecc
commit a514214
Show file tree

Hide file tree

Showing 4 changed files with 6,535 additions and 5,155 deletions.
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -23,7 +23,8 @@
     "@babel/core": "7.23.2",
     "@babel/plugin-syntax-typescript": "7.22.5",
     "@babel/standalone": "^7.24.4",
-    "monaco-editor": "^0.46.0",
+    "lz-string": "^1.5.0",
+    "monaco-editor": "^0.50.0",
     "next-yak": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/packages/playground/src/Playground.tsx b/packages/playground/src/Playground.tsx
@@ -3,6 +3,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { YakEditor } from "./editor/YakEditor";
 import { setupMonaco } from "./monaco";
 import { useYakCompiler } from "./useYakCompiler/useYakCompiler";
+import { decompressFromEncodedURIComponent } from "lz-string";
 
 const defaultInputValue = `import { styled } from "next-yak";
 
@@ -16,7 +17,9 @@ export const Button = styled.button\`
 \`;`;
 
 export function Playground() {
-  const [code, setCode] = useState(defaultInputValue);
+  const [code, setCode] = useState(
+    () => readStateFromURL() ?? defaultInputValue
+  );
   const result = useHighlighter(code);
   return (
     <>
@@ -32,7 +35,7 @@ export function Playground() {
           }}
         >
           <YakEditor
-            initialValue={defaultInputValue}
+            initialValue={code}
             onChange={(value) => {
               setCode(value);
             }}
@@ -122,4 +125,12 @@ const useHighlighter = (code: string) => {
   return highlightedResult;
 };
 
+const readStateFromURL = () => {
+  const params = new URLSearchParams(location.search);
+  const code = params.get("code");
+  if (code) {
+    return decompressFromEncodedURIComponent(code);
+  }
+};
+
 export default Playground;
diff --git a/packages/playground/src/monaco.ts b/packages/playground/src/monaco.ts
@@ -6,6 +6,7 @@ import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"
 import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
 import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 import { getStoredTheme } from "./getStoredTheme";
+import { compressToEncodedURIComponent } from "lz-string";
 
 let highlighterPromise: ReturnType<typeof getHighlighterCore>;
 
@@ -91,7 +92,7 @@ export const setupMonaco = async () => {
 
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     jsx: monaco.languages.typescript.JsxEmit.Preserve,
-    jsxImportSource: 'next-yak',
+    jsxImportSource: "next-yak",
     esModuleInterop: true,
     paths: {
       react: ["/node_modules/@types/react"],
@@ -101,7 +102,35 @@ export const setupMonaco = async () => {
   // Register the themes from Shiki, and provide syntax highlighting for Monaco.
   shikiToMonaco(highlighter, monaco);
   // monaco is loaded after the theme is set, so we need to set it again
-  monaco.editor.setTheme( getStoredTheme() === "dark" ? "vitesse-dark" : "vitesse-light");
+  monaco.editor.setTheme(
+    getStoredTheme() === "dark" ? "vitesse-dark" : "vitesse-light"
+  );
+
+  monaco.editor.registerCommand("copy-clipboard", saveToClipboard);
+  monaco.editor.addKeybindingRule({
+    command: "copy-clipboard",
+    when: undefined,
+    keybinding: monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,
+  });
+  monaco.editor.addEditorAction({
+    id: "copy-clipboard",
+    label: "Save to clipboard",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS],
+
+    contextMenuGroupId: "run",
+    contextMenuOrder: 1.5,
+
+    run: saveToClipboard,
+  });
 
   return highlighter;
 };
+
+function saveToClipboard() {
+  const result = compressToEncodedURIComponent(
+    monaco.editor.getModels()[0]?.getValue() ?? ""
+  );
+  window.history.replaceState({}, "", `?code=${result}`);
+  window.navigator.clipboard.writeText(location.href.toString());
+  // todo: show a toast
+}