✨ Add extension management service

frontend/src/views/editor/basic/autoSaveExtension.ts

@@ -0,0 +1,98 @@
+import { EditorView, ViewPlugin, ViewUpdate } from '@codemirror/view';
+import { DocumentService } from '@/../bindings/voidraft/internal/services';
+import { useDebounceFn } from '@vueuse/core';
+
+// 定义自动保存配置选项
+export interface AutoSaveOptions {
+  // 保存回调
+  onSave?: (success: boolean) => void;
+  // 内容变更延迟传递（毫秒）- 输入时不会立即发送，有一个小延迟，避免频繁调用后端
+  debounceDelay?: number;
+}
+
+/**
+ * 创建自动保存插件
+ * 
+ * @param options 配置选项
+ * @returns EditorView.Plugin
+ */
+export function createAutoSavePlugin(options: AutoSaveOptions = {}) {
+  const { 
+    onSave = () => {},
+    debounceDelay = 2000
+  } = options;
+
+  return ViewPlugin.fromClass(
+    class {
+      private isActive: boolean = true;
+      private isSaving: boolean = false;
+      private readonly contentUpdateFn: (view: EditorView) => void;
+
+      constructor(private view: EditorView) {
+        // 创建内容更新函数，简单传递内容给后端
+        this.contentUpdateFn = this.createDebouncedUpdateFn(debounceDelay);
+      }
+
+      /**
+       * 创建防抖的内容更新函数
+       */
+      private createDebouncedUpdateFn(delay: number): (view: EditorView) => void {
+        // 使用VueUse的防抖函数创建一个新函数
+        return useDebounceFn(async (view: EditorView) => {
+          // 如果插件已不活跃或正在保存中，不发送
+          if (!this.isActive || this.isSaving) return;
+          
+          this.isSaving = true;
+          const content = view.state.doc.toString();
+          
+          try {
+            // 简单将内容传递给后端，让后端处理保存策略
+            await DocumentService.UpdateActiveDocumentContent(content);
+            onSave(true);
+          } catch (err) {
+            // 静默处理错误，不在控制台打印
+            onSave(false);
+          } finally {
+            this.isSaving = false;
+          }
+        }, delay);
+      }
+
+      update(update: ViewUpdate) {
+        // 如果内容没有变化，直接返回
+        if (!update.docChanged) return;
+
+        // 调用防抖函数
+        this.contentUpdateFn(this.view);
+      }
+
+      destroy() {
+        // 标记插件不再活跃
+        this.isActive = false;
+        
+        // 静默发送最终内容，忽略错误
+        const content = this.view.state.doc.toString();
+        DocumentService.UpdateActiveDocumentContent(content).then();
+      }
+    }
+  );
+}
+
+/**
+ * 创建处理保存快捷键的插件
+ * @param onSave 保存回调
+ * @returns EditorView.Plugin
+ */
+export function createSaveShortcutPlugin(onSave: () => void) {
+  return EditorView.domEventHandlers({
+    keydown: (event) => {
+      // Ctrl+S / Cmd+S
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        event.preventDefault();
+        onSave();
+        return true;
+      }
+      return false;
+    }
+  });
+}

frontend/src/views/editor/basic/basicSetup.ts

