@postxl/ui-components 1.6.3 → 1.6.4

package/dist/index.js

@@ -4660,6 +4660,60 @@ function isValidJson(str) {
 		return false;
 	}
 }
+function JsonEditorWithLineNumbers({ value, onChange, onSave }) {
+	const textareaRef = React$31.useRef(null);
+	const gutterRef = React$31.useRef(null);
+	const lineCount = React$31.useMemo(() => {
+		if (!value) return 1;
+		return value.split("\n").length;
+	}, [value]);
+	const gutterMinWidth = React$31.useMemo(() => {
+		const digits = String(lineCount).length;
+		return `calc(${digits}ch + 16px)`;
+	}, [lineCount]);
+	const onScroll = React$31.useCallback(() => {
+		if (textareaRef.current && gutterRef.current) gutterRef.current.scrollTop = textareaRef.current.scrollTop;
+	}, []);
+	const onKeyDown = React$31.useCallback((e) => {
+		if (e.key === "Tab") {
+			e.preventDefault();
+			const textarea = e.currentTarget;
+			const start = textarea.selectionStart;
+			const end = textarea.selectionEnd;
+			const newValue = value.substring(0, start) + "  " + value.substring(end);
+			onChange(newValue);
+			requestAnimationFrame(() => {
+				textarea.selectionStart = textarea.selectionEnd = start + 2;
+			});
+		}
+		if (e.key === "s" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			onSave?.();
+		}
+	}, [
+		value,
+		onChange,
+		onSave
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex min-h-[200px] max-h-[50vh] rounded-md border border-input overflow-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: gutterRef,
+			"aria-hidden": "true",
+			style: { minWidth: gutterMinWidth },
+			className: "shrink-0 overflow-hidden bg-muted px-2 py-2 text-right font-mono text-sm leading-[1.43] text-muted-foreground select-none border-r border-input",
+			children: Array.from({ length: lineCount }, (_, i) => /* @__PURE__ */ jsx("div", { children: i + 1 }, i))
+		}), /* @__PURE__ */ jsx("textarea", {
+			ref: textareaRef,
+			value,
+			onChange: (e) => onChange(e.target.value),
+			onKeyDown,
+			onScroll,
+			className: "flex-1 resize-none bg-transparent p-2 font-mono text-sm leading-[1.43] outline-none",
+			spellCheck: false
+		})]
+	});
+}
 function JsonCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 	const rawValue = cell.getValue();
 	const [dialogOpen, setDialogOpen] = React$31.useState(false);
@@ -4778,11 +4832,10 @@ function JsonCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
 			className: "max-w-2xl max-h-[80vh]",
 			children: [
 				/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, { children: [headerLabel, " (JSON)"] }) }),
-				/* @__PURE__ */ jsx(Textarea, {
+				/* @__PURE__ */ jsx(JsonEditorWithLineNumbers, {
 					value: editValue,
-					onChange: (e) => setEditValue(e.target.value),
-					className: "min-h-[200px] max-h-[50vh] font-mono text-sm resize-y",
-					spellCheck: false
+					onChange: setEditValue,
+					onSave
 				}),
 				jsonParseError && /* @__PURE__ */ jsx("p", {
 					className: "text-sm text-destructive",