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

package/src/features/{PageEditor → EditorCanvas}/DiffAllToolbar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { DiffAction, LITEXML_DIFFNODE_ALL_COMMAND } from '@lobehub/editor';
+import { DiffAction, IEditor, LITEXML_DIFFNODE_ALL_COMMAND } from '@lobehub/editor';
 import { Block, Icon } from '@lobehub/ui';
 import { Button, Space } from 'antd';
 import { createStaticStyles, cssVar, cx } from 'antd-style';
@@ -9,8 +9,7 @@ import { memo, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useIsDark } from '@/hooks/useIsDark';
-
-import { usePageEditorStore } from './store';
+import { useDocumentStore } from '@/store/document';
 
 const styles = createStaticStyles(({ css }) => ({
   container: css`
@@ -36,18 +35,36 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-const DiffAllToolbar = memo(() => {
-  const { t } = useTranslation('editor');
-  const isDarkMode = useIsDark();
-  const [editor, performSave] = usePageEditorStore((s) => [s.editor, s.performSave]);
+const useIsEditorInit = (editor: IEditor) => {
+  const [isEditInit, setEditInit] = useState<boolean>(!!editor.getLexicalEditor());
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const onInit = () => {
+      console.log('init: id', editor.getLexicalEditor()?._key);
+      setEditInit(true);
+    };
+    editor.on('initialized', onInit);
+    return () => {
+      editor.off('initialized', onInit);
+    };
+  }, [editor]);
+
+  return isEditInit;
+};
+
+const useEditorHasPendingDiffs = (editor: IEditor) => {
   const [hasPendingDiffs, setHasPendingDiffs] = useState(false);
+  const isEditInit = useIsEditorInit(editor);
 
   // Listen to editor state changes to detect diff nodes
   useEffect(() => {
     if (!editor) return;
 
     const lexicalEditor = editor.getLexicalEditor();
-    if (!lexicalEditor) return;
+
+    if (!lexicalEditor || !isEditInit) return;
 
     const checkForDiffNodes = () => {
       const editorState = lexicalEditor.getEditorState();
@@ -67,15 +84,39 @@ const DiffAllToolbar = memo(() => {
     // Check initially
     checkForDiffNodes();
 
-    // Register update listener
     const unregister = lexicalEditor.registerUpdateListener(() => {
       checkForDiffNodes();
     });
+    // Register update listener
+    return () => {
+      unregister();
+    };
+  }, [editor, isEditInit]);
 
-    return unregister;
-  }, [editor]);
+  return hasPendingDiffs;
+};
+
+interface DiffAllToolbarProps {
+  documentId: string;
+  editor: IEditor;
+}
+const DiffAllToolbar = memo<DiffAllToolbarProps>(({ documentId }) => {
+  const { t } = useTranslation('editor');
+  const isDarkMode = useIsDark();
+  const [editor, performSave, markDirty] = useDocumentStore((s) => [
+    s.editor!,
+    s.performSave,
+    s.markDirty,
+  ]);
+
+  const hasPendingDiffs = useEditorHasPendingDiffs(editor);
+
+  if (!hasPendingDiffs) return null;
 
-  if (!editor || !hasPendingDiffs) return null;
+  const handleSave = async () => {
+    markDirty(documentId);
+    await performSave();
+  };
 
   return (
     <div className={styles.container}>
@@ -90,10 +131,10 @@ const DiffAllToolbar = memo(() => {
         <Space>
           <Button
             onClick={async () => {
-              editor.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
+              editor?.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
                 action: DiffAction.Reject,
               });
-              await performSave({ force: true });
+              await handleSave();
             }}
             size={'small'}
             type="text"
@@ -104,10 +145,10 @@ const DiffAllToolbar = memo(() => {
           <Button
             color={'default'}
             onClick={async () => {
-              editor.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
+              editor?.dispatchCommand(LITEXML_DIFFNODE_ALL_COMMAND, {
                 action: DiffAction.Accept,
               });
-              await performSave({ force: true });
+              await handleSave();
             }}
             size={'small'}
             variant="filled"

package/src/features/EditorCanvas/DocumentIdMode.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { type IEditor } from '@lobehub/editor';
+import { Alert } from '@lobehub/ui';
+import { Skeleton } from 'antd';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createStoreUpdater } from 'zustand-utils';
+
+import { useSaveDocumentHotkey } from '@/hooks/useHotkeys';
+import { useDocumentStore } from '@/store/document';
+import { editorSelectors } from '@/store/document/slices/editor';
+
+import type { EditorCanvasProps } from './EditorCanvas';
+import InternalEditor from './InternalEditor';
+
+/**
+ * Loading skeleton for the editor
+ */
+const EditorSkeleton = memo(() => (
+  <div style={{ paddingBlock: 24 }}>
+    <Skeleton active paragraph={{ rows: 8 }} />
+  </div>
+));
+
+/**
+ * Error display for fetch failures
+ */
+const EditorError = memo<{ error: Error }>(({ error }) => {
+  const { t } = useTranslation('file');
+
+  return (
+    <Alert
+      description={error.message || t('pageEditor.loadError', 'Failed to load document')}
+      showIcon
+      style={{ margin: 16 }}
+      title={t('pageEditor.error', 'Error')}
+      type="error"
+    />
+  );
+});
+
+export interface DocumentIdModeProps extends EditorCanvasProps {
+  documentId: string;
+  editor: IEditor | undefined;
+}
+
+/**
+ * EditorCanvas with documentId mode - handles data fetching internally
+ */
+const DocumentIdMode = memo<DocumentIdModeProps>(
+  ({
+    editor,
+    documentId,
+    autoSave = true,
+    sourceType = 'page',
+    onContentChange,
+    style,
+    ...editorProps
+  }) => {
+    const { t } = useTranslation('file');
+
+    const storeUpdater = createStoreUpdater(useDocumentStore);
+    storeUpdater('activeDocumentId', documentId);
+    storeUpdater('editor', editor);
+
+    // Get document store actions
+    const [onEditorInit, handleContentChangeStore, useFetchDocument, flushSave] = useDocumentStore(
+      (s) => [s.onEditorInit, s.handleContentChange, s.useFetchDocument, s.flushSave],
+    );
+
+    useSaveDocumentHotkey(flushSave);
+
+    // Use SWR hook for document fetching (auto-initializes via onSuccess in DocumentStore)
+    const { error } = useFetchDocument(documentId, { autoSave, editor, sourceType });
+
+    // Check loading state via selector (document not yet in store)
+    const isLoading = useDocumentStore(editorSelectors.isDocumentLoading(documentId));
+
+    // Handle content change
+    const handleChange = () => {
+      handleContentChangeStore();
+      onContentChange?.();
+    };
+
+    // Show loading state
+    if (isLoading) {
+      return <EditorSkeleton />;
+    }
+
+    if (!editor) return null;
+
+    return (
+      <>
+        {error && <EditorError error={error as Error} />}
+        <InternalEditor
+          editor={editor}
+          onContentChange={handleChange}
+          onInit={onEditorInit}
+          placeholder={editorProps.placeholder || t('pageEditor.editorPlaceholder')}
+          style={style}
+          {...editorProps}
+        />
+      </>
+    );
+  },
+);
+
+DocumentIdMode.displayName = 'DocumentIdMode';
+
+export default DocumentIdMode;

package/src/features/EditorCanvas/EditorCanvas.tsx

@@ -0,0 +1,148 @@
+'use client';
+
+import { type IEditor, type SlashOptions } from '@lobehub/editor';
+import { type ChatInputActionsProps } from '@lobehub/editor/react';
+import { Editor } from '@lobehub/editor/react';
+import { type CSSProperties, memo } from 'react';
+
+import DocumentIdMode from './DocumentIdMode';
+import EditorDataMode from './EditorDataMode';
+import { EditorErrorBoundary } from './ErrorBoundary';
+import InternalEditor from './InternalEditor';
+
+/**
+ * Plugin type for the editor
+ * Allows any array of plugins that the Editor component accepts
+ */
+type EditorPlugins = Parameters<typeof Editor>[0]['plugins'];
+
+export interface EditorCanvasProps {
+  /**
+   * Whether to enable auto-save in DocumentStore. Defaults to true.
+   * Only applies when documentId is provided.
+   */
+  autoSave?: boolean;
+
+  /**
+   * Document ID to load from server.
+   * When provided, component will use useSWR to fetch document data.
+   */
+  documentId?: string;
+
+  /**
+   * Editor data to render directly (skip fetch).
+   * Use this when you already have the content and don't need to fetch.
+   */
+  editorData?: {
+    content?: string;
+    editorData?: unknown;
+  };
+
+  /**
+   * Extra plugins to prepend to BASE_PLUGINS (e.g., ReactLiteXmlPlugin)
+   */
+  extraPlugins?: EditorPlugins;
+
+  /**
+   * Whether to show the floating toolbar. Defaults to true.
+   */
+  floatingToolbar?: boolean;
+
+  /**
+   * Content change handler
+   */
+  onContentChange?: () => void;
+
+  /**
+   * Editor initialization handler
+   */
+  onInit?: (editor: IEditor) => void;
+
+  /**
+   * Placeholder text for empty editor
+   */
+  placeholder?: string;
+
+  /**
+   * Custom plugins for the editor. If provided, replaces BASE_PLUGINS entirely.
+   * Use this when you need complete control over plugins.
+   */
+  plugins?: EditorPlugins;
+
+  /**
+   * Slash menu items
+   */
+  slashItems?: SlashOptions['items'];
+
+  /**
+   * Source type for DocumentStore. Defaults to 'page'.
+   */
+  sourceType?: 'page' | 'notebook';
+
+  /**
+   * Custom styles for the editor
+   */
+  style?: CSSProperties;
+
+  /**
+   * Extra items to add to the floating toolbar (e.g., "Ask Copilot" button)
+   */
+  toolbarExtraItems?: ChatInputActionsProps['items'];
+}
+
+export interface EditorCanvasWithEditorProps extends EditorCanvasProps {
+  /**
+   * Editor instance
+   */
+  editor: IEditor | undefined;
+}
+
+/**
+ * EditorCanvas component that accepts editor as a prop
+ *
+ * Three modes of operation:
+ * 1. documentId mode: Pass documentId, component fetches data via useSWR, shows loading/error states
+ * 2. editorData mode: Pass editorData directly, skips fetch and renders immediately
+ * 3. Basic mode: No documentId or editorData, just renders the editor (original behavior)
+ *
+ * Features:
+ * - Internal ErrorBoundary for graceful error handling
+ * - Loading skeleton during fetch (documentId mode)
+ * - Error state display for fetch failures (documentId mode)
+ * - Auto-save integration with DocumentStore (documentId mode)
+ * - AutoSave hint display (documentId mode)
+ */
+export const EditorCanvas = memo<EditorCanvasWithEditorProps>(
+  ({ editor, documentId, editorData, ...props }) => {
+    // documentId mode - fetch and render with loading/error states
+    if (documentId) {
+      return (
+        <EditorErrorBoundary>
+          <DocumentIdMode documentId={documentId} editor={editor} {...props} />
+        </EditorErrorBoundary>
+      );
+    }
+
+    // editorData mode - render with provided data
+    if (editorData) {
+      return (
+        <EditorErrorBoundary>
+          <EditorDataMode editor={editor} editorData={editorData} {...props} />
+        </EditorErrorBoundary>
+      );
+    }
+
+    // Basic mode - original behavior
+    if (!editor) return null;
+
+    return (
+      <EditorErrorBoundary>
+        <InternalEditor editor={editor} {...props} />
+      </EditorErrorBoundary>
+    );
+  },
+);
+
+EditorCanvas.displayName = 'EditorCanvas';
+
+export default EditorCanvas;

package/src/features/EditorCanvas/EditorDataMode.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { type IEditor } from '@lobehub/editor';
+import { memo, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { EditorCanvasProps } from './EditorCanvas';
+import InternalEditor from './InternalEditor';
+
+export interface EditorDataModeProps extends EditorCanvasProps {
+  editor: IEditor | undefined;
+  editorData: NonNullable<EditorCanvasProps['editorData']>;
+}
+
+/**
+ * EditorCanvas with editorData mode - uses provided data directly
+ */
+const EditorDataMode = memo<EditorDataModeProps>(
+  ({ editor, editorData, onContentChange, style, ...editorProps }) => {
+    const { t } = useTranslation('file');
+    const [isInitialized, setIsInitialized] = useState(false);
+
+    // Load content into editor on mount
+    useEffect(() => {
+      if (!editor || isInitialized) return;
+
+      const hasValidEditorData =
+        editorData.editorData &&
+        typeof editorData.editorData === 'object' &&
+        Object.keys(editorData.editorData as object).length > 0;
+
+      try {
+        if (hasValidEditorData) {
+          editor.setDocument('json', JSON.stringify(editorData.editorData));
+        } else if (editorData.content?.trim()) {
+          editor.setDocument('markdown', editorData.content, { keepId: true });
+        } else {
+          console.error('[EditorCanvas] load content error:', editorData);
+        }
+
+        setIsInitialized(true);
+      } catch (err) {
+        console.error('[EditorCanvas] Failed to load content:', err);
+      }
+    }, [editorData, editor, isInitialized]);
+
+    if (!editor) return null;
+
+    return (
+      <div style={{ position: 'relative', ...style }}>
+        <InternalEditor
+          editor={editor}
+          onContentChange={onContentChange}
+          placeholder={editorProps.placeholder || t('pageEditor.editorPlaceholder')}
+          {...editorProps}
+        />
+      </div>
+    );
+  },
+);
+
+EditorDataMode.displayName = 'EditorDataMode';
+
+export default EditorDataMode;

package/src/features/EditorCanvas/ErrorBoundary.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { Alert } from '@lobehub/ui';
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+
+interface EditorErrorBoundaryState {
+  error: Error | null;
+  hasError: boolean;
+}
+
+interface EditorErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+/**
+ * ErrorBoundary for EditorCanvas component.
+ * Catches rendering errors in the editor and displays a fallback error UI
+ * instead of crashing the entire page.
+ */
+export class EditorErrorBoundary extends Component<
+  EditorErrorBoundaryProps,
+  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) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      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;
+  }
+}