fix: use instance instead of hook

Author: astandrik

package-lock.json

@@ -28,7 +28,7 @@
     "@hookform/resolvers": "^3.10.0",
     "@reduxjs/toolkit": "^2.5.0",
     "@tanstack/react-table": "^8.20.6",
-    "@ydb-platform/monaco-ghost": "^0.4.0",
+    "@ydb-platform/monaco-ghost": "^0.6.1",
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",
     "colord": "^2.9.3",

package.json

@@ -1,5 +1,7 @@
+import React from 'react';
+
 import NiceModal from '@ebay/nice-modal-react';
-import {useMonacoGhost} from '@ydb-platform/monaco-ghost';
+import {createMonacoGhostInstance} from '@ydb-platform/monaco-ghost';
 import throttle from 'lodash/throttle';
 import type Monaco from 'monaco-editor';
 
@@ -23,9 +25,8 @@ import {useUpdateErrorsHighlighting} from '../../../../utils/monaco/highlightErr
 import {QUERY_ACTIONS} from '../../../../utils/query';
 import {SAVE_QUERY_DIALOG} from '../SaveQuery/SaveQuery';
 import i18n from '../i18n';
-import {useSavedQueries} from '../utils/useSavedQueries';
 
-import {useCodeAssist, useEditorOptions} from './helpers';
+import {useCodeAssistHelpers, useEditorOptions} from './helpers';
 import {getKeyBindings} from './keybindings';
 
 const CONTEXT_MENU_GROUP_ID = 'navigation';