@@ -0,0 +1,61 @@
+import {Extension} from '@codemirror/state';
+import {
+    crosshairCursor,
+    drawSelection,
+    dropCursor,
+    EditorView,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    highlightSpecialChars,
+    keymap,
+    lineNumbers,
+    rectangularSelection,
+} from '@codemirror/view';
+import {
+    bracketMatching,
+    defaultHighlightStyle,
+    foldGutter,
+    indentOnInput,
+    syntaxHighlighting,
+} from '@codemirror/language';
+import {history} from '@codemirror/commands';
+import {highlightSelectionMatches} from '@codemirror/search';
+import {autocompletion, closeBrackets, closeBracketsKeymap} from '@codemirror/autocomplete';
+// 基本编辑器设置
+export const createBasicSetup = (): Extension[] => {
+    return [
+        // 基础UI
+        lineNumbers(),
+        highlightActiveLineGutter(),
+        highlightSpecialChars(),
+        dropCursor(),
+        EditorView.lineWrapping,
+
+        // 历史记录
+        history(),
+
+        // 代码折叠
+        foldGutter(),
+
+        // 选择与高亮
+        drawSelection(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        rectangularSelection(),
+        crosshairCursor(),
+
+        // 缩进和编辑辅助
+        indentOnInput(),
+        syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+        bracketMatching(),
+        closeBrackets(),
+
+        // 自动完成
+        autocompletion(),
+
+        // 键盘映射
+        keymap.of([
+            ...closeBracketsKeymap,
+        ]),
+    ];
+};

frontend/src/views/editor/basic/fontExtension.ts

@@ -0,0 +1,103 @@
+import { EditorView } from '@codemirror/view';
+import { Extension, Compartment } from '@codemirror/state';
+
+// 字体配置接口
+export interface FontConfig {
+  fontFamily: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}
+
+// 创建字体配置compartment
+export const fontCompartment = new Compartment();
+
+// 默认字体配置
+export const DEFAULT_FONT_CONFIG: FontConfig = {
+  fontFamily: '"HarmonyOS Sans SC", "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif',
+  fontSize: 14,
+  lineHeight: 1.5,
+  fontWeight: 'normal'
+};
+
+// 从后端配置创建字体配置
+export function createFontConfigFromBackend(backendConfig: {
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}): FontConfig {
+  return {
+    fontFamily: backendConfig.fontFamily || DEFAULT_FONT_CONFIG.fontFamily,
+    fontSize: backendConfig.fontSize || DEFAULT_FONT_CONFIG.fontSize,
+    lineHeight: backendConfig.lineHeight || DEFAULT_FONT_CONFIG.lineHeight,
+    fontWeight: backendConfig.fontWeight || DEFAULT_FONT_CONFIG.fontWeight,
+  };
+}
+
+// 创建字体样式扩展
+export function createFontExtension(config: Partial<FontConfig> = {}): Extension {
+  const fontConfig = { ...DEFAULT_FONT_CONFIG, ...config };
+  
+  const styles: Record<string, any> = {
+    '&': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+      ...(fontConfig.lineHeight && { lineHeight: fontConfig.lineHeight.toString() }),
+      ...(fontConfig.fontWeight && { fontWeight: fontConfig.fontWeight }),
+    },
+    '.cm-content': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+      ...(fontConfig.lineHeight && { lineHeight: fontConfig.lineHeight.toString() }),
+      ...(fontConfig.fontWeight && { fontWeight: fontConfig.fontWeight }),
+    },
+    '.cm-editor': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-scroller': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-gutters': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${fontConfig.fontSize}px` }),
+    },
+    '.cm-lineNumbers': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${Math.max(10, fontConfig.fontSize - 1)}px` }),
+    },
+    '.cm-tooltip': {
+      fontFamily: fontConfig.fontFamily,
+      ...(fontConfig.fontSize && { fontSize: `${Math.max(12, fontConfig.fontSize - 1)}px` }),
+    },
+    '.cm-completionLabel': {
+      fontFamily: fontConfig.fontFamily,
+    },
+    '.cm-completionDetail': {
+      fontFamily: fontConfig.fontFamily,
+    }
+  };
+  
+  return EditorView.theme(styles);
+}
+
+// 从后端配置创建字体扩展
+export function createFontExtensionFromBackend(backendConfig: {
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  fontWeight?: string;
+}): Extension {
+  const fontConfig = createFontConfigFromBackend(backendConfig);
+  return fontCompartment.of(createFontExtension(fontConfig));
+}
+
+// 动态更新字体配置
+export function updateFontConfig(view: EditorView, config: Partial<FontConfig>): void {
+  const newFontExtension = createFontExtension(config);
+  
+  // 使用compartment重新配置字体扩展
+  view.dispatch({
+    effects: fontCompartment.reconfigure(newFontExtension)
+  });
+} 

