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

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;

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>