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

package/src/features/EditorCanvas/InternalEditor.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import {
+  type IEditor,
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactImagePlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactLiteXmlPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+  ReactToolbarPlugin,
+} from '@lobehub/editor';
+import { Editor, useEditorState } from '@lobehub/editor/react';
+import { memo, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { EditorCanvasProps } from './EditorCanvas';
+import InlineToolbar from './InlineToolbar';
+
+/**
+ * Base plugins for the editor (without toolbar)
+ */
+const BASE_PLUGINS = [
+  ReactLiteXmlPlugin,
+  ReactListPlugin,
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactTablePlugin,
+  ReactMathPlugin,
+  Editor.withProps(ReactImagePlugin, {
+    defaultBlockImage: true,
+  }),
+];
+
+export interface InternalEditorProps extends EditorCanvasProps {
+  /**
+   * Editor instance (required)
+   */
+  editor: IEditor;
+}
+
+/**
+ * Internal EditorCanvas component that requires editor instance
+ */
+const InternalEditor = memo<InternalEditorProps>(
+  ({
+    editor,
+    extraPlugins,
+    floatingToolbar = true,
+    onContentChange,
+    onInit,
+    placeholder,
+    plugins: customPlugins,
+    slashItems,
+    style,
+    toolbarExtraItems,
+  }) => {
+    const { t } = useTranslation('file');
+    const editorState = useEditorState(editor);
+
+    const finalPlaceholder = placeholder || t('pageEditor.editorPlaceholder');
+
+    // Build plugins array
+    const plugins = useMemo(() => {
+      // If custom plugins provided, use them directly
+      if (customPlugins) return customPlugins;
+
+      // Build base plugins with optional extra plugins prepended
+      const basePlugins = extraPlugins ? [...extraPlugins, ...BASE_PLUGINS] : BASE_PLUGINS;
+
+      // Add toolbar if enabled
+      if (floatingToolbar) {
+        return [
+          ...basePlugins,
+          Editor.withProps(ReactToolbarPlugin, {
+            children: (
+              <InlineToolbar
+                editor={editor}
+                editorState={editorState}
+                extraItems={toolbarExtraItems}
+                floating
+              />
+            ),
+          }),
+        ];
+      }
+
+      return basePlugins;
+    }, [customPlugins, editor, editorState, extraPlugins, floatingToolbar, toolbarExtraItems]);
+
+    useEffect(() => {
+      // for easier debug, mount editor instance to window
+      if (editor) window.__editor = editor;
+
+      return () => {
+        window.__editor = undefined;
+      };
+    }, [editor]);
+
+    return (
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+        }}
+      >
+        <Editor
+          content={''}
+          editor={editor}
+          lineEmptyPlaceholder={finalPlaceholder}
+          onInit={onInit}
+          onTextChange={onContentChange}
+          placeholder={finalPlaceholder}
+          plugins={plugins}
+          slashOption={slashItems ? { items: slashItems } : undefined}
+          style={{
+            paddingBottom: 64,
+            ...style,
+          }}
+          type={'text'}
+        />
+      </div>
+    );
+  },
+);
+
+InternalEditor.displayName = 'InternalEditor';
+
+export default InternalEditor;

package/src/features/{PageEditor/EditorCanvas → EditorCanvas}/actions.ts

