UX Enhancements and addition of new features to the Editor

.github/workflows/ci.yaml

@@ -25,6 +25,7 @@ jobs:
       - name: 📦  Install deps, build, pack
         run: |
           yarn install --frozen-lockfile
+          yarn lint
           yarn package
         env:
           CI: true
@@ -33,4 +34,4 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: imagekit-editor-package
-          path: builds/imagekit-editor-*.tgz
+          path: builds/imagekit-editor-*.tgz

.github/workflows/node-publish.yml

@@ -22,12 +22,14 @@ jobs:
         with:
           node-version: 20.x
           cache: yarn
-          registry-url: 'https://registry.npmjs.org'
+          registry-url: "https://registry.npmjs.org"
 
       - name: Build and Publish
         run: |
           yarn install --frozen-lockfile
 
+          yarn lint
+
           yarn build
 
           npm whoami
@@ -48,4 +50,4 @@ jobs:
 
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
-          CI: true
+          CI: true

.gitignore

@@ -18,4 +18,5 @@ packages/imagekit-editor/*.tgz
 .turbo
 .yarn
 builds
-packages/imagekit-editor/README.md
+packages/imagekit-editor/README.md
+.cursor

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ms-vscode.vscode-typescript-next", "biomejs.biome"]
+}

packages/imagekit-editor-dev/src/components/RetryableImage.tsx

@@ -11,7 +11,6 @@ import {
 } from "@chakra-ui/react"
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useVisibility } from "../hooks/useVisibility"
-import { useEditorStore } from "../store"
 
 export interface RetryableImageProps extends ImageProps {
   maxRetries?: number
@@ -105,11 +104,12 @@ export default function RetryableImage(props: RetryableImageProps) {
     setProbing(true)
   }, [currentSrcBase, src])
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <not needed>
   useEffect(() => {
     if (!src) return
     if (lazy && !visible) return
     setAttempt(0)
-    beginLoad(0)
+    beginLoad()
   }, [src, visible, lazy])
 
   const scheduleRetry = useCallback(() => {
@@ -156,7 +156,11 @@ export default function RetryableImage(props: RetryableImageProps) {
   }
 
   return (
-    <Box ref={rootRef as any} position="relative" display="inline-block">
+    <Box
+      ref={rootRef as React.RefObject<HTMLDivElement>}
+      position="relative"
+      display="inline-block"
+    >
       {error ? (
         <Center
           w={imgProps.width || "full"}

packages/imagekit-editor-dev/src/components/common/AnchorField.tsx

@@ -78,7 +78,12 @@ const AnchorField: React.FC<AnchorFieldProps> = ({
                 minWidth="0"
                 p="0"
                 isDisabled={!positions.includes(position.value)}
-                onClick={() => onChange(position.value)}
+                onClick={() => {
+                  if (value === position.value) {
+                    return onChange("")
+                  }
+                  onChange(position.value)
+                }}
                 borderRadius="md"
                 border={
                   value === position.value

packages/imagekit-editor-dev/src/components/common/CheckboxCardField.tsx

@@ -1,4 +1,5 @@
 import {
+  type As,
   Box,
   Flex,
   HStack,
@@ -67,6 +68,7 @@ export const CheckboxCardField: React.FC<CheckboxCardFieldProps> = ({
   }
 
   return (
+    // biome-ignore lint/a11y/useSemanticElements: <role used to concur to chakra standard>
     <HStack
       as="fieldset"
       id={id}
@@ -85,6 +87,7 @@ export const CheckboxCardField: React.FC<CheckboxCardFieldProps> = ({
         const isChecked = value.includes(opt.value)
         const disabled = opt.isDisabled || (!isChecked && isMaxed)
         return (
+          // biome-ignore lint/a11y/useSemanticElements: <role used to concur to chakra standard>
           <Box
             key={opt.value}
             data-checkbox-card
@@ -114,7 +117,7 @@ export const CheckboxCardField: React.FC<CheckboxCardFieldProps> = ({
             }}
           >
             <Flex align="center" gap="2">
-              {opt.icon ? <Icon as={opt.icon as any} boxSize="16px" /> : null}
+              {opt.icon ? <Icon as={opt.icon as As} boxSize="16px" /> : null}
               <Text fontSize="sm" noOfLines={1}>
                 {opt.label}
               </Text>

packages/imagekit-editor-dev/src/components/common/ColorPickerField.tsx

@@ -7,20 +7,79 @@ import {
   PopoverTrigger,
 } from "@chakra-ui/react"
 import { memo, useEffect, useState } from "react"
-import ColorPicker from "react-best-gradient-color-picker"
+import ColorPicker, {
+  type ColorPickerProps,
+} from "react-best-gradient-color-picker"
 import { useDebounce } from "../../hooks/useDebounce"
 
 const ColorPickerField = ({
   fieldName,
   value,
   setValue,
+  fieldProps,
 }: {
   fieldName: string
   value: string
   setValue: (name: string, value: string) => void
+  fieldProps?: ColorPickerProps
 }) => {
   const [localValue, setLocalValue] = useState<string>(value)
 
+  /**
+   * @note: This parsing behavior is not a bug, it has been mimicked to match the downstream service
+   * logic i.e. parseInt(hexAlpha, 10) / 100, which parses the hex digits as decimal, stopping at
+   * non-digit characters.
+   */
+  const parseAlphaLikeDownstream = (hexAlpha: string): number => {
+    const parsed = parseInt(hexAlpha, 10)
+    return isNaN(parsed) ? 0 : parsed / 100
+  }
+
+  /**
+   * Helper function to convert alpha back to hex format that will parse correctly downstream.
+   * We need to find a hex value that, when parsed as decimal by downstream, gives us the desired alpha.
+   * 
+   * For example:
+   * - If alpha is 0.99, we want downstream to get 99, so we need "99" in hex
+   * - If alpha is 0.5, we want downstream to get 50, so we need "50" in hex
+   */
+  const alphaToHexForDownstream = (alpha: number): string => {
+    const targetDecimal = Math.round(alpha * 100)
+    const clampedDecimal = Math.max(0, Math.min(99, targetDecimal))
+    return clampedDecimal.toString().padStart(2, "0")
+  }
+
+  // Convert a color from downstream format to standard format for the color picker
+  const convertDownstreamToStandard = (color: string): string => {
+    if (!color || !color.startsWith('#') || color.length !== 9) {
+      return color
+    }
+
+    const rgb = color.slice(1, 7)
+    const alphaHex = color.slice(7, 9)
+    const parsedAlpha = parseAlphaLikeDownstream(alphaHex)
+
+    // Convert to standard 0-255 range
+    const standardAlphaInt = Math.round(parsedAlpha * 255)
+    const standardAlphaHex = standardAlphaInt.toString(16).padStart(2, "0")
+
+    return `#${rgb}${standardAlphaHex}`
+  }
+
+  // Get the preview color that shows what downstream will actually render
+  const getPreviewColor = (color: string): string => {
+    if (!color || !color.startsWith('#')) {
+      return color
+    }
+
+    if (color.length === 9) {
+      // Has alpha channel - convert using downstream logic
+      return convertDownstreamToStandard(color)
+    }
+
+    return color
+  }
+
   const handleColorChange = (color: string) => {
     const parts = color.match(/[\d.]+/g)?.map(Number) ?? []
 
@@ -35,12 +94,12 @@ const ColorPickerField = ({
       .map((v) => v.toString(16).padStart(2, "0"))
       .join("")
 
-    if (a === undefined) {
+    if (fieldProps?.hideOpacity === true || a === undefined) {
       setLocalValue(`#${rgbHex}`)
     } else {
       const alphaDec = a > 1 ? a / 100 : a
-      const alphaInt = clamp8(Math.round(alphaDec * 255))
-      setLocalValue(`#${rgbHex}${alphaInt.toString(16).padStart(2, "0")}`)
+      const alphaHex = alphaToHexForDownstream(alphaDec)
+      setLocalValue(`#${rgbHex}${alphaHex}`)
     }
   }
 
@@ -50,6 +109,10 @@ const ColorPickerField = ({
     setValue(fieldName, debouncedValue)
   }, [debouncedValue, fieldName, setValue])
 
+  useEffect(() => {
+    setLocalValue(value)
+  }, [value])
+
   return (
     <Flex direction="column" gap="2">
       <Flex>
@@ -84,7 +147,7 @@ const ColorPickerField = ({
               height="10"
               align="center"
               justify="center"
-              bg={localValue}
+              bg={getPreviewColor(localValue)}
               borderWidth="1px"
               borderColor="gray.200"
               borderLeft="0"
@@ -95,7 +158,7 @@ const ColorPickerField = ({
           <PopoverContent p="2" width="auto" zIndex={1400}>
             <PopoverBody p="0">
               <ColorPicker
-                value={localValue}
+                value={convertDownstreamToStandard(localValue)}
                 onChange={handleColorChange}
                 disableDarkMode
                 hideGradientType
@@ -107,6 +170,8 @@ const ColorPickerField = ({
                 hideInputs
                 hideAdvancedSliders
                 hideColorGuide
+                // @ts-expect-error - fieldProps may include props not declared in ColorPickerProps, but they are intentionally forwarded
+                {...fieldProps}
               />
             </PopoverBody>
           </PopoverContent>