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

package/src/features/PageEditor/store/action.ts

@@ -3,18 +3,15 @@ import debug from 'debug';
 import { debounce } from 'es-toolkit/compat';
 import { type StateCreator } from 'zustand';
 
-import { documentService } from '@/services/document';
+import { useDocumentStore } from '@/store/document';
 import { useFileStore } from '@/store/file';
-import { pageAgentRuntime } from '@/store/tool/slices/builtin/executors/lobe-page-agent';
-import { DocumentSourceType, type LobeDocument } from '@/types/document';
 
 import { type State, initialState } from './initialState';
 
 const log = debug('page:editor');
 
 export interface Action {
-  flushSave: () => void;
-  handleContentChange: () => void;
+  flushMetaSave: () => void;
   handleCopyLink: (t: (key: string) => string, message: any) => void;
   handleDelete: (
     t: (key: string) => string,
@@ -23,66 +20,48 @@ export interface Action {
     onDeleteCallback?: () => void,
   ) => Promise<void>;
   handleTitleSubmit: () => Promise<void>;
-  onEditorInit: () => void;
-  performSave: (options?: { force?: boolean }) => Promise<void>;
-  setCurrentEmoji: (emoji: string | undefined) => void;
-  setCurrentTitle: (title: string) => void;
+  initMeta: (title?: string, emoji?: string) => void;
+  performMetaSave: () => Promise<void>;
+  setEmoji: (emoji: string | undefined) => void;
+  setTitle: (title: string) => void;
+  triggerDebouncedMetaSave: () => void;
 }
 
 export type Store = State & Action;
 
-// Create debounced save function outside of store for reuse
-const createDebouncedSave = (get: () => Store) =>
-  debounce(
-    async () => {
-      try {
-        await get().performSave();
-      } catch (error) {
-        log('Failed to auto-save:', error);
-      }
-    },
-    EDITOR_DEBOUNCE_TIME,
-    { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
-  );
-
 export const store: (initState?: Partial<State>) => StateCreator<Store> =
   (initState) => (set, get) => {
-    const debouncedSave = createDebouncedSave(get);
+    // Debounced save function for meta (title/emoji)
+    let debouncedMetaSave: ReturnType<typeof debounce> | null = null;
+
+    const getOrCreateDebouncedMetaSave = () => {
+      if (!debouncedMetaSave) {
+        debouncedMetaSave = debounce(
+          async () => {
+            try {
+              await get().performMetaSave();
+            } catch (error) {
+              console.error('[PageEditor] Failed to auto-save meta:', error);
+            }
+          },
+          EDITOR_DEBOUNCE_TIME,
+          { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
+        );
+      }
+      return debouncedMetaSave;
+    };
 
     return {
       ...initialState,
       ...initState,
 
-      flushSave: () => {
-        debouncedSave.flush();
-      },
-
-      handleContentChange: () => {
-        const { editor, lastSavedContent } = get();
-        if (!editor) return;
-
-        try {
-          const textContent = (editor.getDocument('text') as unknown as string) || '';
-          const markdownContent = (editor.getDocument('markdown') as unknown as string) || '';
-          const wordCount = textContent.trim().split(/\s+/).filter(Boolean).length;
-
-          // Check if content actually changed
-          const contentChanged = markdownContent !== lastSavedContent;
-
-          set({ isDirty: contentChanged, wordCount });
-
-          // Only trigger auto-save if content actually changed
-          if (contentChanged) {
-            debouncedSave();
-          }
-        } catch (error) {
-          log('Failed to update content:', error);
-        }
+      flushMetaSave: () => {
+        debouncedMetaSave?.flush();
       },
 
       handleCopyLink: (t, message) => {
-        const { currentDocId } = get();
-        if (currentDocId) {
+        const { documentId } = get();
+        if (documentId) {
           const url = `${window.location.origin}${window.location.pathname}`;
           navigator.clipboard.writeText(url);
           message.success(t('pageEditor.linkCopied'));
@@ -90,8 +69,8 @@ export const store: (initState?: Partial<State>) => StateCreator<Store> =
       },
 
       handleDelete: async (t, message, modal, onDeleteCallback) => {
-        const { currentDocId } = get();
-        if (!currentDocId) return;
+        const { documentId } = get();
+        if (!documentId) return;
 
         return new Promise((resolve, reject) => {
           modal.confirm({
@@ -102,7 +81,7 @@ export const store: (initState?: Partial<State>) => StateCreator<Store> =
             onOk: async () => {
               try {
                 const { removeDocument } = useFileStore.getState();
-                await removeDocument(currentDocId);
+                await removeDocument(documentId);
                 message.success(t('pageEditor.deleteSuccess'));
                 onDeleteCallback?.();
                 resolve();
@@ -118,163 +97,92 @@ export const store: (initState?: Partial<State>) => StateCreator<Store> =
       },
 
       handleTitleSubmit: async () => {
-        const { performSave, editor } = get();
-        await performSave();
+        const { editor, flushMetaSave } = get();
+
+        // Flush pending save and focus editor
+        flushMetaSave();
         editor?.focus();
       },
 
-      onEditorInit: () => {
-        // Called when editor is initialized
-        const { editor, setCurrentTitle, currentTitle } = get();
-
-        if (editor) {
-          // Connect the editor instance to the page agent runtime
-          pageAgentRuntime.setEditor(editor);
-
-          // Set up title handlers for the runtime
-          pageAgentRuntime.setTitleHandlers(
-            (title: string) => setCurrentTitle(title),
-            () => currentTitle,
-          );
-
-          log('Connected editor to page agent runtime');
-        }
+      initMeta: (title, emoji) => {
+        set({
+          emoji,
+          isMetaDirty: false,
+          lastSavedEmoji: emoji,
+          lastSavedTitle: title,
+          metaSaveStatus: 'idle',
+          title,
+        });
       },
 
-      performSave: async (options) => {
+      performMetaSave: async () => {
         const {
-          editor,
-          currentDocId,
-          currentTitle,
-          currentEmoji,
-          knowledgeBaseId,
-          parentId,
-          onDocumentIdChange,
-          onSave,
-          isDirty,
+          documentId,
+          title,
+          emoji,
+          lastSavedTitle,
+          lastSavedEmoji,
+          isMetaDirty,
+          onTitleChange,
+          onEmojiChange,
         } = get();
 
-        if (!editor) return;
+        if (!documentId || !isMetaDirty) return;
 
-        // Skip save if no changes (unless force is true)
-        if (
-          !options?.force &&
-          !isDirty &&
-          currentDocId &&
-          !currentDocId.startsWith('temp-document-')
-        ) {
-          return;
-        }
-
-        set({ saveStatus: 'saving' });
+        set({ metaSaveStatus: 'saving' });
 
         try {
-          const editorElement = editor.getRootElement();
-          const hadFocus = editorElement?.contains(document.activeElement) ?? false;
-
-          const currentEditorData = editor.getDocument('json');
-          const currentContent = (editor.getDocument('markdown') as unknown as string) || '';
-
-          // Don't save if there's no content AND no title/emoji changes
-          if (!currentContent?.trim() && !currentTitle?.trim() && !currentEmoji) {
-            set({ saveStatus: 'idle' });
-            return;
-          }
-
-          const { updateDocumentOptimistically, replaceTempDocumentWithReal } =
-            useFileStore.getState();
-
-          if (currentDocId && !currentDocId.startsWith('temp-document-')) {
-            await updateDocumentOptimistically(currentDocId, {
-              content: currentContent,
-              editorData: structuredClone(currentEditorData),
-              metadata: currentEmoji ? { emoji: currentEmoji } : { emoji: undefined },
-              title: currentTitle,
-              updatedAt: new Date(),
-            });
-          } else {
-            const now = Date.now();
-            const timestamp = new Date(now).toLocaleString('en-US', {
-              day: '2-digit',
-              hour: '2-digit',
-              minute: '2-digit',
-              month: 'short',
-              year: 'numeric',
-            });
-            const finalTitle = currentTitle || `Page - ${timestamp}`;
-
-            const newPage = await documentService.createDocument({
-              content: currentContent,
-              editorData: JSON.stringify(currentEditorData),
-              fileType: 'custom/document',
-              knowledgeBaseId,
-              metadata: {
-                createdAt: now,
-                ...(currentEmoji ? { emoji: currentEmoji } : {}),
-              },
-              parentId,
-              title: finalTitle,
-            });
-
-            const realPage: LobeDocument = {
-              content: currentContent,
-              createdAt: new Date(now),
-              editorData: structuredClone(currentEditorData) || null,
-              fileType: 'custom/document' as const,
-              filename: finalTitle,
-              id: newPage.id,
-              metadata: {
-                createdAt: now,
-                ...(currentEmoji ? { emoji: currentEmoji } : {}),
-              },
-              source: 'document',
-              sourceType: DocumentSourceType.EDITOR,
-              title: finalTitle,
-              totalCharCount: currentContent.length,
-              totalLineCount: 0,
-              updatedAt: new Date(now),
-            };
-
-            if (currentDocId?.startsWith('temp-document-')) {
-              replaceTempDocumentWithReal(currentDocId, realPage);
-            }
-
-            set({ currentDocId: newPage.id });
-            onDocumentIdChange?.(newPage.id);
+          // Trigger save via DocumentStore with metadata
+          await useDocumentStore.getState().performSave(documentId, {
+            emoji,
+            title,
+          });
 
-            // Refetch resource list to show newly created page
-            const { revalidateResources } = await import('@/store/file/slices/resource/hooks');
-            await revalidateResources();
+          // Notify parent after successful save
+          if (title !== lastSavedTitle) {
+            onTitleChange?.(title || '');
           }
-
-          if (hadFocus) {
-            setTimeout(() => {
-              editor?.focus();
-            }, 0);
+          if (emoji !== lastSavedEmoji) {
+            onEmojiChange?.(emoji);
           }
 
-          // Mark as clean and update save status
           set({
-            isDirty: false,
-            lastSavedContent: currentContent,
-            lastUpdatedTime: new Date(),
-            saveStatus: 'saved',
+            isMetaDirty: false,
+            lastSavedEmoji: emoji,
+            lastSavedTitle: title,
+            metaSaveStatus: 'saved',
           });
-          onSave?.();
         } catch (error) {
-          log('Failed to save:', error);
-          set({ saveStatus: 'idle' });
+          console.error('[PageEditor] Failed to save meta:', error);
+          set({ metaSaveStatus: 'idle' });
+        }
+      },
+
+      setEmoji: (emoji: string | undefined) => {
+        const { lastSavedEmoji, triggerDebouncedMetaSave } = get();
+
+        const isDirty = emoji !== lastSavedEmoji;
+        set({ emoji, isMetaDirty: isDirty });
+
+        if (isDirty) {
+          triggerDebouncedMetaSave();
         }
       },
 
-      setCurrentEmoji: (emoji: string | undefined) => {
-        set({ currentEmoji: emoji, isDirty: true });
-        debouncedSave();
+      setTitle: (title: string) => {
+        const { lastSavedTitle, triggerDebouncedMetaSave } = get();
+
+        const isDirty = title !== lastSavedTitle;
+        set({ isMetaDirty: isDirty, title });
+
+        if (isDirty) {
+          triggerDebouncedMetaSave();
+        }
       },
 
-      setCurrentTitle: (title: string) => {
-        set({ currentTitle: title, isDirty: true });
-        debouncedSave();
+      triggerDebouncedMetaSave: () => {
+        const save = getOrCreateDebouncedMetaSave();
+        save();
       },
     };
   };

package/src/features/PageEditor/store/initialState.ts

@@ -1,40 +1,35 @@
 import { type IEditor } from '@lobehub/editor';
-import { type EditorState } from '@lobehub/editor/react';
+
+export type MetaSaveStatus = 'idle' | 'saving' | 'saved';
 
 export interface PublicState {
   autoSave?: boolean;
+  emoji?: string;
   knowledgeBaseId?: string;
   onBack?: () => void;
   onDelete?: () => void;
   onDocumentIdChange?: (newId: string) => void;
+  onEmojiChange?: (emoji: string | undefined) => void;
   onSave?: () => void;
-  pageId?: string;
+  onTitleChange?: (title: string) => void;
   parentId?: string;
+  title?: string;
 }
 
 export interface State extends PublicState {
-  currentDocId: string | undefined;
-  currentEmoji: string | undefined;
-  currentTitle: string;
+  documentId: string | undefined;
   editor?: IEditor;
-  editorState?: EditorState;
-  isDirty: boolean; // Track if there are unsaved changes
-  isLoadingContent: boolean; // Track if content is being loaded
-  lastSavedContent: string; // Last saved content hash for comparison
-  lastUpdatedTime: Date | null;
-  saveStatus: 'idle' | 'saving' | 'saved';
-  wordCount: number;
+  isMetaDirty?: boolean;
+  lastSavedEmoji?: string;
+  lastSavedTitle?: string;
+  metaSaveStatus?: MetaSaveStatus;
 }
 
 export const initialState: State = {
   autoSave: true,
-  currentDocId: undefined,
-  currentEmoji: undefined,
-  currentTitle: '',
-  isDirty: false,
-  isLoadingContent: false,
-  lastSavedContent: '',
-  lastUpdatedTime: null,
-  saveStatus: 'idle',
-  wordCount: 0,
+  documentId: undefined,
+  emoji: undefined,
+  isMetaDirty: false,
+  metaSaveStatus: 'idle',
+  title: undefined,
 };

package/src/features/PageEditor/store/selectors.ts

@@ -1,9 +1,8 @@
 import { type Store } from './action';
 
 export const selectors = {
-  currentDocId: (s: Store) => s.currentDocId,
-  currentTitle: (s: Store) => s.currentTitle,
+  documentId: (s: Store) => s.documentId,
   editor: (s: Store) => s.editor,
-  saveStatus: (s: Store) => s.saveStatus,
-  wordCount: (s: Store) => s.wordCount,
+  emoji: (s: Store) => s.emoji,
+  title: (s: Store) => s.title,
 };

package/src/features/PageExplorer/PageExplorerPlaceholder.tsx

@@ -12,6 +12,7 @@ import GuideVideo from '@/components/GuideVideo';
 import NavHeader from '@/features/NavHeader';
 import useNotionImport from '@/features/ResourceManager/components/Header/hooks/useNotionImport';
 import { useFileStore } from '@/store/file';
+import { usePageStore } from '@/store/page';
 import { DocumentSourceType } from '@/types/document';
 import { standardizeIdentifier } from '@/utils/identifier';
 
@@ -76,22 +77,25 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
   ({ hasPages = false, knowledgeBaseId }) => {
     const { t } = useTranslation(['file', 'common']);
     const [isUploading, setIsUploading] = useState(false);
+
+    // Page-specific operations from pageStore
     const [
       createNewPage,
-      createDocument,
-      createOptimisticDocument,
-      replaceTempDocumentWithReal,
+      createOptimisticPage,
+      replaceTempPageWithReal,
       setSelectedPageId,
       fetchDocuments,
-    ] = useFileStore((s) => [
+    ] = usePageStore((s) => [
       s.createNewPage,
-      s.createDocument,
-      s.createOptimisticDocument,
-      s.replaceTempDocumentWithReal,
+      s.createOptimisticPage,
+      s.replaceTempPageWithReal,
       s.setSelectedPageId,
       s.fetchDocuments,
     ]);
 
+    // File operations from FileStore (for uploads and notion import)
+    const [createDocument] = useFileStore((s) => [s.createDocument]);
+
     const notionImport = useNotionImport({
       createDocument,
       currentFolderId: null,
@@ -99,7 +103,7 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       refetchResources: async () => {
         const { revalidateResources } = await import('@/store/file/slices/resource/hooks');
         await revalidateResources();
-        await fetchDocuments({ pageOnly: true });
+        await fetchDocuments();
       },
       t,
     });
@@ -109,6 +113,10 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       event: React.ChangeEvent<HTMLInputElement>,
     ) => {
       await notionImport.handleNotionImport(event);
+      // Fetch documents to update the UI immediately
+      // The hook calls refreshFileList which invalidates SWR cache,
+      // but we need to explicitly fetch to update the zustand store
+      await fetchDocuments();
     };
 
     const handleCreateDocument = async (content: string, title: string) => {
@@ -119,7 +127,7 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
       }
 
       // For markdown uploads with content, use optimistic pattern similar to createNewPage
-      const tempPageId = createOptimisticDocument(title);
+      const tempPageId = createOptimisticPage(title);
       // Set selected page to temp ID immediately (with URL update disabled for temp IDs)
       setSelectedPageId(tempPageId, false);
 
@@ -151,13 +159,13 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
         };
 
         // Replace optimistic with real
-        replaceTempDocumentWithReal(tempPageId, realPage);
+        replaceTempPageWithReal(tempPageId, realPage);
         // Update selected page ID and URL to the real page
         setSelectedPageId(newDoc.id);
       } catch (error) {
         console.error('Failed to create page:', error);
         // Remove temp document on error
-        useFileStore.getState().removeTempDocument(tempPageId);
+        usePageStore.getState().removeTempPage(tempPageId);
         setSelectedPageId(null);
         throw error;
       }
@@ -179,7 +187,7 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
           const fileName = file.name.replace(/\.(pdf|docx)$/i, '');
 
           // Create optimistic document but don't select it yet
-          const tempPageId = createOptimisticDocument(fileName);
+          const tempPageId = createOptimisticPage(fileName);
 
           try {
             // Upload file to server
@@ -219,7 +227,7 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
             };
 
             // Replace optimistic with real document in the store
-            replaceTempDocumentWithReal(tempPageId, realPage);
+            replaceTempPageWithReal(tempPageId, realPage);
 
             // Update selected page ID in store (with full ID including prefix)
             setSelectedPageId(parsedDocument.id, false);
@@ -231,7 +239,7 @@ const PageExplorerPlaceholder = memo<PageExplorerPlaceholderProps>(
           } catch (error) {
             console.error('Failed to upload and parse file:', error);
             // Remove temp document on error
-            useFileStore.getState().removeTempDocument(tempPageId);
+            usePageStore.getState().removeTempPage(tempPageId);
             throw error;
           }
         }

package/src/features/PageExplorer/index.tsx

@@ -1,15 +1,12 @@
 'use client';
 
-import { memo, useEffect, useRef } from 'react';
+import { memo, useCallback } from 'react';
 
 import { PageEditor } from '@/features/PageEditor';
-import { useFileStore } from '@/store/file';
-
-import PageExplorerPlaceholder from './PageExplorerPlaceholder';
+import { pageSelectors, usePageStore } from '@/store/page';
 
 interface PageExplorerProps {
-  // Current opened page id
-  pageId?: string;
+  pageId: string;
 }
 
 /**
@@ -18,67 +15,37 @@ interface PageExplorerProps {
  * Work together with a sidebar src/app/[variants]/(main)/page/_layout/Body/index.tsx
  */
 const PageExplorer = memo<PageExplorerProps>(({ pageId }) => {
-  const [
-    selectedPageId,
-    setSelectedPageId,
-    pages,
-    fetchDocuments,
-    fetchDocumentDetail,
-    isDocumentListLoading,
-  ] = useFileStore((s) => [
-    s.selectedPageId,
-    s.setSelectedPageId,
-    s.getOptimisticDocuments(), // Call inside selector to subscribe to changes
-    s.fetchDocuments,
-    s.fetchDocumentDetail,
-    s.isDocumentListLoading,
-  ]);
-
-  // Track previous pageId to detect actual URL changes (start undefined to run on first load)
-  const prevPageIdRef = useRef<string | undefined>(undefined);
-
-  // Fetch documents on mount
-  useEffect(() => {
-    fetchDocuments({ pageOnly: true });
-  }, [fetchDocuments]);
-
-  // Check if pageId is valid (not undefined or "docs_undefined")
-  const isValidPageId = pageId && !pageId.includes('undefined');
-
-  // When pageId prop changes (from URL navigation), update selected page and fetch details
-  // Use ref to only sync when pageId actually changes, avoiding conflicts with sidebar selection
-  useEffect(() => {
-    if (isValidPageId && pageId !== prevPageIdRef.current) {
-      prevPageIdRef.current = pageId;
-      setSelectedPageId(pageId, false);
-      // Fetch the document detail to ensure it's loaded in the local map
-      fetchDocumentDetail(pageId);
-    } else if (!isValidPageId && prevPageIdRef.current !== undefined) {
-      // When navigating to /page without a doc id, clear the selection
-      prevPageIdRef.current = undefined;
-      setSelectedPageId(null, false);
-    }
-  }, [pageId, isValidPageId, setSelectedPageId, fetchDocumentDetail]);
-
-  // Prioritize selectedPageId from store for immediate updates when clicking from sidebar
-  // Only show placeholder when both selectedPageId is null AND pageId is invalid
-  const currentPageId = selectedPageId || (isValidPageId ? pageId : undefined);
-
-  // Check if the current page exists in the pages list
-  const currentPageExists = currentPageId && pages.some((page) => page.id === currentPageId);
-
-  // When we have a pageId from URL but document list is not yet loaded (empty list or still loading),
-  // proceed to show the editor instead of placeholder. The editor handles its own loading state.
-  // This prevents the placeholder flash on page refresh.
-  const isWaitingForDocuments = pages.length === 0 || isDocumentListLoading;
-  const shouldShowEditor =
-    currentPageId && (currentPageExists || (isValidPageId && isWaitingForDocuments));
-
-  if (!shouldShowEditor) {
-    return <PageExplorerPlaceholder hasPages={pages?.length > 0} />;
-  }
-
-  return <PageEditor pageId={currentPageId} />;
+  const updatePageOptimistically = usePageStore((s) => s.updatePageOptimistically);
+
+  // Get document title and emoji from PageStore
+  const document = usePageStore(pageSelectors.getDocumentById(pageId));
+  const title = document?.title;
+  const emoji = document?.metadata?.emoji as string | undefined;
+
+  // Optimistic update handlers for title and emoji
+  const handleTitleChange = useCallback(
+    (newTitle: string) => {
+      updatePageOptimistically(pageId, { title: newTitle });
+    },
+    [pageId, updatePageOptimistically],
+  );
+
+  const handleEmojiChange = useCallback(
+    (newEmoji: string | undefined) => {
+      updatePageOptimistically(pageId, { emoji: newEmoji });
+    },
+    [pageId, updatePageOptimistically],
+  );
+
+  return (
+    <PageEditor
+      emoji={emoji}
+      onEmojiChange={handleEmojiChange}
+      onTitleChange={handleTitleChange}
+      pageId={pageId}
+      title={title}
+    />
+  );
 });
 
 export default PageExplorer;

package/src/features/Portal/Artifacts/index.ts

@@ -1,10 +1,8 @@
 import { type PortalImpl } from '../type';
 import Body from './Body';
 import Title from './Title';
-import { useEnable } from './useEnable';
 
 export const Artifacts: PortalImpl = {
   Body,
   Title,
-  useEnable,
 };