Merge pull request #36 from wajeshubham/dev

Dev

Author: wajeshubham

README.md

@@ -173,7 +173,7 @@ OR
 - [x] Import and export snippng config to quickly build the editor (download the JSON file with editor config)
 - [ ] Add theme presets to choose from
 - [ ] Option to create/save single default editor config for user
-- [ ] Custom theme configuration
+- [x] Custom theme configuration
 - [ ] Publish your themes
 - [ ] Build more themes to choose from
 

__tests__/components/snippng_code_area.test.tsx

@@ -5,6 +5,8 @@ import { getEditorWrapperBg } from "@/utils";
 import { render, screen, waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 
+jest.mock("next/router", () => require("next-router-mock"));
+
 beforeEach(() => {
   // IntersectionObserver isn't available in test environment
   const mockIntersectionObserver = jest.fn();

__tests__/components/snippng_control_header.test.tsx

@@ -4,6 +4,8 @@ import { defaultEditorConfig, LANGUAGES, THEMES } from "@/lib/constants";
 import { render, screen, waitFor } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
 
+jest.mock("next/router", () => require("next-router-mock"));
+
 beforeAll(() => {
   document.createRange = () => {
     const range = new Range();

components/editor/SnippngCodeArea.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 
-import { DEFAULT_BASE_SETUP } from "@/lib/constants";
+import { DEFAULT_BASE_SETUP, THEMES } from "@/lib/constants";
 import {
   clsx,
+  constructTheme,
   deepClone,
   getEditorWrapperBg,
   getLanguage,
@@ -25,6 +26,7 @@ import SnippngWindowControls from "./SnippngWindowControls";
 import { db } from "@/config/firebase";
 import { useAuth } from "@/context/AuthContext";
 import { useToast } from "@/context/ToastContext";
+import { SnippngThemeAttributesInterface } from "@/types";
 import {
   ArrowDownOnSquareStackIcon,
   ArrowPathIcon,
@@ -33,7 +35,11 @@ import {
 import { addDoc, collection, doc, updateDoc } from "firebase/firestore";
 import Logo from "../Logo";
 
-const SnippngCodeArea = () => {
+interface Props {
+  underConstructionTheme?: SnippngThemeAttributesInterface;
+}
+
+const SnippngCodeArea: React.FC<Props> = ({ underConstructionTheme }) => {
   const editorRef = useRef<HTMLDivElement>(null); // useRef to persist existing ref. Might be useful when dealing with background image in future
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [saving, setSaving] = useState(false);
@@ -110,16 +116,40 @@ const SnippngCodeArea = () => {
     }
   };
 
+  /**
+   *
+   * @returns editor compatible theme object
+   * @description  Function is responsible for constructing theme based on if it is a
+   * - `predefined` - theme in the `@uiw/codemirror-themes-all` library
+   * - `localCustom` - Build by user and saved locally
+   * - `underConstructionTheme` - user is currently constructing/configuring new theme
+   */
+  const getSelectedTheme = () => {
+    // If user is configuring the custom theme (SnippngCustomThemeContextProvider modal is mounded)
+    if (underConstructionTheme) return constructTheme(underConstructionTheme);
+    else {
+      // check if selected theme is predefined or locally created
+      let [isPredefined, isLocalCustom] = getTheme(selectedTheme.id);
+
+      if (isPredefined) return themes[isPredefined]; // if it is predefined return the theme configuration from the library
+
+      if (isLocalCustom) return constructTheme(isLocalCustom); // else construct and return the code mirror compatible theme
+
+      return themes[THEMES[0].id as keyof typeof themes]; // this will be returned if theme is not predefined as well as not available locally
+    }
+  };
+
   useEffect(() => {
     // if there is a uid means we are on edit page where we want to avoid persisting the editor config
-    if (uid) return;
+    // underConstructionTheme means user is on the theme page which we don't want to persist
+    if (uid || underConstructionTheme) return;
     // persist the editor config changes only when user is creating new snippet
     LocalStorage.set("config", {
       ...editorConfig,
       uid: undefined,
       ownerUid: undefined,
     });
-  }, [editorConfig, uid]);
+  }, [editorConfig, uid, underConstructionTheme]);
 
   return (
     <>
@@ -131,7 +161,10 @@ const SnippngCodeArea = () => {
         <NoSSRWrapper>
           <div className="rounded-md bg-white dark:bg-zinc-900 md:p-8 p-4 flex justify-center border-[1px] flex-col items-center dark:border-zinc-500 border-zinc-200 shadow-md w-full">
             <div className="w-full">
-              <SnippngControlHeader wrapperRef={wrapperRef} />
+              <SnippngControlHeader
+                creatingTheme={!!underConstructionTheme}
+                wrapperRef={wrapperRef}
+              />
             </div>
             {bgImageVisiblePatch ? (
               <button
@@ -200,7 +233,7 @@ const SnippngCodeArea = () => {
                     fontSize: `${editorFontSize}px`,
                   }}
                   // @ts-ignore
-                  theme={themes[getTheme(selectedTheme.id)]}
+                  theme={getSelectedTheme()}
                   indentWithTab
                   onChange={(value) => handleConfigChange("code")(value)}
                 >
@@ -232,64 +265,65 @@ const SnippngCodeArea = () => {
                 ) : null}
               </div>
             </div>
-            <div className="w-full mt-8 flex md:flex-row flex-col gap-4 justify-start items-center">
-              <div className="w-full">
-                <Input
-                  value={snippetsName}
-                  onChange={(e) =>
-                    handleConfigChange("snippetsName")(e.target.value)
-                  }
-                  placeholder="Snippet name..."
-                />
-              </div>
-              <div className="flex flex-shrink-0 gap-4 md:flex-row flex-col md:w-fit w-full">
-                <Button
-                  id="save-snippet-btn"
-                  StartIcon={ArrowDownOnSquareStackIcon}
-                  disabled={saving}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    if (!user)
-                      return addToast({
-                        message: "Please login first",
-                        type: "error",
-                        description:
-                          "You need to login before saving the snippet",
-                      });
-                    if (!snippetsName)
-                      return addToast({
-                        message: "Snippet name is required",
-                        type: "error",
-                      });
-                    else saveSnippet();
-                  }}
-                >
-                  {saving
-                    ? "Saving..."
-                    : uid // if there is a uid, we are on snippet details page where user can copy the snippet
-                    ? "Fork snippet"
-                    : "Save snippet"}
-                </Button>
-                {uid && user && user.uid === ownerUid ? (
+            {!underConstructionTheme ? (
+              <div className="w-full mt-8 flex md:flex-row flex-col gap-4 justify-start items-center">
+                <div className="w-full">
+                  <Input
+                    value={snippetsName}
+                    onChange={(e) =>
+                      handleConfigChange("snippetsName")(e.target.value)
+                    }
+                    placeholder="Snippet name..."
+                  />
+                </div>
+                <div className="flex flex-shrink-0 gap-4 md:flex-row flex-col md:w-fit w-full">
                   <Button
-                    StartIcon={ArrowPathIcon}
-                    disabled={updating}
+                    id="save-snippet-btn"
+                    StartIcon={ArrowDownOnSquareStackIcon}
+                    disabled={saving}
                     onClick={(e) => {
                       e.stopPropagation();
+                      if (!user)
+                        return addToast({
+                          message: "Please login first",
+                          type: "error",
+                          description:
+                            "You need to login before saving the snippet",
+                        });
                       if (!snippetsName)
                         return addToast({
                           message: "Snippet name is required",
                           type: "error",
                         });
-                      updateSnippet();
+                      else saveSnippet();
                     }}
                   >
-                    {updating ? "Updating..." : "Update snippet"}
+                    {saving
+                      ? "Saving..."
+                      : uid // if there is a uid, we are on snippet details page where user can copy the snippet
+                      ? "Fork snippet"
+                      : "Save snippet"}
                   </Button>
-                ) : null}
+                  {uid && user && user.uid === ownerUid ? (
+                    <Button
+                      StartIcon={ArrowPathIcon}
+                      disabled={updating}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (!snippetsName)
+                          return addToast({
+                            message: "Snippet name is required",
+                            type: "error",
+                          });
+                        updateSnippet();
+                      }}
+                    >
+                      {updating ? "Updating..." : "Update snippet"}
+                    </Button>
+                  ) : null}
+                </div>
               </div>
-            </div>
-            {/* TODO: Add CTA to remove background image */}
+            ) : null}
           </div>
           {uid ? (
             <small className="dark:text-zinc-300 text-left text-zinc-600 py-2 inline-block">

components/editor/SnippngControlHeader.tsx

@@ -5,14 +5,16 @@ import {
   defaultEditorConfig,
   DEFAULT_RANGES,
   DOWNLOAD_OPTIONS,
+  getAvailableThemes,
   LANGUAGES,
-  THEMES,
+  predefinedConfig,
 } from "@/lib/constants";
 import { ImagePicker } from "@/lib/image-picker";
 import { SelectOptionInterface } from "@/types";
-import { getEditorWrapperBg } from "@/utils";
+import { getEditorWrapperBg, LocalStorage } from "@/utils";
 import { Menu, Transition } from "@headlessui/react";
 import {
+  ArrowPathIcon,
   ArrowsUpDownIcon,
   ChevronDownIcon,
   CloudArrowDownIcon,
@@ -23,6 +25,7 @@ import {
   SparklesIcon,
 } from "@heroicons/react/24/outline";
 import * as htmlToImage from "html-to-image";
+import { useRouter } from "next/router";
 import { Fragment, RefObject, useState } from "react";
 import Button from "../form/Button";
 import Checkbox from "../form/Checkbox";
@@ -32,11 +35,15 @@ import SnippngConfigImportExporter from "./SnippngConfigImportExporter";
 
 const SnippngControlHeader: React.FC<{
   wrapperRef: RefObject<HTMLDivElement>;
-}> = ({ wrapperRef }) => {
+  creatingTheme?: boolean;
+}> = ({ wrapperRef, creatingTheme }) => {
   const [openImportExportSidebar, setOpenImportExportSidebar] = useState(false);
 
-  const { editorConfig, handleConfigChange } = useSnippngEditor();
+  const { editorConfig, handleConfigChange, setEditorConfig } =
+    useSnippngEditor();
+
   const { addToast } = useToast();
+  const router = useRouter();
 
   const {
     code,
@@ -96,7 +103,6 @@ const SnippngControlHeader: React.FC<{
 
   return (
     <>
-      {/* headless ui renders this sidebar in portal */}
       <SnippngConfigImportExporter
         open={openImportExportSidebar}
         onClose={() => {
@@ -111,15 +117,21 @@ const SnippngControlHeader: React.FC<{
           options={[...DOWNLOAD_OPTIONS]}
         />
 
-        <Select
-          Icon={SparklesIcon}
-          value={selectedTheme}
-          onChange={(val) => {
-            if (!val.id) return;
-            handleConfigChange("selectedTheme")(val);
-          }}
-          options={[...THEMES]}
-        />
+        {!creatingTheme ? (
+          <Select
+            Icon={SparklesIcon}
+            value={selectedTheme}
+            onChange={(val) => {
+              if (!val.id) return;
+              if (val.id === "create_new") {
+                router.push("/theme/create");
+                return;
+              }
+              handleConfigChange("selectedTheme")(val);
+            }}
+            options={getAvailableThemes()}
+          />
+        ) : null}
         <Select
           Icon={CommandLineIcon}
           value={selectedLang}
@@ -224,6 +236,14 @@ const SnippngControlHeader: React.FC<{
                   <ArrowsUpDownIcon className="h-5 w-5 mr-2" /> Import or export
                   config
                 </Menu.Button>
+                <Menu.Button
+                  className="w-full text-left p-2 inline-flex items-center"
+                  onClick={() => {
+                    setEditorConfig({ ...predefinedConfig });
+                  }}
+                >
+                  <ArrowPathIcon className="h-5 w-5 mr-2" /> Reset settings
+                </Menu.Button>
                 <div className="py-1 px-2">
                   <Checkbox
                     label="Watermark"