Add advanced font styling (#1893)

spartan-vutrannguyen · web-flow · commit 27c7ea04478d · 2025-05-21T23:31:23.000-04:00
* refactor font select

* change position

* advance type

* handle NaN case
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx
@@ -8,7 +8,6 @@ import { ImageBackground } from './dropdowns/img-background';
 import { Margin } from './dropdowns/margin';
 import { Padding } from './dropdowns/padding';
 import { Radius } from './dropdowns/radius';
-import { StateDropdown } from './dropdowns/state-dropdown';
 import { Width } from './dropdowns/width';
 import { ViewButtons } from './panels/panel-bar/bar';
 import { InputSeparator } from './separator';
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx
@@ -18,29 +18,24 @@ import { HoverOnlyTooltip } from "../HoverOnlyTooltip";
 
 export const Border = () => {
     const editorEngine = useEditorEngine();
+    const initialColor = editorEngine.style.selectedStyle?.styles.computed.borderColor;
     const [activeTab, setActiveTab] = useState('all');
     const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } =
         useBoxControl('border');
-    const [borderColor, setBorderColor] = useState<string>('#080808');
-
-    useEffect(() => {
-        const color = editorEngine.style.selectedStyle?.styles.computed.borderColor;        
-        if (color) {
-            setBorderColor(
-                Color.from(
-                    color ?? '#080808',
-                ).toHex(),
-            );
-        }
-    }, [editorEngine.style.selectedStyle?.styles.computed.borderColor]);
+    const [borderColor, setBorderColor] = useState<string>(Color.from(initialColor ?? '#080808').toHex());
 
     const handleColorChange = (color: string) => {
         setBorderColor(color);
     };
 
+    useEffect(() => {
+        setBorderColor(Color.from(initialColor ?? '#080808').toHex());
+    }, [initialColor]);
+
     const borderStyle = {
         borderWidth: boxState.borderWidth.num ? `1px` : '0px',
         borderStyle: 'solid',
+        borderColor: initialColor,
     };
 
     return (
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/color-background.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/color-background.tsx
@@ -3,59 +3,52 @@
 import { useEditorEngine } from '@/components/store/editor';
 import { Icons } from '@onlook/ui/icons';
 import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
-import { Color } from '@onlook/utility';
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { ColorPickerContent } from '../inputs/color-picker';
 import { useColorUpdate } from '../hooks/use-color-update';
-import type { TailwindColor } from '@onlook/models';
-export const ColorBackground = () => {
-    const [tempColor, setTempColor] = useState<Color>(Color.from('#000000'));
 
-    const { handleColorUpdate } = useColorUpdate({
-        elementStyleKey: 'backgroundColor'
-    });
+interface ColorBackgroundProps {
+    className?: string;
+}
 
+export const ColorBackground = ({ className }: ColorBackgroundProps) => {
     const editorEngine = useEditorEngine();
+    const initialColor = editorEngine.style.selectedStyle?.styles.computed.backgroundColor;
+
 
-    useEffect(() => {
-        const color = editorEngine.style.selectedStyle?.styles.computed.backgroundColor;
-        if (color) {
-            setTempColor(Color.from(color));
-        }
-    }, [editorEngine.style.selectedStyle?.styles.computed.backgroundColor]);
+    const { handleColorUpdate, handleColorUpdateEnd, tempColor } = useColorUpdate({
+        elementStyleKey: 'backgroundColor',
+        initialColor: initialColor,
+    });
 
-    const handleColorChange = (newColor: Color | TailwindColor) => {
-        try {
-            setTempColor(newColor instanceof Color ? newColor : Color.from(newColor.lightColor));
-        } catch (error) {
-            console.error('Error converting color:', error);
-        }
-    };
+    const colorHex = useMemo(() => tempColor?.toHex(), [tempColor]);
 
-    const handleColorChangeEnd = (newColor: Color | TailwindColor) => {
-        try {
-            if (newColor instanceof Color) {
-                setTempColor(newColor);
-            } else {
-                setTempColor(Color.from(newColor.lightColor));
-            }
-            handleColorUpdate(newColor);
-        } catch (error) {
-            console.error('Error converting color:', error);
-        }
-    };
+    const ColorTrigger = useMemo(() => (
+        <div 
+            className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border active:bg-background-tertiary/20 active:border-border flex h-9 w-9 cursor-pointer flex-col items-center justify-center rounded-md border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border active:text-white"
+            role="button"
+            tabIndex={0}
+            aria-label="Change background color"
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.currentTarget.click();
+                }
+            }}
+        >
+            <Icons.PaintBucket className="h-2 w-2" />
+            <div
+                className="h-[4px] w-6 rounded-full bg-current"
+                style={{ backgroundColor: colorHex }}
+            />
+        </div>
+    ), [colorHex]);
 
     return (
-        <div className="flex flex-col gap-2">
+        <div className={`flex flex-col gap-2 ${className ?? ''}`}>
             <Popover>
-                <PopoverTrigger>
-                    <div className="text-muted-foreground border-border/0 hover:bg-background-tertiary/20 hover:border-border active:bg-background-tertiary/20 active:border-border flex h-9 w-9 cursor-pointer flex-col items-center justify-center rounded-md border hover:border hover:text-white focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none active:border active:text-white">
-                        <Icons.PaintBucket className="h-2 w-2" />
-                        <div
-                            className="h-[4px] w-6 rounded-full bg-current"
-                            style={{ backgroundColor: tempColor?.toHex() }}
-                        />
-                    </div>
+                <PopoverTrigger asChild>
+                    {ColorTrigger}
                 </PopoverTrigger>
                 <PopoverContent
                     className="w-[220px] overflow-hidden rounded-lg p-0 shadow-xl backdrop-blur-lg"
@@ -64,8 +57,8 @@ export const ColorBackground = () => {
                 >
                     <ColorPickerContent
                         color={tempColor}
-                        onChange={handleColorChange}
-                        onChangeEnd={handleColorChangeEnd}
+                        onChange={handleColorUpdate}
+                        onChangeEnd={handleColorUpdateEnd}
                     />
                 </PopoverContent>
             </Popover>
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-color-update.ts b/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-color-update.ts
@@ -2,18 +2,23 @@ import { useEditorEngine } from '@/components/store/editor';
 import { DEFAULT_COLOR_NAME } from '@onlook/constants';
 import type { TailwindColor } from '@onlook/models/style';
 import { Color } from '@onlook/utility';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 
 interface ColorUpdateOptions {
     elementStyleKey: string;
+    initialColor?: string;
     onValueChange?: (key: string, value: string) => void;
 }
 
-
-export const useColorUpdate = ({ elementStyleKey, onValueChange }: ColorUpdateOptions) => {
+export const useColorUpdate = ({
+    elementStyleKey,
+    initialColor,
+    onValueChange,
+}: ColorUpdateOptions) => {
     const editorEngine = useEditorEngine();
+    const [tempColor, setTempColor] = useState<Color>(Color.from(initialColor ?? '#000000'));
 
-    const handleColorUpdate = useCallback(
+    const handleColorUpdateEnd = useCallback(
         (newValue: Color | TailwindColor) => {
             try {
                 if (newValue instanceof Color) {
@@ -24,7 +29,7 @@ export const useColorUpdate = ({ elementStyleKey, onValueChange }: ColorUpdateOp
                 } else {
                     // Handle custom color updates
                     let colorValue = newValue.originalKey;
-                    
+
                     // Handle default color case
                     if (colorValue.endsWith(DEFAULT_COLOR_NAME)) {
                         colorValue = colorValue.split(`-${DEFAULT_COLOR_NAME}`)?.[0] ?? '';
@@ -39,10 +44,20 @@ export const useColorUpdate = ({ elementStyleKey, onValueChange }: ColorUpdateOp
                 // You might want to add error handling UI feedback here
             }
         },
-        [editorEngine.style, elementStyleKey, onValueChange]
+        [editorEngine.style, elementStyleKey, onValueChange],
     );
 
+    const handleColorUpdate = useCallback((newColor: Color | TailwindColor) => {
+        try {
+            setTempColor(newColor instanceof Color ? newColor : Color.from(newColor.lightColor));
+        } catch (error) {
+            console.error('Error converting color:', error);
+        }
+    }, []);
+
     return {
-        handleColorUpdate
+        tempColor,
+        handleColorUpdate,
+        handleColorUpdateEnd,
     };
-}; 
+};
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-text-control.ts b/apps/web/client/src/app/project/[id]/_components/editor-bar/hooks/use-text-control.ts
@@ -11,6 +11,10 @@ interface TextState {
     fontWeight: string;
     textAlign: TextAlign;
     textColor: string;
+    letterSpacing: string;
+    capitalization: string;
+    textDecorationLine: string;
+    lineHeight: string;
 }
 
 const DefaultState: TextState = {
@@ -19,6 +23,10 @@ const DefaultState: TextState = {
     fontWeight: '400',
     textAlign: 'left',
     textColor: '#000000',
+    letterSpacing: '0',
+    capitalization: 'none',
+    textDecorationLine: 'none',
+    lineHeight: '1.5',
 };
 
 export const useTextControl = () => {
@@ -41,6 +49,18 @@ export const useTextControl = () => {
                 DefaultState.textAlign) as TextAlign,
             textColor:
                 editorEngine.style.selectedStyle?.styles.computed.color ?? DefaultState.textColor,
+            letterSpacing:
+                editorEngine.style.selectedStyle?.styles.computed.letterSpacing?.toString() ??
+                DefaultState.letterSpacing,
+            capitalization:
+                editorEngine.style.selectedStyle?.styles.computed.textTransform?.toString() ??
+                DefaultState.capitalization,
+            textDecorationLine:
+                editorEngine.style.selectedStyle?.styles.computed.textDecorationLine?.toString() ??
+                DefaultState.textDecorationLine,
+            lineHeight:
+                editorEngine.style.selectedStyle?.styles.computed.lineHeight?.toString() ??
+                DefaultState.lineHeight,
         };
     };
 
@@ -86,12 +106,48 @@ export const useTextControl = () => {
         }));
     };
 
+    const handleLetterSpacingChange = (letterSpacing: string) => {
+        setTextState((prev) => ({
+            ...prev,
+            letterSpacing,
+        }));
+        editorEngine.style.update('letterSpacing', `${letterSpacing}px`);
+    };
+
+    const handleCapitalizationChange = (capitalization: string) => {
+        setTextState((prev) => ({
+            ...prev,
+            capitalization,
+        }));
+        editorEngine.style.update('textTransform', capitalization);
+    };
+
+    const handleTextDecorationChange = (textDecorationLine: string) => {
+        setTextState((prev) => ({
+            ...prev,
+            textDecorationLine,
+        }));
+        editorEngine.style.update('textDecorationLine', textDecorationLine);
+    };
+
+    const handleLineHeightChange = (lineHeight: string) => {
+        setTextState((prev) => ({
+            ...prev,
+            lineHeight,
+        }));
+        editorEngine.style.update('lineHeight', lineHeight);
+    };
+
     return {
         textState,
         handleFontFamilyChange,
         handleFontSizeChange,
         handleFontWeightChange,
         handleTextAlignChange,
         handleTextColorChange,
+        handleLetterSpacingChange,
+        handleCapitalizationChange,
+        handleTextDecorationChange,
+        handleLineHeightChange,
     };
 };
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-color.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-color.tsx
@@ -4,48 +4,27 @@ import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@onlook/
 import { Color } from '@onlook/utility';
 import { useCallback, useState } from 'react';
 import { ColorPickerContent } from './color-picker';
-import type { TailwindColor } from '@onlook/models';
 import { useColorUpdate } from '../hooks/use-color-update';
 
 interface InputColorProps {
     color: string;
     elementStyleKey: string;
-    onColorChange: (color: string) => void;
+    onColorChange?: (color: string) => void;
 }
 
 export const InputColor = ({ color, elementStyleKey, onColorChange }: InputColorProps) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [tempColor, setTempColor] = useState<Color>(Color.from(color));
 
-    const { handleColorUpdate } = useColorUpdate({
+    const { handleColorUpdateEnd, handleColorUpdate, tempColor } = useColorUpdate({
         elementStyleKey,
-        onValueChange: (_, value) => onColorChange(value),
+        onValueChange: (_, value) => onColorChange?.(value),
+        initialColor: color,
     });
 
-    const handleColorChange = useCallback((newColor: Color | TailwindColor) => {
-        setTempColor(newColor instanceof Color ? newColor : Color.from(newColor.lightColor));
-    }, []);
-
-    const handleColorChangeEnd = useCallback(
-        (newColor: Color | TailwindColor) => {
-            try {
-                if (newColor instanceof Color) {
-                    setTempColor(newColor);
-                } else {
-                    setTempColor(Color.from(newColor.lightColor));
-                }
-                handleColorUpdate(newColor);
-            } catch (error) {
-                console.error('Error updating color:', error);
-            }
-        },
-        [handleColorUpdate],
-    );
-
     const handleInputChange = useCallback(
         (e: React.ChangeEvent<HTMLInputElement>) => {
             const value = e.target.value;
-            setTempColor(Color.from(value));
+            handleColorUpdateEnd(Color.from(value));
             onColorChange?.(value);
         },
         [onColorChange],
@@ -71,8 +50,8 @@ export const InputColor = ({ color, elementStyleKey, onColorChange }: InputColor
                     >
                         <ColorPickerContent
                             color={tempColor}
-                            onChange={handleColorChange}
-                            onChangeEnd={handleColorChangeEnd}
+                            onChange={handleColorUpdate}
+                            onChangeEnd={handleColorUpdateEnd}
                         />
                     </PopoverContent>
                 </Popover>
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
diff --git a/packages/ui/src/components/icons/index.tsx b/packages/ui/src/components/icons/index.tsx
