Visual editor (Pro only) (#1828)
<!-- This is an auto-generated description by cubic. --> --- ## Summary by cubic Prototype visual editing mode for the preview app. Toggle the mode, pick elements (single or multiple), and edit margin, padding, border, background, static text, and text styles with live updates, then save changes back to code. - **New Features** - Pen tool button to enable/disable visual editing in the preview and toggle single/multi select; pro-only. - Inline toolbar anchored to the selected element for Margin (X/Y), Padding (X/Y), Border (width/radius/color), Background color, Edit Text (when static), and Text Style (font size/weight/color/font family). - Reads computed styles from the iframe and applies changes in real time; auto-appends px; overlay updates on scroll/resize. - Save/Discard dialog batches edits and writes Tailwind classes to source files via IPC; uses AST/recast to update className and text, replacing conflicting classes by prefix; supports multiple components. - New visual editor worker to get/apply styles and enable inline text editing via postMessage; selector client updated for coordinates streaming and highlight/deselect. - Proxy injects the visual editor client; new atoms track selected component, coordinates, and pending changes; component analysis flags dynamic styling and static text. - Uses runtimeId to correctly target and edit duplicate components. - **Dependencies** - Added @babel/parser for AST-based text updates. - Added recast for safer code transformations. <sup>Written for commit cdd50d33387a29103864f4743ae7570d64d61e93. Summary will update automatically on new commits.</sup> <!-- End of auto-generated description by cubic. -->
This commit is contained in:
Mohamed Aziz Mejri
committed by
GitHub
GitHub
parent
c174778d5f
commit
352d4330ed
118
src/__tests__/style-utils.test.ts
Normal file
118
src/__tests__/style-utils.test.ts
Normal file
@@ -0,0 +1,118 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { stylesToTailwind } from "../utils/style-utils";
|
||||
|
||||
describe("convertSpacingToTailwind", () => {
|
||||
describe("margin conversion", () => {
|
||||
it("should convert equal margins on all sides", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "16px", right: "16px", top: "16px", bottom: "16px" },
|
||||
});
|
||||
expect(result).toEqual(["m-[16px]"]);
|
||||
});
|
||||
|
||||
it("should convert equal horizontal margins", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "16px", right: "16px" },
|
||||
});
|
||||
expect(result).toEqual(["mx-[16px]"]);
|
||||
});
|
||||
|
||||
it("should convert equal vertical margins", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { top: "16px", bottom: "16px" },
|
||||
});
|
||||
expect(result).toEqual(["my-[16px]"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("padding conversion", () => {
|
||||
it("should convert equal padding on all sides", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { left: "20px", right: "20px", top: "20px", bottom: "20px" },
|
||||
});
|
||||
expect(result).toEqual(["p-[20px]"]);
|
||||
});
|
||||
|
||||
it("should convert equal horizontal padding", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { left: "12px", right: "12px" },
|
||||
});
|
||||
expect(result).toEqual(["px-[12px]"]);
|
||||
});
|
||||
|
||||
it("should convert equal vertical padding", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { top: "8px", bottom: "8px" },
|
||||
});
|
||||
expect(result).toEqual(["py-[8px]"]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("combined margin and padding", () => {
|
||||
it("should handle both margin and padding", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "16px", right: "16px" },
|
||||
padding: { top: "8px", bottom: "8px" },
|
||||
});
|
||||
expect(result).toContain("mx-[16px]");
|
||||
expect(result).toContain("py-[8px]");
|
||||
expect(result).toHaveLength(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe("edge cases: equal horizontal and vertical spacing", () => {
|
||||
it("should consolidate px = py to p when values match", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { left: "16px", right: "16px", top: "16px", bottom: "16px" },
|
||||
});
|
||||
// When all four sides are equal, should use p-[]
|
||||
expect(result).toEqual(["p-[16px]"]);
|
||||
});
|
||||
|
||||
it("should consolidate mx = my to m when values match (but not all four sides)", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "20px", right: "20px", top: "20px", bottom: "20px" },
|
||||
});
|
||||
// When all four sides are equal, should use m-[]
|
||||
expect(result).toEqual(["m-[20px]"]);
|
||||
});
|
||||
|
||||
it("should not consolidate when px != py", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { left: "16px", right: "16px", top: "8px", bottom: "8px" },
|
||||
});
|
||||
expect(result).toContain("px-[16px]");
|
||||
expect(result).toContain("py-[8px]");
|
||||
expect(result).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should not consolidate when mx != my", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "20px", right: "20px", top: "10px", bottom: "10px" },
|
||||
});
|
||||
expect(result).toContain("mx-[20px]");
|
||||
expect(result).toContain("my-[10px]");
|
||||
expect(result).toHaveLength(2);
|
||||
});
|
||||
|
||||
it("should handle case where left != right", () => {
|
||||
const result = stylesToTailwind({
|
||||
padding: { left: "16px", right: "12px", top: "8px", bottom: "8px" },
|
||||
});
|
||||
expect(result).toContain("pl-[16px]");
|
||||
expect(result).toContain("pr-[12px]");
|
||||
expect(result).toContain("py-[8px]");
|
||||
expect(result).toHaveLength(3);
|
||||
});
|
||||
|
||||
it("should handle case where top != bottom", () => {
|
||||
const result = stylesToTailwind({
|
||||
margin: { left: "20px", right: "20px", top: "10px", bottom: "15px" },
|
||||
});
|
||||
expect(result).toContain("mx-[20px]");
|
||||
expect(result).toContain("mt-[10px]");
|
||||
expect(result).toContain("mb-[15px]");
|
||||
expect(result).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,6 +1,20 @@
|
||||
import { ComponentSelection } from "@/ipc/ipc_types";
|
||||
import { ComponentSelection, VisualEditingChange } from "@/ipc/ipc_types";
|
||||
import { atom } from "jotai";
|
||||
|
||||
export const selectedComponentsPreviewAtom = atom<ComponentSelection[]>([]);
|
||||
|
||||
export const visualEditingSelectedComponentAtom =
|
||||
atom<ComponentSelection | null>(null);
|
||||
|
||||
export const currentComponentCoordinatesAtom = atom<{
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
height: number;
|
||||
} | null>(null);
|
||||
|
||||
export const previewIframeRefAtom = atom<HTMLIFrameElement | null>(null);
|
||||
|
||||
export const pendingVisualChangesAtom = atom<Map<string, VisualEditingChange>>(
|
||||
new Map(),
|
||||
);
|
||||
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
ChevronsDownUp,
|
||||
ChartColumnIncreasing,
|
||||
SendHorizontalIcon,
|
||||
Lock,
|
||||
} from "lucide-react";
|
||||
import type React from "react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
@@ -65,11 +66,16 @@ import { ChatErrorBox } from "./ChatErrorBox";
|
||||
import {
|
||||
selectedComponentsPreviewAtom,
|
||||
previewIframeRefAtom,
|
||||
visualEditingSelectedComponentAtom,
|
||||
currentComponentCoordinatesAtom,
|
||||
pendingVisualChangesAtom,
|
||||
} from "@/atoms/previewAtoms";
|
||||
import { SelectedComponentsDisplay } from "./SelectedComponentDisplay";
|
||||
import { useCheckProblems } from "@/hooks/useCheckProblems";
|
||||
import { LexicalChatInput } from "./LexicalChatInput";
|
||||
import { useChatModeToggle } from "@/hooks/useChatModeToggle";
|
||||
import { VisualEditingChangesDialog } from "@/components/preview_panel/VisualEditingChangesDialog";
|
||||
import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
|
||||
|
||||
const showTokenBarAtom = atom(false);
|
||||
|
||||
@@ -92,7 +98,15 @@ export function ChatInput({ chatId }: { chatId?: number }) {
|
||||
selectedComponentsPreviewAtom,
|
||||
);
|
||||
const previewIframeRef = useAtomValue(previewIframeRefAtom);
|
||||
const setVisualEditingSelectedComponent = useSetAtom(
|
||||
visualEditingSelectedComponentAtom,
|
||||
);
|
||||
const setCurrentComponentCoordinates = useSetAtom(
|
||||
currentComponentCoordinatesAtom,
|
||||
);
|
||||
const setPendingVisualChanges = useSetAtom(pendingVisualChangesAtom);
|
||||
const { checkProblems } = useCheckProblems(appId);
|
||||
const { refreshAppIframe } = useRunApp();
|
||||
// Use the attachments hook
|
||||
const {
|
||||
attachments,
|
||||
@@ -124,6 +138,8 @@ export function ChatInput({ chatId }: { chatId?: number }) {
|
||||
proposal.type === "code-proposal" &&
|
||||
messageId === lastMessage.id;
|
||||
|
||||
const { userBudget } = useUserBudgetInfo();
|
||||
|
||||
useEffect(() => {
|
||||
if (error) {
|
||||
setShowError(true);
|
||||
@@ -160,7 +176,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
|
||||
? selectedComponents
|
||||
: [];
|
||||
setSelectedComponents([]);
|
||||
|
||||
setVisualEditingSelectedComponent(null);
|
||||
// Clear overlays in the preview iframe
|
||||
if (previewIframeRef?.contentWindow) {
|
||||
previewIframeRef.contentWindow.postMessage(
|
||||
@@ -307,6 +323,58 @@ export function ChatInput({ chatId }: { chatId?: number }) {
|
||||
/>
|
||||
)}
|
||||
|
||||
{userBudget ? (
|
||||
<VisualEditingChangesDialog
|
||||
iframeRef={
|
||||
previewIframeRef
|
||||
? { current: previewIframeRef }
|
||||
: { current: null }
|
||||
}
|
||||
onReset={() => {
|
||||
// Exit component selection mode and visual editing
|
||||
setSelectedComponents([]);
|
||||
setVisualEditingSelectedComponent(null);
|
||||
setCurrentComponentCoordinates(null);
|
||||
setPendingVisualChanges(new Map());
|
||||
refreshAppIframe();
|
||||
|
||||
// Deactivate component selector in iframe
|
||||
if (previewIframeRef?.contentWindow) {
|
||||
previewIframeRef.contentWindow.postMessage(
|
||||
{ type: "deactivate-dyad-component-selector" },
|
||||
"*",
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
selectedComponents.length > 0 && (
|
||||
<div className="border-b border-border p-3 bg-muted/30">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={() => {
|
||||
IpcClient.getInstance().openExternalUrl(
|
||||
"https://dyad.sh/pro",
|
||||
);
|
||||
}}
|
||||
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary transition-colors cursor-pointer"
|
||||
>
|
||||
<Lock size={16} />
|
||||
<span className="font-medium">Visual editor (Pro)</span>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
Visual editing lets you make UI changes without AI and is
|
||||
a Pro-only feature
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
<SelectedComponentsDisplay />
|
||||
|
||||
{/* Use the AttachmentsList component */}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import {
|
||||
selectedComponentsPreviewAtom,
|
||||
previewIframeRefAtom,
|
||||
visualEditingSelectedComponentAtom,
|
||||
} from "@/atoms/previewAtoms";
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||
import { Code2, X } from "lucide-react";
|
||||
|
||||
export function SelectedComponentsDisplay() {
|
||||
@@ -10,11 +11,15 @@ export function SelectedComponentsDisplay() {
|
||||
selectedComponentsPreviewAtom,
|
||||
);
|
||||
const previewIframeRef = useAtomValue(previewIframeRefAtom);
|
||||
const setVisualEditingSelectedComponent = useSetAtom(
|
||||
visualEditingSelectedComponentAtom,
|
||||
);
|
||||
|
||||
const handleRemoveComponent = (index: number) => {
|
||||
const componentToRemove = selectedComponents[index];
|
||||
const newComponents = selectedComponents.filter((_, i) => i !== index);
|
||||
setSelectedComponents(newComponents);
|
||||
setVisualEditingSelectedComponent(null);
|
||||
|
||||
// Remove the specific overlay from the iframe
|
||||
if (previewIframeRef?.contentWindow) {
|
||||
@@ -30,7 +35,7 @@ export function SelectedComponentsDisplay() {
|
||||
|
||||
const handleClearAll = () => {
|
||||
setSelectedComponents([]);
|
||||
|
||||
setVisualEditingSelectedComponent(null);
|
||||
if (previewIframeRef?.contentWindow) {
|
||||
previewIframeRef.contentWindow.postMessage(
|
||||
{ type: "clear-dyad-component-overlays" },
|
||||
|
||||
@@ -36,9 +36,13 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useStreamChat } from "@/hooks/useStreamChat";
|
||||
import { useUserBudgetInfo } from "@/hooks/useUserBudgetInfo";
|
||||
import {
|
||||
selectedComponentsPreviewAtom,
|
||||
visualEditingSelectedComponentAtom,
|
||||
currentComponentCoordinatesAtom,
|
||||
previewIframeRefAtom,
|
||||
pendingVisualChangesAtom,
|
||||
} from "@/atoms/previewAtoms";
|
||||
import { ComponentSelection } from "@/ipc/ipc_types";
|
||||
import {
|
||||
@@ -57,6 +61,7 @@ import { useRunApp } from "@/hooks/useRunApp";
|
||||
import { useShortcut } from "@/hooks/useShortcut";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { normalizePath } from "../../../shared/normalizePath";
|
||||
import { VisualEditingToolbar } from "./VisualEditingToolbar";
|
||||
|
||||
interface ErrorBannerProps {
|
||||
error: { message: string; source: "preview-app" | "dyad-app" } | undefined;
|
||||
@@ -167,6 +172,8 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
const { streamMessage } = useStreamChat();
|
||||
const { routes: availableRoutes } = useParseRouter(selectedAppId);
|
||||
const { restartApp } = useRunApp();
|
||||
const { userBudget } = useUserBudgetInfo();
|
||||
const isProMode = !!userBudget;
|
||||
|
||||
// Navigation state
|
||||
const [isComponentSelectorInitialized, setIsComponentSelectorInitialized] =
|
||||
@@ -175,12 +182,107 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
const [canGoForward, setCanGoForward] = useState(false);
|
||||
const [navigationHistory, setNavigationHistory] = useState<string[]>([]);
|
||||
const [currentHistoryPosition, setCurrentHistoryPosition] = useState(0);
|
||||
const [selectedComponentsPreview, setSelectedComponentsPreview] = useAtom(
|
||||
const setSelectedComponentsPreview = useSetAtom(
|
||||
selectedComponentsPreviewAtom,
|
||||
);
|
||||
const [visualEditingSelectedComponent, setVisualEditingSelectedComponent] =
|
||||
useAtom(visualEditingSelectedComponentAtom);
|
||||
const setCurrentComponentCoordinates = useSetAtom(
|
||||
currentComponentCoordinatesAtom,
|
||||
);
|
||||
const setPreviewIframeRef = useSetAtom(previewIframeRefAtom);
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const [isPicking, setIsPicking] = useState(false);
|
||||
const setPendingChanges = useSetAtom(pendingVisualChangesAtom);
|
||||
|
||||
// AST Analysis State
|
||||
const [isDynamicComponent, setIsDynamicComponent] = useState(false);
|
||||
const [hasStaticText, setHasStaticText] = useState(false);
|
||||
|
||||
const analyzeComponent = async (componentId: string) => {
|
||||
if (!componentId || !selectedAppId) return;
|
||||
|
||||
try {
|
||||
const result = await IpcClient.getInstance().analyzeComponent({
|
||||
appId: selectedAppId,
|
||||
componentId,
|
||||
});
|
||||
setIsDynamicComponent(result.isDynamic);
|
||||
setHasStaticText(result.hasStaticText);
|
||||
|
||||
// Automatically enable text editing if component has static text
|
||||
if (result.hasStaticText && iframeRef.current?.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "enable-dyad-text-editing",
|
||||
data: {
|
||||
componentId: componentId,
|
||||
runtimeId: visualEditingSelectedComponent?.runtimeId,
|
||||
},
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to analyze component", err);
|
||||
setIsDynamicComponent(false);
|
||||
setHasStaticText(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTextUpdated = async (data: any) => {
|
||||
const { componentId, text } = data;
|
||||
if (!componentId || !selectedAppId) return;
|
||||
|
||||
// Parse componentId to extract file path and line number
|
||||
const [filePath, lineStr] = componentId.split(":");
|
||||
const lineNumber = parseInt(lineStr, 10);
|
||||
|
||||
if (!filePath || isNaN(lineNumber)) {
|
||||
console.error("Invalid componentId format:", componentId);
|
||||
return;
|
||||
}
|
||||
|
||||
// Store text change in pending changes
|
||||
setPendingChanges((prev) => {
|
||||
const updated = new Map(prev);
|
||||
const existing = updated.get(componentId);
|
||||
|
||||
updated.set(componentId, {
|
||||
componentId: componentId,
|
||||
componentName:
|
||||
existing?.componentName || visualEditingSelectedComponent?.name || "",
|
||||
relativePath: filePath,
|
||||
lineNumber: lineNumber,
|
||||
styles: existing?.styles || {},
|
||||
textContent: text,
|
||||
});
|
||||
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
// Function to get current styles from selected element
|
||||
const getCurrentElementStyles = () => {
|
||||
if (!iframeRef.current?.contentWindow || !visualEditingSelectedComponent)
|
||||
return;
|
||||
|
||||
try {
|
||||
// Send message to iframe to get current styles
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "get-dyad-component-styles",
|
||||
data: {
|
||||
elementId: visualEditingSelectedComponent.id,
|
||||
runtimeId: visualEditingSelectedComponent.runtimeId,
|
||||
},
|
||||
},
|
||||
"*",
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to get element styles:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Device mode state
|
||||
type DeviceMode = "desktop" | "tablet" | "mobile";
|
||||
@@ -196,23 +298,30 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
//detect if the user is using Mac
|
||||
const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
|
||||
|
||||
// Reset visual editing state when app changes or component unmounts
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// Cleanup on unmount or when app changes
|
||||
setVisualEditingSelectedComponent(null);
|
||||
setPendingChanges(new Map());
|
||||
setCurrentComponentCoordinates(null);
|
||||
};
|
||||
}, [selectedAppId]);
|
||||
|
||||
// Update iframe ref atom
|
||||
useEffect(() => {
|
||||
setPreviewIframeRef(iframeRef.current);
|
||||
}, [iframeRef.current, setPreviewIframeRef]);
|
||||
|
||||
// Deactivate component selector when selection is cleared
|
||||
// Send pro mode status to iframe
|
||||
useEffect(() => {
|
||||
if (!selectedComponentsPreview || selectedComponentsPreview.length === 0) {
|
||||
if (iframeRef.current?.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{ type: "deactivate-dyad-component-selector" },
|
||||
"*",
|
||||
);
|
||||
}
|
||||
setIsPicking(false);
|
||||
if (iframeRef.current?.contentWindow && isComponentSelectorInitialized) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{ type: "dyad-pro-mode", enabled: isProMode },
|
||||
"*",
|
||||
);
|
||||
}
|
||||
}, [selectedComponentsPreview]);
|
||||
}, [isProMode, isComponentSelectorInitialized]);
|
||||
|
||||
// Add message listener for iframe errors and navigation events
|
||||
useEffect(() => {
|
||||
@@ -224,41 +333,92 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
|
||||
if (event.data?.type === "dyad-component-selector-initialized") {
|
||||
setIsComponentSelectorInitialized(true);
|
||||
iframeRef.current?.contentWindow?.postMessage(
|
||||
{ type: "dyad-pro-mode", enabled: isProMode },
|
||||
"*",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data?.type === "dyad-text-updated") {
|
||||
handleTextUpdated(event.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data?.type === "dyad-text-finalized") {
|
||||
handleTextUpdated(event.data);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data?.type === "dyad-component-selected") {
|
||||
console.log("Component picked:", event.data);
|
||||
|
||||
// Parse the single selected component
|
||||
const component = event.data.component
|
||||
? parseComponentSelection({
|
||||
type: "dyad-component-selected",
|
||||
id: event.data.component.id,
|
||||
name: event.data.component.name,
|
||||
})
|
||||
: null;
|
||||
const component = parseComponentSelection(event.data);
|
||||
|
||||
if (!component) return;
|
||||
|
||||
// Add to existing components, avoiding duplicates by id
|
||||
// Store the coordinates
|
||||
if (event.data.coordinates && isProMode) {
|
||||
setCurrentComponentCoordinates(event.data.coordinates);
|
||||
}
|
||||
|
||||
// Add to selected components if not already there
|
||||
setSelectedComponentsPreview((prev) => {
|
||||
// Check if this component is already selected
|
||||
if (prev.some((c) => c.id === component.id)) {
|
||||
const exists = prev.some((c) => {
|
||||
// Check by runtimeId if available otherwise by id
|
||||
// Stored components may have lost their runtimeId after re-renders or reloading the page
|
||||
if (component.runtimeId && c.runtimeId) {
|
||||
return c.runtimeId === component.runtimeId;
|
||||
}
|
||||
return c.id === component.id;
|
||||
});
|
||||
if (exists) {
|
||||
return prev;
|
||||
}
|
||||
return [...prev, component];
|
||||
});
|
||||
|
||||
if (isProMode) {
|
||||
// Set as the highlighted component for visual editing
|
||||
setVisualEditingSelectedComponent(component);
|
||||
// Trigger AST analysis
|
||||
analyzeComponent(component.id);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data?.type === "dyad-component-deselected") {
|
||||
const componentId = event.data.componentId;
|
||||
if (componentId) {
|
||||
// Disable text editing for the deselected component
|
||||
if (iframeRef.current?.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "disable-dyad-text-editing",
|
||||
data: { componentId },
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
|
||||
setSelectedComponentsPreview((prev) =>
|
||||
prev.filter((c) => c.id !== componentId),
|
||||
);
|
||||
setVisualEditingSelectedComponent((prev) => {
|
||||
const shouldClear = prev?.id === componentId;
|
||||
if (shouldClear) {
|
||||
setCurrentComponentCoordinates(null);
|
||||
}
|
||||
return shouldClear ? null : prev;
|
||||
});
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data?.type === "dyad-component-coordinates-updated") {
|
||||
if (event.data.coordinates) {
|
||||
setCurrentComponentCoordinates(event.data.coordinates);
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -348,6 +508,7 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
setErrorMessage,
|
||||
setIsComponentSelectorInitialized,
|
||||
setSelectedComponentsPreview,
|
||||
setVisualEditingSelectedComponent,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -366,11 +527,26 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
}
|
||||
}, [appUrl]);
|
||||
|
||||
// Get current styles when component is selected for visual editing
|
||||
useEffect(() => {
|
||||
if (visualEditingSelectedComponent) {
|
||||
getCurrentElementStyles();
|
||||
}
|
||||
}, [visualEditingSelectedComponent]);
|
||||
|
||||
// Function to activate component selector in the iframe
|
||||
const handleActivateComponentSelector = () => {
|
||||
if (iframeRef.current?.contentWindow) {
|
||||
const newIsPicking = !isPicking;
|
||||
if (!newIsPicking) {
|
||||
// Clean up any text editing states when deactivating
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{ type: "cleanup-all-text-editing" },
|
||||
"*",
|
||||
);
|
||||
}
|
||||
setIsPicking(newIsPicking);
|
||||
setVisualEditingSelectedComponent(null);
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: newIsPicking
|
||||
@@ -433,6 +609,10 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
const handleReload = () => {
|
||||
setReloadKey((prevKey) => prevKey + 1);
|
||||
setErrorMessage(undefined);
|
||||
// Reset visual editing state
|
||||
setVisualEditingSelectedComponent(null);
|
||||
setPendingChanges(new Map());
|
||||
setCurrentComponentCoordinates(null);
|
||||
// Optionally, add logic here if you need to explicitly stop/start the app again
|
||||
// For now, just changing the key should remount the iframe
|
||||
console.debug("Reloading iframe preview for app", selectedAppId);
|
||||
@@ -737,6 +917,15 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
src={appUrl}
|
||||
allow="clipboard-read; clipboard-write; fullscreen; microphone; camera; display-capture; geolocation; autoplay; picture-in-picture"
|
||||
/>
|
||||
{/* Visual Editing Toolbar */}
|
||||
{isProMode && visualEditingSelectedComponent && selectedAppId && (
|
||||
<VisualEditingToolbar
|
||||
selectedComponent={visualEditingSelectedComponent}
|
||||
iframeRef={iframeRef}
|
||||
isDynamic={isDynamicComponent}
|
||||
hasStaticText={hasStaticText}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -745,16 +934,20 @@ export const PreviewIframe = ({ loading }: { loading: boolean }) => {
|
||||
};
|
||||
|
||||
function parseComponentSelection(data: any): ComponentSelection | null {
|
||||
if (!data || data.type !== "dyad-component-selected") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const component = data.component;
|
||||
if (
|
||||
!data ||
|
||||
data.type !== "dyad-component-selected" ||
|
||||
typeof data.id !== "string" ||
|
||||
typeof data.name !== "string"
|
||||
!component ||
|
||||
typeof component.id !== "string" ||
|
||||
typeof component.name !== "string"
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { id, name } = data;
|
||||
const { id, name, runtimeId } = component;
|
||||
|
||||
// The id is expected to be in the format "filepath:line:column"
|
||||
const parts = id.split(":");
|
||||
@@ -783,6 +976,7 @@ function parseComponentSelection(data: any): ComponentSelection | null {
|
||||
return {
|
||||
id,
|
||||
name,
|
||||
runtimeId,
|
||||
relativePath: normalizePath(relativePath),
|
||||
lineNumber,
|
||||
columnNumber,
|
||||
|
||||
56
src/components/preview_panel/StylePopover.tsx
Normal file
56
src/components/preview_panel/StylePopover.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
import { ReactNode } from "react";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
interface StylePopoverProps {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
tooltip: string;
|
||||
children: ReactNode;
|
||||
side?: "top" | "right" | "bottom" | "left";
|
||||
}
|
||||
|
||||
export function StylePopover({
|
||||
icon,
|
||||
title,
|
||||
tooltip,
|
||||
children,
|
||||
side = "bottom",
|
||||
}: StylePopoverProps) {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-[#7f22fe] dark:text-gray-200"
|
||||
aria-label={tooltip}
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{icon}</TooltipTrigger>
|
||||
<TooltipContent side={side}>
|
||||
<p>{tooltip}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent side={side} className="w-64">
|
||||
<div className="space-y-3">
|
||||
<h4 className="font-medium text-sm" style={{ color: "#7f22fe" }}>
|
||||
{title}
|
||||
</h4>
|
||||
{children}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
179
src/components/preview_panel/VisualEditingChangesDialog.tsx
Normal file
179
src/components/preview_panel/VisualEditingChangesDialog.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
import { useAtom, useAtomValue } from "jotai";
|
||||
import { pendingVisualChangesAtom } from "@/atoms/previewAtoms";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { IpcClient } from "@/ipc/ipc_client";
|
||||
import { Check, X } from "lucide-react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { showError, showSuccess } from "@/lib/toast";
|
||||
import { selectedAppIdAtom } from "@/atoms/appAtoms";
|
||||
|
||||
interface VisualEditingChangesDialogProps {
|
||||
onReset?: () => void;
|
||||
iframeRef?: React.RefObject<HTMLIFrameElement | null>;
|
||||
}
|
||||
|
||||
export function VisualEditingChangesDialog({
|
||||
onReset,
|
||||
iframeRef,
|
||||
}: VisualEditingChangesDialogProps) {
|
||||
const [pendingChanges, setPendingChanges] = useAtom(pendingVisualChangesAtom);
|
||||
const selectedAppId = useAtomValue(selectedAppIdAtom);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const textContentCache = useRef<Map<string, string>>(new Map());
|
||||
const [allResponsesReceived, setAllResponsesReceived] = useState(false);
|
||||
const expectedResponsesRef = useRef<Set<string>>(new Set());
|
||||
const isWaitingForResponses = useRef(false);
|
||||
|
||||
// Listen for text content responses
|
||||
useEffect(() => {
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
if (event.data?.type === "dyad-text-content-response") {
|
||||
const { componentId, text } = event.data;
|
||||
if (text !== null) {
|
||||
textContentCache.current.set(componentId, text);
|
||||
}
|
||||
|
||||
// Mark this response as received
|
||||
expectedResponsesRef.current.delete(componentId);
|
||||
|
||||
// Check if all responses received (only if we're actually waiting)
|
||||
if (
|
||||
isWaitingForResponses.current &&
|
||||
expectedResponsesRef.current.size === 0
|
||||
) {
|
||||
setAllResponsesReceived(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", handleMessage);
|
||||
return () => window.removeEventListener("message", handleMessage);
|
||||
}, []);
|
||||
|
||||
// Execute when all responses are received
|
||||
useEffect(() => {
|
||||
if (allResponsesReceived && isSaving) {
|
||||
const applyChanges = async () => {
|
||||
try {
|
||||
const changesToSave = Array.from(pendingChanges.values());
|
||||
|
||||
// Update changes with cached text content
|
||||
const updatedChanges = changesToSave.map((change) => {
|
||||
const cachedText = textContentCache.current.get(change.componentId);
|
||||
if (cachedText !== undefined) {
|
||||
return { ...change, textContent: cachedText };
|
||||
}
|
||||
return change;
|
||||
});
|
||||
|
||||
await IpcClient.getInstance().applyVisualEditingChanges({
|
||||
appId: selectedAppId!,
|
||||
changes: updatedChanges,
|
||||
});
|
||||
|
||||
setPendingChanges(new Map());
|
||||
textContentCache.current.clear();
|
||||
showSuccess("Visual changes saved to source files");
|
||||
onReset?.();
|
||||
} catch (error) {
|
||||
console.error("Failed to save visual editing changes:", error);
|
||||
showError(`Failed to save changes: ${error}`);
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
setAllResponsesReceived(false);
|
||||
isWaitingForResponses.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
applyChanges();
|
||||
}
|
||||
}, [
|
||||
allResponsesReceived,
|
||||
isSaving,
|
||||
pendingChanges,
|
||||
selectedAppId,
|
||||
onReset,
|
||||
setPendingChanges,
|
||||
]);
|
||||
|
||||
if (pendingChanges.size === 0) return null;
|
||||
|
||||
const handleSave = async () => {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const changesToSave = Array.from(pendingChanges.values());
|
||||
|
||||
if (iframeRef?.current?.contentWindow) {
|
||||
// Reset state for new request
|
||||
setAllResponsesReceived(false);
|
||||
expectedResponsesRef.current.clear();
|
||||
isWaitingForResponses.current = true;
|
||||
|
||||
// Track which components we're expecting responses from
|
||||
for (const change of changesToSave) {
|
||||
expectedResponsesRef.current.add(change.componentId);
|
||||
}
|
||||
|
||||
// Request text content for each component
|
||||
for (const change of changesToSave) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "get-dyad-text-content",
|
||||
data: { componentId: change.componentId },
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
|
||||
// If no responses are expected, trigger immediately
|
||||
if (expectedResponsesRef.current.size === 0) {
|
||||
setAllResponsesReceived(true);
|
||||
}
|
||||
} else {
|
||||
await IpcClient.getInstance().applyVisualEditingChanges({
|
||||
appId: selectedAppId!,
|
||||
changes: changesToSave,
|
||||
});
|
||||
|
||||
setPendingChanges(new Map());
|
||||
textContentCache.current.clear();
|
||||
showSuccess("Visual changes saved to source files");
|
||||
onReset?.();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to save visual editing changes:", error);
|
||||
showError(`Failed to save changes: ${error}`);
|
||||
setIsSaving(false);
|
||||
isWaitingForResponses.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDiscard = () => {
|
||||
setPendingChanges(new Map());
|
||||
onReset?.();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-[var(--background)] border-b border-[var(--border)] px-2 lg:px-4 py-1.5 flex flex-col lg:flex-row items-start lg:items-center lg:justify-between gap-1.5 lg:gap-4 flex-wrap">
|
||||
<p className="text-xs lg:text-sm w-full lg:w-auto">
|
||||
<span className="font-medium">{pendingChanges.size}</span> component
|
||||
{pendingChanges.size > 1 ? "s" : ""} modified
|
||||
</p>
|
||||
<div className="flex gap-1 lg:gap-2 w-full lg:w-auto flex-wrap">
|
||||
<Button size="sm" onClick={handleSave} disabled={isSaving}>
|
||||
<Check size={14} className="mr-1" />
|
||||
<span>{isSaving ? "Saving..." : "Save Changes"}</span>
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleDiscard}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<X size={14} className="mr-1" />
|
||||
<span>Discard</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
531
src/components/preview_panel/VisualEditingToolbar.tsx
Normal file
531
src/components/preview_panel/VisualEditingToolbar.tsx
Normal file
@@ -0,0 +1,531 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { X, Move, Square, Palette, Type } from "lucide-react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { ComponentSelection } from "@/ipc/ipc_types";
|
||||
import { useSetAtom, useAtomValue } from "jotai";
|
||||
import {
|
||||
pendingVisualChangesAtom,
|
||||
selectedComponentsPreviewAtom,
|
||||
currentComponentCoordinatesAtom,
|
||||
visualEditingSelectedComponentAtom,
|
||||
} from "@/atoms/previewAtoms";
|
||||
import { StylePopover } from "./StylePopover";
|
||||
import { ColorPicker } from "@/components/ui/ColorPicker";
|
||||
import { NumberInput } from "@/components/ui/NumberInput";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { rgbToHex, processNumericValue } from "@/utils/style-utils";
|
||||
|
||||
const FONT_WEIGHT_OPTIONS = [
|
||||
{ value: "", label: "Default" },
|
||||
{ value: "100", label: "Thin (100)" },
|
||||
{ value: "200", label: "Extra Light (200)" },
|
||||
{ value: "300", label: "Light (300)" },
|
||||
{ value: "400", label: "Normal (400)" },
|
||||
{ value: "500", label: "Medium (500)" },
|
||||
{ value: "600", label: "Semi Bold (600)" },
|
||||
{ value: "700", label: "Bold (700)" },
|
||||
{ value: "800", label: "Extra Bold (800)" },
|
||||
{ value: "900", label: "Black (900)" },
|
||||
] as const;
|
||||
|
||||
const FONT_FAMILY_OPTIONS = [
|
||||
{ value: "", label: "Default" },
|
||||
// Sans-serif (clean, modern)
|
||||
{ value: "Arial, sans-serif", label: "Arial" },
|
||||
{ value: "Inter, sans-serif", label: "Inter" },
|
||||
{ value: "Roboto, sans-serif", label: "Roboto" },
|
||||
// Serif (traditional, elegant)
|
||||
{ value: "Georgia, serif", label: "Georgia" },
|
||||
{ value: "'Times New Roman', Times, serif", label: "Times New Roman" },
|
||||
{ value: "Merriweather, serif", label: "Merriweather" },
|
||||
// Monospace (code, technical)
|
||||
{ value: "'Courier New', Courier, monospace", label: "Courier New" },
|
||||
{ value: "'Fira Code', monospace", label: "Fira Code" },
|
||||
{ value: "Consolas, monospace", label: "Consolas" },
|
||||
// Display/Decorative (bold, distinctive)
|
||||
{ value: "Impact, fantasy", label: "Impact" },
|
||||
{ value: "'Bebas Neue', cursive", label: "Bebas Neue" },
|
||||
// Cursive/Handwriting (casual, friendly)
|
||||
{ value: "'Comic Sans MS', cursive", label: "Comic Sans MS" },
|
||||
{ value: "'Brush Script MT', cursive", label: "Brush Script" },
|
||||
] as const;
|
||||
|
||||
interface VisualEditingToolbarProps {
|
||||
selectedComponent: ComponentSelection | null;
|
||||
iframeRef: React.RefObject<HTMLIFrameElement | null>;
|
||||
isDynamic: boolean;
|
||||
hasStaticText: boolean;
|
||||
}
|
||||
|
||||
export function VisualEditingToolbar({
|
||||
selectedComponent,
|
||||
iframeRef,
|
||||
isDynamic,
|
||||
hasStaticText,
|
||||
}: VisualEditingToolbarProps) {
|
||||
const coordinates = useAtomValue(currentComponentCoordinatesAtom);
|
||||
const [currentMargin, setCurrentMargin] = useState({ x: "", y: "" });
|
||||
const [currentPadding, setCurrentPadding] = useState({ x: "", y: "" });
|
||||
const [currentBorder, setCurrentBorder] = useState({
|
||||
width: "",
|
||||
radius: "",
|
||||
color: "#000000",
|
||||
});
|
||||
const [currentBackgroundColor, setCurrentBackgroundColor] =
|
||||
useState("#ffffff");
|
||||
const [currentTextStyles, setCurrentTextStyles] = useState({
|
||||
fontSize: "",
|
||||
fontWeight: "",
|
||||
fontFamily: "",
|
||||
color: "#000000",
|
||||
});
|
||||
const setPendingChanges = useSetAtom(pendingVisualChangesAtom);
|
||||
const setSelectedComponentsPreview = useSetAtom(
|
||||
selectedComponentsPreviewAtom,
|
||||
);
|
||||
const setVisualEditingSelectedComponent = useSetAtom(
|
||||
visualEditingSelectedComponentAtom,
|
||||
);
|
||||
|
||||
const handleDeselectComponent = () => {
|
||||
if (!selectedComponent) return;
|
||||
|
||||
setSelectedComponentsPreview((prev) =>
|
||||
prev.filter((c) => c.id !== selectedComponent.id),
|
||||
);
|
||||
setVisualEditingSelectedComponent(null);
|
||||
|
||||
if (iframeRef.current?.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "remove-dyad-component-overlay",
|
||||
componentId: selectedComponent.id,
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const sendStyleModification = (styles: {
|
||||
margin?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
padding?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
|
||||
border?: { width?: string; radius?: string; color?: string };
|
||||
backgroundColor?: string;
|
||||
text?: { fontSize?: string; fontWeight?: string; color?: string };
|
||||
}) => {
|
||||
if (!iframeRef.current?.contentWindow || !selectedComponent) return;
|
||||
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "modify-dyad-component-styles",
|
||||
data: {
|
||||
elementId: selectedComponent.id,
|
||||
runtimeId: selectedComponent.runtimeId,
|
||||
styles,
|
||||
},
|
||||
},
|
||||
"*",
|
||||
);
|
||||
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "update-dyad-overlay-positions",
|
||||
},
|
||||
"*",
|
||||
);
|
||||
|
||||
setPendingChanges((prev) => {
|
||||
const updated = new Map(prev);
|
||||
const existing = updated.get(selectedComponent.id);
|
||||
const newStyles: any = { ...existing?.styles };
|
||||
|
||||
if (styles.margin) {
|
||||
newStyles.margin = { ...existing?.styles?.margin, ...styles.margin };
|
||||
}
|
||||
if (styles.padding) {
|
||||
newStyles.padding = { ...existing?.styles?.padding, ...styles.padding };
|
||||
}
|
||||
|
||||
if (styles.border) {
|
||||
newStyles.border = { ...existing?.styles?.border, ...styles.border };
|
||||
}
|
||||
if (styles.backgroundColor) {
|
||||
newStyles.backgroundColor = styles.backgroundColor;
|
||||
}
|
||||
if (styles.text) {
|
||||
newStyles.text = { ...existing?.styles?.text, ...styles.text };
|
||||
}
|
||||
|
||||
updated.set(selectedComponent.id, {
|
||||
componentId: selectedComponent.id,
|
||||
componentName: selectedComponent.name,
|
||||
relativePath: selectedComponent.relativePath,
|
||||
lineNumber: selectedComponent.lineNumber,
|
||||
styles: newStyles,
|
||||
textContent: existing?.textContent || "",
|
||||
});
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const getCurrentElementStyles = () => {
|
||||
if (!iframeRef.current?.contentWindow || !selectedComponent) return;
|
||||
|
||||
try {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "get-dyad-component-styles",
|
||||
data: {
|
||||
elementId: selectedComponent.id,
|
||||
runtimeId: selectedComponent.runtimeId,
|
||||
},
|
||||
},
|
||||
"*",
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Failed to get element styles:", error);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedComponent) {
|
||||
getCurrentElementStyles();
|
||||
}
|
||||
}, [selectedComponent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (coordinates && iframeRef.current?.contentWindow) {
|
||||
iframeRef.current.contentWindow.postMessage(
|
||||
{
|
||||
type: "update-component-coordinates",
|
||||
coordinates,
|
||||
},
|
||||
"*",
|
||||
);
|
||||
}
|
||||
}, [coordinates, iframeRef]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMessage = (event: MessageEvent) => {
|
||||
if (event.data?.type === "dyad-component-styles") {
|
||||
const { margin, padding, border, backgroundColor, text } =
|
||||
event.data.data;
|
||||
|
||||
const marginX = margin?.left === margin?.right ? margin.left : "";
|
||||
const marginY = margin?.top === margin?.bottom ? margin.top : "";
|
||||
const paddingX = padding?.left === padding?.right ? padding.left : "";
|
||||
const paddingY = padding?.top === padding?.bottom ? padding.top : "";
|
||||
|
||||
setCurrentMargin({ x: marginX, y: marginY });
|
||||
setCurrentPadding({ x: paddingX, y: paddingY });
|
||||
setCurrentBorder({
|
||||
width: border?.width || "",
|
||||
radius: border?.radius || "",
|
||||
color: rgbToHex(border?.color),
|
||||
});
|
||||
setCurrentBackgroundColor(rgbToHex(backgroundColor) || "#ffffff");
|
||||
setCurrentTextStyles({
|
||||
fontSize: text?.fontSize || "",
|
||||
fontWeight: text?.fontWeight || "",
|
||||
fontFamily: text?.fontFamily || "",
|
||||
color: rgbToHex(text?.color) || "#000000",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("message", handleMessage);
|
||||
return () => window.removeEventListener("message", handleMessage);
|
||||
}, []);
|
||||
|
||||
const handleSpacingChange = (
|
||||
type: "margin" | "padding",
|
||||
axis: "x" | "y",
|
||||
value: string,
|
||||
) => {
|
||||
const setter = type === "margin" ? setCurrentMargin : setCurrentPadding;
|
||||
setter((prev) => ({ ...prev, [axis]: value }));
|
||||
|
||||
if (value) {
|
||||
const processedValue = processNumericValue(value);
|
||||
const data =
|
||||
axis === "x"
|
||||
? { left: processedValue, right: processedValue }
|
||||
: { top: processedValue, bottom: processedValue };
|
||||
|
||||
sendStyleModification({ [type]: data });
|
||||
}
|
||||
};
|
||||
|
||||
const handleBorderChange = (
|
||||
property: "width" | "radius" | "color",
|
||||
value: string,
|
||||
) => {
|
||||
const newBorder = { ...currentBorder, [property]: value };
|
||||
setCurrentBorder(newBorder);
|
||||
|
||||
if (value) {
|
||||
let processedValue = value;
|
||||
if (property !== "color" && /^\d+$/.test(value)) {
|
||||
processedValue = `${value}px`;
|
||||
}
|
||||
|
||||
if (property === "width" || property === "color") {
|
||||
sendStyleModification({
|
||||
border: {
|
||||
width:
|
||||
property === "width"
|
||||
? processedValue
|
||||
: currentBorder.width || "0px",
|
||||
color: property === "color" ? processedValue : currentBorder.color,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
sendStyleModification({ border: { [property]: processedValue } });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleTextStyleChange = (
|
||||
property: "fontSize" | "fontWeight" | "fontFamily" | "color",
|
||||
value: string,
|
||||
) => {
|
||||
setCurrentTextStyles((prev) => ({ ...prev, [property]: value }));
|
||||
|
||||
if (value) {
|
||||
let processedValue = value;
|
||||
if (property === "fontSize" && /^\d+$/.test(value)) {
|
||||
processedValue = `${value}px`;
|
||||
}
|
||||
|
||||
sendStyleModification({ text: { [property]: processedValue } });
|
||||
}
|
||||
};
|
||||
|
||||
if (!selectedComponent || !coordinates) return null;
|
||||
|
||||
const toolbarTop = coordinates.top + coordinates.height + 4;
|
||||
const toolbarLeft = coordinates.left;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="absolute bg-[var(--background)] border border-[var(--border)] rounded-md shadow-lg z-50 flex flex-row items-center p-2 gap-1"
|
||||
style={{
|
||||
top: `${toolbarTop}px`,
|
||||
left: `${toolbarLeft}px`,
|
||||
}}
|
||||
>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
onClick={handleDeselectComponent}
|
||||
className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-[#7f22fe] dark:text-gray-200"
|
||||
aria-label="Deselect Component"
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
<p>Deselect Component</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
|
||||
{isDynamic ? (
|
||||
<div className="flex items-center px-2 py-1 text-yellow-800 dark:text-yellow-200 rounded text-xs font-medium">
|
||||
<span>This component is styled dynamically</span>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<StylePopover
|
||||
icon={<Move size={16} />}
|
||||
title="Margin"
|
||||
tooltip="Margin"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<NumberInput
|
||||
id="margin-x"
|
||||
label="Horizontal"
|
||||
value={currentMargin.x}
|
||||
onChange={(v) => handleSpacingChange("margin", "x", v)}
|
||||
placeholder="10"
|
||||
/>
|
||||
<NumberInput
|
||||
id="margin-y"
|
||||
label="Vertical"
|
||||
value={currentMargin.y}
|
||||
onChange={(v) => handleSpacingChange("margin", "y", v)}
|
||||
placeholder="10"
|
||||
/>
|
||||
</div>
|
||||
</StylePopover>
|
||||
|
||||
<StylePopover
|
||||
icon={
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||
<rect x="7" y="7" width="10" height="10" rx="1" />
|
||||
</svg>
|
||||
}
|
||||
title="Padding"
|
||||
tooltip="Padding"
|
||||
>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<NumberInput
|
||||
id="padding-x"
|
||||
label="Horizontal"
|
||||
value={currentPadding.x}
|
||||
onChange={(v) => handleSpacingChange("padding", "x", v)}
|
||||
placeholder="10"
|
||||
/>
|
||||
<NumberInput
|
||||
id="padding-y"
|
||||
label="Vertical"
|
||||
value={currentPadding.y}
|
||||
onChange={(v) => handleSpacingChange("padding", "y", v)}
|
||||
placeholder="10"
|
||||
/>
|
||||
</div>
|
||||
</StylePopover>
|
||||
|
||||
<StylePopover
|
||||
icon={<Square size={16} />}
|
||||
title="Border"
|
||||
tooltip="Border"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<NumberInput
|
||||
id="border-width"
|
||||
label="Width"
|
||||
value={currentBorder.width}
|
||||
onChange={(v) => handleBorderChange("width", v)}
|
||||
placeholder="1"
|
||||
/>
|
||||
<NumberInput
|
||||
id="border-radius"
|
||||
label="Radius"
|
||||
value={currentBorder.radius}
|
||||
onChange={(v) => handleBorderChange("radius", v)}
|
||||
placeholder="4"
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="border-color" className="text-xs">
|
||||
Color
|
||||
</Label>
|
||||
<ColorPicker
|
||||
id="border-color"
|
||||
value={currentBorder.color}
|
||||
onChange={(v) => handleBorderChange("color", v)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StylePopover>
|
||||
|
||||
<StylePopover
|
||||
icon={<Palette size={16} />}
|
||||
title="Background Color"
|
||||
tooltip="Background"
|
||||
>
|
||||
<div>
|
||||
<Label htmlFor="bg-color" className="text-xs">
|
||||
Color
|
||||
</Label>
|
||||
<ColorPicker
|
||||
id="bg-color"
|
||||
value={currentBackgroundColor}
|
||||
onChange={(v) => {
|
||||
setCurrentBackgroundColor(v);
|
||||
if (v) sendStyleModification({ backgroundColor: v });
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</StylePopover>
|
||||
|
||||
{hasStaticText && (
|
||||
<StylePopover
|
||||
icon={<Type size={16} />}
|
||||
title="Text Style"
|
||||
tooltip="Text Style"
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<NumberInput
|
||||
id="font-size"
|
||||
label="Font Size"
|
||||
value={currentTextStyles.fontSize}
|
||||
onChange={(v) => handleTextStyleChange("fontSize", v)}
|
||||
placeholder="16"
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="font-weight" className="text-xs">
|
||||
Font Weight
|
||||
</Label>
|
||||
<select
|
||||
id="font-weight"
|
||||
className="mt-1 h-8 text-xs w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
value={currentTextStyles.fontWeight}
|
||||
onChange={(e) =>
|
||||
handleTextStyleChange("fontWeight", e.target.value)
|
||||
}
|
||||
>
|
||||
{FONT_WEIGHT_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="font-family" className="text-xs">
|
||||
Font Family
|
||||
</Label>
|
||||
<select
|
||||
id="font-family"
|
||||
className="mt-1 h-8 text-xs w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
value={currentTextStyles.fontFamily}
|
||||
onChange={(e) =>
|
||||
handleTextStyleChange("fontFamily", e.target.value)
|
||||
}
|
||||
>
|
||||
{FONT_FAMILY_OPTIONS.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="text-color" className="text-xs">
|
||||
Text Color
|
||||
</Label>
|
||||
<ColorPicker
|
||||
id="text-color"
|
||||
value={currentTextStyles.color}
|
||||
onChange={(v) => handleTextStyleChange("color", v)}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</StylePopover>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
src/components/ui/ColorPicker.tsx
Normal file
35
src/components/ui/ColorPicker.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
||||
interface ColorPickerProps {
|
||||
id: string;
|
||||
label?: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ColorPicker({
|
||||
id,
|
||||
value,
|
||||
onChange,
|
||||
className = "",
|
||||
}: ColorPickerProps) {
|
||||
return (
|
||||
<div className={`flex gap-2 ${className}`}>
|
||||
<Input
|
||||
id={id}
|
||||
type="color"
|
||||
className="h-8 w-12 p-1 cursor-pointer"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="#000000"
|
||||
className="h-8 text-xs flex-1"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
42
src/components/ui/NumberInput.tsx
Normal file
42
src/components/ui/NumberInput.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
interface NumberInputProps {
|
||||
id: string;
|
||||
label: string;
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
step?: string;
|
||||
min?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function NumberInput({
|
||||
id,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "0",
|
||||
step = "1",
|
||||
min = "0",
|
||||
className = "",
|
||||
}: NumberInputProps) {
|
||||
return (
|
||||
<div className={className}>
|
||||
<Label htmlFor={id} className="text-xs">
|
||||
{label}
|
||||
</Label>
|
||||
<Input
|
||||
id={id}
|
||||
type="number"
|
||||
placeholder={placeholder}
|
||||
className="mt-1 h-8 text-xs"
|
||||
value={value.replace(/[^\d.-]/g, "") || ""}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
step={step}
|
||||
min={min}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,8 +15,14 @@ export function registerProHandlers() {
|
||||
// information and isn't critical to using the app
|
||||
handle("get-user-budget", async (): Promise<UserBudgetInfo | null> => {
|
||||
if (IS_TEST_BUILD) {
|
||||
// Avoid spamming the API in E2E tests.
|
||||
return null;
|
||||
// Return mock budget data for E2E tests instead of spamming the API
|
||||
const resetDate = new Date();
|
||||
resetDate.setDate(resetDate.getDate() + 30); // Reset in 30 days
|
||||
return {
|
||||
usedCredits: 100,
|
||||
totalCredits: 1000,
|
||||
budgetResetDate: resetDate,
|
||||
};
|
||||
}
|
||||
logger.info("Attempting to fetch user budget information.");
|
||||
|
||||
|
||||
@@ -70,6 +70,8 @@ import type {
|
||||
SupabaseBranch,
|
||||
SetSupabaseAppProjectParams,
|
||||
SelectNodeFolderResult,
|
||||
ApplyVisualEditingChangesParams,
|
||||
AnalyseComponentParams,
|
||||
} from "./ipc_types";
|
||||
import type { Template } from "../shared/templates";
|
||||
import type {
|
||||
@@ -1327,4 +1329,17 @@ export class IpcClient {
|
||||
public cancelHelpChat(sessionId: string): void {
|
||||
this.ipcRenderer.invoke("help:chat:cancel", sessionId).catch(() => {});
|
||||
}
|
||||
|
||||
// --- Visual Editing ---
|
||||
public async applyVisualEditingChanges(
|
||||
changes: ApplyVisualEditingChangesParams,
|
||||
): Promise<void> {
|
||||
await this.ipcRenderer.invoke("apply-visual-editing-changes", changes);
|
||||
}
|
||||
|
||||
public async analyzeComponent(
|
||||
params: AnalyseComponentParams,
|
||||
): Promise<{ isDynamic: boolean; hasStaticText: boolean }> {
|
||||
return this.ipcRenderer.invoke("analyze-component", params);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,6 +32,7 @@ import { registerPromptHandlers } from "./handlers/prompt_handlers";
|
||||
import { registerHelpBotHandlers } from "./handlers/help_bot_handlers";
|
||||
import { registerMcpHandlers } from "./handlers/mcp_handlers";
|
||||
import { registerSecurityHandlers } from "./handlers/security_handlers";
|
||||
import { registerVisualEditingHandlers } from "../pro/main/ipc/handlers/visual_editing_handlers";
|
||||
|
||||
export function registerIpcHandlers() {
|
||||
// Register all IPC handlers by category
|
||||
@@ -69,4 +70,5 @@ export function registerIpcHandlers() {
|
||||
registerHelpBotHandlers();
|
||||
registerMcpHandlers();
|
||||
registerSecurityHandlers();
|
||||
registerVisualEditingHandlers();
|
||||
}
|
||||
|
||||
@@ -284,6 +284,7 @@ export type UserBudgetInfo = z.infer<typeof UserBudgetInfoSchema>;
|
||||
export interface ComponentSelection {
|
||||
id: string;
|
||||
name: string;
|
||||
runtimeId?: string; // Unique runtime ID for duplicate components
|
||||
relativePath: string;
|
||||
lineNumber: number;
|
||||
columnNumber: number;
|
||||
@@ -548,3 +549,34 @@ export interface SelectNodeFolderResult {
|
||||
canceled?: boolean;
|
||||
selectedPath: string | null;
|
||||
}
|
||||
|
||||
export interface VisualEditingChange {
|
||||
componentId: string;
|
||||
componentName: string;
|
||||
relativePath: string;
|
||||
lineNumber: number;
|
||||
styles: {
|
||||
margin?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
padding?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
dimensions?: { width?: string; height?: string };
|
||||
border?: { width?: string; radius?: string; color?: string };
|
||||
backgroundColor?: string;
|
||||
text?: {
|
||||
fontSize?: string;
|
||||
fontWeight?: string;
|
||||
color?: string;
|
||||
fontFamily?: string;
|
||||
};
|
||||
};
|
||||
textContent?: string;
|
||||
}
|
||||
|
||||
export interface ApplyVisualEditingChangesParams {
|
||||
appId: number;
|
||||
changes: VisualEditingChange[];
|
||||
}
|
||||
|
||||
export interface AnalyseComponentParams {
|
||||
appId: number;
|
||||
componentId: string;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,8 @@ import { contextBridge, ipcRenderer, webFrame } from "electron";
|
||||
|
||||
// Whitelist of valid channels
|
||||
const validInvokeChannels = [
|
||||
"analyze-component",
|
||||
"apply-visual-editing-changes",
|
||||
"get-language-models",
|
||||
"get-language-models-by-providers",
|
||||
"create-custom-language-model",
|
||||
|
||||
125
src/pro/main/ipc/handlers/visual_editing_handlers.ts
Normal file
125
src/pro/main/ipc/handlers/visual_editing_handlers.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import { ipcMain } from "electron";
|
||||
import fs from "node:fs";
|
||||
import { promises as fsPromises } from "node:fs";
|
||||
import path from "path";
|
||||
import { db } from "../../../../db";
|
||||
import { apps } from "../../../../db/schema";
|
||||
import { eq } from "drizzle-orm";
|
||||
import { getDyadAppPath } from "../../../../paths/paths";
|
||||
import {
|
||||
stylesToTailwind,
|
||||
extractClassPrefixes,
|
||||
} from "../../../../utils/style-utils";
|
||||
import git from "isomorphic-git";
|
||||
import { gitCommit } from "../../../../ipc/utils/git_utils";
|
||||
import { safeJoin } from "@/ipc/utils/path_utils";
|
||||
import {
|
||||
AnalyseComponentParams,
|
||||
ApplyVisualEditingChangesParams,
|
||||
} from "@/ipc/ipc_types";
|
||||
import {
|
||||
transformContent,
|
||||
analyzeComponent,
|
||||
} from "../../utils/visual_editing_utils";
|
||||
|
||||
export function registerVisualEditingHandlers() {
|
||||
ipcMain.handle(
|
||||
"apply-visual-editing-changes",
|
||||
async (_event, params: ApplyVisualEditingChangesParams) => {
|
||||
const { appId, changes } = params;
|
||||
try {
|
||||
if (changes.length === 0) return;
|
||||
|
||||
// Get the app to find its path
|
||||
const app = await db.query.apps.findFirst({
|
||||
where: eq(apps.id, appId),
|
||||
});
|
||||
|
||||
if (!app) {
|
||||
throw new Error(`App not found: ${appId}`);
|
||||
}
|
||||
|
||||
const appPath = getDyadAppPath(app.path);
|
||||
const fileChanges = new Map<
|
||||
string,
|
||||
Map<
|
||||
number,
|
||||
{ classes: string[]; prefixes: string[]; textContent?: string }
|
||||
>
|
||||
>();
|
||||
|
||||
// Group changes by file and line
|
||||
for (const change of changes) {
|
||||
if (!fileChanges.has(change.relativePath)) {
|
||||
fileChanges.set(change.relativePath, new Map());
|
||||
}
|
||||
const tailwindClasses = stylesToTailwind(change.styles);
|
||||
const changePrefixes = extractClassPrefixes(tailwindClasses);
|
||||
|
||||
fileChanges.get(change.relativePath)!.set(change.lineNumber, {
|
||||
classes: tailwindClasses,
|
||||
prefixes: changePrefixes,
|
||||
...(change.textContent !== undefined && {
|
||||
textContent: change.textContent,
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
// Apply changes to each file
|
||||
for (const [relativePath, lineChanges] of fileChanges) {
|
||||
const filePath = safeJoin(appPath, relativePath);
|
||||
const content = await fsPromises.readFile(filePath, "utf-8");
|
||||
const transformedContent = transformContent(content, lineChanges);
|
||||
await fsPromises.writeFile(filePath, transformedContent, "utf-8");
|
||||
// Check if git repository exists and commit the change
|
||||
if (fs.existsSync(path.join(appPath, ".git"))) {
|
||||
await git.add({
|
||||
fs,
|
||||
dir: appPath,
|
||||
filepath: relativePath,
|
||||
});
|
||||
|
||||
await gitCommit({
|
||||
path: appPath,
|
||||
message: `Updated ${relativePath}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
throw new Error(`Failed to apply visual editing changes: ${error}`);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
ipcMain.handle(
|
||||
"analyze-component",
|
||||
async (_event, analyseComponentParams: AnalyseComponentParams) => {
|
||||
const { appId, componentId } = analyseComponentParams;
|
||||
try {
|
||||
const [filePath, lineStr] = componentId.split(":");
|
||||
const line = parseInt(lineStr, 10);
|
||||
|
||||
if (!filePath || isNaN(line)) {
|
||||
return { isDynamic: false, hasStaticText: false };
|
||||
}
|
||||
|
||||
// Get the app to find its path
|
||||
const app = await db.query.apps.findFirst({
|
||||
where: eq(apps.id, appId),
|
||||
});
|
||||
|
||||
if (!app) {
|
||||
throw new Error(`App not found: ${appId}`);
|
||||
}
|
||||
|
||||
const appPath = getDyadAppPath(app.path);
|
||||
const fullPath = safeJoin(appPath, filePath);
|
||||
const content = await fsPromises.readFile(fullPath, "utf-8");
|
||||
return analyzeComponent(content, line);
|
||||
} catch (error) {
|
||||
console.error("Failed to analyze component:", error);
|
||||
return { isDynamic: false, hasStaticText: false };
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
617
src/pro/main/utils/visual_editing_utils.test.ts
Normal file
617
src/pro/main/utils/visual_editing_utils.test.ts
Normal file
@@ -0,0 +1,617 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { transformContent, analyzeComponent } from "./visual_editing_utils";
|
||||
|
||||
describe("transformContent", () => {
|
||||
describe("className manipulation", () => {
|
||||
it("should add className attribute when none exists", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["bg-[#ff0000]", "p-[16px]"], prefixes: ["bg-", "p-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain('className="bg-[#ff0000] p-[16px]"');
|
||||
});
|
||||
|
||||
it("should append classes to existing className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="existing-class">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["bg-[#0000ff]"], prefixes: ["bg-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("existing-class");
|
||||
expect(result).toContain("bg-[#0000ff]");
|
||||
});
|
||||
|
||||
it("should remove classes with matching prefixes", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="bg-[#ff0000] p-[16px] text-[18px]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["bg-[#0000ff]"], prefixes: ["bg-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("bg-[#ff0000]");
|
||||
expect(result).toContain("bg-[#0000ff]");
|
||||
expect(result).toContain("p-[16px]");
|
||||
expect(result).toContain("text-[18px]");
|
||||
});
|
||||
|
||||
it("should handle font-weight classes correctly", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="font-[600] text-lg">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["font-[700]"], prefixes: ["font-weight-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("font-[600]");
|
||||
expect(result).toContain("font-[700]");
|
||||
expect(result).toContain("text-lg");
|
||||
});
|
||||
|
||||
it("should handle font-family classes without removing font-weight", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="font-[600] font-[Inter] text-lg">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["font-[Roboto]"], prefixes: ["font-family-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("font-[600]");
|
||||
expect(result).not.toContain("font-[Inter]");
|
||||
expect(result).toContain("font-[Roboto]");
|
||||
});
|
||||
|
||||
it("should handle text-size classes without removing text-color or text-align", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="text-[18px] text-[center] text-[#ff0000]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["text-[24px]"], prefixes: ["text-size-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("text-[18px]");
|
||||
expect(result).toContain("text-[24px]");
|
||||
expect(result).toContain("text-[center]");
|
||||
expect(result).toContain("text-[#ff0000]");
|
||||
});
|
||||
|
||||
it("should handle arbitrary text-size values", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="text-[44px] text-center">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["text-[32px]"], prefixes: ["text-size-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("text-[44px]");
|
||||
expect(result).toContain("text-[32px]");
|
||||
expect(result).toContain("text-center");
|
||||
});
|
||||
|
||||
it("should remove mt-, mb-, my- when applying my- prefix", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="mt-[16px] mb-[8px] mx-[24px]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["my-[20px]"], prefixes: ["my-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("mt-[16px]");
|
||||
expect(result).not.toContain("mb-[8px]");
|
||||
expect(result).toContain("my-[20px]");
|
||||
expect(result).toContain("mx-[24px]");
|
||||
});
|
||||
|
||||
it("should remove ml-, mr-, mx- when applying mx- prefix", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="ml-[16px] mr-[8px] my-[24px]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["mx-[20px]"], prefixes: ["mx-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("ml-[16px]");
|
||||
expect(result).not.toContain("mr-[8px]");
|
||||
expect(result).toContain("mx-[20px]");
|
||||
expect(result).toContain("my-[24px]");
|
||||
});
|
||||
|
||||
it("should handle padding classes similarly to margin", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="pt-[16px] pb-[8px] px-[24px]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[3, { classes: ["py-[20px]"], prefixes: ["py-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("pt-[16px]");
|
||||
expect(result).not.toContain("pb-[8px]");
|
||||
expect(result).toContain("py-[20px]");
|
||||
expect(result).toContain("px-[24px]");
|
||||
});
|
||||
});
|
||||
|
||||
describe("text content manipulation", () => {
|
||||
it("should update text content for elements with only text", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Old text</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: [],
|
||||
prefixes: [],
|
||||
textContent: "New text",
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("Old text");
|
||||
expect(result).toContain("New text");
|
||||
});
|
||||
|
||||
it("should not update text content when element has nested JSX", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Old text <span>nested</span></div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: [],
|
||||
prefixes: [],
|
||||
textContent: "New text",
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("Old text");
|
||||
expect(result).toContain("<span>nested</span>");
|
||||
});
|
||||
|
||||
it("should update text content and classes together", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="text-[18px]">Old text</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["text-[24px]"],
|
||||
prefixes: ["text-size-"],
|
||||
textContent: "New text",
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("text-[24px]");
|
||||
expect(result).not.toContain("text-[18px]");
|
||||
expect(result).toContain("New text");
|
||||
expect(result).not.toContain("Old text");
|
||||
});
|
||||
});
|
||||
|
||||
describe("spacing edge cases", () => {
|
||||
it("should split m-[] into my-[] when adding mx-[]", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="m-[20px]">Content</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["mx-[10px]"],
|
||||
prefixes: ["mx-"],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("m-[20px]");
|
||||
expect(result).toContain("my-[20px]");
|
||||
expect(result).toContain("mx-[10px]");
|
||||
});
|
||||
|
||||
it("should split m-[] into mx-[] when adding my-[]", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="m-[20px]">Content</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["my-[10px]"],
|
||||
prefixes: ["my-"],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("m-[20px]");
|
||||
expect(result).toContain("mx-[20px]");
|
||||
expect(result).toContain("my-[10px]");
|
||||
});
|
||||
|
||||
it("should split p-[] into py-[] when adding px-[]", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="p-[16px]">Content</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["px-[8px]"],
|
||||
prefixes: ["px-"],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("p-[16px]");
|
||||
expect(result).toContain("py-[16px]");
|
||||
expect(result).toContain("px-[8px]");
|
||||
});
|
||||
|
||||
it("should split p-[] into px-[] when adding py-[]", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="p-[16px]">Content</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["py-[8px]"],
|
||||
prefixes: ["py-"],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("p-[16px]");
|
||||
expect(result).toContain("px-[16px]");
|
||||
expect(result).toContain("py-[8px]");
|
||||
});
|
||||
|
||||
it("should not add complementary class when both directional classes are added", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="m-[20px]">Content</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[
|
||||
3,
|
||||
{
|
||||
classes: ["mx-[10px]", "my-[15px]"],
|
||||
prefixes: ["mx-", "my-"],
|
||||
},
|
||||
],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).not.toContain("m-[20px]");
|
||||
expect(result).toContain("mx-[10px]");
|
||||
expect(result).toContain("my-[15px]");
|
||||
// Should not have added an extra mx- or my- with the original value
|
||||
expect(result.match(/mx-/g)?.length).toBe(1);
|
||||
expect(result.match(/my-/g)?.length).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe("multiple changes", () => {
|
||||
it("should apply changes to multiple lines", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-[18px]">Title</h1>
|
||||
<p className="text-[14px]">Paragraph</p>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[5, { classes: ["text-[32px]"], prefixes: ["text-size-"] }],
|
||||
[6, { classes: ["text-[16px]"], prefixes: ["text-size-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("text-[32px]");
|
||||
expect(result).not.toContain("text-[18px]");
|
||||
expect(result).toContain("text-[16px]");
|
||||
expect(result).not.toContain("text-[14px]");
|
||||
});
|
||||
});
|
||||
|
||||
describe("edge cases", () => {
|
||||
it("should handle empty changes map", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="text-[18px]">Hello</div>;
|
||||
}`;
|
||||
|
||||
const changes = new Map();
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("text-[18px]");
|
||||
expect(result).toContain("Hello");
|
||||
});
|
||||
|
||||
it("should preserve code formatting", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return (
|
||||
<div className="text-[18px]">
|
||||
Hello
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const changes = new Map([
|
||||
[4, { classes: ["text-[24px]"], prefixes: ["text-size-"] }],
|
||||
]);
|
||||
|
||||
const result = transformContent(content, changes);
|
||||
expect(result).toContain("text-[24px]");
|
||||
// Recast should preserve overall structure
|
||||
expect(result).toMatch(/return\s*\(/);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("analyzeComponent", () => {
|
||||
describe("dynamic styling detection", () => {
|
||||
it("should detect conditional className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={isActive ? "active" : "inactive"}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect logical expression className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={isActive && "active"}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect template literal className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={\`base-class \${dynamicClass}\`}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect identifier className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={styles.container}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect function call className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={cn("base", { active: isActive })}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect dynamic style attribute", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div style={{ color: isActive ? "red" : "blue" }}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
});
|
||||
|
||||
it("should not detect static className", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className="static-class">Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(false);
|
||||
});
|
||||
|
||||
it("should not detect when no className or style", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("static text detection", () => {
|
||||
it("should detect static text content", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Static text content</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(true);
|
||||
});
|
||||
|
||||
it("should detect string literal in expression container", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>{"Static text"}</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(true);
|
||||
});
|
||||
|
||||
it("should not detect static text when element has nested JSX", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Text <span>nested</span></div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(false);
|
||||
});
|
||||
|
||||
it("should not detect static text when empty", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div></div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(false);
|
||||
});
|
||||
|
||||
it("should ignore whitespace-only text", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div> </div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(false);
|
||||
});
|
||||
|
||||
it("should not detect static text with dynamic expression", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>{dynamicText}</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.hasStaticText).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("combined analysis", () => {
|
||||
it("should detect both dynamic styling and static text", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div className={isActive ? "active" : "inactive"}>Static text</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 3);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
expect(result.hasStaticText).toBe(true);
|
||||
});
|
||||
|
||||
it("should return false for both when element not found", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return <div>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 999);
|
||||
expect(result.isDynamic).toBe(false);
|
||||
expect(result.hasStaticText).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("nested elements", () => {
|
||||
it("should analyze correct element on specified line", () => {
|
||||
const content = `
|
||||
function Component() {
|
||||
return (
|
||||
<div className="w-[100px]">
|
||||
<span className={dynamicClass}>Inner</span>
|
||||
</div>
|
||||
);
|
||||
}`;
|
||||
|
||||
const outerResult = analyzeComponent(content, 4);
|
||||
expect(outerResult.isDynamic).toBe(false);
|
||||
expect(outerResult.hasStaticText).toBe(false);
|
||||
|
||||
const innerResult = analyzeComponent(content, 5);
|
||||
expect(innerResult.isDynamic).toBe(true);
|
||||
expect(innerResult.hasStaticText).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("TypeScript support", () => {
|
||||
it("should handle TypeScript syntax", () => {
|
||||
const content = `
|
||||
function Component(): JSX.Element {
|
||||
const props: Props = { active: true };
|
||||
return <div className={props.active ? "active" : "inactive"}>Hello</div>;
|
||||
}`;
|
||||
|
||||
const result = analyzeComponent(content, 4);
|
||||
expect(result.isDynamic).toBe(true);
|
||||
expect(result.hasStaticText).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
361
src/pro/main/utils/visual_editing_utils.ts
Normal file
361
src/pro/main/utils/visual_editing_utils.ts
Normal file
@@ -0,0 +1,361 @@
|
||||
import { parse } from "@babel/parser";
|
||||
import * as recast from "recast";
|
||||
import traverse from "@babel/traverse";
|
||||
|
||||
interface ContentChange {
|
||||
classes: string[];
|
||||
prefixes: string[];
|
||||
textContent?: string;
|
||||
}
|
||||
|
||||
interface ComponentAnalysis {
|
||||
isDynamic: boolean;
|
||||
hasStaticText: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pure function that transforms JSX/TSX content by applying style and text changes
|
||||
* @param content - The source code content to transform
|
||||
* @param changes - Map of line numbers to their changes
|
||||
* @returns The transformed source code
|
||||
*/
|
||||
export function transformContent(
|
||||
content: string,
|
||||
changes: Map<number, ContentChange>,
|
||||
): string {
|
||||
// Parse with babel for compatibility with JSX/TypeScript
|
||||
const ast = parse(content, {
|
||||
sourceType: "module",
|
||||
plugins: ["jsx", "typescript"],
|
||||
});
|
||||
|
||||
// Track which lines have been processed to avoid modifying nested elements
|
||||
const processedLines = new Set<number>();
|
||||
|
||||
traverse(ast, {
|
||||
JSXElement(path) {
|
||||
const line = path.node.openingElement.loc?.start.line;
|
||||
|
||||
// Only process if we have changes for this line and haven't processed it yet
|
||||
if (line && changes.has(line) && !processedLines.has(line)) {
|
||||
processedLines.add(line);
|
||||
const change = changes.get(line)!;
|
||||
|
||||
// Check if this element has any nested JSX elements as direct children
|
||||
const hasNestedJSX = path.node.children.some(
|
||||
(child: any) => child.type === "JSXElement",
|
||||
);
|
||||
|
||||
// Skip text content modification if there are nested elements
|
||||
const shouldModifyText =
|
||||
"textContent" in change &&
|
||||
change.textContent !== undefined &&
|
||||
!hasNestedJSX;
|
||||
|
||||
// Update className if there are style changes
|
||||
if (change.classes.length > 0) {
|
||||
const attributes = path.node.openingElement.attributes;
|
||||
let classNameAttr = attributes.find(
|
||||
(attr: any) =>
|
||||
attr.type === "JSXAttribute" && attr.name.name === "className",
|
||||
) as any;
|
||||
|
||||
if (classNameAttr) {
|
||||
// Get existing classes
|
||||
let existingClasses: string[] = [];
|
||||
if (
|
||||
classNameAttr.value &&
|
||||
classNameAttr.value.type === "StringLiteral"
|
||||
) {
|
||||
existingClasses = classNameAttr.value.value
|
||||
.split(/\s+/)
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
// Filter out classes with matching prefixes
|
||||
const shouldRemoveClass = (cls: string, prefixes: string[]) => {
|
||||
return prefixes.some((prefix) => {
|
||||
// Handle font-weight vs font-family distinction
|
||||
if (prefix === "font-weight-") {
|
||||
// Remove font-[numeric] classes
|
||||
const match = cls.match(/^font-\[(\d+)\]$/);
|
||||
return match !== null;
|
||||
} else if (prefix === "font-family-") {
|
||||
// Remove font-[non-numeric] classes
|
||||
const match = cls.match(/^font-\[([^\]]+)\]$/);
|
||||
if (match) {
|
||||
// Check if it's NOT purely numeric (i.e., it's a font-family)
|
||||
return !/^\d+$/.test(match[1]);
|
||||
}
|
||||
return false;
|
||||
} else if (prefix === "text-size-") {
|
||||
// Remove only text-size classes (text-xs, text-3xl, text-[44px], etc.)
|
||||
// but NOT text-center, text-left, text-red-500, etc.
|
||||
const sizeMatch = cls.match(
|
||||
/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
|
||||
);
|
||||
if (sizeMatch) return true;
|
||||
// Also match arbitrary text sizes like text-[44px]
|
||||
if (cls.match(/^text-\[[\d.]+[a-z]+\]$/)) return true;
|
||||
return false;
|
||||
} else if (prefix === "my-" || prefix === "py-") {
|
||||
// When applying vertical spacing (my/py), remove mt-, mb-, my-/py-, and m-/p- (all sides)
|
||||
const type = prefix[0]; // 'm' or 'p'
|
||||
return (
|
||||
cls.startsWith(`${type}t-`) ||
|
||||
cls.startsWith(`${type}b-`) ||
|
||||
cls.startsWith(`${type}y-`) ||
|
||||
cls.match(new RegExp(`^${type}-\\[`)) // Match m-[...] or p-[...]
|
||||
);
|
||||
} else if (prefix === "mx-" || prefix === "px-") {
|
||||
// When applying horizontal spacing (mx/px), remove ml-, mr-, mx-/px-, and m-/p- (all sides)
|
||||
const type = prefix[0]; // 'm' or 'p'
|
||||
return (
|
||||
cls.startsWith(`${type}l-`) ||
|
||||
cls.startsWith(`${type}r-`) ||
|
||||
cls.startsWith(`${type}x-`) ||
|
||||
cls.match(new RegExp(`^${type}-\\[`)) // Match m-[...] or p-[...]
|
||||
);
|
||||
} else {
|
||||
// For other prefixes, use simple startsWith
|
||||
return cls.startsWith(prefix);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
let filteredClasses = existingClasses.filter(
|
||||
(cls) => !shouldRemoveClass(cls, change.prefixes),
|
||||
);
|
||||
|
||||
// Special case: When adding mx-/px- or my-/py-, check if we need to preserve complementary spacing
|
||||
// If we're removing m-[value]/p-[value], we should add the complementary directional class
|
||||
// BUT only if we're not already adding both directional classes
|
||||
const addedClasses: string[] = [];
|
||||
|
||||
// Check for each spacing type (margin and padding)
|
||||
["m", "p"].forEach((type) => {
|
||||
const hasDirectionalX = change.prefixes.some(
|
||||
(p) => p === `${type}x-`,
|
||||
);
|
||||
const hasDirectionalY = change.prefixes.some(
|
||||
(p) => p === `${type}y-`,
|
||||
);
|
||||
|
||||
// Only process if we're adding at least one directional class for this type
|
||||
if (!hasDirectionalX && !hasDirectionalY) {
|
||||
return; // Skip this type
|
||||
}
|
||||
|
||||
// Find if there was an all-sides class (m-[...] or p-[...])
|
||||
const allSidesClass = existingClasses.find((cls) =>
|
||||
cls.match(new RegExp(`^${type}-\\[([^\\]]+)\\]$`)),
|
||||
);
|
||||
|
||||
if (allSidesClass) {
|
||||
// Remove the omni-directional class from filtered classes
|
||||
filteredClasses = filteredClasses.filter(
|
||||
(cls) => cls !== allSidesClass,
|
||||
);
|
||||
|
||||
// Extract the value
|
||||
const valueMatch = allSidesClass.match(/\[([^\]]+)\]/);
|
||||
if (valueMatch) {
|
||||
const omnidirectionalValue = valueMatch[1];
|
||||
|
||||
// Only add complementary class if we're not adding both directions
|
||||
if (hasDirectionalX && !hasDirectionalY) {
|
||||
// Adding mx-[], so preserve the value as my-[]
|
||||
addedClasses.push(`${type}y-[${omnidirectionalValue}]`);
|
||||
} else if (hasDirectionalY && !hasDirectionalX) {
|
||||
// Adding my-[], so preserve the value as mx-[]
|
||||
addedClasses.push(`${type}x-[${omnidirectionalValue}]`);
|
||||
}
|
||||
// If both are being added, we don't need to preserve anything
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Combine filtered, preserved, and new classes
|
||||
const updatedClasses = [
|
||||
...filteredClasses,
|
||||
...addedClasses,
|
||||
...change.classes,
|
||||
].join(" ");
|
||||
|
||||
// Update the className value
|
||||
classNameAttr.value = {
|
||||
type: "StringLiteral",
|
||||
value: updatedClasses,
|
||||
};
|
||||
} else {
|
||||
// Add className attribute
|
||||
attributes.push({
|
||||
type: "JSXAttribute",
|
||||
name: { type: "JSXIdentifier", name: "className" },
|
||||
value: {
|
||||
type: "StringLiteral",
|
||||
value: change.classes.join(" "),
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (shouldModifyText) {
|
||||
// Check if all children are text nodes (no nested JSX elements)
|
||||
const hasOnlyTextChildren = path.node.children.every((child: any) => {
|
||||
// JSXElement means there's a nested component/element
|
||||
if (child.type === "JSXElement") return false;
|
||||
return (
|
||||
child.type === "JSXText" ||
|
||||
(child.type === "JSXExpressionContainer" &&
|
||||
child.expression.type === "StringLiteral")
|
||||
);
|
||||
});
|
||||
|
||||
// Only replace children if there are no nested JSX elements
|
||||
if (hasOnlyTextChildren) {
|
||||
path.node.children = [
|
||||
{
|
||||
type: "JSXText",
|
||||
value: change.textContent,
|
||||
} as any,
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// Use recast to generate code with preserved formatting
|
||||
const output = recast.print(ast);
|
||||
return output.code;
|
||||
}
|
||||
|
||||
/**
|
||||
* Analyzes a JSX/TSX component at a specific line to determine:
|
||||
* - Whether it has dynamic styling (className/style with expressions)
|
||||
* - Whether it contains static text content
|
||||
*/
|
||||
export function analyzeComponent(
|
||||
content: string,
|
||||
line: number,
|
||||
): ComponentAnalysis {
|
||||
const ast = parse(content, {
|
||||
sourceType: "module",
|
||||
plugins: ["jsx", "typescript"],
|
||||
});
|
||||
|
||||
let foundElement: any = null;
|
||||
|
||||
// Simple recursive walker to find JSXElement
|
||||
const walk = (node: any): void => {
|
||||
if (!node) return;
|
||||
|
||||
if (
|
||||
node.type === "JSXElement" &&
|
||||
node.openingElement?.loc?.start.line === line
|
||||
) {
|
||||
foundElement = node;
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle arrays (like body of a program or block)
|
||||
if (Array.isArray(node)) {
|
||||
for (const child of node) {
|
||||
walk(child);
|
||||
if (foundElement) return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle objects
|
||||
for (const key in node) {
|
||||
if (
|
||||
key !== "loc" &&
|
||||
key !== "start" &&
|
||||
key !== "end" &&
|
||||
node[key] &&
|
||||
typeof node[key] === "object"
|
||||
) {
|
||||
walk(node[key]);
|
||||
if (foundElement) return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
walk(ast);
|
||||
|
||||
if (!foundElement) {
|
||||
return { isDynamic: false, hasStaticText: false };
|
||||
}
|
||||
|
||||
let dynamic = false;
|
||||
let staticText = false;
|
||||
|
||||
// Check attributes for dynamic styling
|
||||
if (foundElement.openingElement.attributes) {
|
||||
foundElement.openingElement.attributes.forEach((attr: any) => {
|
||||
if (attr.type === "JSXAttribute" && attr.name && attr.name.name) {
|
||||
const attrName = attr.name.name;
|
||||
if (attrName === "style" || attrName === "className") {
|
||||
if (attr.value && attr.value.type === "JSXExpressionContainer") {
|
||||
const expr = attr.value.expression;
|
||||
// Check for conditional/logical/template
|
||||
if (
|
||||
expr.type === "ConditionalExpression" ||
|
||||
expr.type === "LogicalExpression" ||
|
||||
expr.type === "TemplateLiteral"
|
||||
) {
|
||||
dynamic = true;
|
||||
}
|
||||
// Check for identifiers (variables)
|
||||
if (
|
||||
expr.type === "Identifier" ||
|
||||
expr.type === "MemberExpression"
|
||||
) {
|
||||
dynamic = true;
|
||||
}
|
||||
// Check for CallExpression (function calls)
|
||||
if (expr.type === "CallExpression") {
|
||||
dynamic = true;
|
||||
}
|
||||
// Check for ObjectExpression (inline objects like style={{...}})
|
||||
if (expr.type === "ObjectExpression") {
|
||||
dynamic = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Check children for static text
|
||||
let allChildrenAreText = true;
|
||||
let hasText = false;
|
||||
|
||||
if (foundElement.children && foundElement.children.length > 0) {
|
||||
foundElement.children.forEach((child: any) => {
|
||||
if (child.type === "JSXText") {
|
||||
// It's text (could be whitespace)
|
||||
if (child.value.trim().length > 0) hasText = true;
|
||||
} else if (
|
||||
child.type === "JSXExpressionContainer" &&
|
||||
child.expression.type === "StringLiteral"
|
||||
) {
|
||||
hasText = true;
|
||||
} else {
|
||||
// If it's not text (e.g. another Element), mark as not text-only
|
||||
allChildrenAreText = false;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// No children
|
||||
allChildrenAreText = true;
|
||||
}
|
||||
|
||||
if (hasText && allChildrenAreText) {
|
||||
staticText = true;
|
||||
}
|
||||
|
||||
return { isDynamic: dynamic, hasStaticText: staticText };
|
||||
}
|
||||
199
src/utils/style-utils.ts
Normal file
199
src/utils/style-utils.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
// Style conversion and manipulation utilities
|
||||
|
||||
interface SpacingValues {
|
||||
left?: string;
|
||||
right?: string;
|
||||
top?: string;
|
||||
bottom?: string;
|
||||
}
|
||||
|
||||
interface StyleObject {
|
||||
margin?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
padding?: { left?: string; right?: string; top?: string; bottom?: string };
|
||||
dimensions?: { width?: string; height?: string };
|
||||
border?: { width?: string; radius?: string; color?: string };
|
||||
backgroundColor?: string;
|
||||
text?: {
|
||||
fontSize?: string;
|
||||
fontWeight?: string;
|
||||
color?: string;
|
||||
fontFamily?: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert spacing values (margin/padding) to Tailwind classes
|
||||
*/
|
||||
function convertSpacingToTailwind(
|
||||
values: SpacingValues,
|
||||
prefix: "m" | "p",
|
||||
): string[] {
|
||||
const classes: string[] = [];
|
||||
const { left, right, top, bottom } = values;
|
||||
|
||||
const hasHorizontal = left !== undefined && right !== undefined;
|
||||
const hasVertical = top !== undefined && bottom !== undefined;
|
||||
|
||||
// All sides equal
|
||||
if (
|
||||
hasHorizontal &&
|
||||
hasVertical &&
|
||||
left === right &&
|
||||
top === bottom &&
|
||||
left === top
|
||||
) {
|
||||
classes.push(`${prefix}-[${left}]`);
|
||||
} else {
|
||||
const horizontalValue = hasHorizontal && left === right ? left : null;
|
||||
const verticalValue = hasVertical && top === bottom ? top : null;
|
||||
|
||||
if (
|
||||
horizontalValue !== null &&
|
||||
verticalValue !== null &&
|
||||
horizontalValue === verticalValue
|
||||
) {
|
||||
// px = py or mx = my, so use the shorthand for all sides
|
||||
classes.push(`${prefix}-[${horizontalValue}]`);
|
||||
} else {
|
||||
// Horizontal
|
||||
if (hasHorizontal && left === right) {
|
||||
classes.push(`${prefix}x-[${left}]`);
|
||||
} else {
|
||||
if (left !== undefined) classes.push(`${prefix}l-[${left}]`);
|
||||
if (right !== undefined) classes.push(`${prefix}r-[${right}]`);
|
||||
}
|
||||
|
||||
// Vertical
|
||||
if (hasVertical && top === bottom) {
|
||||
classes.push(`${prefix}y-[${top}]`);
|
||||
} else {
|
||||
if (top !== undefined) classes.push(`${prefix}t-[${top}]`);
|
||||
if (bottom !== undefined) classes.push(`${prefix}b-[${bottom}]`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return classes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert style object to Tailwind classes
|
||||
*/
|
||||
export function stylesToTailwind(styles: StyleObject): string[] {
|
||||
const classes: string[] = [];
|
||||
|
||||
if (styles.margin) {
|
||||
classes.push(...convertSpacingToTailwind(styles.margin, "m"));
|
||||
}
|
||||
|
||||
if (styles.padding) {
|
||||
classes.push(...convertSpacingToTailwind(styles.padding, "p"));
|
||||
}
|
||||
|
||||
if (styles.border) {
|
||||
if (styles.border.width !== undefined)
|
||||
classes.push(`border-[${styles.border.width}]`);
|
||||
if (styles.border.radius !== undefined)
|
||||
classes.push(`rounded-[${styles.border.radius}]`);
|
||||
if (styles.border.color !== undefined)
|
||||
classes.push(`border-[${styles.border.color}]`);
|
||||
}
|
||||
|
||||
if (styles.backgroundColor !== undefined) {
|
||||
classes.push(`bg-[${styles.backgroundColor}]`);
|
||||
}
|
||||
|
||||
if (styles.dimensions) {
|
||||
if (styles.dimensions.width !== undefined)
|
||||
classes.push(`w-[${styles.dimensions.width}]`);
|
||||
if (styles.dimensions.height !== undefined)
|
||||
classes.push(`h-[${styles.dimensions.height}]`);
|
||||
}
|
||||
|
||||
if (styles.text) {
|
||||
if (styles.text.fontSize !== undefined)
|
||||
classes.push(`text-[${styles.text.fontSize}]`);
|
||||
if (styles.text.fontWeight !== undefined)
|
||||
classes.push(`font-[${styles.text.fontWeight}]`);
|
||||
if (styles.text.color !== undefined)
|
||||
classes.push(`[color:${styles.text.color}]`);
|
||||
if (styles.text.fontFamily !== undefined) {
|
||||
// Replace spaces with underscores for Tailwind arbitrary values
|
||||
const fontFamilyValue = styles.text.fontFamily.replace(/\s/g, "_");
|
||||
classes.push(`font-[${fontFamilyValue}]`);
|
||||
}
|
||||
}
|
||||
|
||||
return classes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert RGB color to hex format
|
||||
*/
|
||||
export function rgbToHex(rgb: string): string {
|
||||
if (!rgb || rgb.startsWith("#")) return rgb || "#000000";
|
||||
const rgbMatch = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
||||
if (rgbMatch) {
|
||||
const r = parseInt(rgbMatch[1]).toString(16).padStart(2, "0");
|
||||
const g = parseInt(rgbMatch[2]).toString(16).padStart(2, "0");
|
||||
const b = parseInt(rgbMatch[3]).toString(16).padStart(2, "0");
|
||||
return `#${r}${g}${b}`;
|
||||
}
|
||||
return rgb || "#000000";
|
||||
}
|
||||
|
||||
/**
|
||||
* Process value by adding px suffix if it's a plain number
|
||||
*/
|
||||
export function processNumericValue(value: string): string {
|
||||
return /^\d+$/.test(value) ? `${value}px` : value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract prefixes from Tailwind classes
|
||||
*/
|
||||
export function extractClassPrefixes(classes: string[]): string[] {
|
||||
return Array.from(
|
||||
new Set(
|
||||
classes.map((cls) => {
|
||||
// Handle arbitrary properties like [color:...]
|
||||
const arbitraryMatch = cls.match(/^\[([a-z-]+):/);
|
||||
if (arbitraryMatch) {
|
||||
return `[${arbitraryMatch[1]}:`;
|
||||
}
|
||||
|
||||
// Special handling for font-[...] classes
|
||||
// We need to distinguish between font-weight and font-family
|
||||
if (cls.startsWith("font-[")) {
|
||||
const value = cls.match(/^font-\[([^\]]+)\]/);
|
||||
if (value) {
|
||||
// If it's numeric (like 400, 700), it's font-weight
|
||||
// If it contains letters/underscores, it's font-family
|
||||
const isNumeric = /^\d+$/.test(value[1]);
|
||||
return isNumeric ? "font-weight-" : "font-family-";
|
||||
}
|
||||
}
|
||||
|
||||
// Special handling for text-size classes (text-xs, text-sm, text-3xl, etc.)
|
||||
// to avoid removing text-center, text-left, text-color classes
|
||||
if (cls.startsWith("text-")) {
|
||||
// Check if it's a font-size class (ends with size suffix like xs, sm, lg, xl, 2xl, etc.)
|
||||
const sizeMatch = cls.match(
|
||||
/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/,
|
||||
);
|
||||
if (sizeMatch) {
|
||||
return "text-size-"; // Use a specific prefix for font-size
|
||||
}
|
||||
// For arbitrary text sizes like text-[44px]
|
||||
if (cls.match(/^text-\[[\d.]+[a-z]+\]$/)) {
|
||||
return "text-size-";
|
||||
}
|
||||
}
|
||||
|
||||
// Handle regular Tailwind classes
|
||||
const match = cls.match(/^([a-z]+[-])/);
|
||||
return match ? match[1] : cls.split("-")[0] + "-";
|
||||
}),
|
||||
),
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user