@lobehub/lobehub 2.0.0-next.255 → 2.0.0-next.256

package/src/store/document/slices/editor/action.test.ts

@@ -0,0 +1,340 @@
+import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { useDocumentStore } from '../../store';
+
+// Mock services
+vi.mock('@/services/document', () => ({
+  documentService: {
+    updateDocument: vi.fn().mockResolvedValue({}),
+  },
+}));
+
+vi.mock('@/services/notebook', () => ({
+  notebookService: {
+    updateDocument: vi.fn().mockResolvedValue({}),
+  },
+}));
+
+// Create mock editor
+const createMockEditor = () => ({
+  getDocument: vi.fn((type: string) => {
+    if (type === 'markdown') return '# Test';
+    if (type === 'json') return { type: 'doc' };
+    return null;
+  }),
+  setDocument: vi.fn(),
+});
+
+describe('DocumentStore - Editor Actions', () => {
+  beforeEach(() => {
+    // Reset store state before each test
+    const { result } = renderHook(() => useDocumentStore());
+    act(() => {
+      // Clear all documents and reset editor
+      const state = result.current;
+      Object.keys(state.documents).forEach((id) => {
+        state.closeDocument(id);
+      });
+      state.setEditorState(undefined);
+    });
+    // Reset editor separately (store internal state)
+    useDocumentStore.setState({ editor: undefined });
+  });
+
+  describe('initDocumentWithEditor', () => {
+    it('should store document state without loading into editor', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          content: '# Hello World',
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+      });
+
+      // Should store state
+      expect(result.current.activeDocumentId).toBe('doc-1');
+      expect(result.current.documents['doc-1']).toMatchObject({
+        content: '# Hello World',
+        isDirty: false,
+        sourceType: 'notebook',
+        topicId: 'topic-1',
+      });
+      // Should NOT call setDocument - that happens in onEditorInit
+      expect(mockEditor.setDocument).not.toHaveBeenCalled();
+    });
+
+    it('should init a new page document', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          content: 'Page content',
+          documentId: 'page-1',
+          editor: mockEditor,
+          sourceType: 'page',
+        });
+      });
+
+      expect(result.current.activeDocumentId).toBe('page-1');
+      expect(result.current.documents['page-1']).toMatchObject({
+        content: 'Page content',
+        sourceType: 'page',
+      });
+    });
+
+    it('should update existing document when init with same ID', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          content: 'Original content',
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+      });
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          content: 'Updated content',
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+      });
+
+      expect(result.current.documents['doc-1'].content).toBe('Updated content');
+    });
+
+    it('should store editorData in state', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+      const editorData = { type: 'doc', content: [] };
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          editorData,
+          sourceType: 'page',
+        });
+      });
+
+      expect(result.current.documents['doc-1'].editorData).toEqual(editorData);
+      // Should NOT call setDocument - that happens in onEditorInit
+      expect(mockEditor.setDocument).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('onEditorInit', () => {
+    it('should load markdown content into editor', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      // First init document with content
+      act(() => {
+        result.current.initDocumentWithEditor({
+          content: '# Hello World',
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+        });
+      });
+
+      // Then call onEditorInit
+      act(() => {
+        result.current.onEditorInit(mockEditor);
+      });
+
+      expect(mockEditor.setDocument).toHaveBeenCalledWith('markdown', '# Hello World');
+    });
+
+    it('should load editorData as json into editor', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+      const editorData = { type: 'doc', content: [] };
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          editorData,
+          sourceType: 'page',
+        });
+      });
+
+      act(() => {
+        result.current.onEditorInit(mockEditor);
+      });
+
+      expect(mockEditor.setDocument).toHaveBeenCalledWith('json', JSON.stringify(editorData));
+    });
+
+    it('should set empty placeholder when no content', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'page',
+        });
+      });
+
+      act(() => {
+        result.current.onEditorInit(mockEditor);
+      });
+
+      expect(mockEditor.setDocument).toHaveBeenCalledWith('markdown', ' ');
+    });
+  });
+
+  describe('closeDocument', () => {
+    it('should close a document and remove it from state', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+      });
+
+      expect(result.current.documents['doc-1']).toBeDefined();
+
+      act(() => {
+        result.current.closeDocument('doc-1');
+      });
+
+      expect(result.current.documents['doc-1']).toBeUndefined();
+      expect(result.current.activeDocumentId).toBeUndefined();
+    });
+
+    it('should not affect other documents when closing one', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-2',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-2',
+        });
+      });
+
+      act(() => {
+        result.current.closeDocument('doc-1');
+      });
+
+      expect(result.current.documents['doc-1']).toBeUndefined();
+      expect(result.current.documents['doc-2']).toBeDefined();
+    });
+  });
+
+  describe('markDirty', () => {
+    it('should mark document as dirty', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = createMockEditor() as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'notebook',
+          topicId: 'topic-1',
+        });
+      });
+
+      expect(result.current.documents['doc-1'].isDirty).toBe(false);
+
+      act(() => {
+        result.current.markDirty('doc-1');
+      });
+
+      expect(result.current.documents['doc-1'].isDirty).toBe(true);
+    });
+  });
+
+  describe('setEditorState', () => {
+    it('should set editor state', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditorState = { isBold: true } as any;
+
+      act(() => {
+        result.current.setEditorState(mockEditorState);
+      });
+
+      expect(result.current.editorState).toBe(mockEditorState);
+    });
+  });
+
+  describe('getEditorContent', () => {
+    it('should return null when no editor', () => {
+      const { result } = renderHook(() => useDocumentStore());
+
+      const content = result.current.getEditorContent();
+
+      expect(content).toBeNull();
+    });
+
+    it('should return content from editor', () => {
+      const { result } = renderHook(() => useDocumentStore());
+      const mockEditor = {
+        getDocument: vi.fn((type: string) => {
+          if (type === 'markdown') return '# Test';
+          if (type === 'json') return { type: 'doc' };
+          return null;
+        }),
+        setDocument: vi.fn(),
+      } as any;
+
+      act(() => {
+        result.current.initDocumentWithEditor({
+          documentId: 'doc-1',
+          editor: mockEditor,
+          sourceType: 'page',
+        });
+      });
+
+      const content = result.current.getEditorContent();
+
+      expect(content).toEqual({
+        editorData: { type: 'doc' },
+        markdown: '# Test',
+      });
+    });
+  });
+
+  describe('flushSave', () => {
+    it('should not throw when no active document', () => {
+      const { result } = renderHook(() => useDocumentStore());
+
+      expect(() => {
+        act(() => {
+          result.current.flushSave();
+        });
+      }).not.toThrow();
+    });
+  });
+});

