@catalystsoftware/ui 1.0.15 → 1.0.16

package/dist/components/catalyst-ui/tools/monaco.tsx

@@ -1,5 +1,5 @@
 import { ClientOnly, } from "~/utils/client-only";
-import React, {  useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { X, } from "lucide-react";
 import { LoadingPage, SpinnerV4, DEFAULT_PREF, loadEditorSettings, autoSaveSettings, handleEditorDidMount as baseHandleEditorDidMount, renderEditor as baseRenderEditor, useToasted, MonacoToolbar, } from "~/components/catalyst-ui";
 import { useDS, DSTrigger } from "~/components/catalyst-ui";
@@ -18,7 +18,7 @@ export function MonacoEditor({ setCode, code, }) {
 	const [theme, setTheme] = useState(DEFAULT_PREF.theme);
 	const [isFullscreen, setIsFullscreen] = useState(DEFAULT_PREF.isFullscreen);
 	const [es, setEs] = useState(() => loadEditorSettings());
-	const [isSaving, setIsSaving] = useState(false); 
+	const [isSaving, setIsSaving] = useState(false);
 	const [lastSaved, setLastSaved] = useState(null);
 	const [isClient, setIsClient] = useState(false);
 	const [editorRenameTab, setEditorRenameTab] = useState(false);
@@ -330,76 +330,75 @@ export function MonacoEditor({ setCode, code, }) {
 	};
 
 	const TabComponent = ({ tab, isActive, onClose, onSelect }) => {
-	const [isEditing, setIsEditing] = useState(false);
-	const [editName, setEditName] = useState(tab.name);
-	const inputRef = useRef<HTMLInputElement>(null);
-
-	useEffect(() => {
-		if (editorRenameTab && isActive) {
-			setIsEditing(true);
-			setEditName(tab.name);
-		}
-	}, [editorRenameTab, isActive]);
-
-	useEffect(() => {
-		if (isEditing && inputRef.current) {
-			inputRef.current.focus();
-			inputRef.current.select();
-		}
-	}, [isEditing]);
+		const [isEditing, setIsEditing] = useState(false);
+		const [editName, setEditName] = useState(tab.name);
+		const inputRef = useRef<HTMLInputElement>(null);
+
+		useEffect(() => {
+			if (editorRenameTab && isActive) {
+				setIsEditing(true);
+				setEditName(tab.name);
+			}
+		}, [editorRenameTab, isActive]);
 
-	const handleRename = () => {
-		if (editName.trim() && editName !== tab.name) {
-			renameTab(tab.id, editName.trim());
-		}
-		setIsEditing(false);
-		setEditorRenameTab(false);
-	};
+		useEffect(() => {
+			if (isEditing && inputRef.current) {
+				inputRef.current.focus();
+				inputRef.current.select();
+			}
+		}, [isEditing]);
 
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			handleRename();
-		} else if (e.key === 'Escape') {
-			setEditName(tab.name);
+		const handleRename = () => {
+			if (editName.trim() && editName !== tab.name) {
+				renameTab(tab.id, editName.trim());
+			}
 			setIsEditing(false);
 			setEditorRenameTab(false);
-		}
-	};
+		};
 
-	return (
-		<div
-			className={`flex items-center px-3 py-2 border-r border-border cursor-pointer transition-colors ${
-				isActive ? "bg-background text-foreground border-b-2 border-primary" : "bg-muted text-muted-foreground hover:bg-background hover:text-foreground"
-			}`}
-			onClick={() => !isEditing && onSelect(tab.id)}
-		>
-			{isEditing ? (
-				<input
-					ref={inputRef}
-					type="text"
-					value={editName}
-					onChange={(e) => setEditName(e.target.value)}
-					onBlur={handleRename}
-					onKeyDown={handleKeyDown}
-					onClick={(e) => e.stopPropagation()}
-					className="text-sm bg-transparent border-none outline-none focus:ring-0 w-32 px-0"
-				/>
-			) : (
-				<span className="text-sm truncate max-w-32">{tab.name}</span>
-			)}
-			{tab.isDirty && <span className="ml-1 text-destructive">●</span>}
-			<button
-				onClick={(e) => {
-					e.stopPropagation();
-					onClose(tab.id);
-				}}
-				className="ml-2 p-1 rounded hover:bg-destructive/20 hover:text-destructive"
+		const handleKeyDown = (e: React.KeyboardEvent) => {
+			if (e.key === 'Enter') {
+				handleRename();
+			} else if (e.key === 'Escape') {
+				setEditName(tab.name);
+				setIsEditing(false);
+				setEditorRenameTab(false);
+			}
+		};
+
+		return (
+			<div
+				className={`flex items-center px-3 py-2 border-r border-border cursor-pointer transition-colors ${isActive ? "bg-background text-foreground border-b-2 border-primary" : "bg-muted text-muted-foreground hover:bg-background hover:text-foreground"
+					}`}
+				onClick={() => !isEditing && onSelect(tab.id)}
 			>
-				<X className="h-3 w-3" />
-			</button>
-		</div>
-	);
-};
+				{isEditing ? (
+					<input
+						ref={inputRef}
+						type="text"
+						value={editName}
+						onChange={(e) => setEditName(e.target.value)}
+						onBlur={handleRename}
+						onKeyDown={handleKeyDown}
+						onClick={(e) => e.stopPropagation()}
+						className="text-sm bg-transparent border-none outline-none focus:ring-0 w-32 px-0"
+					/>
+				) : (
+					<span className="text-sm truncate max-w-32">{tab.name}</span>
+				)}
+				{tab.isDirty && <span className="ml-1 text-destructive">●</span>}
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						onClose(tab.id);
+					}}
+					className="ml-2 p-1 rounded hover:bg-destructive/20 hover:text-destructive"
+				>
+					<X className="h-3 w-3" />
+				</button>
+			</div>
+		);
+	};
 	const onOpen = async (e: React.ChangeEvent<HTMLInputElement>) => {
 		try {
 			const file = e.target.files?.[0];
@@ -486,6 +485,7 @@ export function MonacoEditor({ setCode, code, }) {
 					</div>
 				)}
 			</div>
+ 
 		</div>
 	);
 }