@@ -44,10 +45,11 @@ export function YqlEditor({
     handleGetExplainQueryClick,
 }: YqlEditorProps) {
     const input = useTypedSelector(selectUserInput);
-    const isCodeAssistEnabled = useSetting(ENABLE_CODE_ASSISTANT);
     const dispatch = useTypedDispatch();
+    const monacoGhostInstanceRef = React.useRef<ReturnType<typeof createMonacoGhostInstance>>();
     const historyQueries = useTypedSelector(selectQueriesHistory);
-    const savedQueries = useSavedQueries();
+    const [isCodeAssistEnabled] = useSetting(ENABLE_CODE_ASSISTANT);
+
     const editorOptions = useEditorOptions();
     const updateErrorsHighlighting = useUpdateErrorsHighlighting();
 
@@ -72,20 +74,21 @@ export function YqlEditor({
         window.ydbEditor = undefined;
     };
 
-    const codeAssist = useCodeAssist();
-    const {registerMonacoGhost} = useMonacoGhost({
-        api: {
-            getCodeAssistSuggestions: codeAssist.getCodeAssistSuggestions,
-        },
-        eventHandlers: {
-            onCompletionAccept: codeAssist.onCompletionAccept,
-            onCompletionDecline: codeAssist.onCompletionDecline,
-            onCompletionIgnore: codeAssist.onCompletionIgnore,
-        },
-        config: {
-            language: YQL_LANGUAGE_ID,
-        },
-    });
+    const {monacoGhostConfig, prepareUserQueriesCache} = useCodeAssistHelpers();
+
+    React.useEffect(() => {
+        if (monacoGhostInstanceRef.current && window.api.codeAssist) {
+            if (isCodeAssistEnabled) {
+                monacoGhostInstanceRef.current.register(monacoGhostConfig);
+                prepareUserQueriesCache();
+            } else {
+                monacoGhostInstanceRef.current.unregister();
+            }
+        }
+        return () => {
+            monacoGhostInstanceRef.current?.unregister();
+        };
+    }, [isCodeAssistEnabled, monacoGhostConfig, prepareUserQueriesCache]);
 
     const editorDidMount = (editor: Monaco.editor.IStandaloneCodeEditor, monaco: typeof Monaco) => {
         window.ydbEditor = editor;
@@ -100,19 +103,7 @@ export function YqlEditor({
             }
         });
 
-        if (window.api.codeAssist && isCodeAssistEnabled) {
-            registerMonacoGhost(editor);
-            codeAssist.prepareUserQueriesCache([
-                ...historyQueries.map((query, index) => ({
-                    name: `query${index}.yql`,
-                    text: query.queryText,
-                })),
-                ...savedQueries.map((query) => ({
-                    name: query.name,
-                    text: query.body,
-                })),
-            ]);
-        }
+        monacoGhostInstanceRef.current = createMonacoGhostInstance(editor);
         initResizeHandler(editor);
         initUserPrompt(editor, getLastQueryText);
         editor.focus();

src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx

@@ -4,9 +4,12 @@ import type {AcceptEvent, DeclineEvent, IgnoreEvent, PromptFile} from '@ydb-plat
 import type Monaco from 'monaco-editor';
 
 import {codeAssistApi} from '../../../../store/reducers/codeAssist/codeAssist';
+import {selectQueriesHistory} from '../../../../store/reducers/query/query';
 import type {TelemetryOpenTabs} from '../../../../types/api/codeAssist';
 import {AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE} from '../../../../utils/constants';
-import {useSetting} from '../../../../utils/hooks';
+import {useSetting, useTypedSelector} from '../../../../utils/hooks';
+import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
+import {useSavedQueries} from '../utils/useSavedQueries';
 
 export type EditorOptions = Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions;
 
@@ -36,12 +39,14 @@ export function useEditorOptions() {
     return options;
 }
 
-export function useCodeAssist() {
+export function useCodeAssistHelpers() {
     const [sendCodeAssistPrompt] = codeAssistApi.useLazyGetCodeAssistSuggestionsQuery();
     const [acceptSuggestion] = codeAssistApi.useAcceptSuggestionMutation();
     const [discardSuggestion] = codeAssistApi.useDiscardSuggestionMutation();
     const [ignoreSuggestion] = codeAssistApi.useIgnoreSuggestionMutation();
     const [sendUserQueriesData] = codeAssistApi.useSendUserQueriesDataMutation();
+    const historyQueries = useTypedSelector(selectQueriesHistory);
+    const savedQueries = useSavedQueries();
 
     const getCodeAssistSuggestions = React.useCallback(
         async (promptFiles: PromptFile[]) => sendCodeAssistPrompt(promptFiles).unwrap(),
@@ -63,26 +68,49 @@ export function useCodeAssist() {
         [ignoreSuggestion],
     );
 
-    const prepareUserQueriesCache = React.useCallback(
-        async (queries: {text: string; name?: string}[]) => {
-            const preparedData: TelemetryOpenTabs = queries.map((query, index) => ({
-                FileName: query.name || `query${index}.yql`,
-                Text: query.text,
-            }));
-            try {
-                return sendUserQueriesData(preparedData).unwrap();
-            } catch {
-                return {items: []};
-            }
-        },
-        [sendUserQueriesData],
-    );
+    const userQueries = React.useMemo(() => {
+        return [
+            ...historyQueries.map((query, index) => ({
+                name: `query${index}.yql`,
+                text: query.queryText,
+            })),
+            ...savedQueries.map((query) => ({
+                name: query.name,
+                text: query.body,
+            })),
+        ];
+    }, [historyQueries, savedQueries]);
+
+    const prepareUserQueriesCache = React.useCallback(async () => {
+        const preparedData: TelemetryOpenTabs = userQueries.map((query, index) => ({
+            FileName: query.name || `query${index}.yql`,
+            Text: query.text,
+        }));
+        try {
+            return await sendUserQueriesData(preparedData).unwrap();
+        } catch {
+            return {items: []};
+        }
+    }, [sendUserQueriesData, userQueries]);
+
+    const monacoGhostConfig = React.useMemo(() => {
+        return {
+            api: {
+                getCodeAssistSuggestions,
+            },
+            eventHandlers: {
+                onCompletionAccept,
+                onCompletionDecline,
+                onCompletionIgnore,
+            },
+            config: {
+                language: YQL_LANGUAGE_ID,
+            },
+        };
+    }, [getCodeAssistSuggestions, onCompletionAccept, onCompletionDecline, onCompletionIgnore]);
 
     return {
-        getCodeAssistSuggestions,
-        onCompletionAccept,
-        onCompletionDecline,
-        onCompletionIgnore,
         prepareUserQueriesCache,
+        monacoGhostConfig,
     };
 }