@@ -1,3 +1,8 @@
+/**
+ * Opens a native file selector dialog
+ * @param handleFiles - Callback function to handle selected files
+ * @param accept - MIME type filter for accepted files (default: all files)
+ */
 export function openFileSelector(handleFiles: (files: FileList) => void, accept = '*/*') {
   // Skip on server side
   if (typeof document === 'undefined') {
@@ -7,19 +12,16 @@ export function openFileSelector(handleFiles: (files: FileList) => void, accept
   // Create a hidden input element
   const input = document.createElement('input');
   input.type = 'file';
-  input.accept = accept; // Accept all file types
-  input.multiple = false; // Whether to allow multiple selection
+  input.accept = accept;
+  input.multiple = false;
 
   // Listen for file selection events
-  // eslint-disable-next-line unicorn/prefer-add-event-listener
-  input.onchange = (event) => {
-    // @ts-expect-error not error
-    const files = event.target?.files;
+  input.addEventListener('change', (event) => {
+    const files = (event.target as HTMLInputElement)?.files;
     if (files && files.length > 0) {
-      // Handle selected files
       handleFiles(files);
     }
-  };
+  });
 
   // Trigger file selector
   input.click();

package/src/features/EditorCanvas/index.ts

@@ -0,0 +1,9 @@
+export { openFileSelector } from './actions';
+export { default as AutoSaveHint, type AutoSaveHintProps } from './AutoSaveHint';
+export {
+  EditorCanvas,
+  type EditorCanvasProps,
+  type EditorCanvasWithEditorProps,
+} from './EditorCanvas';
+export { EditorErrorBoundary } from './ErrorBoundary';
+export { default as InlineToolbar, type InlineToolbarProps } from './InlineToolbar';

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

@@ -1,76 +1,14 @@
 'use client';
 
-import {
-  ReactCodePlugin,
-  ReactCodemirrorPlugin,
-  ReactHRPlugin,
-  ReactImagePlugin,
-  ReactLinkPlugin,
-  ReactListPlugin,
-  ReactLiteXmlPlugin,
-  ReactMathPlugin,
-  ReactTablePlugin,
-  ReactToolbarPlugin,
-} from '@lobehub/editor';
-import { Editor } from '@lobehub/editor/react';
-import { Alert } from '@lobehub/ui';
-import { type CSSProperties, Component, type ErrorInfo, type ReactNode, memo } from 'react';
+import { type CSSProperties, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { EditorCanvas as SharedEditorCanvas } from '@/features/EditorCanvas';
+
 import { usePageEditorStore } from '../store';
-import InlineToolbar from './InlineToolbar';
+import { useAskCopilotItem } from './useAskCopilotItem';
 import { useSlashItems } from './useSlashItems';
 
-interface EditorErrorBoundaryState {
-  error: Error | null;
-  hasError: boolean;
-}
-
-/**
- * ErrorBoundary for EditorCanvas component.
- * Catches rendering errors in the editor and displays a fallback error UI
- * instead of crashing the entire page.
- */
-class EditorErrorBoundary extends Component<{ children: ReactNode }, EditorErrorBoundaryState> {
-  public state: EditorErrorBoundaryState = {
-    error: null,
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(error: Error): Partial<EditorErrorBoundaryState> {
-    return { error, hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('[EditorErrorBoundary] Caught error in editor render:', {
-      componentStack: errorInfo.componentStack,
-      error: error.message,
-      stack: error.stack,
-    });
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <Alert
-          message={this.state.error?.message || 'An unknown error occurred in the editor'}
-          showIcon
-          style={{
-            margin: 16,
-            overflow: 'hidden',
-            position: 'relative',
-            width: '100%',
-          }}
-          title="Editor Error"
-          type="error"
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
 interface EditorCanvasProps {
   placeholder?: string;
   style?: CSSProperties;
@@ -80,55 +18,20 @@ const EditorCanvas = memo<EditorCanvasProps>(({ placeholder, style }) => {
   const { t } = useTranslation(['file', 'editor']);
 
   const editor = usePageEditorStore((s) => s.editor);
-  const handleContentChange = usePageEditorStore((s) => s.handleContentChange);
-  const onEditorInit = usePageEditorStore((s) => s.onEditorInit);
+  const documentId = usePageEditorStore((s) => s.documentId);
 
   const slashItems = useSlashItems(editor);
-
-  if (!editor) return null;
+  const askCopilotItem = useAskCopilotItem(editor);
 
   return (
-    <EditorErrorBoundary>
-      <div
-        onClick={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-        }}
-      >
-        <Editor
-          content={''}
-          editor={editor!}
-          lineEmptyPlaceholder={placeholder || t('pageEditor.editorPlaceholder')}
-          onInit={onEditorInit}
-          onTextChange={handleContentChange}
-          placeholder={placeholder || t('pageEditor.editorPlaceholder')}
-          plugins={[
-            ReactLiteXmlPlugin,
-            ReactListPlugin,
-            ReactCodePlugin,
-            ReactCodemirrorPlugin,
-            ReactHRPlugin,
-            ReactLinkPlugin,
-            ReactTablePlugin,
-            ReactMathPlugin,
-            Editor.withProps(ReactImagePlugin, {
-              defaultBlockImage: true,
-            }),
-            Editor.withProps(ReactToolbarPlugin, {
-              children: <InlineToolbar floating />,
-            }),
-          ]}
-          slashOption={{
-            items: slashItems,
-          }}
-          style={{
-            paddingBottom: 64,
-            ...style,
-          }}
-          type={'text'}
-        />
-      </div>
-    </EditorErrorBoundary>
+    <SharedEditorCanvas
+      documentId={documentId}
+      editor={editor}
+      placeholder={placeholder || t('pageEditor.editorPlaceholder')}
+      slashItems={slashItems}
+      style={style}
+      toolbarExtraItems={askCopilotItem}
+    />
   );
 });
 

package/src/features/PageEditor/EditorCanvas/useAskCopilotItem.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import { nanoid } from '@lobechat/utils';
+import { HIDE_TOOLBAR_COMMAND, type IEditor } from '@lobehub/editor';
+import { type ChatInputActionsProps } from '@lobehub/editor/react';
+import { Block } from '@lobehub/ui';
+import { createStaticStyles, cssVar } from 'antd-style';
+import { BotIcon } from 'lucide-react';
+import { useMemo } from 'react';
+
+import { useFileStore } from '@/store/file';
+import { useGlobalStore } from '@/store/global';
+
+const styles = createStaticStyles(({ css }) => ({
+  askCopilot: css`
+    border-radius: 6px;
+    color: ${cssVar.colorTextDescription};
+
+    &:hover {
+      color: ${cssVar.colorTextSecondary};
+    }
+  `,
+}));
+
+export const useAskCopilotItem = (editor: IEditor | undefined): ChatInputActionsProps['items'] => {
+  const addSelectionContext = useFileStore((s) => s.addChatContextSelection);
+
+  return useMemo(() => {
+    if (!editor) return [];
+
+    return [
+      {
+        children: (
+          <Block
+            align="center"
+            className={styles.askCopilot}
+            clickable
+            gap={8}
+            horizontal
+            onClick={() => {
+              const xml = (editor.getSelectionDocument?.('litexml') as string) || '';
+              const plainText = (editor.getSelectionDocument?.('text') as string) || '';
+              const content = xml.trim() || plainText.trim();
+
+              if (!content) return;
+
+              const format = xml.trim() ? 'xml' : 'text';
+              const preview =
+                (plainText || xml)
+                  .replaceAll(/<[^>]*>/g, ' ')
+                  .replaceAll(/\s+/g, ' ')
+                  .trim() || undefined;
+
+              // Store action handles deduplication
+              addSelectionContext({
+                content,
+                format,
+                id: `selection-${nanoid(6)}`,
+                preview,
+                title: 'Selection',
+                type: 'text',
+              });
+
+              // Open right panel if not opened
+              useGlobalStore.getState().toggleRightPanel(true);
+
+              // Focus on chat input after a short delay to ensure panel is opened
+              setTimeout(() => {
+                // Find the chat input editor within the right panel
+                // Query all lexical editors and get the last one (which should be the chat input)
+                const allEditors = [...document.querySelectorAll('[data-lexical-editor="true"]')];
+                const chatInputEditor = allEditors.at(-1) as HTMLElement;
+                if (chatInputEditor) {
+                  chatInputEditor.focus();
+                }
+              }, 300);
+
+              editor.dispatchCommand(HIDE_TOOLBAR_COMMAND, undefined);
+              editor.blur();
+            }}
+            paddingBlock={6}
+            paddingInline={12}
+            variant="borderless"
+          >
+            <BotIcon />
+            <span>Ask Copilot</span>
+          </Block>
+        ),
+        key: 'ask-copilot',
+        label: 'Ask Copilot',
+        onClick: () => {},
+      },
+    ];
+  }, [addSelectionContext, editor]);
+};

package/src/features/PageEditor/EditorCanvas/useSlashItems.tsx

@@ -28,7 +28,7 @@ import {
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { openFileSelector } from '@/features/PageEditor/EditorCanvas/actions';
+import { openFileSelector } from '@/features/EditorCanvas';
 import { useFileStore } from '@/store/file';
 
 export const useSlashItems = (editor: IEditor | undefined): SlashOptions['items'] => {

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

@@ -40,7 +40,7 @@ interface FolderCrumb {
 const Breadcrumb = memo(() => {
   const { t } = useTranslation('file');
 
-  const currentTitle = usePageEditorStore((s) => s.currentTitle);
+  const title = usePageEditorStore((s) => s.title);
   const knowledgeBaseId = usePageEditorStore((s) => s.knowledgeBaseId);
   const parentId = usePageEditorStore((s) => s.parentId);
 
@@ -61,7 +61,7 @@ const Breadcrumb = memo(() => {
     return null;
   }
 
-  const documentTitle = currentTitle || t('pageEditor.titlePlaceholder');
+  const documentTitle = title || t('pageEditor.titlePlaceholder');
 
   return (
     <Flexbox align={'center'} className={styles.breadcrumb} flex={1} gap={0} horizontal>

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,