UserSqlEditor.tsx 825 B

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