feat(TextEditor): lazy load Monaco and Markdown editors with suspense fallback

web/src/apps/TextEditor/TextEditor.tsx

@@ -1,11 +1,12 @@
-import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import React, { useState, useEffect, useCallback, useRef, useMemo, Suspense } from 'react';
 import { Layout, Spin, Button, Space, message } from 'antd';
-import MDEditor from '@uiw/react-md-editor';
-import Editor from '@monaco-editor/react';
 import type { AppComponentProps } from '../types';
 import { vfsApi } from '../../api/vfs';
 import request from '../../api/client';
 
+const MonacoEditor = React.lazy(() => import('@monaco-editor/react'));
+const MarkdownEditor = React.lazy(() => import('@uiw/react-md-editor'));
+
 const { Header, Content } = Layout;
 
 export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, onRequestClose }) => {
@@ -143,14 +144,17 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
           </div>
         ) : (
           isMarkdown ? (
-            <MDEditor
+            <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
+              <MarkdownEditor
                 value={content}
                 onChange={(val) => setContent(val || '')}
                 height="100%"
                 preview={truncated ? 'preview' : 'live'}
               />
+            </Suspense>
           ) : (
-            <Editor
+            <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
+              <MonacoEditor
                 value={content}
                 onChange={(val) => setContent(val || '')}
                 height="100%"
@@ -163,6 +167,7 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
                   fontSize: 13,
                 }}
               />
+            </Suspense>
           )
         )}
       </Content>