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

package/src/features/PageEditor/Header/index.tsx

@@ -1,24 +1,28 @@
 'use client';
 
-import { ActionIcon, Avatar, Dropdown, Skeleton, Text } from '@lobehub/ui';
+import { ActionIcon, Avatar, Dropdown, Text } from '@lobehub/ui';
 import { ArrowLeftIcon, BotMessageSquareIcon, MoreHorizontal } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { DESKTOP_HEADER_ICON_SIZE } from '@/const/layoutTokens';
+import { AutoSaveHint } from '@/features/EditorCanvas';
 import NavHeader from '@/features/NavHeader';
 import ToggleRightPanelButton from '@/features/RightPanel/ToggleRightPanelButton';
 
 import { usePageEditorStore } from '../store';
-import AutoSaveHint from './AutoSaveHint';
 import Breadcrumb from './Breadcrumb';
 import { useMenu } from './useMenu';
 
 const Header = memo(() => {
   const { t } = useTranslation('file');
-  const [currentEmoji, currentTitle, isLoadingContent, parentId, onBack] = usePageEditorStore(
-    (s) => [s.currentEmoji, s.currentTitle, s.isLoadingContent, s.parentId, s.onBack],
-  );
+  const [documentId, emoji, title, parentId, onBack] = usePageEditorStore((s) => [
+    s.documentId,
+    s.emoji,
+    s.title,
+    s.parentId,
+    s.onBack,
+  ]);
   const { menuItems } = useMenu();
 
   return (
@@ -32,22 +36,15 @@ const Header = memo(() => {
           {!parentId && (
             <>
               {/* Icon */}
-              {currentEmoji && <Avatar avatar={currentEmoji} shape={'square'} size={28} />}
+              {emoji && <Avatar avatar={emoji} shape={'square'} size={28} />}
               {/* Title */}
-              {isLoadingContent ? (
-                <Skeleton.Button
-                  active
-                  style={{ height: 20, marginLeft: 4, maxWidth: 200, width: 200 }}
-                />
-              ) : (
-                <Text ellipsis style={{ marginLeft: 4 }} weight={500}>
-                  {currentTitle || t('pageEditor.titlePlaceholder')}
-                </Text>
-              )}
+              <Text ellipsis style={{ marginLeft: 4 }} weight={500}>
+                {title || t('pageEditor.titlePlaceholder')}
+              </Text>
             </>
           )}
-          {/* Auto Save Status - hide while loading */}
-          {!isLoadingContent && <AutoSaveHint />}
+          {/* Auto Save Status */}
+          {documentId && <AutoSaveHint documentId={documentId} style={{ marginLeft: 6 }} />}
         </>
       }
       right={

package/src/features/PageEditor/Header/useMenu.tsx

@@ -6,6 +6,8 @@ import { CopyPlus, Download, Link2, Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useDocumentStore } from '@/store/document';
+import { editorSelectors } from '@/store/document/slices/editor';
 import { useFileStore } from '@/store/file';
 import { useGlobalStore } from '@/store/global';
 import { systemStatusSelectors } from '@/store/global/selectors';
@@ -21,9 +23,12 @@ export const useMenu = (): { menuItems: any[] } => {
   const storeApi = useStoreApi();
   const { lg = true } = useResponsive();
 
-  const lastUpdatedTime = usePageEditorStore((s) => s.lastUpdatedTime);
-  const wordCount = usePageEditorStore((s) => s.wordCount);
-  const currentDocId = usePageEditorStore((s) => s.currentDocId);
+  const documentId = usePageEditorStore((s) => s.documentId);
+
+  // Get lastUpdatedTime from DocumentStore
+  const lastUpdatedTime = useDocumentStore((s) =>
+    documentId ? editorSelectors.lastUpdatedTime(documentId)(s) : null,
+  );
 
   const duplicateDocument = useFileStore((s) => s.duplicateDocument);
 
@@ -36,9 +41,9 @@ export const useMenu = (): { menuItems: any[] } => {
   const showViewModeSwitch = lg;
 
   const handleDuplicate = async () => {
-    if (!currentDocId) return;
+    if (!documentId) return;
     try {
-      await duplicateDocument(currentDocId);
+      await duplicateDocument(documentId);
       message.success(t('pageEditor.duplicateSuccess'));
     } catch (error) {
       console.error('Failed to duplicate page:', error);
@@ -48,7 +53,7 @@ export const useMenu = (): { menuItems: any[] } => {
 
   const handleExportMarkdown = () => {
     const state = storeApi.getState();
-    const { editor, currentTitle } = state;
+    const { editor, title } = state;
 
     if (!editor) return;
 
@@ -58,7 +63,7 @@ export const useMenu = (): { menuItems: any[] } => {
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = `${currentTitle || 'Untitled'}.md`;
+      a.download = `${title || 'Untitled'}.md`;
       document.body.append(a);
       a.click();
       a.remove();
@@ -143,7 +148,6 @@ export const useMenu = (): { menuItems: any[] } => {
         key: 'page-info',
         label: (
           <div style={{ color: cssVar.colorTextTertiary, fontSize: 12, lineHeight: 1.6 }}>
-            <div>{t('pageEditor.wordCount', { wordCount })}</div>
             <div>
               {lastUpdatedTime
                 ? t('pageEditor.editedAt', {
@@ -156,7 +160,6 @@ export const useMenu = (): { menuItems: any[] } => {
       },
     ],
     [
-      wordCount,
       lastUpdatedTime,
       storeApi,
       t,

package/src/features/PageEditor/PageEditor.tsx

@@ -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

@@ -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

@@ -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;