Merge branch 'main' of https://github.com/onlook-dev/onlook into translation_zh

Author: 克隆（宗可龙）

apps/studio/package.json

@@ -1,7 +1,7 @@
 {
     "productName": "Onlook",
     "name": "@onlook/studio",
-    "version": "0.2.17",
+    "version": "0.2.18",
     "homepage": "https://onlook.com",
     "main": "dist-electron/main/index.js",
     "description": "The first-ever devtool for designers",

apps/studio/src/lib/editor/engine/history/helpers.ts

@@ -93,10 +93,45 @@ export function undoAction(action: Action): Action {
     }
 }
 
+function handleUpdateStyleAction(
+    actions: Action[],
+    existingActionIndex: number,
+    newAction: UpdateStyleAction,
+): Action[] {
+    const existingAction = actions[existingActionIndex] as UpdateStyleAction;
+    const mergedTargets = [...existingAction.targets];
+
+    for (const newTarget of newAction.targets) {
+        const existingTarget = mergedTargets.find((et) => et.domId === newTarget.domId);
+
+        if (existingTarget) {
+            existingTarget.change = {
+                updated: { ...existingTarget.change.updated, ...newTarget.change.updated },
+                original: { ...existingTarget.change.original, ...newTarget.change.original },
+            };
+        } else {
+            mergedTargets.push(newTarget);
+        }
+    }
+
+    return actions.map((a, i) =>
+        i === existingActionIndex ? { type: 'update-style', targets: mergedTargets } : a,
+    );
+}
+
 export function updateTransactionActions(actions: Action[], newAction: Action): Action[] {
-    // Only allow one action per type, otherwise, overwrite the existing action
-    if (actions.some((a) => a.type === newAction.type)) {
-        return actions.map((a) => (a.type === newAction.type ? newAction : a));
+    const existingActionIndex = actions.findIndex((a) => a.type === newAction.type);
+    if (existingActionIndex === -1) {
+        return [...actions, newAction];
     }
-    return [...actions, newAction];
+
+    if (newAction.type === 'update-style') {
+        return handleUpdateStyleAction(
+            actions,
+            existingActionIndex,
+            newAction as UpdateStyleAction,
+        );
+    }
+
+    return actions.map((a, i) => (i === existingActionIndex ? newAction : a));
 }

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/ColorBrandPicker.tsx

@@ -1,16 +1,16 @@
 import { useEditorEngine } from '@/components/Context';
+import type { CompoundStyle } from '@/lib/editor/styles/models';
 import type { ColorItem } from '@/routes/editor/LayersPanel/BrandTab/ColorPanel/ColorPalletGroup';
 import { Icons } from '@onlook/ui/icons/index';
 import { Input } from '@onlook/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@onlook/ui/tabs';
 import { Color } from '@onlook/utility';
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { isBackgroundImageEmpty } from '.';
 import ColorButton from './ColorButton';
 import ColorPickerContent from './ColorPicker';
 import ImagePickerContent from './ImagePicker';
-import type { CompoundStyle } from '@/lib/editor/styles/models';
-import { isBackgroundImageEmpty } from '.';
 
 interface ColorBrandPickerProps {
     color: Color;
@@ -72,7 +72,7 @@ const ColorGroup = ({
     );
 };
 
-const BrandPopoverPicker = memo(
+export const BrandPopoverPicker = memo(
     ({ color, onChange, onChangeEnd, backgroundImage, compoundStyle }: ColorBrandPickerProps) => {
         const editorEngine = useEditorEngine();
         const [isOpen, toggleOpen] = useState(false);
@@ -132,8 +132,9 @@ const BrandPopoverPicker = memo(
                     <ColorButton value={color} onClick={() => toggleOpen(!isOpen)} />
                 </PopoverTrigger>
                 <PopoverContent
-                    align="end"
                     className="backdrop-blur-lg z-10 rounded-lg p-0 shadow-xl overflow-hidden w-56"
+                    side="left"
+                    align="start"
                 >
                     <div>
                         <Tabs defaultValue={defaultValue} className="bg-transparent pb-0">
@@ -222,5 +223,3 @@ const BrandPopoverPicker = memo(
 );
 
 BrandPopoverPicker.displayName = 'BrandPopoverPicker';
-
-export default BrandPopoverPicker;

apps/studio/src/routes/editor/EditPanel/StylesTab/single/ColorInput/Popover.tsx

@@ -22,7 +22,7 @@ enum TabValue {
     IMAGE = 'image',
 }
 
-const PopoverPicker = memo(
+export const PopoverPicker = memo(
     ({ color, onChange, onChangeEnd, backgroundImage, compoundStyle }: PopoverPickerProps) => {
         const editorEngine = useEditorEngine();
         const [isOpen, toggleOpen] = useState(false);
@@ -102,5 +102,3 @@ const PopoverPicker = memo(
 );
 
 PopoverPicker.displayName = 'PopoverPicker';
-
-export default PopoverPicker;

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

@@ -7,8 +7,8 @@ import { Icons } from '@onlook/ui/icons';
 import { Color, isColorEmpty } from '@onlook/utility';
 import { observer } from 'mobx-react-lite';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import BrandPopoverPicker from './ColorBrandPicker';
-// import PopoverPicker from './Popover';
+// import { BrandPopoverPicker } from './ColorBrandPicker';
+import { PopoverPicker } from './Popover';
 
 const stripUrlWrapper = (url: string) => {
     return url.replace(/^url\((['"]?)(.*)\1\)/, '$2');
@@ -200,21 +200,21 @@ const ColorInput = observer(
         };
         return (
             <div className="w-32 p-[6px] gap-2 flex flex-row rounded cursor-pointer bg-background-onlook/75">
-                <BrandPopoverPicker
+                {/* <BrandPopoverPicker
                     color={color}
                     onChange={sendStyleUpdate}
                     onChangeEnd={sendStyleUpdate}
                     backgroundImage={backgroundImage}
                     compoundStyle={compoundStyle}
-                />
+                /> */}
 
-                {/* <PopoverPicker
+                <PopoverPicker
                     color={color}
                     onChange={sendStyleUpdate}
                     onChangeEnd={sendStyleUpdate}
                     backgroundImage={backgroundImage}
                     compoundStyle={compoundStyle}
-                /> */}
+                />
                 <ColorTextInput
                     value={value}
                     isFocused={isFocused}

apps/studio/src/routes/editor/LayersPanel/index.tsx

@@ -156,7 +156,7 @@ export const LayersPanel = observer(() => {
 
                 <button
                     className={cn(
-                        'w-16 h-16 rounded-xl flex flex-col items-center justify-center gap-1.5 p-2',
+                        'w-16 h-16 rounded-xl flex flex-col items-center justify-center gap-1.5 p-2 hidden',
                         selectedTab === TabValue.BRAND && isLocked
                             ? 'bg-accent text-foreground border-[0.5px] border-foreground/20'
                             : 'text-muted-foreground hover:text-foreground hover:bg-accent/50',

apps/studio/src/routes/editor/TopBar/Publish/Dropdown/Domain.tsx

@@ -79,7 +79,7 @@ export const DomainSection = observer(
                 return;
             }
             domainManager.publish({
-                skipBadge: type === DomainType.CUSTOM || plan === UsagePlanType.PRO,
+                skipBadge: type === DomainType.CUSTOM,
                 buildFlags: userManager.settings.settings?.editor?.buildFlags,
             });
         };