@spacecorexdev/core 0.0.2 → 0.0.5

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

@@ -0,0 +1,677 @@
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import SimpleMDE from 'react-simplemde-editor';
+import 'easymde/dist/easymde.min.css';
+import './markdownEditor.css';
+import EasyMDE from 'easymde';
+import { Button, Modal, Space, message, Popconfirm, Tag } from 'antd';
+import { SaveOutlined, FileMarkdownFilled, UploadOutlined, CloseOutlined, CloudOutlined, CloudServerOutlined } from '@ant-design/icons';
+import { saveFile, loadFile, deleteFile } from '../IndexedDBUtils';
+import { CacheUserInfo } from '../../../utils/CacheUserInfo';
+import uiConfirm from '../../UIConfirm';
+import { exportMarkdownPdf } from './exportMarkdownPdf';
+import { ExportDropdown } from '../ExportDropdown';
+import { downloadBlob } from '../previewUtils';
+
+export interface MarkdownEditorProps {
+  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>;
+  placeholder?: string;
+  readOnly?: boolean;
+  allowFullscreen?: boolean;
+  defaultPreviewMode?: boolean;
+  /** 是否显示「导出PDF」按钮，默认显示 */
+  showExportPdf?: boolean;
+  /**
+   * 不适用本地缓存方式，如果为true，也不会出现上传按钮;
+   * true：不会使用modal方式展示.
+   */
+  noLocalCache?: boolean;
+  uploadPercent?: number; 
+  uploadSuccess?: boolean|undefined; // 上传成功.
+  // ---- 新增：本地文件 / 离线模式支持 ----
+  isOffline?: boolean;
+  isLocalOnly?: boolean;
+  hasUnsyncedChanges?: boolean;
+  onSaveLocalMarkdown?: (content: string, fileName: string, markUnsynced?: boolean) => Promise<void>;
+}
+function mde_toggleSideBySide(editor:any) {
+    let cm = editor.codemirror;
+    let wrapper = cm.getWrapperElement();
+    let preview = wrapper.nextSibling;
+    let toolbarButton = editor.toolbarElements && editor.toolbarElements['side-by-side'];
+    let useSideBySideListener = false;
+
+    let easyMDEContainer = wrapper.parentNode;
+
+    if (preview.classList.contains('editor-preview-active-side')) {
+        if (editor.options.sideBySideFullscreen === false) {
+            // if side-by-side not-fullscreen ok, remove classes when hiding side
+            easyMDEContainer.classList.remove('sided--no-fullscreen');
+        }
+        preview.classList.remove('editor-preview-active-side');
+        if (toolbarButton) toolbarButton.classList.remove('active');
+        wrapper.classList.remove('CodeMirror-sided');
+    } else {
+        // When the preview button is clicked for the first time,
+        // give some time for the transition from editor.css to fire and the view to slide from right to left,
+        // instead of just appearing.
+        setTimeout(function () {
+            preview.classList.add('editor-preview-active-side');
+        }, 1);
+        if (toolbarButton) toolbarButton.classList.add('active');
+        wrapper.classList.add('CodeMirror-sided');
+        useSideBySideListener = true;
+    }
+
+    // Hide normal preview if active
+    let previewNormal = wrapper.lastChild;
+    if (previewNormal.classList.contains('editor-preview-active')) {
+        previewNormal.classList.remove('editor-preview-active');
+        let toolbar = editor.toolbarElements.preview;
+        let toolbar_div = editor.toolbar_div;
+        toolbar.classList.remove('active');
+        toolbar_div.classList.remove('disabled-for-preview');
+    }
+
+    let sideBySideRenderingFunction = function () {
+        let newValue = editor.options.previewRender(editor.value(), preview);
+        if (newValue != null) {
+            preview.innerHTML = newValue;
+        }
+    };
+
+    if (!cm.sideBySideRenderingFunction) {
+        cm.sideBySideRenderingFunction = sideBySideRenderingFunction;
+    }
+
+    if (useSideBySideListener) {
+        let newValue = editor.options.previewRender(editor.value(), preview);
+        if (newValue != null) {
+            preview.innerHTML = newValue;
+        }
+        cm.on('update', cm.sideBySideRenderingFunction);
+    } else {
+        cm.off('update', cm.sideBySideRenderingFunction);
+    }
+
+    // Refresh to fix selection being off (#309)
+    cm.refresh();
+}
+
+function mde_setPreview(editor: any) {
+  let cm = editor.codemirror;
+  let wrapper = cm.getWrapperElement();
+  let toolbar_div = editor.toolbar_div;
+  let toolbar = editor.options.toolbar ? editor.toolbarElements.preview : false;
+  let preview = wrapper.lastChild;
+
+  // Turn off side by side if needed
+  let sidebyside = cm.getWrapperElement().nextSibling;
+  if (sidebyside && sidebyside.classList.contains('editor-preview-active-side'))
+    mde_toggleSideBySide(editor);
+
+  if (!preview || !preview.classList.contains('editor-preview-full')) {
+
+    preview = document.createElement('div');
+    preview.className = 'editor-preview-full';
+
+    if (editor.options.previewClass) {
+
+      if (Array.isArray(editor.options.previewClass)) {
+        for (let i = 0; i < editor.options.previewClass.length; i++) {
+          preview.classList.add(editor.options.previewClass[i]);
+        }
+
+      } else if (typeof editor.options.previewClass === 'string') {
+        preview.classList.add(editor.options.previewClass);
+      }
+    }
+
+    wrapper.appendChild(preview);
+  }
+
+  if (preview.classList.contains('editor-preview-active')) {
+    return true;
+  } else {
+    // When the preview button is clicked for the first time,
+    // give some time for the transition from editor.css to fire and the view to slide from right to left,
+    // instead of just appearing.
+    setTimeout(function () {
+      preview.classList.add('editor-preview-active');
+    }, 1);
+    if (toolbar) {
+      toolbar.classList.add('active');
+      toolbar_div.classList.add('disabled-for-preview');
+    }
+  }
+
+  let preview_result = editor.options.previewRender(editor.value(), preview);
+  if (preview_result !== null) {
+    preview.innerHTML = preview_result;
+    return true;
+  }
+  else {
+    return false;
+  }
+
+}
+
+const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
+  hiddenClose = false,
+  value = '',
+  visible,
+  isCreate,
+  onClose,
+  fileName = 'document.md',
+  onUpload,
+  onSaveLocal,
+  onChange,
+  placeholder = '请输入Markdown内容...',
+  readOnly = false,
+  allowFullscreen = true,
+  defaultPreviewMode = true,
+  showExportPdf = true,
+  noLocalCache = 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 [exporting, setExporting] = useState(false);
+  const markdownInstanceRef = useRef<EasyMDE | null>(null);
+  const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
+  // 跟踪"标记为未同步"的调用是否已在本次编辑会话中执行过，避免每次 onChange 都写 IndexedDB
+  const markUnsyncedTriggeredRef = useRef(false);
+  // 用 ref 跟踪当前内容，用于在 handleContentChange 中判断内容是否真的变化
+  // 避免 EasyMDE 初始化等场景触发 onChange 但内容未变时误标记"未同步"
+  const contentRef = useRef(value);
+  contentRef.current = content;
+
+  // 跟踪当前差分上传的基准内容（即服务器上最新的文件内容）。
+  // 上传成功后会更新为本次上传的内容，确保下次差分基准与服务器一致。
+  // 与 Word/Excel/PPTX 的 baseBlobRef 行为对齐。
+  const baseContentRef = useRef(value);
+
+  // 用 ref 跟踪这些"状态标记"属性，避免它们的变化（如保存/上传后更新标记）
+  // 触发编辑器相关 useCallback 重新创建，导致画面闪动。
+  const hasUnsyncedChangesRef = useRef(hasUnsyncedChanges);
+  const onSaveLocalMarkdownRef = useRef(onSaveLocalMarkdown);
+  hasUnsyncedChangesRef.current = hasUnsyncedChanges;
+  onSaveLocalMarkdownRef.current = onSaveLocalMarkdown;
+
+  // 获取当前登录用户
+  useEffect(() => {
+    if (visible && !noLocalCache) {
+      const getUserId = async () => {
+        try {
+          const userInfo = CacheUserInfo.currentLocalUser();
+          if (userInfo?.id) {
+            setUserId(userInfo.id);
+          } else {
+            setUserId(null);
+          }
+        } catch (error) {
+          console.error('获取用户信息失败:', error);
+          setUserId(null);
+        }
+      };
+      getUserId();
+    }
+  }, [visible, noLocalCache]);
+  
+
+  // 加载本地缓存的文件
+  useEffect(() => {
+    if (noLocalCache) {
+      setContent(value);
+      return;
+    }
+
+    if (visible && userId) {
+      // 如果有传入的 value 且不为空，优先使用 value
+      if (value) {
+        // 需求3：彻底移除旧缓存检查。既然有了 value，直接加载
+        setContent(value);
+        setEditorKey((prev) => prev + 1);
+        setHasLocalCache(false);
+      } else if (isCreate && fileName) {
+        // 需求3：新建模式下不再自动检查/加载旧的本地缓存
+        setContent(value);
+        setHasLocalCache(false);
+      }
+    } else if (visible && fileName && !userId) {
+      setContent(value);
+      setHasLocalCache(false);
+    }
+  }, [visible, fileName, userId, value, isCreate, noLocalCache, readOnly]);
+
+  // value 变化时（文件切换/加载）重置差分基准
+  useEffect(() => {
+    baseContentRef.current = value;
+  }, [value]);
+
+  // 初始化时切换到预览模式
+  useEffect(() => {
+    if (defaultPreviewMode && markdownInstanceRef.current) {
+      setTimeout(() => {
+        if (!mde_setPreview(markdownInstanceRef.current as EasyMDE)) {
+          setTimeout(() => {
+            mde_setPreview(markdownInstanceRef.current as EasyMDE);
+          }, 1000);
+        }
+      }, 100);
+    }
+  }, [defaultPreviewMode, editorKey]);
+
+  // 自动保存到 IndexedDB（防抖）+ 同步 localFiles store
+  const handleContentChange = useCallback((newContent: string) => {
+    // 内容未实际变化时跳过（如 EasyMDE 初始化触发 onChange）
+    if (newContent === contentRef.current) return;
+    setContent(newContent);
+    setHasUploaded(false);
+    onChange?.(newContent);
+
+    if (!fileName || !userId) return;
+
+    // 首次编辑（且 hasUnsyncedChanges 目前为 false）时，立即标记未同步。
+    // 上传成功后 hasUnsyncedChanges 被清除，用户继续编辑后应立即重新显示"有未同步修改"。
+    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, 'md', newContent);
+        setHasLocalCache(false);
+        // 同步更新 localFiles store，确保自动保存也持久化到 localFiles
+        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]);
+
+  const modalEditorOptions = useMemo(() => ({
+    autoDownloadFontAwesome: true,
+    // 只读预览时不自动聚焦：autofocus 会让 CodeMirror 把初始光标（文档末尾）
+    // 滚动进可视区，导致打开文件时滚动条自动滚到最底部
+    autofocus: !readOnly,
+    spellChecker: false,
+    placeholder,
+    toolbar: readOnly ? [
+      'guide',
+      ...(allowFullscreen ? ['side-by-side', 'fullscreen'] : []),
+    ] : [
+      'bold',
+      'italic',
+      'strikethrough',
+      '|',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      '|',
+      'code',
+      'quote',
+      'table',
+      '|',
+      'unordered-list',
+      'ordered-list',
+      '|',
+      'link',
+      'image',
+      '|',
+      'preview',
+      'guide',
+      ...(allowFullscreen ? ['side-by-side', 'fullscreen'] : []),
+    ] as any[],
+  }), [allowFullscreen, placeholder, readOnly]);
+
+  const inlineEditorOptions = useMemo(() => ({
+    spellChecker: false,
+    placeholder,
+    toolbar: readOnly ? false : [
+      'bold',
+      'italic',
+      'strikethrough',
+      '|',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      '|',
+      'code',
+      'quote',
+      '|',
+      'unordered-list',
+      'ordered-list',
+      '|',
+      'link',
+      'image',
+      '|',
+      'preview',
+      ...(allowFullscreen ? ['side-by-side', 'fullscreen'] : []),
+    ] as any[],
+  }), [allowFullscreen, placeholder, readOnly]);
+
+  // 保存到 IndexedDB
+  const handleSaveLocal = useCallback(async () => {
+    const newContent = (markdownInstanceRef.current as EasyMDE).value();
+    if (noLocalCache) {
+      onSaveLocal?.(newContent);
+      // 非缓存模式下，也同步到 localFiles store（如果提供了回调）
+      if (onSaveLocalMarkdownRef.current) {
+        try {
+          await onSaveLocalMarkdownRef.current(newContent, fileName);
+        } catch (err) {
+          console.warn('同步本地文件内容到 localFiles store 失败:', err);
+        }
+      }
+      return;
+    }
+    try {
+      if (!userId) {
+        message.error('无法获取用户信息');
+        return;
+      }
+
+      await saveFile(userId, fileName, 'md', 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, noLocalCache, onSaveLocal]);
+
+  // 上传到服务器
+  const handleUpload = useCallback(async () => {
+    if (!onUpload) {
+      message.error('未提供上传功能');
+      return;
+    }
+    try {
+      const newContent = (markdownInstanceRef.current as EasyMDE).value();
+      // 使用 baseContentRef 作为差分基准，而非 value。
+      // 上传成功后 baseContentRef 会更新为本次上传的内容，确保下次差分基准与服务器一致。
+      const oldContent = baseContentRef.current;
+      await onUpload(oldContent, newContent, fileName);
+
+      // 上传成功后，更新差分基准为本次上传的内容，确保下次差分基准与服务器一致
+      baseContentRef.current = newContent;
+
+      // 上传成功后，清空本地缓存
+      if (userId) {
+        await deleteFile(userId, fileName, 'md');
+        setHasLocalCache(false);
+        setHasUploaded(true);
+      }
+      // 上传成功后重置"立即标记未同步"触发器，使后续编辑可再次立即触发
+      markUnsyncedTriggeredRef.current = false;
+    } catch (error) {
+      console.error('上传失败:', error);
+      message.error('上传失败');
+    }
+  }, [fileName, onUpload, userId]);
+
+  // 导出为 PDF（纯前端生成，不经过浏览器打印对话框）
+  const handleExportPdf = useCallback(async () => {
+    const instance = markdownInstanceRef.current;
+    const exportContent = instance ? instance.value() : contentRef.current;
+    if (!exportContent || !exportContent.trim()) {
+      message.warning('内容为空，无法导出 PDF');
+      return;
+    }
+    setExporting(true);
+    message.loading({ key: 'md-export-pdf', content: '正在生成 PDF...', duration: 0 });
+    try {
+      await exportMarkdownPdf({
+        content: exportContent,
+        fileName,
+        editor: instance,
+        onProgress: (page, total) => {
+          message.loading({
+            key: 'md-export-pdf',
+            content: `正在生成 PDF（${page}/${total} 页）...`,
+            duration: 0,
+          });
+        },
+      });
+      message.success({ key: 'md-export-pdf', content: 'PDF 已导出' });
+    } catch (error) {
+      console.error('导出 PDF 失败:', error);
+      message.error({
+        key: 'md-export-pdf',
+        content: (error as Error)?.message || '导出 PDF 失败',
+      });
+    } finally {
+      setExporting(false);
+    }
+  }, [fileName]);
+
+  // 下载原始文件：markdown 文本本身即文件内容
+  const handleDownload = useCallback(() => {
+    const instance = markdownInstanceRef.current;
+    const downloadContent = instance ? instance.value() : contentRef.current;
+    if (!downloadContent || !downloadContent.trim()) {
+      message.warning('内容为空，无法下载');
+      return;
+    }
+    downloadBlob(new Blob([downloadContent], { type: 'text/markdown;charset=utf-8' }), fileName);
+  }, [fileName]);
+  const onDownload = !isCreate || content.trim() ? handleDownload : undefined;
+
+  // 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]);
+
+  const getMdeInstance = useCallback((instance: EasyMDE) => {
+    markdownInstanceRef.current = instance;
+    if (defaultPreviewMode) {
+      setTimeout(() => {
+        if (!mde_setPreview(markdownInstanceRef.current as EasyMDE)) {
+          setTimeout(() => {
+            mde_setPreview(markdownInstanceRef.current as EasyMDE);
+          }, 1000);
+        }
+      }, 100);
+    }
+  }, [defaultPreviewMode]);
+
+  if (!noLocalCache) {
+    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 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}
+              <FileMarkdownFilled className="text-gray-800" />
+              <span className="text-sm font-medium">{hasLocalCache ? '*' : ''}{fileName}</span>
+            </div>
+            {!readOnly && !hiddenClose && (<Space wrap={true} align="center" direction="horizontal">
+              {/* <Button icon={<DeleteOutlined />} onClick={handleClearCache}>
+                清除缓存
+              </Button> */}
+              <ExportDropdown
+                onExportPdf={showExportPdf ? handleExportPdf : undefined}
+                onDownload={onDownload}
+                exportingPdf={exporting}
+                buttonProps={{ style: { paddingLeft: 4, paddingRight: 4 } }}
+              />
+              {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>
+              )}
+              {!readOnly && (<Button type="primary" icon={<SaveOutlined />} disabled={readOnly} onClick={handleSaveLocal}>
+                保存
+              </Button>)}
+              {(!readOnly && (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={showExportPdf ? handleExportPdf : undefined}
+                  onDownload={onDownload}
+                  exportingPdf={exporting}
+                />
+                <CloseOutlined onClick={onClose} className='w-6 h-6'/>
+              </Space>)}
+            {hiddenClose && <span>&nbsp;</span>}
+          </div>
+
+          <div className="flex-1 overflow-y-auto h-full ineditor-toolbar">
+            <SimpleMDE
+              key={editorKey}
+              value={content}
+              onChange={handleContentChange}
+              options={modalEditorOptions}
+              getMdeInstance={getMdeInstance}
+            />
+          </div>
+        </div>
+      </Modal>
+    );
+  } else {
+    const showInlineHeader = showExportPdf || (!readOnly && onSaveLocal);
+    return (
+      <div className="h-full flex flex-col bg-white p-0 m-0 relative">
+        {showInlineHeader && (
+          <div className="flex items-center justify-end gap-2 px-0 py-2 flex-shrink-0">
+            <ExportDropdown
+              onExportPdf={showExportPdf ? handleExportPdf : undefined}
+              onDownload={onDownload}
+              exportingPdf={exporting}
+            />
+            {!readOnly && onSaveLocal && (
+              <Button type="primary" icon={<SaveOutlined />} onClick={handleSaveLocal}>
+                保存
+              </Button>
+            )}
+          </div>
+        )}
+        
+        <div className="flex-1 overflow-y-auto h-full">
+          <SimpleMDE
+            key={editorKey}
+            value={content}
+            onChange={handleContentChange}
+            options={inlineEditorOptions}
+            getMdeInstance={getMdeInstance}
+          />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default MarkdownEditor;
+export { MarkdownEditor };