npm - @lobehub/lobehub - Versions diffs - 2.0.0-next.255 → 2.0.0-next.257 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (144) hide show

package/src/features/PageEditor/PageEditor.tsx CHANGED Viewed

@@ -1,43 +1,54 @@
 'use client';
 import { BUILTIN_AGENT_SLUGS } from '@lobechat/builtin-agents';
+import { EditorProvider } from '@lobehub/editor/react';
 import { Flexbox } from '@lobehub/ui';
 import { cssVar } from 'antd-style';
 import { type FC, memo, useEffect } from 'react';
 import Loading from '@/components/Loading/BrandTextLoading';
+import DiffAllToolbar from '@/features/EditorCanvas/DiffAllToolbar';
 import WideScreenContainer from '@/features/WideScreenContainer';
-import { useRegisterFilesHotkeys, useSaveDocumentHotkey } from '@/hooks/useHotkeys';
+import { useRegisterFilesHotkeys } from '@/hooks/useHotkeys';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
-import { useFileStore } from '@/store/file';
+import { useDocumentStore } from '@/store/document';
+import { editorSelectors } from '@/store/document/slices/editor';
+import { usePageStore } from '@/store/page';
-import Body from './Body';
 import Copilot from './Copilot';
-import DiffAllToolbar from './DiffAllToolbar';
+import EditorCanvas from './EditorCanvas';
 import Header from './Header';
 import PageAgentProvider from './PageAgentProvider';
 import { PageEditorProvider } from './PageEditorProvider';
 import PageTitle from './PageTitle';