package/src/store/document/slices/editor/action.ts

@@ -1,230 +1,214 @@
-import { EDITOR_DEBOUNCE_TIME, EDITOR_MAX_WAIT } from '@lobechat/const';
-import { type IEditor } from '@lobehub/editor';
-import { debounce } from 'es-toolkit/compat';
+'use client';
+
+import type { IEditor } from '@lobehub/editor/es/types';
+import { type EditorState as LobehubEditorState } from '@lobehub/editor/react';
+import isEqual from 'fast-deep-equal';
 import { type StateCreator } from 'zustand/vanilla';
 
+import { documentService } from '@/services/document';
 import { setNamespace } from '@/utils/storeDebug';
 
 import type { DocumentStore } from '../../store';
+import { type DocumentDispatch, documentReducer } from './reducer';
 
 const n = setNamespace('document/editor');
 
+/**
+ * Metadata passed in at save time (not stored in editor state)
+ */
+export interface SaveMetadata {
+  emoji?: string;
+  title?: string;
+}
+
 export interface EditorAction {
   /**
-   * Close the current document
-   */
-  closeDocument: () => void;
-  /**
-   * Flush any pending debounced save
+   * Get current content from editor
    */
-  flushSave: () => void;
+  getEditorContent: () => { editorData: any; markdown: string } | null;
   /**
    * Handle content change from editor
    */
   handleContentChange: () => void;
   /**
-   * Called when editor is initialized
-   */
-  onEditorInit: () => void;
-  /**
-   * Open a document for editing
+   * Dispatch action to update documents map
    */
-  openDocument: (params: {
-    content: string;
-    documentId: string;
-    title: string;
-    topicId: string;
-  }) => void;
+  internal_dispatchDocument: (payload: DocumentDispatch, action?: string) => void;
   /**
-   * Perform save operation
+   * Mark a document as dirty
    */
-  performSave: () => Promise<void>;
+  markDirty: (documentId: string) => void;
   /**
-   * Set editor instance
-   */
-  setEditor: (editor: IEditor | undefined) => void;
-  /**
-   * Set editor state
+   * Called when editor is initialized
    */
-  setEditorState: (editorState: any) => void;
+  onEditorInit: (editor: IEditor) => Promise<void>;
   /**
-   * Set edit mode
+   * Perform save operation for a document
+   * @param documentId - Document ID (defaults to active document)
+   * @param metadata - Document metadata (title, emoji) passed from caller
    */
-  setMode: (mode: 'edit' | 'preview') => void;
+  performSave: (documentId?: string, metadata?: SaveMetadata) => Promise<void>;
   /**
-   * Update document title
+   * Set editor state from useEditorState hook
    */
-  setTitle: (title: string) => void;
+  setEditorState: (editorState: LobehubEditorState | undefined) => void;
 }
 
