fix: fix the editor issue where a cursor jumps to the top every time a code is updated (#1196)

fix the issue where the cursor on the editor jump as code is rewritten

Author: sehilyi

editor/EditorPanel.tsx

@@ -136,40 +136,36 @@ function EditorPanel(props: {
         if (props.onChange) props.onChange(newCode, language);
     }
 
-    const MonacoEditorWithResizer = () => {
-        const { width, height, ref } = useResizeDetector<HTMLElement>();
-        return (
-            <div ref={ref} style={{ width: '100%', height: '100%' }}>
-                <MonacoEditor
-                    // Refer to https://github.com/react-monaco-editor/react-monaco-editor
-                    width={width}
-                    height={height}
-                    language={language}
-                    value={code}
-                    theme={'gosling'}
-                    options={{
-                        autoClosingBrackets: 'beforeWhitespace',
-                        autoClosingQuotes: 'beforeWhitespace',
-                        cursorBlinking: 'smooth',
-                        folding: true,
-                        lineNumbersMinChars: 4,
-                        minimap: { enabled: true },
-                        scrollBeyondLastLine: false,
-                        wordWrap: 'on',
-                        lineNumbers: 'on',
-                        renderLineHighlight: 'line',
-                        renderIndentGuides: true,
-                        fontSize: 14,
-                        readOnly
-                    }}
-                    onChange={onChangeHandle}
-                    editorDidMount={editorDidMount}
-                    editorWillMount={editorWillMount}
-                />
-            </div>
-        );
-    };
-
-    return <MonacoEditorWithResizer />;
+    const { width, height, ref } = useResizeDetector<HTMLElement>();
+    return (
+        <div ref={ref} style={{ width: '100%', height: '100%' }}>
+            <MonacoEditor
+                // Refer to https://github.com/react-monaco-editor/react-monaco-editor
+                width={width}
+                height={height}
+                language={language}
+                value={code}
+                theme={'gosling'}
+                options={{
+                    autoClosingBrackets: 'beforeWhitespace',
+                    autoClosingQuotes: 'beforeWhitespace',
+                    cursorBlinking: 'smooth',
+                    folding: true,
+                    lineNumbersMinChars: 4,
+                    minimap: { enabled: true },
+                    scrollBeyondLastLine: false,
+                    wordWrap: 'on',
+                    lineNumbers: 'on',
+                    renderLineHighlight: 'line',
+                    renderIndentGuides: true,
+                    fontSize: 14,
+                    readOnly
+                }}
+                onChange={onChangeHandle}
+                editorDidMount={editorDidMount}
+                editorWillMount={editorWillMount}
+            />
+        </div>
+    );
 }
 export default EditorPanel;