From 1af40002ffee6217979a779e37ad3c8563f510a1 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 18:07:30 +0000 Subject: [PATCH 1/9] latest --- .../client/src/components/SqlEditor/index.tsx | 129 ++++++++++-------- .../Presto/SqlQueryInput/index.tsx | 41 +++++- 2 files changed, 110 insertions(+), 60 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 90eaf72794..8f44f32c00 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -1,23 +1,34 @@ import { useCallback, useEffect, + useImperativeHandle, + useRef, useState, } from "react"; -import { +import EditorComponent, { Editor, EditorProps, useMonaco, } from "@monaco-editor/react"; import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; +import {theme} from "antd"; +import Color from "color"; import "./monaco-loader"; const MAX_VISIBLE_LINES: number = 5; -type SqlEditorProps = Omit; +export type SqlEditorRef = { + focus: () => void; +}; + +type SqlEditorProps = Omit & React.RefAttributes & { + disabled: boolean; + onDidMount?: () => void; +}; /** * Monaco editor with highlighting and autocomplete for SQL syntax. @@ -26,7 +37,44 @@ type SqlEditorProps = Omit; * @return */ const SqlEditor = (props: SqlEditorProps) => { + const { ref, disabled, onDidMount, ...editorProps } = props; const monacoEditor = useMonaco(); + const { token } = theme.useToken(); + const editorRef = useRef(null); + + useImperativeHandle(ref, () => ({ + focus: () => { + console.log("Focusing SQL editor2"); + console.log("Editor ref:", editorRef); + editorRef?.current?.focus() + } + }), []); + + const handleEditorDidMount = useCallback(( + editor: monaco.editor.IStandaloneCodeEditor, + ) => { + editorRef.current = editor; + onDidMount?.(); + console.log("Editor mounted:", editor); + }, [onDidMount]); + + console.log(token.colorBgContainerDisabled); + + // Define disabled theme when monaco is available + useEffect(() => { + if (monacoEditor) { + monacoEditor.editor.defineTheme('disabled-theme', { + base: 'vs', + inherit: true, + rules: [], + colors: { + 'editor.background': Color(token.colorBgContainerDisabled).hexa(), + 'editor.foreground': Color(token.colorTextDisabled).hexa(), + 'focusBorder': '#00000000', // transparent + } + }); + } + }, [monacoEditor, token]); useEffect(() => { if (null === monacoEditor) { @@ -84,61 +132,30 @@ const SqlEditor = (props: SqlEditorProps) => { }; }, [monacoEditor]); - const [isContentMultiline, setIsContentMultiline] = useState(false); - - const handleMonacoMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => { - editor.onDidContentSizeChange((ev) => { - if (false === ev.contentHeightChanged) { - return; - } - if (null === monacoEditor) { - throw new Error("Unexpected null Monaco instance"); - } - const domNode = editor.getDomNode(); - if (null === domNode) { - throw new Error("Unexpected null editor DOM node"); - } - const model = editor.getModel(); - if (null === model) { - throw new Error("Unexpected null editor model"); - } - const lineHeight = editor.getOption(monacoEditor.editor.EditorOption.lineHeight); - const contentHeight = editor.getContentHeight(); - const approxWrappedLines = Math.round(contentHeight / lineHeight); - setIsContentMultiline(1 < approxWrappedLines); - if (MAX_VISIBLE_LINES >= approxWrappedLines) { - domNode.style.height = `${contentHeight}px`; - } else { - domNode.style.height = `${lineHeight * MAX_VISIBLE_LINES}px`; - } - }); - }, [monacoEditor]); - return ( - } - options={{ - automaticLayout: true, - folding: isContentMultiline, - fontSize: 20, - lineHeight: 30, - lineNumbers: isContentMultiline ? - "on" : - "off", - lineNumbersMinChars: 2, - minimap: {enabled: false}, - overviewRulerBorder: false, - placeholder: "Enter your SQL query", - renderLineHighlightOnlyWhenFocus: true, - scrollBeyondLastLine: false, - wordWrap: "on", - }} - onMount={handleMonacoMount} - {...props}/> +
+ } + options={{ + automaticLayout: true, + fontSize: 20, + lineHeight: 30, + lineNumbers: "off", + minimap: {enabled: false}, + overviewRulerBorder: false, + placeholder: "Enter your SQL query", + renderLineHighlightOnlyWhenFocus: true, + scrollBeyondLastLine: false, + wordWrap: "on", + readOnly: disabled, + }} + onMount={handleEditorDidMount} + {...editorProps}/> +
); }; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index c831a6c53c..5df4d19bd7 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -1,24 +1,57 @@ -import {useCallback} from "react"; +import { + useCallback, + useEffect, + useRef, + useState, +} from "react"; -import SqlEditor from "../../../../../components/SqlEditor"; +import SqlEditor, {SqlEditorRef} from "../../../../../components/SqlEditor"; import useSearchStore from "../../../SearchState/index"; +import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; - /** * Renders SQL query input. * * @return */ const SqlQueryInput = () => { + const searchUiState = useSearchStore((state) => state.searchUiState); + const editorRef = useRef(null); + const [isEditorReady, setIsEditorReady] = useState(false); + const handleChange = useCallback((value: string | undefined) => { const {updateQueryString} = useSearchStore.getState(); updateQueryString(value || ""); }, []); + const handleEditorDidMount = useCallback(() => { + setIsEditorReady(true); + }, []); + + useEffect(() => { + if ( + isEditorReady && + (searchUiState === SEARCH_UI_STATE.DEFAULT || + searchUiState === SEARCH_UI_STATE.DONE || + searchUiState === SEARCH_UI_STATE.FAILED) + ) { + editorRef.current?.focus(); + } + }, [searchUiState, isEditorReady]); + return (
- +
); }; From 0dc4a24abbf4496d955ec176451dae0cf7fef713 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 18:13:52 +0000 Subject: [PATCH 2/9] latest --- components/webui/client/src/components/SqlEditor/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 8f44f32c00..d53b79df47 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -103,8 +103,8 @@ const SqlEditor = (props: SqlEditorProps) => { // When SQL keyword suggestions appear (e.g., after "SELECT a"), hitting Enter // accepts the first suggestion. To prevent accidental auto-completion // in multi-line queries and to allow users to dismiss suggestions more easily, - // we make the current input the first suggestion. - // Users can then use arrow keys to select a keyword if needed. + // we make the current input the first suggestion. Users can then use arrow keys + // to select a keyword if needed. const typedWord = model.getValueInRange(range); if (0 < typedWord.length) { suggestions.push({ @@ -123,7 +123,6 @@ const SqlEditor = (props: SqlEditorProps) => { }, triggerCharacters: [ " ", - "\n", ], }); From a711b052da67ab52d9d6ae3d115cba53593da02b Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 18:26:14 +0000 Subject: [PATCH 3/9] latest --- .../client/src/components/SqlEditor/index.tsx | 74 +++++++++++-------- .../Presto/SqlQueryInput/index.tsx | 9 ++- 2 files changed, 47 insertions(+), 36 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index d53b79df47..cd12b730a9 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -3,30 +3,29 @@ import { useEffect, useImperativeHandle, useRef, - useState, } from "react"; -import EditorComponent, { +import { Editor, EditorProps, useMonaco, } from "@monaco-editor/react"; +import {theme} from "antd"; +import color from "color"; import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; -import {theme} from "antd"; -import Color from "color"; import "./monaco-loader"; -const MAX_VISIBLE_LINES: number = 5; - -export type SqlEditorRef = { +type SqlEditorRef = { focus: () => void; }; type SqlEditorProps = Omit & React.RefAttributes & { disabled: boolean; + + /** Callback when the editor is mounted and ref is ready to use. */ onDidMount?: () => void; }; @@ -37,17 +36,15 @@ type SqlEditorProps = Omit & React.RefAttributes { - const { ref, disabled, onDidMount, ...editorProps } = props; - const monacoEditor = useMonaco(); - const { token } = theme.useToken(); + const {ref, disabled, onDidMount, ...editorProps} = props; const editorRef = useRef(null); + const monacoEditor = useMonaco(); + const {token} = theme.useToken(); useImperativeHandle(ref, () => ({ focus: () => { - console.log("Focusing SQL editor2"); - console.log("Editor ref:", editorRef); - editorRef?.current?.focus() - } + editorRef.current?.focus(); + }, }), []); const handleEditorDidMount = useCallback(( @@ -55,26 +52,26 @@ const SqlEditor = (props: SqlEditorProps) => { ) => { editorRef.current = editor; onDidMount?.(); - console.log("Editor mounted:", editor); }, [onDidMount]); - console.log(token.colorBgContainerDisabled); - - // Define disabled theme when monaco is available + // Define disabled theme for monaco editor useEffect(() => { if (monacoEditor) { - monacoEditor.editor.defineTheme('disabled-theme', { - base: 'vs', + monacoEditor.editor.defineTheme("disabled-theme", { + base: "vs", inherit: true, rules: [], colors: { - 'editor.background': Color(token.colorBgContainerDisabled).hexa(), - 'editor.foreground': Color(token.colorTextDisabled).hexa(), - 'focusBorder': '#00000000', // transparent - } + "editor.background": color(token.colorBgContainerDisabled).hexa(), + "editor.foreground": color(token.colorTextDisabled).hexa(), + + // transparent + "focusBorder": "#00000000", + }, }); } - }, [monacoEditor, token]); + }, [monacoEditor, + token]); useEffect(() => { if (null === monacoEditor) { @@ -132,13 +129,23 @@ const SqlEditor = (props: SqlEditorProps) => { }, [monacoEditor]); return ( -
- + } + loading={ +
+ } options={{ automaticLayout: true, fontSize: 20, @@ -150,8 +157,10 @@ const SqlEditor = (props: SqlEditorProps) => { renderLineHighlightOnlyWhenFocus: true, scrollBeyondLastLine: false, wordWrap: "on", - readOnly: disabled, }} + theme={disabled ? + "disabled-theme" : + "light"} onMount={handleEditorDidMount} {...editorProps}/>
@@ -159,3 +168,4 @@ const SqlEditor = (props: SqlEditorProps) => { }; export default SqlEditor; +export type {SqlEditorRef}; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 5df4d19bd7..696a8b17db 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -10,6 +10,7 @@ import useSearchStore from "../../../SearchState/index"; import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; + /** * Renders SQL query input. * @@ -38,20 +39,20 @@ const SqlQueryInput = () => { ) { editorRef.current?.focus(); } - }, [searchUiState, isEditorReady]); + }, [searchUiState, + isEditorReady]); return (
+ onChange={handleChange} + onDidMount={handleEditorDidMount}/>
); }; From 7394a9ddaf96cca9b0a9dff02529d6c99a5f8bee Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 18:31:41 +0000 Subject: [PATCH 4/9] latest --- .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 696a8b17db..3abb05f2e8 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -9,6 +9,7 @@ import SqlEditor, {SqlEditorRef} from "../../../../../components/SqlEditor"; import useSearchStore from "../../../SearchState/index"; import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; +import { Nullable } from "src/typings/common"; /** @@ -18,7 +19,7 @@ import styles from "./index.module.css"; */ const SqlQueryInput = () => { const searchUiState = useSearchStore((state) => state.searchUiState); - const editorRef = useRef(null); + const editorRef = useRef>(null); const [isEditorReady, setIsEditorReady] = useState(false); const handleChange = useCallback((value: string | undefined) => { From c0241b1f5d9fd6f5fce48e66a1cce5b63743da76 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 20:41:27 +0000 Subject: [PATCH 5/9] latest --- .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 3abb05f2e8..4f6db03e04 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -5,11 +5,12 @@ import { useState, } from "react"; +import {Nullable} from "src/typings/common"; + import SqlEditor, {SqlEditorRef} from "../../../../../components/SqlEditor"; import useSearchStore from "../../../SearchState/index"; import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; -import { Nullable } from "src/typings/common"; /** From 58b160d0985dd89711a3f78921f46c79ee897116 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 20:48:25 +0000 Subject: [PATCH 6/9] latest --- components/webui/client/package-lock.json | 56 +++++++++++++++++++++++ components/webui/client/package.json | 1 + 2 files changed, 57 insertions(+) diff --git a/components/webui/client/package-lock.json b/components/webui/client/package-lock.json index 7db9f5c893..e14948ce72 100644 --- a/components/webui/client/package-lock.json +++ b/components/webui/client/package-lock.json @@ -22,6 +22,7 @@ "chart.js": "^4.4.9", "chartjs-adapter-dayjs-4": "^1.0.4", "chartjs-plugin-zoom": "^2.2.0", + "color": "^5.0.0", "dayjs": "^1.11.13", "monaco-editor": "^0.52.2", "react": "^19.0.0", @@ -3606,6 +3607,19 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/color/-/color-5.0.0.tgz", + "integrity": "sha512-16BlyiuyLq3MLxpRWyOTiWsO3ii/eLQLJUQXBSNcxMBBSnyt1ee9YUdaozQp03ifwm5woztEZGDbk9RGVuCsdw==", + "license": "MIT", + "dependencies": { + "color-convert": "^3.0.1", + "color-string": "^2.0.0" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -3628,6 +3642,48 @@ "license": "MIT", "peer": true }, + "node_modules/color-string": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-2.0.1.tgz", + "integrity": "sha512-5z9FbYTZPAo8iKsNEqRNv+OlpBbDcoE+SY9GjLfDUHEfcNNV7tS9eSAlFHEaub/r5tBL9LtskAeq1l9SaoZ5tQ==", + "license": "MIT", + "dependencies": { + "color-name": "^2.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/color-string/node_modules/color-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz", + "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==", + "license": "MIT", + "engines": { + "node": ">=12.20" + } + }, + "node_modules/color/node_modules/color-convert": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-3.1.0.tgz", + "integrity": "sha512-TVoqAq8ZDIpK5lsQY874DDnu65CSsc9vzq0wLpNQ6UMBq81GSZocVazPiBbYGzngzBOIRahpkTzCLVe2at4MfA==", + "license": "MIT", + "dependencies": { + "color-name": "^2.0.0" + }, + "engines": { + "node": ">=14.6" + } + }, + "node_modules/color/node_modules/color-name": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz", + "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==", + "license": "MIT", + "engines": { + "node": ">=12.20" + } + }, "node_modules/combined-stream": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", diff --git a/components/webui/client/package.json b/components/webui/client/package.json index 2d25ed742e..8f62a9aca4 100644 --- a/components/webui/client/package.json +++ b/components/webui/client/package.json @@ -26,6 +26,7 @@ "chart.js": "^4.4.9", "chartjs-adapter-dayjs-4": "^1.0.4", "chartjs-plugin-zoom": "^2.2.0", + "color": "^5.0.0", "dayjs": "^1.11.13", "monaco-editor": "^0.52.2", "react": "^19.0.0", From 205f29f29436c659dd44c26fb9dbb395d4f5a3e3 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 20 Aug 2025 21:12:15 +0000 Subject: [PATCH 7/9] latest --- .../client/src/components/SqlEditor/index.tsx | 41 ++++++++++--------- .../Presto/SqlQueryInput/index.tsx | 10 +++-- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index cd12b730a9..60cf433325 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -26,7 +26,7 @@ type SqlEditorProps = Omit & React.RefAttributes void; + onEditorReady?: () => void; }; /** @@ -36,7 +36,7 @@ type SqlEditorProps = Omit & React.RefAttributes { - const {ref, disabled, onDidMount, ...editorProps} = props; + const {ref, disabled, onEditorReady, ...editorProps} = props; const editorRef = useRef(null); const monacoEditor = useMonaco(); const {token} = theme.useToken(); @@ -51,27 +51,30 @@ const SqlEditor = (props: SqlEditorProps) => { editor: monaco.editor.IStandaloneCodeEditor, ) => { editorRef.current = editor; - onDidMount?.(); - }, [onDidMount]); + onEditorReady?.(); + }, [onEditorReady]); // Define disabled theme for monaco editor useEffect(() => { - if (monacoEditor) { - monacoEditor.editor.defineTheme("disabled-theme", { - base: "vs", - inherit: true, - rules: [], - colors: { - "editor.background": color(token.colorBgContainerDisabled).hexa(), - "editor.foreground": color(token.colorTextDisabled).hexa(), - - // transparent - "focusBorder": "#00000000", - }, - }); + if (null === monacoEditor) { + return; } - }, [monacoEditor, - token]); + monacoEditor.editor.defineTheme("disabled-theme", { + base: "vs", + inherit: true, + rules: [], + colors: { + "editor.background": color(token.colorBgContainerDisabled).hexa(), + "editor.foreground": color(token.colorTextDisabled).hexa(), + + // transparent + "focusBorder": "#00000000", + }, + }); + }, [ + monacoEditor, + token + ]); useEffect(() => { if (null === monacoEditor) { diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 4f6db03e04..4c7611292f 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -28,7 +28,7 @@ const SqlQueryInput = () => { updateQueryString(value || ""); }, []); - const handleEditorDidMount = useCallback(() => { + const handleEditorReady = useCallback(() => { setIsEditorReady(true); }, []); @@ -41,8 +41,10 @@ const SqlQueryInput = () => { ) { editorRef.current?.focus(); } - }, [searchUiState, - isEditorReady]); + }, [ + searchUiState, + isEditorReady + ]); return (
@@ -54,7 +56,7 @@ const SqlQueryInput = () => { searchUiState === SEARCH_UI_STATE.QUERYING } onChange={handleChange} - onDidMount={handleEditorDidMount}/> + onEditorReady={handleEditorReady}/>
); }; From 066e38948784490b69c5ab28cde8f63fce0e9b82 Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 25 Aug 2025 21:17:17 +0000 Subject: [PATCH 8/9] latest --- .../client/src/components/SqlEditor/index.tsx | 62 +------------------ .../Presto/SqlQueryInput/index.tsx | 2 +- 2 files changed, 4 insertions(+), 60 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 60cf433325..d452d2eb73 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -12,7 +12,6 @@ import { } from "@monaco-editor/react"; import {theme} from "antd"; import color from "color"; -import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import "./monaco-loader"; @@ -30,7 +29,7 @@ type SqlEditorProps = Omit & React.RefAttributes { token ]); - useEffect(() => { - if (null === monacoEditor) { - return () => { - }; - } - - // Adds autocomplete suggestions for SQL keywords on editor load - const provider = monacoEditor.languages.registerCompletionItemProvider("sql", { - provideCompletionItems: (model, position) => { - const word = model.getWordUntilPosition(position); - const range = { - startLineNumber: position.lineNumber, - endLineNumber: position.lineNumber, - startColumn: word.startColumn, - endColumn: word.endColumn, - }; - const suggestions = sqlLanguage.keywords.map((keyword: string) => ({ - detail: "Presto SQL (CLP)", - insertText: `${keyword} `, - kind: monacoEditor.languages.CompletionItemKind.Keyword, - label: keyword, - range: range, - })); - - // When SQL keyword suggestions appear (e.g., after "SELECT a"), hitting Enter - // accepts the first suggestion. To prevent accidental auto-completion - // in multi-line queries and to allow users to dismiss suggestions more easily, - // we make the current input the first suggestion. Users can then use arrow keys - // to select a keyword if needed. - const typedWord = model.getValueInRange(range); - if (0 < typedWord.length) { - suggestions.push({ - detail: "Current", - insertText: `${typedWord}\n`, - kind: monaco.languages.CompletionItemKind.Text, - label: typedWord, - range: range, - }); - } - - return { - suggestions: suggestions, - incomplete: true, - }; - }, - triggerCharacters: [ - " ", - ], - }); - - return () => { - provider.dispose(); - }; - }, [monacoEditor]); - return (
{ } options={{ automaticLayout: true, - fontSize: 20, - lineHeight: 30, + folding: false, + fontSize: 16, lineNumbers: "off", minimap: {enabled: false}, overviewRulerBorder: false, diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 4c7611292f..7b4eb3ed6a 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -49,7 +49,7 @@ const SqlQueryInput = () => { return (
Date: Mon, 25 Aug 2025 21:23:20 +0000 Subject: [PATCH 9/9] latest --- .../webui/client/src/components/SqlEditor/index.tsx | 2 +- .../client/src/components/SqlEditor/monaco-loader.ts | 7 ------- .../client/src/components/SqlEditor/monaco-sql.d.ts | 10 ---------- .../SearchControls/Presto/SqlQueryInput/index.tsx | 2 +- 4 files changed, 2 insertions(+), 19 deletions(-) delete mode 100644 components/webui/client/src/components/SqlEditor/monaco-sql.d.ts diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index d452d2eb73..b1e687d4a9 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -72,7 +72,7 @@ const SqlEditor = (props: SqlEditorProps) => { }); }, [ monacoEditor, - token + token, ]); return ( diff --git a/components/webui/client/src/components/SqlEditor/monaco-loader.ts b/components/webui/client/src/components/SqlEditor/monaco-loader.ts index 8a7c7af83f..05c58be25e 100644 --- a/components/webui/client/src/components/SqlEditor/monaco-loader.ts +++ b/components/webui/client/src/components/SqlEditor/monaco-loader.ts @@ -2,14 +2,7 @@ import {loader} from "@monaco-editor/react"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; - import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js"; -import "monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard.js"; -import "monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js"; -import "monaco-editor/esm/vs/editor/contrib/find/browser/findController.js"; -import "monaco-editor/esm/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.js"; -import "monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js"; -import "monaco-editor/esm/vs/editor/contrib/placeholderText/browser/placeholderText.contribution.js"; /* eslint-enable import/default, @stylistic/max-len */ diff --git a/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts b/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts deleted file mode 100644 index a1a88ea6f2..0000000000 --- a/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -declare module "monaco-editor/esm/vs/basic-languages/sql/sql.js" { - import {languages} from "monaco-editor/esm/vs/editor/editor.api"; - - - interface SqlLanguageDefinition extends languages.IMonarchLanguage { - keywords: string[]; - } - - export const language: SqlLanguageDefinition; -} diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx index 7b4eb3ed6a..8fe9412578 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx @@ -43,7 +43,7 @@ const SqlQueryInput = () => { } }, [ searchUiState, - isEditorReady + isEditorReady, ]); return (