[Fix-2549] [studio] Fix editor automatically prompting for duplicate …

…loading (#2550) Co-authored-by: wenmo <[email protected]>
DataLinkDC · Nov 20, 2023 · 2ab7026 · 2ab7026
1 parent 6819fe4
commit 2ab7026
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -22,7 +22,7 @@ import { editor, languages, Position } from 'monaco-editor';
 
 import { buildAllSuggestionsToEditor } from '@/components/CustomEditor/CodeEdit/function';
 import EditorFloatBtn from '@/components/CustomEditor/EditorFloatBtn';
-import { LoadCustomEditorLanguage } from '@/components/CustomEditor/languages';
+import {LoadCustomEditorLanguage, LoadCustomEditorLanguageWithCompletion} from '@/components/CustomEditor/languages';
 import { StateType } from '@/pages/DataStudio/model';
 import { MonacoEditorOptions } from '@/types/Public/data';
 import { convertCodeEditTheme } from '@/utils/function';
@@ -97,12 +97,11 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
   const monacoHook = useMonaco();
 
   useEffect(() => {
-    convertCodeEditTheme(monacoHook?.editor);
+    convertCodeEditTheme(editorInstance.current);
     // 需要调用 手动注册下自定义语言
-    LoadCustomEditorLanguage(monacoHook);
+    LoadCustomEditorLanguageWithCompletion(monacoInstance.current);
   }, [monacoHook]);
 
-  // todo: 已知 bug , 切换 tab 时 , 会造成buildAllSuggestions 的重复调用 , 造成建议项重复 ,但不影响原有数据, 编辑器会将建议项自动缓存,不会进行去重
   /**
    * build all suggestions
    */
@@ -121,6 +120,7 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
   const memoizedBuildAllSuggestionsCallback = useMemoCallback(buildAllSuggestionsCallback);
 
   function reloadCompilation(monacoIns: Monaco) {
+    provider.dispose();
     provider = monacoIns.languages.registerCompletionItemProvider(language, {
       provideCompletionItems: (
         model: editor.ITextModel,
@@ -158,13 +158,12 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     editorInstance.current = editor;
     monacoInstance.current = monacoIns;
     if (enableSuggestions) {
-      reloadCompilation(monacoIns);
+      reloadCompilation(monacoInstance.current);
     }
     // register TypeScript language service
     monacoIns.languages.register({
       id: language || 'typescript'
     });
-
     editor.layout();
     editor.focus();
   };
@@ -215,7 +214,7 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
   const finalEditorOptions = {
     ...MonacoEditorOptions, // set default options
     tabCompletion: 'on', // tab 补全
-    cursorSmoothCaretAnimation: true, // 光标动画
+    cursorSmoothCaretAnimation: false, // 光标动画
     screenReaderAnnounceInlineSuggestion: true, // 屏幕阅读器提示
     formatOnPaste: true, // 粘贴时格式化
     mouseWheelZoom: true, // 鼠标滚轮缩放

diff --git a/dinky-web/src/components/CustomEditor/languages/flinksql/index.tsx b/dinky-web/src/components/CustomEditor/languages/flinksql/index.tsx
@@ -28,7 +28,7 @@ import {
 } from '@/components/CustomEditor/languages/flinksql/keyword';
 import { Monaco } from '@monaco-editor/react';
 
-export function FlinkSQLLanguage(monaco: Monaco | null) {
+export function FlinkSQLLanguage(monaco: Monaco | null, registerCompletion: boolean) {
   // Register a new language
   monaco?.languages.register({
     id: 'flinksql',
@@ -159,7 +159,7 @@ export function FlinkSQLLanguage(monaco: Monaco | null) {
     unicode: true
   });
 
-  monaco?.languages?.registerCompletionItemProvider('flinksql', {
+  registerCompletion && monaco?.languages?.registerCompletionItemProvider('flinksql', {
     provideCompletionItems: function (model, position) {
       const word = model.getWordUntilPosition(position);
       const range = {

diff --git a/dinky-web/src/components/CustomEditor/languages/index.tsx b/dinky-web/src/components/CustomEditor/languages/index.tsx
@@ -58,5 +58,11 @@ import { Monaco } from '@monaco-editor/react';
 export function LoadCustomEditorLanguage(monaco: Monaco | null) {
   // LoadLanguagesKeyWord(monaco);
   LogLanguage(monaco);
-  FlinkSQLLanguage(monaco);
+  FlinkSQLLanguage(monaco, false);
+}
+
+export function LoadCustomEditorLanguageWithCompletion(monaco: Monaco | null) {
+  // LoadLanguagesKeyWord(monaco);
+  LogLanguage(monaco);
+  FlinkSQLLanguage(monaco, true);
 }
diff --git a/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx b/dinky-web/src/pages/DataStudio/HeaderContainer/index.tsx
@@ -222,8 +222,6 @@ const HeaderContainer = (props: any) => {
     }
   };
 
-  console.log('currentData', props, currentData);
-
   const showExplain = async () => {
     modal.confirm({
       title: l('pages.datastudio.explain.validate.msg'),

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/index.tsx
@@ -42,11 +42,12 @@ import { format } from 'sql-formatter';
 
 export type EditorProps = {
   tabsItem: DataStudioTabsItemType;
+  monacoInstance: Monaco;
   height?: number;
 };
 
 const CodeEditor: React.FC<EditorProps & any> = (props) => {
-  const { tabsItem, dispatch, height } = props;
+  const { tabsItem, dispatch, height, monacoInstance, editorInstance } = props;
 
   useEffect(() => {
     dispatch({
@@ -60,8 +61,8 @@ const CodeEditor: React.FC<EditorProps & any> = (props) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [diff, setDiff] = useState<any>([]);
   const { fullscreen, setFullscreen } = useEditor();
-  const editorInstance = useRef<editor.IStandaloneCodeEditor | any>();
-  const monacoInstance = useRef<Monaco | any>();
+  // const editorInstance = useRef<editor.IStandaloneCodeEditor | any>(monacoInstance?.current?.editor);
+  // const monacoInstance = useRef<Monaco | any>();
 
   const currentData = tabsItem.params.taskData;
 

diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/index.tsx
@@ -239,6 +239,8 @@ const MiddleContainer = (props: any) => {
         return (
           <Editor
             tabsItem={item}
+            monacoInstance={item.monacoInstance}
+            editorInstance={item.editorInstance}
             height={
               activeKey === item.key
                 ? fullscreen

diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
@@ -117,7 +117,6 @@ const DataStudio = (props: any) => {
 
   useEffect(() => {
     loadData();
-    onResize();
   }, []);
 
   const access = useAccess();

diff --git a/dinky-web/src/pages/DataStudio/model.ts b/dinky-web/src/pages/DataStudio/model.ts
@@ -33,6 +33,7 @@ import { DefaultOptionType } from 'antd/es/select';
 import { editor } from 'monaco-editor';
 import React from 'react';
 import ICodeEditor = editor.ICodeEditor;
+import {Monaco} from "@monaco-editor/react";
 
 /**
  * 初始化布局宽高度
@@ -161,6 +162,8 @@ export interface TabsItemType {
   icon: any;
   closable: boolean;
   path: string[];
+  monacoInstance: Monaco;
+  editorInstance: editor.IStandaloneCodeEditor;
   console: ConsoleType;
   isModified: boolean;
 }