✨ Added markdown and mermaid preview

frontend/src/views/editor/extensions/markdownPreview/state.ts

@@ -0,0 +1,142 @@
+/**
+ * Markdown 预览面板的 CodeMirror 状态管理
+ */
+import { EditorView, showPanel, ViewUpdate, ViewPlugin } from "@codemirror/view";
+import { StateEffect, StateField } from "@codemirror/state";
+import { getActiveNoteBlock } from "../codeblock/state";
+import { usePanelStore } from "@/stores/panelStore";
+import { createPreviewPanel } from "./panel";
+import type { PreviewState } from "./types";
+
+/**
+ * 定义切换预览面板的 Effect
+ */
+export const togglePreview = StateEffect.define<PreviewState | null>();
+
+/**
+ * 关闭面板（带动画）
+ */
+export function closePreviewWithAnimation(view: EditorView): void {
+  const panelStore = usePanelStore();
+  
+  // 标记开始关闭
+  panelStore.startClosingMarkdownPreview();
+  
+  const panelElement = view.dom.querySelector('.cm-panels.cm-panels-bottom') as HTMLElement;
+  if (panelElement) {
+    panelElement.style.animation = 'panelSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+    // 等待动画完成后再关闭面板
+    setTimeout(() => {
+      view.dispatch({
+        effects: togglePreview.of(null)
+      });
+      panelStore.closeMarkdownPreview();
+    }, 280);
+  } else {
+    view.dispatch({
+      effects: togglePreview.of(null)
+    });
+    panelStore.closeMarkdownPreview();
+  }
+}
+
+/**
+ * 定义预览面板的状态字段
+ */
+export const previewPanelState = StateField.define<PreviewState | null>({
+  create: () => null,
+  update(value, tr) {
+    const panelStore = usePanelStore();
+    
+    for (let e of tr.effects) {
+      if (e.is(togglePreview)) {
+        value = e.value;
+      }
+    }
+    
+    // 如果有预览状态，智能管理预览生命周期
+    if (value && !value.closing) {
+      const activeBlock = getActiveNoteBlock(tr.state as any);
+      
+      // 关键修复：检查预览状态是否属于当前文档
+      // 如果 panelStore 中没有当前文档的预览状态（说明切换了文档），
+      // 则不执行关闭逻辑，保持其他文档的预览状态
+      if (!panelStore.markdownPreview.isOpen) {
+        // 当前文档没有预览，不处理
+        return value;
+      }
+      
+      // 场景1：离开 Markdown 块或无激活块 → 关闭预览
+      if (!activeBlock || activeBlock.language.name.toLowerCase() !== 'md') {
+        if (!panelStore.markdownPreview.isClosing) {
+          return { ...value, closing: true };
+        }
+      } 
+      // 场景2：切换到其他块（起始位置变化）→ 关闭预览
+      else if (activeBlock.content.from !== value.blockFrom) {
+        if (!panelStore.markdownPreview.isClosing) {
+          return { ...value, closing: true };
+        }
+      } 
+      // 场景3：还在同一个块内编辑（只有结束位置变化）→ 更新范围，实时预览
+      else if (activeBlock.content.to !== value.blockTo) {
+        // 更新 panelStore 中的预览范围
+        panelStore.updatePreviewRange(value.blockFrom, activeBlock.content.to);
+        
+        return {
+          documentId: value.documentId,
+          blockFrom: value.blockFrom,
+          blockTo: activeBlock.content.to,
+          closing: false
+        };
+      }
+    }
+    
+    return value;
+  },
+  provide: f => showPanel.from(f, state => state ? createPreviewPanel : null)
+});
+
+/**
+ * 创建监听插件
+ */
+export const previewPanelPlugin = ViewPlugin.fromClass(class {
+  private lastState: PreviewState | null | undefined = null;
+  private panelStore = usePanelStore();
+
+  constructor(private view: EditorView) {
+    this.lastState = view.state.field(previewPanelState, false);
+    this.panelStore.setEditorView(view);
+  }
+
+  update(update: ViewUpdate) {
+    const currentState = update.state.field(previewPanelState, false);
+    
+    // 检测到面板打开（从 null 变为有值，且不是 closing）
+    if (currentState && !currentState.closing && !this.lastState) {
+      // 验证面板 DOM 是否真正创建成功
+      requestAnimationFrame(() => {
+        const panelElement = this.view.dom.querySelector('.cm-markdown-preview-panel');
+        if (panelElement) {
+          // 面板创建成功，更新 store 状态
+          this.panelStore.openMarkdownPreview(currentState.blockFrom, currentState.blockTo);
+        }
+      });
+    }
+    
+    // 检测到状态变为 closing
+    if (currentState?.closing && !this.lastState?.closing) {
+      // 触发关闭动画
+      closePreviewWithAnimation(this.view);
+    }
+    
+    this.lastState = currentState;
+  }
+  
+  destroy() {
+    // 不调用 reset()，因为那会清空所有文档的预览状态
+    // 只清理编辑器视图引用
+    this.panelStore.setEditorView(null);
+  }
+});
+