Move logic to own file

DigitecGalaxus · Jul 19, 2024 · 6ecebf4 · 6ecebf4
1 parent 2da7888
commit 6ecebf4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 22 deletions.
diff --git a/packages/playground/src/Playground.tsx b/packages/playground/src/Playground.tsx
@@ -3,7 +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";
+import { readStateFromURL } from "./editor/shareableState";
 
 const defaultInputValue = `import { styled } from "next-yak";
 
@@ -20,6 +20,7 @@ export function Playground() {
   const [code, setCode] = useState(
     () => readStateFromURL() ?? defaultInputValue
   );
+  console.log({ code });
   const result = useHighlighter(code);
   return (
     <>
@@ -125,12 +126,4 @@ 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/editor/YakEditor.tsx b/packages/playground/src/editor/YakEditor.tsx
@@ -1,6 +1,7 @@
 import * as monaco from "monaco-editor";
 import { useEffect, useRef } from "react";
 import { useVocsTheme } from "../useVocsTheme";
+import { updateWindowLocation } from "./shareableState";
 
 export const YakEditor = ({
   initialValue,
@@ -13,7 +14,8 @@ export const YakEditor = ({
   const theme = useVocsTheme();
   useEffect(() => {
     if (monaco.editor.getModels().length > 0) {
-      return;
+      // remove active editors when switching from one link to another
+      monaco.editor.getModels().forEach((model) => model.dispose());
     }
     const model = monaco.editor.createModel(
       initialValue,
@@ -41,6 +43,14 @@ export const YakEditor = ({
     editor.onDidChangeModelContent(() => {
       onChange(editor.getModel()?.getValue() ?? "");
     });
+
+    window.addEventListener(
+      "focusout",
+      () => {
+        updateWindowLocation(editor.getModel()?.getValue() ?? "");
+      },
+      { passive: true }
+    );
   }, []);
 
   useEffect(() => {

diff --git a/packages/playground/src/editor/shareableState.ts b/packages/playground/src/editor/shareableState.ts
@@ -0,0 +1,22 @@
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from "lz-string";
+
+export function updateWindowLocation(code: string) {
+  const result = compressToEncodedURIComponent(code);
+  window.history.replaceState({}, "", `?code=${result}`);
+}
+
+export function saveToClipboard() {
+  window.navigator.clipboard.writeText(location.href.toString());
+  // todo: show a toast
+}
+
+export const readStateFromURL = () => {
+  const params = new URLSearchParams(location.search);
+  const code = params.get("code");
+  if (code) {
+    return decompressFromEncodedURIComponent(code);
+  }
+};
diff --git a/packages/playground/src/monaco.ts b/packages/playground/src/monaco.ts
@@ -6,7 +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";
+import { saveToClipboard, updateWindowLocation } from "./editor/shareableState";
 
 let highlighterPromise: ReturnType<typeof getHighlighterCore>;
 
@@ -106,7 +106,10 @@ export const setupMonaco = async () => {
     getStoredTheme() === "dark" ? "vitesse-dark" : "vitesse-light"
   );
 
-  monaco.editor.registerCommand("copy-clipboard", saveToClipboard);
+  monaco.editor.registerCommand("copy-clipboard", () => {
+    updateWindowLocation(monaco.editor.getModels()[0]?.getValue() ?? "");
+    saveToClipboard();
+  });
   monaco.editor.addKeybindingRule({
     command: "copy-clipboard",
     when: undefined,
@@ -120,17 +123,11 @@ export const setupMonaco = async () => {
     contextMenuGroupId: "run",
     contextMenuOrder: 1.5,
 
-    run: saveToClipboard,
+    run: () => {
+      updateWindowLocation(monaco.editor.getModels()[0]?.getValue() ?? "");
+      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
-}