frontend/src/views/editor/basic/statsExtension.ts

@@ -0,0 +1,65 @@
+import {Extension} from '@codemirror/state';
+import {EditorView} from '@codemirror/view';
+import {DocumentStats} from '@/stores/editorStore';
+import {getActiveNoteBlock} from '@/views/editor/extensions/codeblock/state';
+
+// 更新编辑器文档统计信息
+export const updateStats = (
+  view: EditorView, 
+  updateDocumentStats: (stats: DocumentStats) => void
+) => {
+  if (!view) return;
+  
+  const state = view.state;
+  
+  // 获取当前光标所在的代码块
+  const activeBlock = getActiveNoteBlock(state as any);
+  
+  if (!activeBlock) {
+    // 如果没有活动块，显示空统计
+    updateDocumentStats({
+      lines: 0,
+      characters: 0,
+      selectedCharacters: 0
+    });
+    return;
+  }
+  
+  // 获取当前块的内容范围
+  const blockContent = state.doc.sliceString(activeBlock.content.from, activeBlock.content.to);
+  
+  // 计算块内容的行数
+  const blockLines = blockContent.split('\n').length;
+  
+  // 计算选中的字符数（只统计在当前块内的选中内容）
+  let selectedChars = 0;
+  const selections = state.selection;
+  if (selections) {
+    for (let i = 0; i < selections.ranges.length; i++) {
+      const range = selections.ranges[i];
+      // 计算选中范围与当前块内容范围的交集
+      const selectionStart = Math.max(range.from, activeBlock.content.from);
+      const selectionEnd = Math.min(range.to, activeBlock.content.to);
+      if (selectionStart < selectionEnd) {
+        selectedChars += selectionEnd - selectionStart;
+      }
+    }
+  }
+  
+  updateDocumentStats({
+    lines: blockLines,
+    characters: blockContent.length,
+    selectedCharacters: selectedChars
+  });
+};
+
+// 创建统计信息更新监听器扩展
+export const createStatsUpdateExtension = (
+  updateDocumentStats: (stats: DocumentStats) => void
+): Extension => {
+  return EditorView.updateListener.of(update => {
+    if (update.docChanged || update.selectionSet) {
+      updateStats(update.view, updateDocumentStats);
+    }
+  });
+}; 

frontend/src/views/editor/basic/tabExtension.ts

@@ -0,0 +1,78 @@
+import {Compartment, Extension} from '@codemirror/state';
+import {EditorView, keymap} from '@codemirror/view';
+import {indentSelection} from '@codemirror/commands';
+import {indentUnit} from '@codemirror/language';
+import {TabType} from '@/../bindings/voidraft/internal/models/models';
+
+// Tab设置相关的compartment
+export const tabSizeCompartment = new Compartment();
+export const tabKeyCompartment = new Compartment();
+
+// 自定义Tab键处理函数
+export const tabHandler = (view: EditorView, tabSize: number, tabType: TabType): boolean => {
+  // 如果有选中文本，使用indentSelection
+  if (!view.state.selection.main.empty) {
+    return indentSelection(view);
+  }
+  
+  // 根据tabType创建缩进字符
+  const indent = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  
+  // 在光标位置插入缩进字符
+  const {state, dispatch} = view;
+  dispatch(state.update(state.replaceSelection(indent), {scrollIntoView: true}));
+  return true;
+};
+
+// 获取Tab相关的扩展
+export const getTabExtensions = (tabSize: number, enableTabIndent: boolean, tabType: TabType): Extension[] => {
+  const extensions: Extension[] = [];
+  
+  // 根据tabType设置缩进单位
+  const indentStr = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  extensions.push(tabSizeCompartment.of(indentUnit.of(indentStr)));
+  
+  // 如果启用了Tab缩进，添加自定义Tab键映射
+  if (enableTabIndent) {
+    extensions.push(
+      tabKeyCompartment.of(
+        keymap.of([{
+          key: "Tab",
+          run: (view) => tabHandler(view, tabSize, tabType)
+        }])
+      )
+    );
+  } else {
+    extensions.push(tabKeyCompartment.of([]));
+  }
+  
+  return extensions;
+};
+
+// 更新Tab配置
+export const updateTabConfig = (
+  view: EditorView | null,
+  tabSize: number, 
+  enableTabIndent: boolean,
+  tabType: TabType
+) => {
+  if (!view) return;
+  
+  // 根据tabType更新indentUnit配置
+  const indentStr = tabType === 'spaces' ? ' '.repeat(tabSize) : '\t';
+  view.dispatch({
+    effects: tabSizeCompartment.reconfigure(indentUnit.of(indentStr))
+  });
+  
+  // 更新Tab键映射
+  const tabKeymap = enableTabIndent
+    ? keymap.of([{
+        key: "Tab", 
+        run: (view) => tabHandler(view, tabSize, tabType)
+      }])
+    : [];
+  
+  view.dispatch({
+    effects: tabKeyCompartment.reconfigure(tabKeymap)
+  });
+}; 

