Merge pull request #30 from wajeshubham/presets

Presets

Author: wajeshubham

__tests__/components/snippng_code_area.test.tsx

@@ -1,6 +1,7 @@
 import { SnippngCodeArea, SnippngControlHeader } from "@/components";
 import { SnippngEditorContext } from "@/context/SnippngEditorContext";
 import { defaultEditorConfig } from "@/lib/constants";
+import { getEditorWrapperBg } from "@/utils";
 import { render, screen, waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 
@@ -222,5 +223,20 @@ describe("SnippngCodeArea", () => {
         expect(selectedBackgroundColor).toBe(wrapperBackgroundColor);
       });
     });
+
+    describe("Gradients property", () => {
+      it("renders wrapper with gradient equals to the gradient array", async () => {
+        let renderedBackground = getEditorWrapperBg(
+          "#eee811",
+          ["#ba68c8", "#ffa7c4", "#e57373"],
+          140
+        );
+        await waitFor(() => {
+          expect(renderedBackground).toBe(
+            `linear-gradient(140deg, #ba68c8, #ffa7c4, #e57373)`
+          );
+        });
+      });
+    });
   });
 });

__tests__/lib/color_picker.test.tsx

@@ -5,8 +5,6 @@ import {
   rgbToHsv,
   hsvToRgb,
 } from "@/lib/color-picker/utils";
-import { getEditorWrapperBg } from "@/utils";
-import { waitFor } from "@testing-library/react";
 
 describe("ColoPicker", () => {
   describe("Utility functions", () => {
@@ -48,19 +46,4 @@ describe("ColoPicker", () => {
       expect(Math.floor(expectedRGB.b)).toBe(Math.floor(convertedRGB.b));
     });
   });
-
-  describe("Gradients property", () => {
-    it("renders wrapper with gradient equals to the gradient array", async () => {
-      let renderedBackground = getEditorWrapperBg(
-        "#eee811",
-        ["#ba68c8", "#ffa7c4", "#e57373"],
-        140
-      );
-      await waitFor(() => {
-        expect(renderedBackground).toBe(
-          `linear-gradient(140deg, #ba68c8, #ffa7c4, #e57373)`
-        );
-      });
-    });
-  });
 });

components/editor/SnippngCodeArea.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { DEFAULT_BASE_SETUP } from "@/lib/constants";
 import {
@@ -7,6 +7,7 @@ import {
   getEditorWrapperBg,
   getLanguage,
   getTheme,
+  LocalStorage,
 } from "@/utils";
 
 import { langs, loadLanguage } from "@uiw/codemirror-extensions-langs";
@@ -107,6 +108,17 @@ const SnippngCodeArea = () => {
     }
   };
 
