@spacecorexdev/core 0.0.2 → 0.0.5

package/src/ui/UIFilePreview/RichDocEditor/index.tsx

@@ -0,0 +1,730 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { Button, Modal, Space, message, Popconfirm, Tag } from 'antd';
+import { SaveOutlined, UploadOutlined, CloseOutlined, CloudOutlined, CloudServerOutlined, FileTextFilled, FileMarkdownOutlined, ImportOutlined } from '@ant-design/icons';
+import { useCreateBlockNote } from '@blocknote/react';
+import { BlockNoteView } from '@blocknote/mantine';
+import { zh as zhLocale } from '@blocknote/core/locales';
+import { BlockNoteSchema, defaultBlockSpecs, type Block } from '@blocknote/core';
+import '@blocknote/core/fonts/inter.css';
+import '@blocknote/mantine/style.css';
+import './richdoc-editor.css';
+import { saveFile, deleteFile } from '../IndexedDBUtils';
+import { exportRDocPdf } from './exportRDocPdf';
+import { exportRDocMarkdown } from './exportRDocMarkdown';
+import { ExportDropdown } from '../ExportDropdown';
+import { downloadBlob } from '../previewUtils';
+import { CacheUserInfo } from '../../../utils/CacheUserInfo';
+
+export interface RichDocEditorProps {
+  /** 文件内容：BlockNote 块数组的 JSON 字符串；空字符串表示新建文档 */
+  value?: string;
+  hiddenClose?: boolean;
+  visible?: boolean;
+  isCreate?: boolean; // 是否为新建模式
+  onClose?: () => void;
+  onSaveLocal?: (value: string) => void;
+  onChange?: (value: string) => void;
+  fileName?: string;
+  onUpload?: (oldValue: string, value: string, fileName: string) => Promise<void>;
+  readOnly?: boolean;
+  uploadPercent?: number;
+  uploadSuccess?: boolean | undefined; // 上传成功.
+  isOffline?: boolean;
+  isLocalOnly?: boolean;
+  hasUnsyncedChanges?: boolean;
+  onSaveLocalMarkdown?: (content: string, fileName: string, markUnsynced?: boolean) => Promise<void>;
+}
+
+/**
+ * 去掉 file 块：本编辑器不提供任意文件上传，斜杠菜单里的“文件”项也会随之消失。
+ * 老文档若含 file 块，解析前会被剔除（见 parseBlocks）。
+ */
+const rdocBlockSpecs = Object.fromEntries(
+  Object.entries(defaultBlockSpecs).filter(([type]) => type !== 'file'),
+) as unknown as typeof defaultBlockSpecs;
+
+const rdocSchema = BlockNoteSchema.create({ blockSpecs: rdocBlockSpecs });
+
+/** 将 .rdoc 文件内容解析为 BlockNote 块；空/非法内容返回 undefined（空白文档） */
+function parseBlocks(raw: string): Block[] | undefined {
+  if (!raw || !raw.trim()) return undefined;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return undefined;
+    const blocks = stripFileBlocks(parsed as Block[]);
+    return blocks.length > 0 ? blocks : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** 递归剔除已不支持的 file 块（直接传给编辑器会因未知块类型解析失败） */
+function stripFileBlocks(blocks: Block[]): Block[] {
+  return blocks
+    .filter((block) => block.type !== 'file')
+    .map((block) =>
+      block.children && block.children.length > 0
+        ? { ...block, children: stripFileBlocks(block.children) }
+        : block,
+    );
+}
+
+/**
+ * 各媒体块的体积上限：媒体以 base64 内嵌在 .rdoc JSON 中，过大不便保存与上传。
+ * 图片 600KB、视频 2MB、音频 1MB。
+ */
+const MEDIA_SIZE_LIMITS: Record<string, { limit: number; message: string }> = {
+  image: { limit: 600 * 1024, message: '图片大小不能超过 600KB，请压缩后再插入' },
+  video: { limit: 2 * 1024 * 1024, message: '视频大小不能超过 2MB，请压缩后再插入' },
+  audio: { limit: 1 * 1024 * 1024, message: '音频大小不能超过 1MB，请压缩后再插入' },
+};
+
+/**
+ * 媒体块的上传实现：转成 dataURL 内嵌进文档 JSON。
+ * 不配置 uploadFile 时 BlockNote 只显示"嵌入URL"标签，用户无法插入本地媒体，
+ * 因此必须提供该函数以启用"上传"标签。
+ */
+function mediaToDataUrl(file: File, blockType?: string): Promise<string> {
+  const rule = blockType ? MEDIA_SIZE_LIMITS[blockType] : undefined;
+  if (rule && file.size > rule.limit) {
+    message.error(rule.message);
+    // 不能用 reject：BlockNote 的文件面板捕获异常后会进入 upload_failed 状态，
+    // 该面板之后选择合规文件也无法再上传。这里以空 URL resolve，
+    // 块保持"待添加文件"状态，用户可立即重新选择。
+    return Promise.resolve('');
+  }
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(reader.error ?? new Error('读取文件失败'));
+    reader.readAsDataURL(file);
+  });
+}
+
+type EditorInstance = ReturnType<typeof useCreateBlockNote>;
+
+type ColorScheme = 'light' | 'dark';
+
+/** 应用主题写在 <html> 上（class="dark" / data-theme），无全局 Context，这里按同样的规则读取 */
+const getCurrentColorScheme = (): ColorScheme => {
+  if (typeof document === 'undefined') return 'light';
+  const root = document.documentElement;
+  return root.dataset.theme === 'dark' || root.classList.contains('dark') ? 'dark' : 'light';
+};
+
+export interface RichDocInlineEditorProps {
+  /** BlockNote 块数组的 JSON 字符串；空字符串表示空白文档 */
+  value?: string;
+  readOnly?: boolean;
+  /** 内容变化回调，返回块数组 JSON 字符串 */
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+/**
+ * 内嵌版块文档（.rdoc）编辑器：不包裹全屏 Modal，直接渲染编辑区，
+ * 供笔记等需要"左右分栏、右侧常驻编辑"的场景复用同一套 .rdoc 文档能力。
+ */
+export const RichDocInlineEditor: React.FC<RichDocInlineEditorProps> = ({
+  value = '',
+  readOnly = false,
+  onChange,
+  className = '',
+}) => {
+  const editorInstanceRef = useRef<EditorInstance | null>(null);
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(getCurrentColorScheme);
+
+  // 跟随应用主题（与全屏版编辑器保持一致）
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setColorScheme(getCurrentColorScheme()));
+    observer.observe(root, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // 仅在挂载时解析初始内容，后续内容由调用方通过重挂载（key）切换
+  const initialContent = useMemo(() => parseBlocks(value), []);
+  const markdownFallback = useMemo(() => (initialContent ? undefined : value), [initialContent, value]);
+
+  const handleDocChange = useCallback(
+    (blocks: Block[]) => onChange?.(JSON.stringify(blocks)),
+    [onChange],
+  );
+
+  return (
+    <div className={`richdoc-editor-host ${readOnly ? 'richdoc-readonly' : ''} ${className}`}>
+      <BlockNoteInner
+        initialContent={initialContent}
+        markdownFallback={markdownFallback}
+        readOnly={readOnly}
+        colorScheme={colorScheme}
+        onDocChange={handleDocChange}
+        editorInstanceRef={editorInstanceRef}
+      />
+    </div>
+  );
+};
+
+
+interface BlockNoteInnerProps {
+  initialContent?: Block[];
+  /** JSON 解析失败时的原始文本：尝试按 markdown 导入（兼容 .md 改名为 .rdoc 的场景） */
+  markdownFallback?: string;
+  readOnly: boolean;
+  colorScheme: ColorScheme;
+  onDocChange: (blocks: Block[]) => void;
+  /** 暴露编辑器实例，供外层触发 PDF 导出 */
+  editorInstanceRef: { current: EditorInstance | null };
+}
+
+/** 内部编辑器：每次 key 变化整体重建（对应打开不同文件），保证 initialContent 生效 */
+const BlockNoteInner: React.FC<BlockNoteInnerProps> = ({ initialContent, markdownFallback, readOnly, colorScheme, onDocChange, editorInstanceRef }) => {
+  const editor = useCreateBlockNote({
+    schema: rdocSchema,
+    initialContent,
+    dictionary: zhLocale,
+    // 按块类型限制媒体体积：图片 600KB / 视频 2MB / 音频 1MB（挂载后 ref 已就绪，用户上传时必定可用）
+    uploadFile: (file: File, blockId?: string) => {
+      const blockType = blockId ? editorInstanceRef.current?.getBlock(blockId)?.type : undefined;
+      return mediaToDataUrl(file, blockType);
+    },
+  });
+
+  useEffect(() => {
+    editorInstanceRef.current = editor;
+    return () => {
+      editorInstanceRef.current = null;
+    };
+  }, [editor, editorInstanceRef]);
+
+  // JSON 非法且存在原始文本时，尝试按 Markdown 解析导入
+  useEffect(() => {
+    if (initialContent || !markdownFallback || !markdownFallback.trim()) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const blocks = await editor.tryParseMarkdownToBlocks(markdownFallback);
+        if (!cancelled && blocks.length > 0) {
+          editor.replaceBlocks(editor.document, blocks);
+        }
+      } catch (err) {
+        console.warn('[RichDocEditor] Markdown 导入失败，按空白文档处理:', err);
+      }
+    })();
+    return () => { cancelled = true; };
+    // 仅在挂载时执行一次
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <BlockNoteView
+      editor={editor}
+      editable={!readOnly}
+      theme={colorScheme}
+      onChange={() => onDocChange(editor.document)}
+    />
+  );
+};
+
+const RichDocEditor: React.FC<RichDocEditorProps> = ({
+  hiddenClose = false,
+  value = '',
+  visible,
+  isCreate,
+  onClose,
+  onSaveLocal,
+  fileName = 'document.rdoc',
+  onUpload,
+  onChange,
+  readOnly = false,
+  uploadPercent,
+  isOffline,
+  isLocalOnly,
+  hasUnsyncedChanges,
+  onSaveLocalMarkdown,
+}) => {
+  const [content, setContent] = useState(value);
+  const [userId, setUserId] = useState<string | null>(null);
+  const [editorKey, setEditorKey] = useState(0);
+  const [hasLocalCache, setHasLocalCache] = useState(false);
+  const [hasUploaded, setHasUploaded] = useState(!isCreate);
+  const [exportingPdf, setExportingPdf] = useState(false);
+  // 跟随应用主题（切换主题时编辑器需同步切换 BlockNote 的明暗配色）
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(getCurrentColorScheme);
+  const editorInstanceRef = useRef<EditorInstance | null>(null);
+  const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  // 跟踪"标记为未同步"是否已在本次编辑会话中执行过，避免每次 onChange 都写 IndexedDB
+  const markUnsyncedTriggeredRef = useRef(false);
+  const contentRef = useRef(value);
+  contentRef.current = content;
+
+  // 差分上传的基准内容（服务器最新文件内容），上传成功后更新。与 MarkdownEditor 行为对齐
+  const baseContentRef = useRef(value);
+
+  // 用 ref 跟踪"状态标记"属性，避免其变化触发编辑器相关回调重建导致画面闪动
+  const hasUnsyncedChangesRef = useRef(hasUnsyncedChanges);
+  const onSaveLocalMarkdownRef = useRef(onSaveLocalMarkdown);
+  hasUnsyncedChangesRef.current = hasUnsyncedChanges;
+  onSaveLocalMarkdownRef.current = onSaveLocalMarkdown;
+
+  // 监听 <html> 上的主题标记，用户切换明暗主题时同步更新编辑器配色
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver(() => setColorScheme(getCurrentColorScheme()));
+    observer.observe(root, { attributes: true, attributeFilter: ['class', 'data-theme'] });
+    return () => observer.disconnect();
+  }, []);
+
+  // 获取当前登录用户
+  useEffect(() => {
+    if (visible) {
+      (async () => {
+        try {
+          const userInfo = CacheUserInfo.currentLocalUser();
+          setUserId(userInfo?.id || null);
+        } catch (error) {
+          console.error('获取用户信息失败:', error);
+          setUserId(null);
+        }
+      })();
+    }
+  }, [visible]);
+
+  // 加载文件内容（value 优先；新建/无缓存时直接用 value）
+  useEffect(() => {
+    if (visible && userId) {
+      if (value) {
+        setContent(value);
+        setEditorKey((prev) => prev + 1);
+        setHasLocalCache(false);
+      } else if (isCreate && fileName) {
+        setContent(value);
+        setHasLocalCache(false);
+      }
+    } else if (visible && fileName && !userId) {
+      setContent(value);
+      setHasLocalCache(false);
+    }
+  }, [visible, fileName, userId, value, isCreate, readOnly]);
+
+  // value 变化时重置差分基准
+  useEffect(() => {
+    baseContentRef.current = value;
+  }, [value]);
+
+  // 内容变化：防抖自动保存到 IndexedDB + 同步 localFiles store
+  const handleDocChange = useCallback((blocks: Block[]) => {
+    const newContent = JSON.stringify(blocks);
+    // 内容未实际变化时跳过（如编辑器初始化触发的 onChange）
+    if (newContent === contentRef.current) return;
+    setContent(newContent);
+    setHasUploaded(false);
+    onChange?.(newContent);
+
+    if (!fileName || !userId) return;
+
+    // 首次编辑时立即标记未同步
+    if (!markUnsyncedTriggeredRef.current && !hasUnsyncedChangesRef.current && onSaveLocalMarkdownRef.current) {
+      markUnsyncedTriggeredRef.current = true;
+      onSaveLocalMarkdownRef.current(newContent, fileName).catch(err => {
+        console.warn('编辑时立即标记未同步失败（不影响编辑，等待自动/手动保存即可）:', err);
+      });
+    }
+
+    if (saveTimerRef.current) {
+      clearTimeout(saveTimerRef.current);
+    }
+
+    setHasLocalCache(true);
+
+    saveTimerRef.current = setTimeout(async () => {
+      try {
+        await saveFile(userId, fileName, 'rdoc', newContent);
+        setHasLocalCache(false);
+        if (onSaveLocalMarkdownRef.current) {
+          try {
+            await onSaveLocalMarkdownRef.current(newContent, fileName, false);
+          } catch (err) {
+            console.warn('自动保存时同步 localFiles store 失败（不影响本地保存）:', err);
+          }
+        }
+      } catch (error) {
+        console.error('自动保存到 IndexedDB 失败:', error);
+      }
+    }, 20000);
+  }, [fileName, userId, onChange]);
+
+  // 保存到 IndexedDB
+  const handleSaveLocal = useCallback(async () => {
+    const newContent = contentRef.current;
+    if (onSaveLocal && !userId) {
+      onSaveLocal(newContent);
+      return;
+    }
+    try {
+      if (!userId) {
+        message.error('无法获取用户信息');
+        return;
+      }
+
+      await saveFile(userId, fileName, 'rdoc', newContent);
+      setHasLocalCache(false);
+
+      // 通知父组件更新 localFiles store
+      if (onSaveLocalMarkdownRef.current) {
+        try {
+          await onSaveLocalMarkdownRef.current(newContent, fileName);
+        } catch (err) {
+          console.warn('同步本地文件内容到 localFiles store 失败:', err);
+        }
+      }
+
+      message.success('已保存到本地缓存');
+    } catch (error) {
+      console.error('保存到本地缓存失败:', error);
+      message.error('保存失败');
+    }
+  }, [fileName, userId, onSaveLocal]);
+
+  // 上传到服务器
+  const handleUpload = useCallback(async () => {
+    if (!onUpload) {
+      message.error('未提供上传功能');
+      return;
+    }
+    try {
+      const newContent = contentRef.current;
+      const oldContent = baseContentRef.current;
+      await onUpload(oldContent, newContent, fileName);
+
+      // 上传成功后更新差分基准
+      baseContentRef.current = newContent;
+
+      // 清空本地缓存
+      if (userId) {
+        await deleteFile(userId, fileName, 'rdoc');
+        setHasLocalCache(false);
+        setHasUploaded(true);
+      }
+      markUnsyncedTriggeredRef.current = false;
+    } catch (error) {
+      console.error('上传失败:', error);
+      message.error('上传失败');
+    }
+  }, [fileName, onUpload, userId]);
+
+  // 导出为 PDF（块文档独立导出实现，使用块文档自身排版样式）
+  const handleExportPdf = useCallback(async () => {
+    const editor = editorInstanceRef.current;
+    if (!editor) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      return;
+    }
+    const editorElement = editor.domElement;
+    if (!editorElement || editorElement.querySelectorAll('.bn-block-outer').length === 0) {
+      message.warning('内容为空，无法导出 PDF');
+      return;
+    }
+
+    setExportingPdf(true);
+    message.loading({ key: 'rdoc-export-pdf', content: '正在生成 PDF...', duration: 0 });
+    try {
+      await exportRDocPdf({
+        editorElement,
+        fileName,
+        onProgress: (page, total) =>
+          message.loading({
+            key: 'rdoc-export-pdf',
+            content: `正在生成 PDF（${page}/${total} 页）...`,
+            duration: 0,
+          }),
+      });
+      message.success({ key: 'rdoc-export-pdf', content: 'PDF 已导出' });
+    } catch (error) {
+      console.error('导出 PDF 失败:', error);
+      message.error({
+        key: 'rdoc-export-pdf',
+        content: (error as Error)?.message || '导出 PDF 失败',
+      });
+    } finally {
+      setExportingPdf(false);
+    }
+  }, [fileName]);
+
+  // 导出为 Markdown（图片不参与导出）
+  const handleExportMarkdown = useCallback(() => {
+    const editor = editorInstanceRef.current;
+    if (!editor) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      return;
+    }
+    if (editor.document.length === 0) {
+      message.warning('内容为空，无法导出 Markdown');
+      return;
+    }
+
+    try {
+      const { skippedImages } = exportRDocMarkdown(editor, editor.document, fileName);
+      message.success(
+        skippedImages > 0 ? `Markdown 已导出（已跳过 ${skippedImages} 张图片）` : 'Markdown 已导出',
+      );
+    } catch (error) {
+      console.error('导出 Markdown 失败:', error);
+      message.error((error as Error)?.message || '导出 Markdown 失败');
+    }
+  }, [fileName]);
+
+  // 下载原始文件：.rdoc 文件内容即块 JSON 文本
+  const handleDownload = useCallback(() => {
+    const downloadContent = contentRef.current;
+    if (!downloadContent || !downloadContent.trim()) {
+      message.warning('内容为空，无法下载');
+      return;
+    }
+    downloadBlob(new Blob([downloadContent], { type: 'application/json;charset=utf-8' }), fileName);
+  }, [fileName]);
+  const onDownload = !isCreate || content.trim() ? handleDownload : undefined;
+
+  // ============================================================================
+  // 导入 Markdown：选 .md 文件 → BlockNote 的 tryParseMarkdownToBlocks 解析成块，
+  // 再整体替换当前文档（该操作会触发 onChange，进而走正常的保存/上传流程）。
+  // ============================================================================
+  const importInputRef = useRef<HTMLInputElement | null>(null);
+  const [importingMarkdown, setImportingMarkdown] = useState(false);
+
+  const runImportMarkdown = useCallback(async (file: File) => {
+    const editor = editorInstanceRef.current;
+    if (!editor) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      return;
+    }
+    setImportingMarkdown(true);
+    message.loading({ key: 'rdoc-import-md', content: '正在解析 Markdown…', duration: 0 });
+    try {
+      const text = await file.text();
+      if (!text.trim()) {
+        message.warning('文件内容为空');
+        return;
+      }
+      const blocks = await editor.tryParseMarkdownToBlocks(text);
+      if (!blocks || blocks.length === 0) {
+        message.warning('未能从文件中解析出内容');
+        return;
+      }
+      // 保留当前选区信息不重要，整体替换即可；replaceBlocks 会触发 onChange
+      editor.replaceBlocks(editor.document, blocks);
+      message.success(`已导入 Markdown，共 ${blocks.length} 个内容块`);
+    } catch (error) {
+      console.error('[RichDocEditor] 导入 Markdown 失败:', error);
+      message.error(`导入 Markdown 失败：${(error as Error)?.message || '未知错误'}`);
+    } finally {
+      message.destroy('rdoc-import-md');
+      setImportingMarkdown(false);
+    }
+  }, []);
+
+  const handleImportMarkdown = useCallback(() => {
+    const editor = editorInstanceRef.current;
+    if (!editor) {
+      message.warning('编辑器尚未就绪，请稍后再试');
+      return;
+    }
+    importInputRef.current?.click();
+  }, []);
+
+  const handleImportFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      // 允许重复选择同一个文件
+      e.target.value = '';
+      if (!file) return;
+
+      const editor = editorInstanceRef.current;
+      const hasContent =
+        !!editor &&
+        (editor.document.length > 1 ||
+          (editor.document.length === 1 &&
+            Array.isArray(editor.document[0].content) &&
+            editor.document[0].content.length > 0));
+      if (!hasContent) {
+        void runImportMarkdown(file);
+        return;
+      }
+      Modal.confirm({
+        title: '导入会覆盖当前内容',
+        content: '当前文档已有内容，导入 Markdown 后将整体替换，且无法撤销。是否继续？',
+        okText: '继续导入',
+        cancelText: '取消',
+        okButtonProps: { danger: true },
+        onOk: () => runImportMarkdown(file),
+      });
+    },
+    [runImportMarkdown],
+  );
+
+  // 「导出/导入Markdown」作为额外菜单项，与统一的导出下拉合并
+  // （顺序：导出PDF、导出Markdown、导入Markdown、下载）
+  const exportMenuItems = useMemo(
+    () => [
+      { key: 'markdown', icon: <FileMarkdownOutlined />, label: '导出Markdown', onClick: handleExportMarkdown },
+      ...(readOnly
+        ? []
+        : [
+            {
+              key: 'import-markdown',
+              icon: <ImportOutlined />,
+              label: '导入Markdown',
+              disabled: importingMarkdown,
+              onClick: handleImportMarkdown,
+            },
+          ]),
+    ],
+    [handleExportMarkdown, handleImportMarkdown, importingMarkdown, readOnly],
+  );
+
+  // Ctrl+S / Cmd+S 保存到本地缓存
+  useEffect(() => {
+    if (!visible) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        handleSaveLocal();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [visible, handleSaveLocal]);
+
+  // 重置状态和清理定时器（编辑器打开/关闭时）
+  useEffect(() => {
+    if (visible) {
+      setHasUploaded(!isCreate);
+      markUnsyncedTriggeredRef.current = false;
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    }
+    return () => {
+      if (saveTimerRef.current) {
+        clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+    };
+  }, [visible, isCreate]);
+
+  // 编辑器初始内容：优先 JSON 块；失败则走 markdown 导入兜底
+  const initialContent = useMemo(() => parseBlocks(content), [editorKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  const markdownFallback = useMemo(
+    () => (initialContent ? undefined : content),
+    [initialContent, content],
+  );
+
+  return (
+    <Modal
+      open={visible}
+      onCancel={onClose}
+      keyboard={false}
+      closeIcon={null}
+      footer={null}
+      width="100%"
+      style={{ top: 0, maxWidth: '100vw' }}
+      styles={{
+        body: {
+          height: '100dvh',
+          padding: 0,
+        },
+      }}
+      className="ant-modal-nopadding ant-modal-fullscreen relative"
+      transitionName='none'
+    >
+      <div className="h-full flex flex-col bg-white p-0 m-0">
+        <div className={`flex items-center justify-between flex-wrap px-4 py-2 pr-0 flex-shrink-0 ${isOffline ? 'bg-orange-50 border-b border-orange-200' : 'bg-gray-50 border-b border-gray-200'}`}>
+          <span>&nbsp;</span>
+          {!readOnly && <span>&nbsp;</span>}
+          <div className="flex items-center gap-2 flex-wrap min-w-[40%]">
+            {!isOffline && isLocalOnly && (
+              <Tag icon={<CloudOutlined />} color="orange" style={{ margin: 0 }}>
+                本地文件
+              </Tag>
+            )}
+            {!isOffline && !isLocalOnly && hasUnsyncedChanges && (
+              <Tag icon={<CloudOutlined />} color="warning" style={{ margin: 0 }}>
+                有未同步修改
+              </Tag>
+            )}
+            {!isOffline && !isLocalOnly && !hasUnsyncedChanges && !onUpload ? (
+              <Tag icon={<CloudServerOutlined />} color="default" style={{ margin: 0 }}>
+                同步完成
+              </Tag>
+            ) : null}
+            <FileTextFilled className="text-yellow-600" />
+            <span className="text-sm font-medium">{hasLocalCache ? '*' : ''}{fileName}</span>
+          </div>
+          {!readOnly && !hiddenClose && (<Space wrap={true} align="center" direction="horizontal">
+            <ExportDropdown
+              onExportPdf={handleExportPdf}
+              onDownload={onDownload}
+              exportingPdf={exportingPdf}
+              extraItems={exportMenuItems}
+              buttonProps={{ style: { paddingLeft: 2, paddingRight: 2 } }}
+            />
+            {onUpload && (
+              <Button type="text" style={{ paddingLeft: 4, paddingRight: 4 }} title="每次上传将保留一个历史版本，最多保留10个版本" icon={<UploadOutlined />} onClick={handleUpload} disabled={uploadPercent !== undefined && uploadPercent < 100}>
+                {uploadPercent !== undefined && uploadPercent < 100 ? `上传中 ${Math.round(uploadPercent * 100)}%` : '上传'}
+              </Button>
+            )}
+            <Button type="primary" icon={<SaveOutlined />} onClick={handleSaveLocal}>
+              保存
+            </Button>
+            {(hasLocalCache || !hasUploaded) ?
+              (<Popconfirm
+                title="确定要退出吗？"
+                description={hasLocalCache ? "修改未保存，确定要退出吗？" : "修改未上传，确定要退出吗？"}
+                onConfirm={onClose}
+                okText="确定"
+                cancelText="取消"
+              >
+                <Button type="text" className="ml-3 mr-2 text-gray-600 hover:text-gray-900" icon={<CloseOutlined className="w-6 h-6" />} />
+              </Popconfirm>) : (<CloseOutlined onClick={onClose} className='ml-3 mr-2 w-6 h-6' />)}
+          </Space>)}
+          {readOnly && !hiddenClose && (
+            <Space className='ml-3 mr-2'>
+              <ExportDropdown
+                onExportPdf={handleExportPdf}
+                onDownload={onDownload}
+                exportingPdf={exportingPdf}
+                extraItems={exportMenuItems}
+                buttonProps={{ style: {  } }}
+              />
+              <CloseOutlined onClick={onClose} className='w-6 h-6' />
+            </Space>)}
+          {hiddenClose && <span>&nbsp;</span>}
+          {/* 「导入Markdown」用的隐藏文件选择器 */}
+          <input
+            ref={importInputRef}
+            type="file"
+            accept=".md,.markdown,.txt,text/markdown,text/plain"
+            style={{ display: 'none' }}
+            onChange={handleImportFileChange}
+          />
+        </div>
+
+        <div className={`flex-1 richdoc-editor-host ${readOnly ? 'richdoc-readonly' : ''}`}>
+          <BlockNoteInner
+            key={editorKey}
+            initialContent={initialContent}
+            markdownFallback={markdownFallback}
+            readOnly={readOnly}
+            colorScheme={colorScheme}
+            onDocChange={handleDocChange}
+            editorInstanceRef={editorInstanceRef}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default RichDocEditor;
+export { RichDocEditor };