frontend/src/views/editor/basic/themeExtension.ts

@@ -0,0 +1,53 @@
+import { Extension, Compartment } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { SystemThemeType } from '@/../bindings/voidraft/internal/models/models';
+import { dark } from '@/views/editor/theme/dark';
+import { light } from '@/views/editor/theme/light';
+
+// 主题区间 - 用于动态切换主题
+export const themeCompartment = new Compartment();
+
+/**
+ * 根据主题类型获取主题扩展
+ */
+const getThemeExtension = (themeType: SystemThemeType): Extension => {
+  // 处理 auto 主题类型
+  let actualTheme: SystemThemeType = themeType;
+  if (themeType === SystemThemeType.SystemThemeAuto) {
+    actualTheme = window.matchMedia('(prefers-color-scheme: dark)').matches 
+      ? SystemThemeType.SystemThemeDark 
+      : SystemThemeType.SystemThemeLight;
+  }
+
+  // 直接返回对应的主题扩展
+  switch (actualTheme) {
+    case SystemThemeType.SystemThemeLight:
+      return light;
+    case SystemThemeType.SystemThemeDark:
+    default:
+      return dark;
+  }
+};
+
+/**
+ * 创建主题扩展（用于编辑器初始化）
+ */
+export const createThemeExtension = (themeType: SystemThemeType = SystemThemeType.SystemThemeDark): Extension => {
+  const extension = getThemeExtension(themeType);
+  return themeCompartment.of(extension);
+};
+
+/**
+ * 更新编辑器主题
+ */
+export const updateEditorTheme = (view: EditorView, themeType: SystemThemeType): void => {
+  if (!view?.dispatch) {
+    return;
+  }
+
+  const extension = getThemeExtension(themeType);
+  view.dispatch({
+    effects: themeCompartment.reconfigure(extension)
+  });
+};
+

frontend/src/views/editor/basic/wheelZoomExtension.ts

@@ -0,0 +1,22 @@
+// 处理滚轮缩放字体的事件处理函数
+export const createWheelZoomHandler = (
+  increaseFontSize: () => void,
+  decreaseFontSize: () => void
+) => {
+  return (event: WheelEvent) => {
+    // 检查是否按住了Ctrl键
+    if (event.ctrlKey) {
+      // 阻止默认行为（防止页面缩放）
+      event.preventDefault();
+      
+      // 根据滚轮方向增大或减小字体
+      if (event.deltaY < 0) {
+        // 向上滚动，增大字体
+        increaseFontSize();
+      } else {
+        // 向下滚动，减小字体
+        decreaseFontSize();
+      }
+    }
+  };
+};