Add watermark on code area

- Configure watermark in the context
- Add watermark visibility control in the settings

Author: wajeshubham

components/Logo.tsx

@@ -25,15 +25,15 @@ const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
   const getIconClassesBySize = () => {
     switch (size) {
       case "xs":
-        return "h-3 w-3";
+        return "h-4 w-4 mr-1";
       case "sm":
-        return "h-5 w-5";
+        return "h-5 w-5 mr-1";
       case "xl":
-        return "h-7 w-7";
+        return "h-7 w-7 mr-2";
       case "2xl":
-        return "h-9 w-9";
+        return "h-9 w-9 mr-2";
       default:
-        return "h-7 w-7";
+        return "h-7 w-7 mr-2";
     }
   };
 
@@ -45,7 +45,7 @@ const Logo: React.FC<{ size?: "xs" | "sm" | "xl" | "2xl" }> = ({
       )}
     >
       <CommandLineIcon
-        className={clsx("inset-0 mr-2", getIconClassesBySize() || "")}
+        className={clsx("inset-0", getIconClassesBySize() || "")}
       />
       <span className="inline-flex items-center">
         Snippng

components/editor/SnippngCodeArea.tsx

@@ -31,6 +31,7 @@ import {
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
 import { addDoc, collection, doc, updateDoc } from "firebase/firestore";
+import Logo from "../Logo";
 
 const SnippngCodeArea = () => {
   const editorRef = useRef<HTMLDivElement>(null); // useRef to persist existing ref. Might be useful when dealing with background image in future
@@ -63,6 +64,7 @@ const SnippngCodeArea = () => {
     uid,
     bgImageVisiblePatch,
     bgBlur,
+    watermark,
   } = editorConfig;
 
   const saveSnippet = async () => {
@@ -219,6 +221,15 @@ const SnippngCodeArea = () => {
                     <SnippngWindowControls type={editorWindowControlsType} />
                   </div>
                 </CodeMirror>
+                {watermark ? (
+                  <div
+                    title="Remove watermark from the settings"
+                    className="absolute bottom-1 text-white drop-shadow-[0_1px_1.2px_rgba(0,0,0,0.8)] opacity-50 right-2 text-[10px] inline-flex items-center"
+                  >
+                    <span className="mr-1">created using</span>{" "}
+                    <Logo size="xs" />
+                  </div>
+                ) : null}
               </div>
             </div>
             <div className="w-full mt-8 flex md:flex-row flex-col gap-4 justify-start items-center">

components/editor/SnippngControlHeader.tsx

@@ -57,6 +57,7 @@ const SnippngControlHeader: React.FC<{
     snippetsName,
     bgBlur = 0,
     bgImageVisiblePatch,
+    watermark,
   } = editorConfig;
 
   const downloadImage = (type: SelectOptionInterface) => {
@@ -223,6 +224,17 @@ const SnippngControlHeader: React.FC<{
                   <ArrowsUpDownIcon className="h-5 w-5 mr-2" /> Import or export
                   config
                 </Menu.Button>
+                <div className="py-1 px-2">
+                  <Checkbox
+                    label="Watermark"
+                    id="watermark"
+                    data-testid="watermark"
+                    checked={watermark}
+                    onChange={() => {
+                      handleConfigChange("watermark")(!watermark);
+                    }}
+                  />
+                </div>
                 <div className="py-1 px-2">
                   <Checkbox
                     label="Line count"

lib/constants.ts

@@ -546,6 +546,7 @@ const getConfig = (): SnippngEditorConfigInterface => {
     editorWidth: 0,
     bgImageVisiblePatch: null,
     bgBlur: 0,
+    watermark: true,
   };
 };
 

types/editor-ti.ts

@@ -14,6 +14,7 @@ export const SnippngWindowControlsType = t.union(t.lit("mac-left"), t.lit("mac-r
 export const SnippngEditorConfigInterface = t.iface([], {
   "ownerUid": t.opt("string"),
   "uid": t.opt("string"),
+  "watermark": t.opt("boolean"),
   "code": "string",
   "editorFontSize": "number",
   "editorWidth": "number",

types/editor.ts

@@ -1,4 +1,7 @@
-import { SelectOptionInterface } from "./tsx";
+export interface SelectOptionInterface {
+  id: string;
+  label: string;
+}
 
 export type SnippngWindowControlsType =
   | "mac-left"
@@ -9,6 +12,7 @@ export type SnippngWindowControlsType =
 export interface SnippngEditorConfigInterface {
   ownerUid?: string;
   uid?: string;
+  watermark?: boolean;
   code: string;
   editorFontSize: number;
   editorWidth: number;

types/index.ts

@@ -1,6 +1,5 @@
 import exportedTypeSuite from "./editor-ti";
 
-export * from "./tsx";
 export * from "./editor";
 export * from "./toast";