From 9a1c7a8f3ac2b33dc5636fff142e51726a03df33 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 29 Mar 2026 10:59:27 +0800
Subject: [PATCH] fix: preserve psd text appearance while editing

---
 .../agents/AgentPsdTemplateEditorDialog.tsx   | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index 22cb28a64..ff6a9712b 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -169,6 +169,24 @@ function getAssignedImageStyle(layer: AgentPsdTemplateImageLayerSlot): CSSProper
   };
 }
 
+function hasEditedTextValue(layer: AgentPsdTemplateTextLayerSlot, value: string) {
+  return String(value || "").replace(/\r\n/g, "\n") !== String(layer.defaultText || "").replace(/\r\n/g, "\n");
+}
+
+function getInlineTextEditorStyle(
+  layer: AgentPsdTemplateTextLayerSlot,
+  preserveSourceAppearance: boolean
+): CSSProperties {
+  const baseStyle = getTextLayerContentStyle(layer);
+  return {
+    ...baseStyle,
+    background: "transparent",
+    color: preserveSourceAppearance ? "transparent" : layer.textColor,
+    caretColor: layer.textColor,
+    WebkitTextFillColor: preserveSourceAppearance ? "transparent" : layer.textColor,
+  };
+}
+
 export function AgentPsdTemplateEditorDialog({
   open,
   onOpenChange,
@@ -618,9 +636,7 @@ export function AgentPsdTemplateEditorDialog({
                         }
 
                         const value = effectiveTextAssignments[layer.id] || "";
-                        const defaultText = String(layer.defaultText || "");
-                        const shouldUseEditedPreview =
-                          value.trim().length > 0 && value.trim() !== defaultText.trim();
+                        const shouldUseEditedPreview = hasEditedTextValue(layer, value);
 
                         if (!shouldUseEditedPreview && layer.sourceUrl) {
                           return (
@@ -697,6 +713,9 @@ export function AgentPsdTemplateEditorDialog({
                       {orderedEditableTextLayers.map((layer) => {
                         const isSelected = selectedLayerId === layer.id;
                         const frameStyle = getLayerFrameStyle(layer, isSelected);
+                        const currentValue = effectiveTextAssignments[layer.id] || "";
+                        const preserveSourceAppearance =
+                          !!layer.sourceUrl && !hasEditedTextValue(layer, currentValue);
 
                         if (isSelected) {
                           return (
@@ -706,12 +725,21 @@ export function AgentPsdTemplateEditorDialog({
                               style={{
                                 ...frameStyle,
                                 zIndex: 40,
-                                background: "rgba(56,189,248,0.08)",
+                                background: preserveSourceAppearance
+                                  ? "transparent"
+                                  : "rgba(56,189,248,0.08)",
                               }}
                             >
+                              {preserveSourceAppearance && layer.sourceUrl ? (
+                                <img
+                                  src={layer.sourceUrl}
+                                  alt={layer.layerName}
+                                  className="pointer-events-none absolute inset-0 h-full w-full object-fill"
+                                />
+                              ) : null}
                               <textarea
                                 ref={inlineTextEditorRef}
-                                value={effectiveTextAssignments[layer.id] || ""}
+                                value={currentValue}
                                 onChange={(event) =>
                                   setTextAssignments((current) => ({
                                     ...current,
@@ -719,7 +747,7 @@ export function AgentPsdTemplateEditorDialog({
                                   }))
                                 }
                                 className="h-full w-full resize-none border-none bg-transparent outline-none"
-                                style={getTextLayerContentStyle(layer)}
+                                style={getInlineTextEditorStyle(layer, preserveSourceAppearance)}
                               />
                               <div className="absolute left-2 top-2 rounded-full bg-black/70 px-2 py-1 text-[11px] text-white">
                                 {layer.layerName}