[Bug][web] Fixed issues with flickering and repeated rendering when e…

…ditor size changes (#2596) * Fixed issues with flickering and repeated rendering when editor size changes * Spotless Apply --------- Co-authored-by: Zzm0809 <[email protected]>
DataLinkDC · Dec 4, 2023 · 17ed721 · 17ed721
1 parent 65343e6
commit 17ed721
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 19 deletions.
diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx
@@ -50,7 +50,6 @@ export type CodeEditFormProps = {
   editorDidMount?: (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
   enableSuggestions?: boolean;
   monacoRef?: any;
-  // editorRef?: any;
 };
 
 const CodeEdit = (props: CodeEditFormProps & connect) => {
@@ -80,12 +79,13 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
     suggestionsData, // suggestions data
     autoWrap = 'on', // auto wrap
     editorDidMount,
-    editorRef,
     monacoRef,
     tabs: { activeKey }
   } = props;
 
-  const editorInstance = useRef<editor.IStandaloneCodeEditor | undefined>(editorRef);
+  const editorInstance = useRef<editor.IStandaloneCodeEditor | undefined>(
+    monacoRef?.current?.editor
+  );
   const monacoInstance = useRef<Monaco | undefined>(monacoRef);
 
   /**
@@ -243,7 +243,9 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
           className={'editor-develop'}
           onMount={editorDidMountChange}
           onChange={onChange}
-          theme={convertCodeEditTheme(monacoInstance?.current?.editor)}
+          //zh-CN: 因为在 handleInitEditorAndLanguageOnBeforeMount 中已经注册了自定义语言，所以这里的作用仅仅是用来切换主题 不需要重新加载自定义语言的 token 样式 , 所以这里入参需要为空, 否则每次任意的 props 改变时(包括高度等),会出现编辑器闪烁的问题
+          //en-US: because the custom language has been registered in handleInitEditorAndLanguageOnBeforeMount, so the only purpose here is to switch the theme, and there is no need to reload the token style of the custom language, so the incoming parameters here need to be empty, otherwise any props change (including height, etc.) will cause the editor to flash
+          theme={convertCodeEditTheme()}
         />
       </div>
     </>
@@ -253,8 +255,4 @@ const CodeEdit = (props: CodeEditFormProps & connect) => {
 export default connect(({ Studio }: { Studio: StateType }) => ({
   suggestionsData: Studio.suggestions,
   tabs: Studio.tabs
-}))(
-  memo(CodeEdit, (prevProps, nextProps) => {
-    return prevProps.code === nextProps.code;
-  })
-);
+}))(memo(CodeEdit));
diff --git a/dinky-web/src/components/CustomEditor/CodeShow/index.tsx b/dinky-web/src/components/CustomEditor/CodeShow/index.tsx
@@ -249,7 +249,9 @@ const CodeShow = (props: CodeShowFormProps) => {
               ...options
             }}
             onMount={editorDidMount}
-            theme={convertCodeEditTheme(monacoInstance?.current?.editor)}
+            //zh-CN: 因为在 handleInitEditorAndLanguageOnBeforeMount 中已经注册了自定义语言，所以这里的作用仅仅是用来切换主题 不需要重新加载自定义语言的 token 样式 , 所以这里入参需要为空, 否则每次任意的 props 改变时(包括高度等),会出现编辑器闪烁的问题
+            //en-US: because the custom language has been registered in handleInitEditorAndLanguageOnBeforeMount, so the only purpose here is to switch the theme, and there is no need to reload the token style of the custom language, so the incoming parameters here need to be empty, otherwise any props change (including height, etc.) will cause the editor to flash
+            theme={convertCodeEditTheme()}
           />
         </Col>
         {showFloatButton && (
@@ -262,6 +264,4 @@ const CodeShow = (props: CodeShowFormProps) => {
   );
 };
 
-export default memo(CodeShow, (prevProps, nextProps) => {
-  return prevProps.code === nextProps.code;
-});
+export default memo(CodeShow);
diff --git a/dinky-web/src/components/CustomEditor/function.tsx b/dinky-web/src/components/CustomEditor/function.tsx
@@ -32,6 +32,8 @@ export function handleInitEditorAndLanguageOnBeforeMount(
   monaco: Monaco,
   registerCompletion: boolean = false
 ) {
+  // 此处调用需要在编辑器初始化时 进行渲染自定义的高亮规则(token) 否则会出现编辑器闪烁的问题 | This call needs to be rendered when the editor is initialized. Custom highlight rules (token) will cause the editor to flash
   convertCodeEditTheme(monaco.editor);
+  // 加载自定义语言 | load custom language
   LoadCustomEditorLanguage(monaco.languages, monaco.editor, registerCompletion);
 }
diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/index.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/StudioEditor/index.tsx
@@ -200,9 +200,4 @@ const StudioEditor: React.FC<EditorProps & connect> = (props) => {
 export default connect(({ Studio }: { Studio: StateType }) => ({
   tabs: Studio.tabs,
   footContainer: Studio.footContainer
-}))(
-  memo(
-    StudioEditor,
-    (prevProps, nextProps) => prevProps.tabsItem.params.taskId === nextProps.tabsItem.params.taskId
-  )
-);
+}))(memo(StudioEditor));