GithubBackup/Foxel
1
0
Fork 0
mirror of https://github.com/DrizzleTime/Foxel.git synced 2026-09-07 00:27:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
shiyu
2025-09-22 19:11:45 +08:00
parent 7d35c10d71
commit 81095f11df
1 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/apps/TextEditor/TextEditor.tsx
+27 -22
View File
@@ -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 { 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 type { AppComponentProps } from '../types';
import { vfsApi } from '../../api/vfs'; import { vfsApi } from '../../api/vfs';
import request from '../../api/client'; 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; const { Header, Content } = Layout;
export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, onRequestClose }) => { export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, onRequestClose }) => {
@@ -143,26 +144,30 @@ export const TextEditorApp: React.FC<AppComponentProps> = ({ filePath, entry, on
</div> </div>
) : ( ) : (
isMarkdown ? ( isMarkdown ? (
<MDEditor <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
value={content} <MarkdownEditor
onChange={(val) => setContent(val || '')} value={content}
height="100%" onChange={(val) => setContent(val || '')}
preview={truncated ? 'preview' : 'live'} height="100%"
/> preview={truncated ? 'preview' : 'live'}
/>
</Suspense>
) : ( ) : (
<Editor <Suspense fallback={<Spin style={{ marginTop: 24 }} />}>
value={content} <MonacoEditor
onChange={(val) => setContent(val || '')} value={content}
height="100%" onChange={(val) => setContent(val || '')}
language={monacoLanguage} height="100%"
options={{ language={monacoLanguage}
readOnly: truncated, options={{
minimap: { enabled: false }, readOnly: truncated,
scrollBeyondLastLine: false, minimap: { enabled: false },
wordWrap: 'on', scrollBeyondLastLine: false,
fontSize: 13, wordWrap: 'on',
}} fontSize: 13,
/> }}
/>
</Suspense>
) )
)} )}
</Content> </Content>