mirror of
https://github.com/supabase/supabase.git
synced 2026-05-22 17:00:43 +08:00
1f38fe2012
* Add two more sizes to the Panel component. * Add alias for the older openai-api library. The new one is added under the openai name. * Add API routes * Add components for the new AI RLS panel. * Bunch of changes to the AI Policy Editor. * Add a button for opening the new Policy Editor. * Add a feature flag for the new editor. * Add a confirmation modal when closing the panel. * Fix leftover data when closing the panel. * Make the copy button work. * Add the next/swc packages to package-lock.json. * Merge master * Scaffold debug sql in rls editor * Small improvements to policy chat * Hook up debug to ai assistant panel * Improve debug UX * Add debug request badge * Some styling fix * Small styling fix * Another small styling fix * Shift create new policy ai button + fix error stylign with code editor height * Add tooltips to apply changes and copy code from assistant message * Hide assistant button is not platform * Small lint * Add default error handlers to all AI RQ mutations * Small fix * Remove IS PLATFORM check for rls assistant * Add placeholder to RLS code editor * Fix diff + rls code editor * Add placeholder message after sending prompt * Small style * RLSCodeEditor hit tab if empty to populate placeholder text * Light mode nudeges * Update logic for when confirmation close modal should show * Set render overview ruler as false for rls diff editor * improve chat UX to make it smoother (thank you alaister for your help 🙏) * Dynamically do keepPreviousData * Gracefully handle errors for add prompt * Use animated ai icon while message is loading * using Sheet component * Address commernts * Bit more improvements --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
99 lines
2.4 KiB
TypeScript
99 lines
2.4 KiB
TypeScript
import Editor, { EditorProps, OnMount } from '@monaco-editor/react'
|
|
import { merge, noop } from 'lodash'
|
|
import { useRef } from 'react'
|
|
|
|
import { timeout } from 'lib/helpers'
|
|
import Connecting from '../Loading'
|
|
import { alignEditor } from './CodeEditor.utils'
|
|
import { cn } from 'ui'
|
|
|
|
interface CodeEditorProps {
|
|
id: string
|
|
language: 'pgsql' | 'json' | 'html'
|
|
autofocus?: boolean
|
|
defaultValue?: string
|
|
isReadOnly?: boolean
|
|
onInputChange?: (value?: string) => void
|
|
onInputRun?: (value: string) => void
|
|
hideLineNumbers?: boolean
|
|
className?: string
|
|
loading?: boolean
|
|
options?: EditorProps['options']
|
|
value?: string
|
|
}
|
|
|
|
const CodeEditor = ({
|
|
id,
|
|
language,
|
|
defaultValue,
|
|
autofocus = true,
|
|
isReadOnly = false,
|
|
hideLineNumbers = false,
|
|
onInputChange = noop,
|
|
onInputRun = noop,
|
|
className,
|
|
loading,
|
|
options,
|
|
value,
|
|
}: CodeEditorProps) => {
|
|
const editorRef = useRef<any>()
|
|
|
|
const onMount: OnMount = async (editor, monaco) => {
|
|
editorRef.current = editor
|
|
alignEditor(editor)
|
|
|
|
editor.addAction({
|
|
id: 'supabase',
|
|
label: 'Run Query',
|
|
keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
|
|
contextMenuGroupId: 'operation',
|
|
contextMenuOrder: 0,
|
|
run: async () => {
|
|
const selectedValue = (editorRef?.current as any)
|
|
.getModel()
|
|
.getValueInRange((editorRef?.current as any)?.getSelection())
|
|
onInputRun(selectedValue || (editorRef?.current as any)?.getValue())
|
|
},
|
|
})
|
|
|
|
await timeout(500)
|
|
if (autofocus) editor?.focus()
|
|
}
|
|
|
|
const optionsMerged = merge(
|
|
{
|
|
tabSize: 2,
|
|
fontSize: 13,
|
|
readOnly: isReadOnly,
|
|
minimap: { enabled: false },
|
|
wordWrap: 'on',
|
|
fixedOverflowWidgets: true,
|
|
contextmenu: true,
|
|
lineNumbers: hideLineNumbers ? 'off' : undefined,
|
|
glyphMargin: hideLineNumbers ? false : undefined,
|
|
lineNumbersMinChars: hideLineNumbers ? 0 : undefined,
|
|
folding: hideLineNumbers ? false : undefined,
|
|
},
|
|
options
|
|
)
|
|
|
|
merge({ cpp: '12' }, { java: '23' }, { python: '35' })
|
|
|
|
return (
|
|
<Editor
|
|
path={id}
|
|
theme="supabase"
|
|
className={cn(className, 'monaco-editor')}
|
|
value={value ?? undefined}
|
|
defaultLanguage={language}
|
|
defaultValue={defaultValue ?? undefined}
|
|
loading={loading || <Connecting />}
|
|
options={optionsMerged}
|
|
onMount={onMount}
|
|
onChange={onInputChange}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default CodeEditor
|