UserSqlEditor.tsx28 lines · main

1	import { rawSql, type SafeSqlFragment } from '@supabase/pg-meta'
2	import type { ComponentProps } from 'react'
3
4	import { CodeEditor } from '@/components/ui/CodeEditor/CodeEditor'
5
6	interface UserSqlEditorProps {
7	id: string
8	value: SafeSqlFragment
9	placeholder?: SafeSqlFragment
10	actions?: ComponentProps<typeof CodeEditor>['actions']
11	onChange: (sql: SafeSqlFragment) => void
12	}
13
14	/**
15	* Wraps CodeEditor for user-authored SQL. The rawSql boundary lives here — any
16	* text the user types is immediately promoted to SafeSqlFragment so callers
17	* never handle plain strings.
18	*/
19	export const UserSqlEditor = ({ value, onChange, ...props }: UserSqlEditorProps) => {
20	return (
21	<CodeEditor
22	language="pgsql"
23	value={value}
24	onInputChange={(val) => onChange(rawSql(val ?? ''))}
25	{...props}
26	/>
27	)
28	}