-// Create debounced save outside store
-let debouncedSave: ReturnType<typeof debounce> | null = null;
-
-const createDebouncedSave = (get: () => DocumentStore) => {
-  if (debouncedSave) return debouncedSave;
-
-  debouncedSave = debounce(
-    async () => {
-      try {
-        await get().performSave();
-      } catch (error) {
-        console.error('[DocumentEditor] Failed to auto-save:', error);
-      }
-    },
-    EDITOR_DEBOUNCE_TIME,
-    { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
-  );
-
-  return debouncedSave;
-};
-
 export const createEditorSlice: StateCreator<
   DocumentStore,
   [['zustand/devtools', never]],
   [],
   EditorAction
 > = (set, get) => ({
-  closeDocument: () => {
-    // Flush any pending saves before closing
-    const save = createDebouncedSave(get);
-    save.flush();
-
-    set(
-      {
-        activeContent: '',
-        activeDocumentId: undefined,
-        activeTopicId: undefined,
-        isDirty: false,
-        lastSavedContent: '',
-        lastUpdatedTime: null,
-        mode: 'edit',
-        saveStatus: 'idle',
-        title: '',
-      },
-      false,
-      n('closeDocument'),
-    );
-  },
+  getEditorContent: () => {
+    const { editor } = get();
+    if (!editor) return null;
 
-  flushSave: () => {
-    const save = createDebouncedSave(get);
-    save.flush();
+    try {
+      const markdown = (editor.getDocument('markdown') as unknown as string) || '';
+      const editorData = editor.getDocument('json');
+      return { editorData, markdown };
+    } catch (error) {
+      console.error('[DocumentStore] Failed to get editor content:', error);
+      return null;
+    }
   },
 
   handleContentChange: () => {
-    const { editor, lastSavedContent } = get();
-    if (!editor) return;
+    const { editor, activeDocumentId, documents, internal_dispatchDocument } = get();
+    if (!editor || !activeDocumentId) return;
+
+    const doc = documents[activeDocumentId];
+    if (!doc) return;
 
     try {
-      const markdownContent = (editor.getDocument('markdown') as unknown as string) || '';
+      const markdown = (editor.getDocument('markdown') as unknown as string) || '';
+      const editorData = editor.getDocument('json');
 
       // Check if content actually changed
-      const contentChanged = markdownContent !== lastSavedContent;
+      const contentChanged = markdown !== doc.lastSavedContent;
 
-      set(
-        { activeContent: markdownContent, isDirty: contentChanged },
-        false,
-        n('handleContentChange'),
+      internal_dispatchDocument(
+        {
+          id: activeDocumentId,
+          type: 'updateDocument',
+          value: { content: markdown, editorData, isDirty: contentChanged },
+        },
+        'handleContentChange',
       );
 
-      // Only trigger auto-save if content actually changed
-      if (contentChanged) {
-        const save = createDebouncedSave(get);
-        save();
+      // Only trigger auto-save if content actually changed AND autoSave is enabled
+      if (contentChanged && doc.autoSave !== false) {
+        get().triggerDebouncedSave(activeDocumentId);
       }
     } catch (error) {
-      console.error('[DocumentEditor] Failed to update content:', error);
+      console.error('[DocumentStore] Failed to update content:', error);
     }
   },
 
-  onEditorInit: () => {
-    const { editor, activeContent } = get();
+  internal_dispatchDocument: (payload, action) => {
+    const { documents } = get();
+    const nextDocuments = documentReducer(documents, payload);
 
-    if (editor && activeContent) {
-      // Set initial content when editor is ready
-      editor.setDocument('markdown', activeContent);
-    }
-  },
-
-  openDocument: ({ content, documentId, title, topicId }) => {
-    const { editor } = get();
+    if (isEqual(documents, nextDocuments)) return;
 
     set(
-      {
-        activeContent: content,
-        activeDocumentId: documentId,
-        activeTopicId: topicId,
-        isDirty: false,
-        lastSavedContent: content,
-        mode: 'edit',
-        saveStatus: 'idle',
-        title,
-      },
+      { documents: nextDocuments },
       false,
-      n('openDocument', { documentId, topicId }),
+      action ?? n(`dispatchDocument/${payload.type}`, { id: payload.id }),
     );
+  },
+
+  markDirty: (documentId) => {
+    const { documents, internal_dispatchDocument } = get();
+    if (!documents[documentId]) return;
+
+    internal_dispatchDocument({ id: documentId, type: 'updateDocument', value: { isDirty: true } });
+  },
+
+  onEditorInit: async (editor) => {
+    const { activeDocumentId, documents } = get();
+    if (!editor || !activeDocumentId) return;
+
+    const doc = documents[activeDocumentId];
+
+    if (!doc) return;
+
+    // Check if editorData is valid and non-empty
+    const hasValidEditorData =
+      doc.editorData &&
+      typeof doc.editorData === 'object' &&
+      Object.keys(doc.editorData).length > 0;
+
+    // Set content from document state
+    if (hasValidEditorData) {
+      try {
+        editor.setDocument('json', JSON.stringify(doc.editorData));
+        return;
+      } catch {
+        // Fallback to markdown if JSON fails
+        console.warn('[DocumentStore] Failed to load editorData, falling back to markdown');
+      }
+    }
 
-    // Set editor content if editor exists
-    if (editor && content) {
-      editor.setDocument('markdown', content);
+    // Load markdown content or set empty placeholder
+    const mdContent = doc.content?.trim() ? doc.content : ' ';
+    try {
+      editor.setDocument('markdown', mdContent);
+    } catch (err) {
+      console.error('[DocumentStore] Failed to load markdown content:', err);
     }
+
+    set({ editor });
   },
 
-  performSave: async () => {
-    const { editor, activeDocumentId, title, activeTopicId, isDirty, updateDocument } = get();
+  performSave: async (documentId, metadata) => {
+    const id = documentId || get().activeDocumentId;
 
-    if (!editor || !activeDocumentId || !activeTopicId) return;
+    if (!id) return;
+
+    const { editor, documents, internal_dispatchDocument } = get();
+    const doc = documents[id];
+    if (!doc || !editor) return;
 
     // Skip save if no changes
-    if (!isDirty) return;
+    if (!doc.isDirty) return;
 
-    set({ saveStatus: 'saving' }, false, n('performSave:start'));
+    // Update save status
+    internal_dispatchDocument({ id, type: 'updateDocument', value: { saveStatus: 'saving' } });
 
     try {
       const currentContent = (editor.getDocument('markdown') as unknown as string) || '';
+      const currentEditorData = editor.getDocument('json');
 
-      // Update document via notebook slice
-      await updateDocument(
-        {
-          content: currentContent,
-          id: activeDocumentId,
-          title,
-        },
-        activeTopicId,
-      );
+      // Save document
+      await documentService.updateDocument({
+        content: currentContent,
+        editorData: JSON.stringify(currentEditorData),
+        id,
+        metadata: metadata?.emoji ? { emoji: metadata.emoji } : undefined,
+        title: metadata?.title,
+      });
 
       // Mark as clean and update save status
-      set(
-        {
+      internal_dispatchDocument({
+        id,
+        type: 'updateDocument',
+        value: {
+          editorData: structuredClone(currentEditorData),
           isDirty: false,
           lastSavedContent: currentContent,
           lastUpdatedTime: new Date(),
           saveStatus: 'saved',
         },
-        false,
-        n('performSave:success'),
-      );
+      });
     } catch (error) {
-      console.error('[DocumentEditor] Failed to save:', error);
-      set({ saveStatus: 'idle' }, false, n('performSave:error'));
+      console.error('[DocumentStore] Failed to save:', error);
+      internal_dispatchDocument({ id, type: 'updateDocument', value: { saveStatus: 'idle' } });
     }
   },
 
-  setEditor: (editor) => {
-    set({ editor }, false, n('setEditor'));
-  },
-
   setEditorState: (editorState) => {
     set({ editorState }, false, n('setEditorState'));
   },
-
-  setMode: (mode) => {
-    set({ mode }, false, n('setMode', { mode }));
-  },
-
-  setTitle: (title) => {
-    set({ isDirty: true, title }, false, n('setTitle'));
-    const save = createDebouncedSave(get);
-    save();
-  },
 });