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

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;
+  }
+}

package/src/features/EditorCanvas/InlineToolbar.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import {
+  HotkeyEnum,
+  INSERT_HEADING_COMMAND,
+  getHotkeyById,
+  type IEditor,
+} from '@lobehub/editor';
+import {
+  ChatInputActions,
+  type ChatInputActionsProps,
+  type EditorState,
+  FloatActions,
+} from '@lobehub/editor/react';
+import { Block } from '@lobehub/ui';
+import { cssVar } from 'antd-style';
+import {
+  BoldIcon,
+  CodeXmlIcon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  ListTodoIcon,
+  MessageSquareQuote,
+  Redo2Icon,
+  SigmaIcon,
+  SquareDashedBottomCodeIcon,
+  StrikethroughIcon,
+  UnderlineIcon,
+  Undo2Icon,
+} from 'lucide-react';
+import { type CSSProperties, memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export interface InlineToolbarProps {
+  className?: string;
+  editor?: IEditor;
+  editorState?: EditorState;
+  /**
+   * Extra items to prepend to the toolbar (e.g., "Ask Copilot" button)
+   */
+  extraItems?: ChatInputActionsProps['items'];
+  floating?: boolean;
+  style?: CSSProperties;
+}
+
+const InlineToolbar = memo<InlineToolbarProps>(
+  ({ floating, style, className, editor, editorState, extraItems }) => {
+    const { t } = useTranslation('editor');
+
+    const items: ChatInputActionsProps['items'] = useMemo(() => {
+      if (!editorState) return [];
+
+      const baseItems = [
+        // Extra items (like "Ask Copilot") come first
+        ...(extraItems || []),
+        extraItems?.length ? { type: 'divider' as const } : null,
+        !floating && {
+          disabled: !editorState.canUndo,
+          icon: Undo2Icon,
+          key: 'undo',
+          label: t('typobar.undo', 'Undo'),
+          onClick: editorState.undo,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Undo).keys },
+        },
+        !floating && {
+          disabled: !editorState.canRedo,
+          icon: Redo2Icon,
+          key: 'redo',
+          label: t('typobar.redo', 'Redo'),
+          onClick: editorState.redo,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Redo).keys },
+        },
+        !floating && {
+          type: 'divider',
+        },
+        {
+          active: editorState.isBold,
+          icon: BoldIcon,
+          key: 'bold',
+          label: t('typobar.bold'),
+          onClick: editorState.bold,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Bold).keys },
+        },
+        {
+          active: editorState.isItalic,
+          icon: ItalicIcon,
+          key: 'italic',
+          label: t('typobar.italic'),
+          onClick: editorState.italic,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Italic).keys },
+        },
+        {
+          active: editorState.isUnderline,
+          icon: UnderlineIcon,
+          key: 'underline',
+          label: t('typobar.underline'),
+          onClick: editorState.underline,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Underline).keys },
+        },
+        {
+          active: editorState.isStrikethrough,
+          icon: StrikethroughIcon,
+          key: 'strikethrough',
+          label: t('typobar.strikethrough'),
+          onClick: editorState.strikethrough,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Strikethrough).keys },
+        },
+        {
+          type: 'divider',
+        },
+        !floating && {
+          icon: Heading1Icon,
+          key: 'h1',
+          label: t('slash.h1'),
+          onClick: () => {
+            if (editor) {
+              editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h1' });
+            }
+          },
+        },
+        !floating && {
+          icon: Heading2Icon,
+          key: 'h2',
+          label: t('slash.h2'),
+          onClick: () => {
+            if (editor) {
+              editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h2' });
+            }
+          },
+        },
+        !floating && {
+          icon: Heading3Icon,
+          key: 'h3',
+          label: t('slash.h3'),
+          onClick: () => {
+            if (editor) {
+              editor.dispatchCommand(INSERT_HEADING_COMMAND, { tag: 'h3' });
+            }
+          },
+        },
+        !floating && {
+          type: 'divider',
+        },
+        {
+          icon: ListIcon,
+          key: 'bulletList',
+          label: t('typobar.bulletList'),
+          onClick: editorState.bulletList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.BulletList).keys },
+        },
+        {
+          icon: ListOrderedIcon,
+          key: 'numberlist',
+          label: t('typobar.numberList'),
+          onClick: editorState.numberList,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.NumberList).keys },
+        },
+        {
+          icon: ListTodoIcon,
+          key: 'tasklist',
+          label: t('typobar.taskList'),
+          onClick: editorState.checkList,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          active: editorState.isBlockquote,
+          icon: MessageSquareQuote,
+          key: 'blockquote',
+          label: t('typobar.blockquote'),
+          onClick: editorState.blockquote,
+        },
+        {
+          icon: LinkIcon,
+          key: 'link',
+          label: t('typobar.link'),
+          onClick: editorState.insertLink,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.Link).keys },
+        },
+        {
+          icon: SigmaIcon,
+          key: 'math',
+          label: t('typobar.tex'),
+          onClick: editorState.insertMath,
+        },
+        {
+          type: 'divider',
+        },
+        {
+          active: editorState.isCode,
+          icon: CodeXmlIcon,
+          key: 'code',
+          label: t('typobar.code'),
+          onClick: editorState.code,
+          tooltipProps: { hotkey: getHotkeyById(HotkeyEnum.CodeInline).keys },
+        },
+        !floating && {
+          icon: SquareDashedBottomCodeIcon,
+          key: 'codeblock',
+          label: t('typobar.codeblock'),
+          onClick: editorState.codeblock,
+        },
+      ];
+
+      return baseItems.filter(Boolean) as ChatInputActionsProps['items'];
+    }, [editor, editorState, extraItems, floating, t]);
+
+    if (!editorState) return null;
+
+    // Floating toolbar - just return the actions
+    if (floating) return <FloatActions className={className} items={items} style={style} />;
+
+    // Fixed toolbar - wrap in a styled container
+    return (
+      <Block
+        className={className}
+        padding={4}
+        shadow
+        style={{
+          background: cssVar.colorBgElevated,
+          borderRadius: 8,
+          marginBottom: 16,
+          marginTop: 16,
+          position: 'sticky',
+          top: 12,
+          zIndex: 10,
+          ...style,
+        }}
+        variant={'outlined'}
+      >
+        <ChatInputActions items={items} />
+      </Block>
+    );
+  },
+);
+
+InlineToolbar.displayName = 'InlineToolbar';
+
+export default InlineToolbar;