Add blur support and add cropper package in package.json file

Author: wajeshubham

components/editor/SnippngCodeArea.tsx

@@ -55,6 +55,7 @@ const SnippngCodeArea = () => {
     editorWidth,
     uid,
     bgImageVisiblePatch,
+    bgBlur,
   } = editorConfig;
 
   const saveSnippet = async () => {
@@ -100,19 +101,6 @@ const SnippngCodeArea = () => {
     }
   };
 
-  const getEditorBackground = () => {
-    if (bgImageVisiblePatch) {
-      return {
-        backgroundImage: `url(${bgImageVisiblePatch})`,
-        backgroundSize: "cover",
-      };
-    } else {
-      return {
-        background: getEditorWrapperBg(wrapperBg, gradients, gradientAngle),
-      };
-    }
-  };
-
   return (
     <>
       <section
@@ -139,14 +127,26 @@ const SnippngCodeArea = () => {
               id="code-wrapper"
               ref={wrapperRef}
               className={clsx(
-                "overflow-auto p-16 max-w-full",
+                "overflow-auto p-16 max-w-full relative",
                 editorWidth ? "w-fit" : "w-full"
               )}
               style={{
-                ...getEditorBackground(),
+                background: bgImageVisiblePatch
+                  ? "none"
+                  : getEditorWrapperBg(wrapperBg, gradients, gradientAngle),
                 padding: `${paddingVertical}px ${paddingHorizontal}px`,
               }}
             >
+              {bgImageVisiblePatch ? (
+                <img
+                  src={bgImageVisiblePatch}
+                  alt="bg-image"
+                  className="w-full h-full object-cover z-0 absolute inset-0"
+                  style={{
+                    filter: `blur(${bgBlur || 0}px)`,
+                  }}
+                />
+              ) : null}
               <div
                 ref={editorRef}
                 data-testid="editor-container"

components/editor/SnippngControlHeader.tsx

@@ -1,7 +1,12 @@
 import { useSnippngEditor } from "@/context/SnippngEditorContext";
 import { useToast } from "@/context/ToastContext";
 import { ColorPicker } from "@/lib/color-picker";
-import { DOWNLOAD_OPTIONS, LANGUAGES, THEMES } from "@/lib/constants";
+import {
+  defaultEditorConfig,
+  DOWNLOAD_OPTIONS,
+  LANGUAGES,
+  THEMES,
+} from "@/lib/constants";
 import { ImagePicker } from "@/lib/image-picker";
 import { SelectOptionInterface } from "@/types";
 import { getEditorWrapperBg } from "@/utils";
@@ -45,6 +50,8 @@ const SnippngControlHeader: React.FC<{
     gradients,
     gradientAngle,
     snippetsName,
+    bgBlur = 0,
+    bgImageVisiblePatch,
   } = editorConfig;
 
   const downloadImage = (type: SelectOptionInterface) => {
@@ -238,6 +245,51 @@ const SnippngControlHeader: React.FC<{
                   }}
                 />
               </div>
+              <div className="py-1 px-2">
+                <Checkbox
+                  label="Remove background"
+                  id="remove-bg"
+                  data-testid="remove-bg"
+                  checked={
+                    wrapperBg === "transparent" &&
+                    !gradients.length &&
+                    !bgBlur &&
+                    !bgImageVisiblePatch
+                  }
+                  onChange={(e) => {
+                    if (!e.target.checked) {
+                      handleConfigChange("bgImageVisiblePatch")(
+                        defaultEditorConfig.bgImageVisiblePatch
+                      );
+                      handleConfigChange("bgBlur")(defaultEditorConfig.bgBlur);
+                      handleConfigChange("gradients")(
+                        defaultEditorConfig.gradients
+                      );
+                      handleConfigChange("wrapperBg")(
+                        defaultEditorConfig.wrapperBg
+                      );
+                    } else {
+                      handleConfigChange("bgImageVisiblePatch")(null);
+                      handleConfigChange("bgBlur")(0);
+                      handleConfigChange("gradients")([]);
+                      handleConfigChange("wrapperBg")("transparent");
+                    }
+                  }}
+                />
+              </div>
+              <div className="py-1 px-2 z-30">
+                <Range
+                  label={`Bg blur (${bgBlur}px)`}
+                  value={bgBlur}
+                  max={20}
+                  min={0}
+                  rangeMax="20"
+                  rangeMin="0"
+                  onChange={(e) => {
+                    handleConfigChange("bgBlur")(+e.target.value);
+                  }}
+                />
+              </div>
               <div className="py-1 px-2 z-30">
                 <Range
                   label={`Font size (${editorFontSize}px)`}

components/form/Range.tsx

@@ -8,7 +8,7 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 const Range: React.FC<Props> = ({ rangeMax, rangeMin, label, ...props }) => {
   return (
-    <div className="w-full my-2">
+    <div className="w-full my-2 dark:text-white text-zinc-900">
       <div>
         <p>{label}</p>
       </div>

lib/constants.ts

@@ -463,10 +463,37 @@ export const PEXELS_QUERY_STRINGS = [
   "gradient",
   "landscape",
   "sky",
-  "nightsky",
+  "night-sky",
   "galaxy",
   "coding",
   "abstract",
+  "texture",
+  "beautiful-zoom-backgrounds",
+  "colors",
+  "rainbow",
+  "programming",
+  "gray",
+  "teal",
+  "blue",
+  "red",
+  "fruits",
+  "orange",
+  "shine",
+  "stars",
+  "green",
+  "food",
+  "coffee",
+  "ice",
+  "ocean",
+  "plane",
+  "seascapes",
+  "art",
+  "creative",
+  "summer",
+  "tea",
+  "water",
+  "juice",
+  "ice-cream",
 ];
 
 export const defaultEditorConfig: SnippngEditorConfigInterface = {
@@ -491,6 +518,7 @@ export const defaultEditorConfig: SnippngEditorConfigInterface = {
   gradientAngle: 140,
   editorWidth: 0,
   bgImageVisiblePatch: null,
+  bgBlur: 0,
 };
 
 export const DEFAULT_BASE_SETUP = {

lib/image-picker/ImagePicker.tsx

@@ -8,7 +8,7 @@ import ReactCrop, {
   PixelCrop,
 } from "react-image-crop";
 
-import { Button, Input } from "@/components";
+import { Button, Input, Range } from "@/components";
 import { useToast } from "@/context/ToastContext";
 import {
   CursorArrowRaysIcon,
@@ -35,6 +35,8 @@ const centerAspectCrop = (
       {
         unit: "%",
         width: 100,
+        x: 0,
+        y: 0,
       },
       aspect,
       mediaWidth,
@@ -140,6 +142,7 @@ const ImagePicker: React.FC<Props> = ({ aspect, children, onChange }) => {
 
   const fetchImageFromPexels = async () => {
     try {
+      setFetchingImage(true);
       const headers = new Headers();
       headers.append(
         "Authorization",
@@ -158,10 +161,15 @@ const ImagePicker: React.FC<Props> = ({ aspect, children, onChange }) => {
       );
       const pictures = await res.json();
       if (pictures?.photos.length) {
-        getBase64FromUrl(pictures?.photos[0]?.src?.medium);
+        await getBase64FromUrl(
+          pictures?.photos[0]?.src?.medium +
+            "?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
+        );
       }
     } catch (error) {
       console.log("Error while fetching images from pexels ", error);
+    } finally {
+      setFetchingImage(false);
     }
   };
 
@@ -218,16 +226,18 @@ const ImagePicker: React.FC<Props> = ({ aspect, children, onChange }) => {
               onChange={onSelectFile}
             />
             <button
+              disabled={fetchingImage}
               onClick={fetchImageFromPexels}
-              className="w-full mt-3 inline-flex items-center text-center dark:border-zinc-400 border-zinc-400 rounded-sm px-2 py-1 border-[1px] text-zinc-900 dark:text-white"
+              className="w-full disabled:opacity-40 mt-3 inline-flex items-center text-center dark:border-zinc-400 border-zinc-400 rounded-sm px-2 py-1 border-[1px] text-zinc-900 dark:text-white"
             >
-              <PhotoIcon className="h-4 w-4 mr-2" /> From pexels
+              <PhotoIcon className="h-4 w-4 mr-2" /> Random img (pexels)
             </button>
             {!!src && (
               <div className="w-full flex flex-col justify-start items-end">
                 <button onClick={resetImageSelection}>
-                  <XCircleIcon className="h-6 w-6 my-2 dark:text-white text-zinc-900" />
+                  <XCircleIcon className="h-6 my-2 w-6 dark:text-white text-zinc-900" />
                 </button>
+
                 <ReactCrop
                   crop={crop}
                   onChange={(_, percentCrop) => setCrop(percentCrop)}

package.json

@@ -28,6 +28,7 @@
     "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-image-crop": "^10.0.9",
     "typescript": "4.9.4"
   },
   "devDependencies": {

types/editor.ts

@@ -28,6 +28,7 @@ export interface SnippngEditorConfigInterface {
   snippetsName: string;
   wrapperBg: string;
   bgImageVisiblePatch: string | null;
+  bgBlur: number;
 }
 
 export interface SnippngEditorContextInterface {

yarn.lock

@@ -3335,6 +3335,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -6168,6 +6173,13 @@ [email protected]:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-image-crop@^10.0.9:
+  version "10.0.9"
+  resolved "https://registry.yarnpkg.com/react-image-crop/-/react-image-crop-10.0.9.tgz#94c65833d4e8ed16fe645227ff26915bba177359"
+  integrity sha512-fqn6a811cx/sE7jtu8txL4lBTwgZYuEVNvy7UPKMNMWeRcZa6v0ja11+Gd9nZQiBfaxDal3PBcKhGBLQ956UNg==
+  dependencies:
+    clsx "^1.2.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"