+  useEffect(() => {
+    // if there is a uid means we are on edit page where we want to avoid persisting the editor config
+    if (uid) return;
+    // persist the editor config changes only when user is creating new snippet
+    LocalStorage.set("config", {
+      ...editorConfig,
+      uid: undefined,
+      ownerUid: undefined,
+    });
+  }, [editorConfig, uid]);
+
   return (
     <>
       <section
@@ -247,7 +259,7 @@ const SnippngCodeArea = () => {
                     ? "Fork snippet"
                     : "Save snippet"}
                 </Button>
-                {user && user.uid === ownerUid ? (
+                {uid && user && user.uid === ownerUid ? (
                   <Button
                     StartIcon={ArrowPathIcon}
                     disabled={updating}

components/editor/SnippngControlHeader.tsx

@@ -213,7 +213,7 @@ const SnippngControlHeader: React.FC<{
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Menu.Items className="absolute right-0 max-h-[500px] z-30 mt-2 w-72 origin-top-right divide-y-[1px] dark:divide-zinc-400 divide-zinc-300 dark:bg-black bg-white overflow-auto text-sm rounded-sm outline outline-[1px] dark:outline-zinc-400 outline-zinc-300 dark:text-white text-zinc-900">
+              <Menu.Items className="absolute right-0 max-h-[500px] z-30 mt-2 w-96 origin-top-right divide-y-[1px] dark:divide-zinc-400 divide-zinc-300 dark:bg-black bg-white overflow-auto text-sm rounded-sm outline outline-[1px] dark:outline-zinc-400 outline-zinc-300 dark:text-white text-zinc-900">
                 <Menu.Button
                   className="w-full text-left p-2 inline-flex items-center"
                   onClick={() => {

lib/constants.ts

@@ -1,4 +1,7 @@
 import { SnippngEditorConfigInterface } from "@/types";
+import { LocalStorage } from "@/utils";
+
+export const isBrowser = typeof window !== "undefined";
 
 export const THEMES = [
   {
@@ -514,31 +517,40 @@ export const PEXELS_QUERY_STRINGS = [
   "technology",
 ];
 
-export const defaultEditorConfig: SnippngEditorConfigInterface = {
-  code: DEFAULT_CODE_SNIPPET,
-  snippetsName: "",
-  editorFontSize: 16,
-  editorWindowControlsType: "mac-left",
-  fileName: "@utils/debounce.ts",
-  hasDropShadow: true,
-  lineHeight: 19,
-  paddingHorizontal: 70,
-  paddingVertical: 70,
-  rounded: true,
-  selectedLang:
-    LANGUAGES.find((language) => language.id === "typescript") || LANGUAGES[0],
-  selectedTheme:
-    THEMES.find((theme) => theme.id === "tokyoNightStorm") || THEMES[0],
-  showFileName: true,
-  showLineNumbers: true,
-  wrapperBg: "#eee811",
-  gradients: ["#ba68c8", "#ffa7c4", "#e57373"],
-  gradientAngle: 140,
-  editorWidth: 0,
-  bgImageVisiblePatch: null,
-  bgBlur: 0,
+const getConfig = (): SnippngEditorConfigInterface => {
+  let persistedConfig = LocalStorage.get(
+    "config"
+  ) as SnippngEditorConfigInterface;
+  if (persistedConfig) return persistedConfig;
+  return {
+    code: DEFAULT_CODE_SNIPPET,
+    snippetsName: "",
+    editorFontSize: 16,
+    editorWindowControlsType: "mac-left",
+    fileName: "@utils/debounce.ts",
+    hasDropShadow: true,
+    lineHeight: 19,
+    paddingHorizontal: 70,
+    paddingVertical: 70,
+    rounded: true,
+    selectedLang:
+      LANGUAGES.find((language) => language.id === "typescript") ||
+      LANGUAGES[0],
+    selectedTheme:
+      THEMES.find((theme) => theme.id === "tokyoNightStorm") || THEMES[0],
+    showFileName: true,
+    showLineNumbers: true,
+    wrapperBg: "#eee811",
+    gradients: ["#ba68c8", "#ffa7c4", "#e57373"],
+    gradientAngle: 140,
+    editorWidth: 0,
+    bgImageVisiblePatch: null,
+    bgBlur: 0,
+  };
 };
 
+export const defaultEditorConfig: SnippngEditorConfigInterface = getConfig();
+
 export const DEFAULT_BASE_SETUP = {
   foldGutter: false,
   highlightActiveLine: false,

pages/snippet/[uid].tsx

@@ -47,7 +47,12 @@ const SavedSnippet = () => {
     if (!router.isReady) return;
     fetchCodeSnippet();
     return () => {
-      setEditorConfig({ ...defaultEditorConfig });
+      // set uid & ownerUid to undefined because we are leaving the snippet details page, the only page where uid is required
+      setEditorConfig({
+        ...defaultEditorConfig,
+        uid: undefined,
+        ownerUid: undefined,
+      });
     };
   }, [router.isReady]);
 

utils/index.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_RANGES, DEFAULT_WIDTHS } from "@/lib/constants";
+import { DEFAULT_RANGES, DEFAULT_WIDTHS, isBrowser } from "@/lib/constants";
 import {
   exportedTypeSuite,
   SnippngEditorConfigInterface,
@@ -137,3 +137,32 @@ export const validateSnippngConfig = (config: SnippngEditorConfigInterface) => {
 export const copyJSONText = async <T extends object>(data: T) => {
   return navigator.clipboard?.writeText(JSON.stringify(data));
 };
+
+export class LocalStorage {
+  static get(key: string) {
+    if (!isBrowser) return;
+    let value = localStorage.getItem(key);
+    if (value) {
+      try {
+        return JSON.parse(value);
+      } catch (err) {
+        return null;
+      }
+    }
+    return null;
+  }
+  static set(key: string, value: any) {
+    if (!isBrowser) return;
+    localStorage.setItem(key, JSON.stringify(value));
+  }
+
+  static remove(key: string) {
+    if (!isBrowser) return;
+    localStorage.removeItem(key);
+  }
+
+  static clear() {
+    if (!isBrowser) return;
+    localStorage.clear();
+  }
+}