@@ -15,73 +15,79 @@ interface QueryEditorProps {
1515 currentQuery : { id ?: string ; name : string ; sql : string } ;
1616}
1717
18- const QueryEditor : React . FC < QueryEditorProps > = React . memo ( ( {
19- sql,
20- onSqlChange,
21- onExecute,
22- onSave,
23- editorRef,
24- latestQueryRef,
25- currentQuery,
26- } ) => {
18+ const QueryEditor : React . FC < QueryEditorProps > = React . memo (
19+ ( {
20+ sql,
21+ onSqlChange,
22+ onExecute,
23+ onSave,
24+ editorRef,
25+ latestQueryRef,
26+ currentQuery,
27+ } ) => {
28+ const handleEditorMount = useCallback (
29+ async (
30+ editor : MonacoEditor . IStandaloneCodeEditor ,
31+ monacoInstance : typeof monaco ,
32+ ) => {
33+ editorRef . current = editor ;
34+ const model = editor . getModel ( ) ;
35+ if ( ! model ) return ;
2736
28- const handleEditorMount = useCallback (
29- async ( editor : MonacoEditor . IStandaloneCodeEditor , monacoInstance : typeof monaco ) => {
30- editorRef . current = editor ;
31- const model = editor . getModel ( ) ;
32- if ( ! model ) return ;
33-
34- validateSqlQuery ( sql , model , monacoInstance ) ;
35-
36- editor . onDidChangeModelContent ( ( ) => {
3737 validateSqlQuery ( sql , model , monacoInstance ) ;
38- } ) ;
3938
40- editor . addCommand (
41- monacoInstance . KeyMod . CtrlCmd | monacoInstance . KeyCode . Enter ,
42- ( ) => {
43- onExecute ( latestQueryRef . current . sql ) ;
44- }
45- ) ;
39+ editor . onDidChangeModelContent ( ( ) => {
40+ validateSqlQuery ( sql , model , monacoInstance ) ;
41+ } ) ;
4642
47- editor . addCommand (
48- monacoInstance . KeyMod . CtrlCmd | monacoInstance . KeyCode . KeyS ,
49- ( ) => {
50- onSave ( latestQueryRef . current ) ;
51- }
52- ) ;
53- } ,
54- [ sql , editorRef , latestQueryRef , onExecute , onSave ]
55- ) ;
43+ editor . addCommand (
44+ monacoInstance . KeyMod . CtrlCmd | monacoInstance . KeyCode . Enter ,
45+ ( ) => {
46+ onExecute ( latestQueryRef . current . sql ) ;
47+ } ,
48+ ) ;
5649
57- const handleEditorChange = useCallback (
58- ( value : string | undefined ) => {
59- const newValue = value ?? "" ;
60- onSqlChange ( newValue ) ;
50+ editor . addCommand (
51+ monacoInstance . KeyMod . CtrlCmd | monacoInstance . KeyCode . KeyS ,
52+ ( ) => {
53+ onSave ( latestQueryRef . current ) ;
54+ } ,
55+ ) ;
56+ } ,
57+ [ sql , editorRef , latestQueryRef , onExecute , onSave ] ,
58+ ) ;
6159
62- if ( value && editorRef . current ) {
63- const model = editorRef . current . getModel ( ) ;
64- if ( model && typeof window !== 'undefined' && ( window as any ) . monaco ) {
65- validateSqlQuery ( value , model , ( window as any ) . monaco ) ;
60+ const handleEditorChange = useCallback (
61+ ( value : string | undefined ) => {
62+ const newValue = value ?? "" ;
63+ onSqlChange ( newValue ) ;
64+
65+ if ( value && editorRef . current ) {
66+ const model = editorRef . current . getModel ( ) ;
67+ if (
68+ model &&
69+ typeof window !== "undefined" &&
70+ ( window as any ) . monaco
71+ ) {
72+ validateSqlQuery ( value , model , ( window as any ) . monaco ) ;
73+ }
6674 }
67- }
68- } ,
69- [ onSqlChange , editorRef ]
70- ) ;
75+ } ,
76+ [ onSqlChange , editorRef ] ,
77+ ) ;
7178
72- return (
73- < Editor
74- defaultLanguage = "sql"
75- defaultValue = { sql }
76- options = { MONACO_EDITOR_OPTIONS }
77- onMount = { handleEditorMount }
78- onChange = { handleEditorChange }
79- />
80- ) ;
81- } ) ;
79+ return (
80+ < Editor
81+ defaultLanguage = "sql"
82+ defaultValue = { sql }
83+ options = { MONACO_EDITOR_OPTIONS }
84+ onMount = { handleEditorMount }
85+ onChange = { handleEditorChange }
86+ />
87+ ) ;
88+ } ,
89+ ) ;
8290
8391QueryEditor . displayName = "QueryEditor" ;
8492
8593export default QueryEditor ;
86-
87-
0 commit comments