diff --git a/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx b/dinky-web/src/components/CustomEditor/CodeEdit/index.tsx index 359449f4b3..d841eb45b9 100644 --- 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(editorRef); + const editorInstance = useRef( + monacoRef?.current?.editor + ); const monacoInstance = useRef(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()} /> @@ -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 index 3f05c3fa3a..bd5b56e5dd 100644 --- 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()} /> {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 index f44115148b..0608dba2e2 100644 --- 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 index 67257a29a8..76a24c0c9a 100644 --- 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 = (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));