+import TitleSection from './TitleSection';
 import { usePageEditorStore } from './store';
 interface PageEditorProps {
+  emoji?: string;
   knowledgeBaseId?: string;
   onBack?: () => void;
   onDelete?: () => void;
   onDocumentIdChange?: (newId: string) => void;
+  onEmojiChange?: (emoji: string | undefined) => void;
   onSave?: () => void;
+  onTitleChange?: (title: string) => void;
   pageId?: string;
+  title?: string;
 }
 const PageEditorCanvas = memo(() => {
   const editor = usePageEditorStore((s) => s.editor);
-  const flushSave = usePageEditorStore((s) => s.flushSave);
-  const isDirty = usePageEditorStore((s) => s.isDirty);
+  const documentId = usePageEditorStore((s) => s.documentId);
+  // Get isDirty from DocumentStore
+  const isDirty = useDocumentStore((s) =>
+    documentId ? editorSelectors.isDirty(documentId)(s) : false,
+  );
   // Register Files scope and save document hotkey
   useRegisterFilesHotkeys();
-  useSaveDocumentHotkey(flushSave);
   // Warn user before leaving page with unsaved changes
   useEffect(() => {
@@ -75,10 +86,13 @@ const PageEditorCanvas = memo(() => {
             width={'100%'}
           >
             <WideScreenContainer onClick={() => editor?.focus()} wrapperStyle={{ cursor: 'text' }}>
-              <Body />
+              <Flexbox flex={1} style={{ overflowY: 'auto', position: 'relative' }}>
+                <TitleSection />
+                <EditorCanvas />
+              </Flexbox>
             </WideScreenContainer>
           </Flexbox>
-          <DiffAllToolbar />
+          {documentId && <DiffAllToolbar documentId={documentId} editor={editor!} />}
         </Flexbox>
         <Copilot />
       </Flexbox>
@@ -95,31 +109,41 @@ export const PageEditor: FC<PageEditorProps> = ({
   pageId,
   knowledgeBaseId,
   onDocumentIdChange,
+  onEmojiChange,
   onSave,
+  onTitleChange,
   onBack,
+  title,
+  emoji,
 }) => {
   const useInitBuiltinAgent = useAgentStore((s) => s.useInitBuiltinAgent);
   const pageAgentId = useAgentStore(builtinAgentSelectors.pageAgentId);
   useInitBuiltinAgent(BUILTIN_AGENT_SLUGS.pageAgent);
-  const [deletePage] = useFileStore((s) => [s.deletePage]);
+  const deletePage = usePageStore((s) => s.deletePage);
   if (!pageAgentId) return <Loading debugId="PageEditor > PageAgent Init" />;
   return (
     <PageAgentProvider pageAgentId={pageAgentId}>
-      <PageEditorProvider
-        key={pageId}
-        knowledgeBaseId={knowledgeBaseId}
-        onBack={onBack}
-        onDelete={() => deletePage(pageId || '')}
-        onDocumentIdChange={onDocumentIdChange}
-        onSave={onSave}
-        pageId={pageId}
-      >
-        <PageEditorCanvas />
-      </PageEditorProvider>
+      <EditorProvider>
+        <PageEditorProvider
+          emoji={emoji}
+          key={pageId}
+          knowledgeBaseId={knowledgeBaseId}
+          onBack={onBack}
+          onDelete={() => deletePage(pageId || '')}
+          onDocumentIdChange={onDocumentIdChange}
+          onEmojiChange={onEmojiChange}
+          onSave={onSave}
+          onTitleChange={onTitleChange}
+          pageId={pageId}
+          title={title}
+        >
+          <PageEditorCanvas />
+        </PageEditorProvider>
+      </EditorProvider>
     </PageAgentProvider>
   );
 };

package/src/features/PageEditor/PageEditorProvider.tsx CHANGED Viewed

@@ -19,10 +19,14 @@ export const PageEditorProvider = memo<PageEditorProviderProps>(
     pageId,
     knowledgeBaseId,
     onDocumentIdChange,
+    onEmojiChange,
     onSave,
+    onTitleChange,
     onDelete,
     onBack,
     parentId,
+    title,
+    emoji,
   }) => {
     const editor = useEditor();
@@ -30,25 +34,33 @@ export const PageEditorProvider = memo<PageEditorProviderProps>(
       <Provider
         createStore={() =>
           createStore({
+            documentId: pageId,
             editor,
+            emoji,
             knowledgeBaseId,
             onBack,
             onDelete,
             onDocumentIdChange,
+            onEmojiChange,
             onSave,
-            pageId,
+            onTitleChange,
             parentId,
+            title,
           })
         }
       >
         <StoreUpdater
+          emoji={emoji}
           knowledgeBaseId={knowledgeBaseId}
           onBack={onBack}
           onDelete={onDelete}
           onDocumentIdChange={onDocumentIdChange}
+          onEmojiChange={onEmojiChange}
           onSave={onSave}
+          onTitleChange={onTitleChange}
           pageId={pageId}
           parentId={parentId}
+          title={title}
         />
         {children}
       </Provider>

package/src/features/PageEditor/PageTitle/index.tsx CHANGED Viewed

@@ -6,8 +6,8 @@ import PageTitle from '@/components/PageTitle';
 import { selectors, usePageEditorStore } from '@/features/PageEditor/store';
 const Title = memo(() => {
-  const pageTitle = usePageEditorStore(selectors.currentTitle);
-  return <PageTitle title={pageTitle} />;
+  const pageTitle = usePageEditorStore(selectors.title);
+  return pageTitle && <PageTitle title={pageTitle} />;
 });
 export default Title;

package/src/features/PageEditor/StoreUpdater.tsx CHANGED Viewed

@@ -1,319 +1,61 @@
 'use client';
-import { useEditorState } from '@lobehub/editor/react';
-import debug from 'debug';
-import React, { memo, useEffect, useRef } from 'react';
+import { memo, useEffect } from 'react';
 import { createStoreUpdater } from 'zustand-utils';
-import { useFileStore } from '@/store/file';
-import { documentSelectors } from '@/store/file/slices/document/selectors';
 import { pageAgentRuntime } from '@/store/tool/slices/builtin/executors/lobe-page-agent';
 import { type PublicState, usePageEditorStore, useStoreApi } from './store';
-const log = debug('page:store-updater');
-export type StoreUpdaterProps = Partial<PublicState>;
-// State machine types
-type InitPhase =
-  | 'idle' // Initial state
-  | 'waiting-for-data' // Waiting for SWR to fetch/return cached data
-  | 'initializing' // Setting metadata (currentDocId, title, emoji)
-  | 'loading-content' // Loading content into editor
-  | 'ready' // Initialization complete
-  | 'error'; // Error occurred
-interface InitState {
-  error?: Error;
-  phase: InitPhase;
-  targetPageId: string | undefined;
+export interface StoreUpdaterProps extends Partial<PublicState> {
+  pageId?: string;
 }
+/**
+ * StoreUpdater syncs PageEditorStore props and connects to page agent runtime.
+ *
+ * Note: Document content loading is handled by EditorCanvas via DocumentStore.
+ * Title/emoji are consumed from PageEditorStore (set via setCurrentTitle/setCurrentEmoji).
+ */
 const StoreUpdater = memo<StoreUpdaterProps>(
-  ({ pageId, knowledgeBaseId, onDocumentIdChange, onSave, onDelete, onBack, parentId }) => {
+  ({
+    pageId,
+    knowledgeBaseId,
+    onDocumentIdChange,
+    onEmojiChange,
+    onSave,
+    onTitleChange,
+    onDelete,
+    onBack,
+    parentId,
+    title,
+    emoji,
+  }) => {
     const storeApi = useStoreApi();
     const useStoreUpdater = createStoreUpdater(storeApi);
     const editor = usePageEditorStore((s) => s.editor);
-    const editorState = useEditorState(editor);
-    const currentDocId = usePageEditorStore((s) => s.currentDocId);
-    // Use SWR hook for document fetching with caching
-    const { isLoading: isLoadingDetail, error: swrError } = useFileStore((s) =>
-      s.useFetchDocumentDetail(pageId),
-    );
-    const currentPage = useFileStore(documentSelectors.getDocumentById(pageId));
-    const [editorInit, setEditorInit] = React.useState(false);
-    const [contentInit, setContentInit] = React.useState(false);
-    const [phaseUpdateCounter, setPhaseUpdateCounter] = React.useState(0);
-    const lastLoadedDocIdRef = useRef<string | undefined>(undefined);
-    const initStateRef = useRef<InitState>({
-      phase: 'idle',
-      targetPageId: undefined,
-    });
-    // Helper to transition phase and trigger re-render
-    const transitionPhase = React.useCallback((newPhase: InitPhase) => {
-      log(`Transitioning phase: ${initStateRef.current.phase} -> ${newPhase}`);
-      initStateRef.current.phase = newPhase;
-      setPhaseUpdateCounter((n) => n + 1); // Trigger re-render
-    }, []);
-    // Update editorState in store
-    useEffect(() => {
-      storeApi.setState({ editorState });
-    }, [editorState, storeApi]);
+    const initMeta = usePageEditorStore((s) => s.initMeta);
     // Update store with props
-    useStoreUpdater('pageId', pageId);
+    useStoreUpdater('documentId', pageId);
     useStoreUpdater('knowledgeBaseId', knowledgeBaseId);
     useStoreUpdater('onDocumentIdChange', onDocumentIdChange);
+    useStoreUpdater('onEmojiChange', onEmojiChange);
     useStoreUpdater('onSave', onSave);
+    useStoreUpdater('onTitleChange', onTitleChange);
     useStoreUpdater('onDelete', onDelete);
     useStoreUpdater('onBack', onBack);
     useStoreUpdater('parentId', parentId);
-    // State machine effect for deterministic initialization
+    // Initialize meta (title/emoji) with dirty tracking
     useEffect(() => {
-      const state = initStateRef.current;
-      // Phase handler functions
-      const handleIdlePhase = () => {
-        // Check if we can start initialization
-        if (!pageId || !editor || !editorInit) {
-          log('idle: Waiting for prerequisites', { editor: !!editor, editorInit, pageId });
-          return;
-        }
-        // Transition to waiting-for-data
-        log('idle -> waiting-for-data:', pageId);
-        // Reset UI state
-        setContentInit(false);
-        storeApi.setState({
-          currentTitle: '',
-          isLoadingContent: true,
-          wordCount: 0,
-        });
-        transitionPhase('waiting-for-data');
-      };
-      const handleWaitingForDataPhase = () => {
-        // Check for errors
-        if (swrError && !isLoadingDetail) {
-          log('waiting-for-data: Error occurred', swrError);
-          initStateRef.current.error = swrError as Error;
-          storeApi.setState({ isLoadingContent: false });
-          transitionPhase('error');
-          return;
-        }
-        // Wait for SWR to finish loading
-        if (isLoadingDetail) {
-          log('waiting-for-data: Still loading...');
-          return;
-        }
-        // Check if we have data
-        if (!currentPage) {
-          log('waiting-for-data: No data available yet');
-          return;
-        }
-        // Transition to initializing
-        log('waiting-for-data -> initializing');
-        transitionPhase('initializing');
-      };
-      const handleInitializingPhase = () => {
-        // Check if already initialized for this pageId
-        if (lastLoadedDocIdRef.current === pageId && currentDocId === pageId) {
-          log('initializing: Already initialized, moving to loading-content');
-          transitionPhase('loading-content');
-          return;
-        }
-        // Set metadata
-        log('initializing: Setting metadata for pageId:', pageId, {
-          hasEditorData: !!currentPage?.editorData,
-          title: currentPage?.title,
-        });
-        lastLoadedDocIdRef.current = pageId;
-        setContentInit(false);
-        storeApi.setState({
-          currentDocId: pageId,
-          currentEmoji: currentPage?.metadata?.emoji,
-          currentTitle: currentPage?.title || '',
-        });
-        // Transition to loading-content
-        log('initializing -> loading-content');
-        transitionPhase('loading-content');
-      };
-      const handleLoadingContentPhase = () => {
-        // Prerequisites check
-        if (!editor || !editorInit || contentInit) {
-          log('loading-content: Waiting', { contentInit, editor: !!editor, editorInit });
-          return;
-        }
-        // Safety check: Prevent loading stale content
-        const currentState = storeApi.getState();
-        if (currentState.currentDocId && currentState.currentDocId !== pageId) {
-          log('loading-content: currentDocId mismatch, aborting', {
-            currentDocId: currentState.currentDocId,
-            pageId,
-          });
-          initStateRef.current.error = new Error('Document ID mismatch');
-          storeApi.setState({ isLoadingContent: false });
-          transitionPhase('error');
-          return;
-        }
-        // Load content (defer to avoid flushSync warning)
-        log('loading-content: Queueing content load');
-        queueMicrotask(() => {
-          try {
-            // Re-check state in case pageId changed during microtask
-            if (initStateRef.current.targetPageId !== pageId) {
-              log('loading-content: PageId changed during queue, aborting');
-              return;
-            }
-            log('Loading content for page:', pageId);
-            // Helper to calculate word count
-            const calculateWordCount = (text: string) =>
-              text.trim().split(/\s+/).filter(Boolean).length;
-            storeApi.setState({ lastUpdatedTime: null });
-            // Check if editorData is valid and non-empty
-            const hasValidEditorData =
-              currentPage?.editorData &&
-              typeof currentPage.editorData === 'object' &&
-              Object.keys(currentPage.editorData).length > 0;
-            // Load from editorData if available
-            if (hasValidEditorData) {
-              log('Loading from editorData');
-              editor.setDocument('json', JSON.stringify(currentPage.editorData));
-              const textContent = currentPage.content || '';
-              storeApi.setState({ wordCount: calculateWordCount(textContent) });
-            } else if (currentPage?.content && currentPage.content.trim()) {
-              log('Loading from content - no valid editorData found');
-              editor.setDocument('markdown', currentPage.content);
-              storeApi.setState({ wordCount: calculateWordCount(currentPage.content) });
-            } else if (currentPage?.pages) {
-              // Fallback to pages content
-              const pagesContent = currentPage.pages
-                .map((page) => page.pageContent)
-                .join('\n\n')
-                .trim();
-              if (pagesContent) {
-                log('Loading from pages content');
-                editor.setDocument('markdown', pagesContent);
-                storeApi.setState({ wordCount: calculateWordCount(pagesContent) });
-              } else {
-                log('Clearing editor - empty pages');
-                editor.setDocument('markdown', ' ');
-                storeApi.setState({ wordCount: 0 });
-              }
-            } else {
-              // Empty document or temp page - clear editor with minimal content
-              log('Clearing editor - empty/new page');
-              editor.setDocument('markdown', ' ');
-              storeApi.setState({ wordCount: 0 });
-            }
-            setContentInit(true);
-            storeApi.setState({ isLoadingContent: false });
-            // Transition to ready
-            log('loading-content -> ready');
-            transitionPhase('ready');
-          } catch (error) {
-            log('Failed to load editor content:', error);
-            storeApi.setState({ isLoadingContent: false });
-            initStateRef.current.error = error as Error;
-            transitionPhase('error');
-          }
-        });
-      };
-      const handleErrorPhase = () => {
-        const error = initStateRef.current.error;
-        log('error phase:', error?.message);
-        // Error state is sticky until pageId changes
-      };
-      // Reset to idle if pageId changes
-      if (pageId !== state.targetPageId) {
-        log('PageId changed, resetting to idle', { from: state.targetPageId, to: pageId });
-        initStateRef.current = { phase: 'idle', targetPageId: pageId };
-        setContentInit(false);
-        return;
-      }
-      // Early exit if already ready
-      if (state.phase === 'ready') return;
-      // Execute phase handler
-      switch (state.phase) {
-        case 'idle': {
-          handleIdlePhase();
-          break;
-        }
-        case 'waiting-for-data': {
-          handleWaitingForDataPhase();
-          break;
-        }
-        case 'initializing': {
-          handleInitializingPhase();
-          break;
-        }
-        case 'loading-content': {
-          handleLoadingContentPhase();
-          break;
-        }
-        case 'error': {
-          handleErrorPhase();
-          break;
-        }
-      }
-    }, [
-      contentInit,
-      currentDocId,
-      currentPage,
-      editor,
-      editorInit,
-      isLoadingDetail,
-      pageId,
-      phaseUpdateCounter,
-      storeApi,
-      swrError,
-      transitionPhase,
-    ]);
-    // Track editor initialization
-    useEffect(() => {
-      if (editor && !editorInit) {
-        setEditorInit(true);
-      }
-    }, [editor, editorInit]);
+      initMeta(title, emoji);
+    }, [pageId, title, emoji]);
     // Connect editor to page agent runtime
     useEffect(() => {
       if (editor) {
-        // for easier debug , mount editor instance to window
-        window.__editor = editor;
         pageAgentRuntime.setEditor(editor);
       }
       return () => {
@@ -321,35 +63,20 @@ const StoreUpdater = memo<StoreUpdaterProps>(
       };
     }, [editor]);
-    // Connect title handlers to page agent runtime
+    // Connect title handlers and document ID to page agent runtime
     useEffect(() => {
-      const titleSetter = (title: string) => {
-        storeApi.setState({ currentTitle: title });
-      };
       const titleGetter = () => {
-        return storeApi.getState().currentTitle;
+        return storeApi.getState().title || '';
       };
-      pageAgentRuntime.setTitleHandlers(titleSetter, titleGetter);
+      pageAgentRuntime.setCurrentDocId(pageId);
+      pageAgentRuntime.setTitleHandlers(storeApi.getState().setTitle, titleGetter);
       return () => {
-        pageAgentRuntime.setTitleHandlers(null, null);
-      };
-    }, [storeApi]);
-    // Update current document ID in page agent runtime when page changes
-    useEffect(() => {
-      // Use currentDocId (which includes temp docs) or fallback to pageId
-      const activeId = currentDocId || pageId;
-      log('Updating currentDocId in page agent runtime:', activeId);
-      pageAgentRuntime.setCurrentDocId(activeId);
-      return () => {
-        log('Clearing currentDocId on unmount');
         pageAgentRuntime.setCurrentDocId(undefined);
+        pageAgentRuntime.setTitleHandlers(null, null);
       };
-    }, [currentDocId, pageId]);
+    }, [pageId, storeApi]);
     return null;
   },

package/src/features/PageEditor/{Body/Title.tsx → TitleSection.tsx} RENAMED Viewed

@@ -11,16 +11,16 @@ import { useGlobalStore } from '@/store/global';
 import { globalGeneralSelectors } from '@/store/global/selectors';
 import { truncateByWeightedLength } from '@/utils/textLength';
-import { usePageEditorStore } from '../store';
+import { usePageEditorStore } from './store';
-const Title = memo(() => {
+const TitleSection = memo(() => {
   const { t } = useTranslation('file');
   const locale = useGlobalStore(globalGeneralSelectors.currentLanguage);
-  const currentEmoji = usePageEditorStore((s) => s.currentEmoji);
-  const currentTitle = usePageEditorStore((s) => s.currentTitle);
-  const setCurrentEmoji = usePageEditorStore((s) => s.setCurrentEmoji);
-  const setCurrentTitle = usePageEditorStore((s) => s.setCurrentTitle);
+  const emoji = usePageEditorStore((s) => s.emoji);
+  const title = usePageEditorStore((s) => s.title);
+  const setEmoji = usePageEditorStore((s) => s.setEmoji);
+  const setTitle = usePageEditorStore((s) => s.setTitle);
   const handleTitleSubmit = usePageEditorStore((s) => s.handleTitleSubmit);
   const [isHoveringTitle, setIsHoveringTitle] = useState(false);
@@ -41,16 +41,16 @@ const Title = memo(() => {
       }}
     >
       {/* Emoji picker above Choose Icon button */}
-      {(currentEmoji || showEmojiPicker) && (
+      {(emoji || showEmojiPicker) && (
         <EmojiPicker
           allowDelete
           locale={locale}
-          onChange={(emoji) => {
-            setCurrentEmoji(emoji);
+          onChange={(e) => {
+            setEmoji(e);
             setShowEmojiPicker(false);
           }}
           onDelete={() => {
-            setCurrentEmoji(undefined);
+            setEmoji(undefined);
             setShowEmojiPicker(false);
           }}
           onOpenChange={(open) => {
@@ -60,16 +60,16 @@ const Title = memo(() => {
           shape={'square'}
           size={72}
           title={t('pageEditor.chooseIcon')}
-          value={currentEmoji}
+          value={emoji}
         />
       )}
       {/* Choose Icon button - only shown when no emoji */}
-      {!currentEmoji && !showEmojiPicker && (
+      {!emoji && !showEmojiPicker && (
         <Button
           icon={<Icon icon={SmilePlus} />}
           onClick={() => {
-            setCurrentEmoji('📄');
+            setEmoji('📄');
             setShowEmojiPicker(true);
           }}
           size="small"
@@ -89,7 +89,7 @@ const Title = memo(() => {
         autoSize={{ minRows: 1 }}
         onChange={(e) => {
           const truncated = truncateByWeightedLength(e.target.value, 100);
-          setCurrentTitle(truncated);
+          setTitle(truncated);
         }}
         onKeyDown={(e) => {
           if (e.key === 'Enter') {
@@ -105,11 +105,11 @@ const Title = memo(() => {
           resize: 'none',
           width: '100%',
         }}
-        value={currentTitle}
+        value={title}
         variant={'borderless'}
       />
     </Flexbox>
   );
 });
-export default Title;
+export default TitleSection;