Fix various editor bugs (#771)

apps/studio/electron/preload/webview/elements/style.ts

@@ -21,8 +21,8 @@ function getComputedStyle(element: HTMLElement): Record<string, string> {
         string,
         string
     >;
-    computedStyle.width = 'auto';
-    computedStyle.height = 'auto';
+    computedStyle.width = '';
+    computedStyle.height = '';
     return computedStyle;
 }
 

apps/studio/src/components/Context/index.tsx

@@ -1,7 +1,7 @@
 import { AuthManager } from '@/lib/auth';
 import { EditorEngine } from '@/lib/editor/engine';
 import { ProjectsManager } from '@/lib/projects';
-import { RequirementsManager } from '@/lib/requirements.ts';
+import { RequirementsManager } from '@/lib/requirements';
 import { RouteManager } from '@/lib/routes';
 import { UpdateManager } from '@/lib/update';
 import { createContext, useContext } from 'react';

apps/studio/src/lib/editor/styles/group.ts

@@ -65,6 +65,7 @@ export const LayoutGroup = [
             new SingleStyleImpl('gridTemplateRows', '', 'Rows', StyleType.Text),
             new SingleStyleImpl('gap', '0px', 'Gap', StyleType.Number, {
                 units: ELEMENT_STYLE_UNITS,
+                min: 0,
                 max: 1000,
             }),
         ],

apps/studio/src/lib/editor/styles/numberUnit.ts

@@ -1,5 +1,5 @@
-import { toast } from '@onlook/ui/use-toast';
 import type { SingleStyle } from '@/lib/editor/styles/models';
+import { toast } from '@onlook/ui/use-toast';
 
 export function stringToParsedValue(
     val: string,
@@ -17,8 +17,8 @@ export function stringToParsedValue(
     return { numberVal: num.toString(), unitVal: unit };
 }
 
-export function parsedValueToString(floatValue: number | string, unit: string): string {
-    return `${floatValue}${unit}`;
+export function parsedValueToString(num: string, unit: string): string {
+    return `${num}${unit}`;
 }
 
 export const getDefaultUnit = (unit: string): string => {
@@ -47,8 +47,8 @@ export const handleNumberInputKeyDown = (
         const step = e.shiftKey ? 10 : 1;
         const delta = e.key === 'ArrowUp' ? step : -step;
 
-        const newNumber = Number.parseInt(numberVal) + delta;
-        const newValue = parsedValueToString(newNumber, newUnit);
+        const newNumber = parseFloat(numberVal) + delta;
+        const newValue = parsedValueToString(newNumber.toString(), newUnit);
         const { min, max } = elementStyle.params || {};
 
         if (min !== undefined && newNumber < min) {
@@ -68,7 +68,6 @@ export const handleNumberInputKeyDown = (
             });
             return;
         }
-
         setValue(newValue);
         sendStyleUpdate(newValue);
     }

apps/studio/src/routes/editor/EditPanel/StylesTab/single/AutoLayoutInput.tsx

@@ -1,6 +1,4 @@
 import { useEditorEngine } from '@/components/Context';
-import { Icons } from '@onlook/ui/icons';
-import { toast } from '@onlook/ui/use-toast';
 import {
     getAutolayoutStyles,
     LayoutMode,
@@ -9,6 +7,8 @@ import {
 } from '@/lib/editor/styles/autolayout';
 import type { SingleStyle } from '@/lib/editor/styles/models';
 import { handleNumberInputKeyDown } from '@/lib/editor/styles/numberUnit';
+import { Icons } from '@onlook/ui/icons';
+import { toast } from '@onlook/ui/use-toast';
 import { observer } from 'mobx-react-lite';
 import { type ChangeEvent, useEffect, useState } from 'react';
 
@@ -34,8 +34,7 @@ const AutoLayoutInput = observer(({ elementStyle }: { elementStyle: SingleStyle
         setValue(newValue);
     }, [editorEngine.style.selectedStyle]);
 
-    const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const newLayoutValue = e.target.value;
+    const emitValue = (newLayoutValue: string) => {
         const numValue = Number.parseFloat(newLayoutValue);
 
         const { min, max } = elementStyle.params || {};
@@ -93,6 +92,11 @@ const AutoLayoutInput = observer(({ elementStyle }: { elementStyle: SingleStyle
         return overriddenValue !== undefined ? overriddenValue : layoutValue;
     };
 
+    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+        emitValue(e.currentTarget.value);
+        editorEngine.history.commitTransaction();
+    };
+
     return (
         elementStyle && (
             <div className="flex flex-row gap-1 justify-end">
@@ -101,12 +105,12 @@ const AutoLayoutInput = observer(({ elementStyle }: { elementStyle: SingleStyle
                     type="text"
                     className={`w-16 rounded p-1 px-2 text-xs border-none text-active bg-background-onlook/75 text-start focus:outline-none focus:ring-0`}
                     placeholder="--"
-                    onChange={handleInputChange}
+                    onChange={(e) => setValue(e.currentTarget.value)}
                     onKeyDown={(e) =>
                         handleNumberInputKeyDown(e, elementStyle, value, setValue, sendStyleUpdate)
                     }
                     onFocus={editorEngine.history.startTransaction}
-                    onBlur={editorEngine.history.commitTransaction}
+                    onBlur={handleBlur}
                 />
                 <div className="relative w-16">
                     <select

apps/studio/src/routes/editor/EditPanel/StylesTab/single/NumberUnitInput.tsx

@@ -1,12 +1,12 @@
 import { useEditorEngine } from '@/components/Context';
-import { Icons } from '@onlook/ui/icons';
-import { toast } from '@onlook/ui/use-toast';
 import type { SingleStyle } from '@/lib/editor/styles/models';
 import {
     handleNumberInputKeyDown,
     parsedValueToString,
     stringToParsedValue,
 } from '@/lib/editor/styles/numberUnit';
+import { Icons } from '@onlook/ui/icons';
+import { toast } from '@onlook/ui/use-toast';
 import { observer } from 'mobx-react-lite';
 import { type ChangeEvent, useEffect, useState } from 'react';
 
@@ -19,15 +19,21 @@ const NumberUnitInput = observer(
         onValueChange?: (key: string, value: string) => void;
     }) => {
         const editorEngine = useEditorEngine();
-        const [value, setValue] = useState(elementStyle.defaultValue);
+        const [numberValue, setNumberValue] = useState<string>('');
+        const [unitValue, setUnitValue] = useState<string>('');
 
         useEffect(() => {
             const selectedStyle = editorEngine.style.selectedStyle;
             if (!selectedStyle) {
                 return;
             }
             const newValue = elementStyle.getValue(selectedStyle.styles);
-            setValue(newValue);
+            const { numberVal, unitVal } = stringToParsedValue(
+                newValue,
+                elementStyle.key === 'opacity',
+            );
+            setNumberValue(numberVal);
+            setUnitValue(unitVal);
         }, [editorEngine.style.selectedStyle]);
 
         const sendStyleUpdate = (newValue: string) => {
@@ -36,11 +42,12 @@ const NumberUnitInput = observer(
         };
 
         const handleNumberInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-            const { unitVal } = stringToParsedValue(value, elementStyle.key === 'opacity');
+            setNumberValue(e.currentTarget.value);
 
             const newNumber = e.currentTarget.value;
             const parsedNewNumber = Number.parseFloat(newNumber);
             const { min, max } = elementStyle.params || {};
+
             if (min !== undefined && parsedNewNumber < min) {
                 toast({
                     title: `Invalid Input`,
@@ -59,36 +66,55 @@ const NumberUnitInput = observer(
                 return;
             }
 
+            const { unitVal } = stringToParsedValue(
+                e.currentTarget.value,
+                elementStyle.key === 'opacity',
+            );
             const newUnit = unitVal === '' ? 'px' : unitVal;
-            const newValue = parsedValueToString(newNumber, newUnit);
-
-            setValue(newValue);
-            sendStyleUpdate(newValue);
+            setUnitValue(newUnit);
         };
 
         const handleUnitInputChange = (e: ChangeEvent<HTMLSelectElement>) => {
-            const { numberVal } = stringToParsedValue(value, elementStyle.key === 'opacity');
-
             const newUnit = e.currentTarget.value;
-            const newValue = parsedValueToString(numberVal, newUnit);
-
-            setValue(newValue);
+            const newValue = parsedValueToString(numberValue, newUnit);
+            setUnitValue(newUnit);
             sendStyleUpdate(newValue);
         };
 
+        const setValueCallback = (value: string) => {
+            const { numberVal, unitVal } = stringToParsedValue(
+                value,
+                elementStyle.key === 'opacity',
+            );
+            setNumberValue(numberVal);
+            setUnitValue(unitVal);
+        };
+
+        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+            const value = parsedValueToString(Number.parseFloat(numberValue).toString(), unitValue);
+            sendStyleUpdate(value);
+            editorEngine.history.commitTransaction();
+        };
+
         const renderNumberInput = () => {
             return (
                 <input
                     type="text"
                     placeholder="--"
-                    value={stringToParsedValue(value, elementStyle.key === 'opacity').numberVal}
+                    value={numberValue}
                     onKeyDown={(e) =>
-                        handleNumberInputKeyDown(e, elementStyle, value, setValue, sendStyleUpdate)
+                        handleNumberInputKeyDown(
+                            e,
+                            elementStyle,
+                            parsedValueToString(numberValue, unitValue),
+                            setValueCallback,
+                            sendStyleUpdate,
+                        )
                     }
                     onChange={handleNumberInputChange}
                     className="w-full p-[6px] px-2 rounded border-none text-foreground-active bg-background-onlook/75 text-start focus:outline-none focus:ring-0 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                     onFocus={editorEngine.history.startTransaction}
-                    onBlur={editorEngine.history.commitTransaction}
+                    onBlur={handleBlur}
                 />
             );
         };
@@ -97,7 +123,7 @@ const NumberUnitInput = observer(
             return (
                 <div className="relative w-full">
                     <select
-                        value={stringToParsedValue(value, elementStyle.key === 'opacity').unitVal}
+                        value={unitValue}
                         className="p-[6px] w-full px-2 rounded border-none text-foreground-active bg-background-onlook/75 text-start appearance-none focus:outline-none focus:ring-0"
                         onChange={handleUnitInputChange}
                     >

apps/studio/src/routes/editor/EditPanel/StylesTab/single/TailwindInput/index.tsx

@@ -28,12 +28,14 @@ const TailwindInput = observer(() => {
     useEffect(() => {
         if (editorEngine.elements.selected.length > 0) {
             const selectedEl = editorEngine.elements.selected[0];
-            if (selectedEl.selector === currentSelector) {
-                return;
-            }
             setSelector(selectedEl.selector);
-            getInstanceClasses(selectedEl.selector);
-            getRootClasses(selectedEl.selector);
+
+            if (!isInstanceFocused) {
+                getInstanceClasses(selectedEl.selector);
+            }
+            if (!isRootFocused) {
+                getRootClasses(selectedEl.selector);
+            }
         } else {
             setSelector(null);
             setInstance(undefined);

apps/studio/src/routes/editor/EditPanel/StylesTab/single/TextInput.tsx

@@ -1,12 +1,12 @@
 import { useEditorEngine } from '@/components/Context';
-import { toast } from '@onlook/ui/use-toast';
 import type { SingleStyle } from '@/lib/editor/styles/models';
 import {
     getDefaultUnit,
     handleNumberInputKeyDown,
     parsedValueToString,
     stringToParsedValue,
 } from '@/lib/editor/styles/numberUnit';
+import { toast } from '@onlook/ui/use-toast';
 import { observer } from 'mobx-react-lite';
 import type React from 'react';
 import { useEffect, useState } from 'react';
@@ -36,14 +36,12 @@ const TextInput = observer(
             onValueChange && onValueChange(elementStyle.key, newValue);
         };
 
-        const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            let newValue = e.currentTarget.value;
-
+        const emitValue = (newValue: string) => {
             const { numberVal, unitVal } = stringToParsedValue(newValue);
-            const parsedNum = Number.parseFloat(numberVal);
+            const parsedNum = parseFloat(numberVal);
             const newUnit = getDefaultUnit(unitVal);
 
-            newValue = parsedValueToString(numberVal, newUnit);
+            newValue = parsedValueToString(parsedNum.toString(), newUnit);
 
             const { min, max } = elementStyle.params || {};
             if (min !== undefined && parsedNum < min) {
@@ -72,8 +70,9 @@ const TextInput = observer(
             editorEngine.history.startTransaction();
         };
 
-        const handleBlur = () => {
+        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
             setIsFocused(false);
+            emitValue(e.currentTarget.value);
             editorEngine.history.commitTransaction();
         };
 
@@ -83,7 +82,7 @@ const TextInput = observer(
                 className={`w-full p-[6px] text-xs px-2 rounded border-none text-active bg-background-onlook/75 text-start focus:outline-none focus:ring-0 appearance-none`}
                 placeholder="--"
                 value={value}
-                onChange={handleInputChange}
+                onChange={(e) => setValue(e.currentTarget.value)}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 onKeyDown={(e) =>

apps/studio/src/routes/editor/WebviewArea/BrowserControl.tsx

@@ -50,7 +50,6 @@ function BrowserControls({
     const editorEngine = useEditorEngine();
     const [urlInputValue, setUrlInputValue] = useState(webviewSrc);
     const [isPresetPopoverOpen, setIsPresetPopoverOpen] = useState(false);
-    const [isDuplicatePopoverOpen, setIsDuplicatePopoverOpen] = useState(false);
 
     useEffect(() => {
         setUrlInputValue(webviewSrc);
@@ -178,7 +177,6 @@ function BrowserControls({
         });
 
         editorEngine.canvas.frames = [...editorEngine.canvas.frames, newFrame];
-        setIsDuplicatePopoverOpen(false);
     }
 
     function deleteDuplicateWindow() {
@@ -225,57 +223,6 @@ function BrowserControls({
                 <TooltipContent>Duplicate Window</TooltipContent>
             </Tooltip>
         );
-
-        // TODO: Add link behavior
-        return (
-            <Popover open={isDuplicatePopoverOpen} onOpenChange={setIsDuplicatePopoverOpen}>
-                <Tooltip>
-                    <TooltipTrigger asChild>
-                        <PopoverTrigger asChild>
-                            <Button
-                                variant="outline"
-                                className="bg-background-secondary/60 flex items-center space-x-1 py-3"
-                                size="icon"
-                            >
-                                <Icons.PlusCircled />
-                            </Button>
-                        </PopoverTrigger>
-                    </TooltipTrigger>
-                    <TooltipContent>Duplicate Window</TooltipContent>
-                </Tooltip>
-
-                <PopoverContent className="backdrop-blur text-sm overflow-hidden bg-background/85 rounded-xl w-48 border p-0">
-                    <div>
-                        <div className="relative">
-                            <button
-                                onClick={() => duplicateWindow(true)}
-                                className={clsx(
-                                    'w-full flex flex-row gap-2 px-3 py-3 transition-colors duration-200 items-center bg-transparent text-foreground-secondary hover:bg-background-tertiary/50 hover:text-foreground-primary',
-                                )}
-                            >
-                                <Icons.Link />
-                                <span className="justify-self-start text-smallPlus">
-                                    Linked Window
-                                </span>
-                            </button>
-                        </div>
-                        <div className="relative">
-                            <button
-                                onClick={() => duplicateWindow(false)}
-                                className={clsx(
-                                    'w-full flex flex-row gap-2 px-3 py-3 transition-colors duration-200 items-center bg-transparent text-foreground-secondary hover:bg-background-tertiary/50 hover:text-foreground-primary',
-                                )}
-                            >
-                                <Icons.LinkNone />
-                                <span className="justify-self-start text-smallPlus">
-                                    Unlinked Window
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                </PopoverContent>
-            </Popover>
-        );
     }
     return (
         <div