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

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

@@ -1,316 +0,0 @@
-'use client';
-
-import { nanoid } from '@lobechat/utils';
-import {
-  HIDE_TOOLBAR_COMMAND,
-  HotkeyEnum,
-  INSERT_HEADING_COMMAND,
-  getHotkeyById,
-} from '@lobehub/editor';
-import { ChatInputActions, type ChatInputActionsProps, FloatActions } from '@lobehub/editor/react';
-import { Block } from '@lobehub/ui';
-import { createStaticStyles, cssVar } from 'antd-style';
-import {
-  BoldIcon,
-  BotIcon,
-  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';
-
-import { useFileStore } from '@/store/file';
-import { useGlobalStore } from '@/store/global';
-
-import { usePageEditorStore } from '../store';
-
-interface ToolbarProps {
-  className?: string;
-  floating?: boolean;
-  style?: CSSProperties;
-}
-
-const styles = createStaticStyles(({ css }) => ({
-  askCopilot: css`
-    border-radius: 6px;
-    color: ${cssVar.colorTextDescription};
-
-    &:hover {
-      color: ${cssVar.colorTextSecondary};
-    }
-  `,
-}));
-
-const TypoBar = memo<ToolbarProps>(({ floating, style, className }) => {
-  const { t } = useTranslation('editor');
-  const editor = usePageEditorStore((s) => s.editor);
-  const editorState = usePageEditorStore((s) => s.editorState);
-  const addSelectionContext = useFileStore((s) => s.addChatContextSelection);
-
-  const items: ChatInputActionsProps['items'] = useMemo(() => {
-    if (!editorState) return [];
-    const baseItems = [
-      floating && {
-        children: (
-          <Block
-            align="center"
-            className={styles.askCopilot}
-            clickable
-            gap={8}
-            horizontal
-            onClick={() => {
-              if (!editor) return;
-
-              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: () => {},
-        tooltipProps: { hotkey: undefined },
-      },
-      {
-        type: 'divider',
-      },
-      !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'];
-  }, [addSelectionContext, editor, editorState, 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>
-  );
-});
-
-TypoBar.displayName = 'PageEditorToolbar';
-
-export default TypoBar;

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

@@ -1,27 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-
-import AutoSaveHintBase from '@/components/Editor/AutoSaveHint';
-
-import { usePageEditorStore } from '../store';
-
-/**
- * AutoSaveHint - Save status indicator for page editor
- */
-const AutoSaveHint = memo(() => {
-  const saveStatus = usePageEditorStore((s) => s.saveStatus);
-  const lastUpdatedTime = usePageEditorStore((s) => s.lastUpdatedTime);
-
-  return (
-    <AutoSaveHintBase
-      lastUpdatedTime={lastUpdatedTime}
-      saveStatus={saveStatus}
-      style={{
-        marginLeft: 6,
-      }}
-    />
-  );
-});
-
-export default AutoSaveHint;

package/src/features/Portal/Artifacts/useEnable.ts

@@ -1,4 +0,0 @@
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
-
-export const useEnable = () => useChatStore(chatPortalSelectors.showArtifactUI);

package/src/features/Portal/Document/DocumentEditorProvider.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { useEditor } from '@lobehub/editor/react';
-import { type ReactNode, memo } from 'react';
-
-import StoreUpdater from './StoreUpdater';
-import { DocumentEditorProvider as Provider, createStore } from './store';
-
-interface DocumentEditorProviderProps {
-  children: ReactNode;
-  documentId: string | undefined;
-  topicId: string | undefined;
-}
-
-export const DocumentEditorProvider = memo<DocumentEditorProviderProps>(
-  ({ children, documentId, topicId }) => {
-    const editor = useEditor();
-
-    return (
-      <Provider
-        createStore={() =>
-          createStore({
-            documentId,
-            editor,
-            topicId,
-          })
-        }
-      >
-        <StoreUpdater documentId={documentId} topicId={topicId} />
-        {children}
-      </Provider>
-    );
-  },
-);

package/src/features/Portal/Document/StoreUpdater.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import debug from 'debug';
-import { memo, useEffect, useRef, useState } from 'react';
-import { createStoreUpdater } from 'zustand-utils';
-
-import { useNotebookStore } from '@/store/notebook';
-import { notebookSelectors } from '@/store/notebook/selectors';
-
-import { useDocumentEditorStore, useDocumentEditorStoreApi } from './store';
-
-const log = debug('portal:document-store-updater');
-
-interface StoreUpdaterProps {
-  documentId: string | undefined;
-  topicId: string | undefined;
-}
-
-const StoreUpdater = memo<StoreUpdaterProps>(({ documentId, topicId }) => {
-  const storeApi = useDocumentEditorStoreApi();
-  const useStoreUpdater = createStoreUpdater(storeApi);
-
-  const editor = useDocumentEditorStore((s) => s.editor);
-
-  const document = useNotebookStore(notebookSelectors.getDocumentById(topicId, documentId));
-
-  const [editorInit, setEditorInit] = useState(false);
-  const [contentInit, setContentInit] = useState(false);
-  const lastLoadedDocIdRef = useRef<string | undefined>(undefined);
-
-  // Update store with props
-  useStoreUpdater('documentId', documentId);
-  useStoreUpdater('topicId', topicId);
-
-  // Load content into editor when document changes
-  useEffect(() => {
-    if (!editorInit || !editor || !document) return;
-
-    // Skip if already initialized for this document
-    if (contentInit && lastLoadedDocIdRef.current === documentId) return;
-
-    // Reset content init when document changes
-    if (lastLoadedDocIdRef.current !== documentId) {
-      setContentInit(false);
-    }
-
-    queueMicrotask(() => {
-      try {
-        log('Loading content for document:', documentId);
-
-        const content = document.content || '';
-
-        // Set state before setDocument to ensure lastSavedContent is correct
-        // when handleContentChange is triggered
-        storeApi.setState({
-          currentTitle: document.title || '',
-          lastSavedContent: content,
-        });
-
-        editor.setDocument('markdown', content || ' ');
-
-        lastLoadedDocIdRef.current = documentId;
-        setContentInit(true);
-      } catch (error) {
-        log('Failed to load editor content:', error);
-      }
-    });
-  }, [editorInit, editor, document, documentId, contentInit, storeApi]);
-
-  // Track editor initialization
-  useEffect(() => {
-    if (editor && !editorInit) {
-      setEditorInit(true);
-    }
-  }, [editor, editorInit]);
-
-  return null;
-});
-
-export default StoreUpdater;

package/src/features/Portal/Document/Title.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { Flexbox, TextArea } from '@lobehub/ui';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useDocumentEditorStore } from './store';
-
-const Title = memo(() => {
-  const { t } = useTranslation('file');
-
-  const currentTitle = useDocumentEditorStore((s) => s.currentTitle);
-  const setCurrentTitle = useDocumentEditorStore((s) => s.setCurrentTitle);
-  const handleTitleSubmit = useDocumentEditorStore((s) => s.handleTitleSubmit);
-
-  return (
-    <Flexbox
-      gap={16}
-      onClick={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      paddingBlock={16}
-      style={{
-        cursor: 'default',
-      }}
-    >
-      <TextArea
-        autoSize={{ minRows: 1 }}
-        onChange={(e) => {
-          setCurrentTitle(e.target.value);
-        }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault();
-            handleTitleSubmit();
-          }
-        }}
-        placeholder={t('pageEditor.titlePlaceholder')}
-        style={{
-          fontSize: 24,
-          fontWeight: 600,
-          padding: 0,
-          resize: 'none',
-          width: '100%',
-        }}
-        value={currentTitle}
-        variant={'borderless'}
-      />
-    </Flexbox>
-  );
-});
-
-export default Title;

package/src/features/Portal/Document/store/action.ts

@@ -1,114 +0,0 @@
-'use client';
-
-import { EDITOR_DEBOUNCE_TIME, EDITOR_MAX_WAIT } from '@lobechat/const';
-import debug from 'debug';
-import { debounce } from 'es-toolkit/compat';
-import { type StateCreator } from 'zustand';
-
-import { useNotebookStore } from '@/store/notebook';
-
-import { type DocumentEditorState, initialDocumentEditorState } from './initialState';
-
-const log = debug('portal:document-editor');
-
-export interface DocumentEditorAction {
-  flushSave: () => void;
-  handleContentChange: () => void;
-  handleTitleSubmit: () => Promise<void>;
-  performSave: () => Promise<void>;
-  setCurrentTitle: (title: string) => void;
-}
-
-export type DocumentEditorStore = DocumentEditorState & DocumentEditorAction;
-
-const createDebouncedSave = (get: () => DocumentEditorStore) =>
-  debounce(
-    async () => {
-      try {
-        await get().performSave();
-      } catch (error) {
-        log('Failed to auto-save:', error);
-      }
-    },
-    EDITOR_DEBOUNCE_TIME,
-    { leading: false, maxWait: EDITOR_MAX_WAIT, trailing: true },
-  );
-
-export const createDocumentEditorStore: (
-  initState?: Partial<DocumentEditorState>,
-) => StateCreator<DocumentEditorStore> = (initState) => (set, get) => {
-  const debouncedSave = createDebouncedSave(get);
-
-  return {
-    ...initialDocumentEditorState,
-    ...initState,
-
-    flushSave: () => {
-      debouncedSave.flush();
-    },
-
-    handleContentChange: () => {
-      const { editor, lastSavedContent } = get();
-      if (!editor) return;
-
-      try {
-        const markdownContent = (editor.getDocument('markdown') as unknown as string) || '';
-        const contentChanged = markdownContent !== lastSavedContent;
-
-        set({ isDirty: contentChanged });
-
-        if (contentChanged) {
-          debouncedSave();
-        }
-      } catch (error) {
-        log('Failed to update content:', error);
-      }
-    },
-
-    handleTitleSubmit: async () => {
-      const { performSave, editor } = get();
-      await performSave();
-      editor?.focus();
-    },
-
-    performSave: async () => {
-      const { editor, documentId, topicId, isDirty, currentTitle } = get();
-
-      if (!editor || !documentId || !topicId) return;
-
-      if (!isDirty) return;
-
-      set({ saveStatus: 'saving' });
-
-      try {
-        const currentContent = (editor.getDocument('markdown') as unknown as string) || '';
-
-        await useNotebookStore.getState().updateDocument(
-          {
-            content: currentContent,
-            id: documentId,
-            title: currentTitle || undefined,
-          },
-          topicId,
-        );
-
-        set({
-          isDirty: false,
-          lastSavedContent: currentContent,
-          lastUpdatedTime: new Date(),
-          saveStatus: 'saved',
-        });
-
-        log('Document saved successfully:', documentId);
-      } catch (error) {
-        log('Failed to save document:', error);
-        set({ saveStatus: 'idle' });
-      }
-    },
-
-    setCurrentTitle: (title: string) => {
-      set({ currentTitle: title, isDirty: true });
-      debouncedSave();
-    },
-  };
-};

package/src/features/Portal/Document/store/index.ts

@@ -1,21 +0,0 @@
-'use client';
-
-import { type StoreApiWithSelector } from '@lobechat/types';
-import { createContext } from 'zustand-utils';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
-
-import { type DocumentEditorStore, createDocumentEditorStore } from './action';
-import { type DocumentEditorState } from './initialState';
-
-export type { DocumentEditorState } from './initialState';
-
-export const createStore = (initState?: Partial<DocumentEditorState>) =>
-  createWithEqualityFn(subscribeWithSelector(createDocumentEditorStore(initState)), shallow);
-
-export const {
-  useStore: useDocumentEditorStore,
-  useStoreApi: useDocumentEditorStoreApi,
-  Provider: DocumentEditorProvider,
-} = createContext<StoreApiWithSelector<DocumentEditorStore>>();

package/src/features/Portal/Document/store/initialState.ts

@@ -1,24 +0,0 @@
-'use client';
-
-import { type IEditor } from '@lobehub/editor';
-
-export interface DocumentEditorState {
-  currentTitle: string;
-  documentId: string | undefined;
-  editor?: IEditor;
-  isDirty: boolean;
-  lastSavedContent: string;
-  lastUpdatedTime: Date | null;
-  saveStatus: 'idle' | 'saving' | 'saved';
-  topicId: string | undefined;
-}
-
-export const initialDocumentEditorState: DocumentEditorState = {
-  currentTitle: '',
-  documentId: undefined,
-  isDirty: false,
-  lastSavedContent: '',
-  lastUpdatedTime: null,
-  saveStatus: 'idle',
-  topicId: undefined,
-};

package/src/features/Portal/Document/useEnable.ts

@@ -1,8 +0,0 @@
-'use client';
-
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
-
-export const useEnable = () => {
-  return useChatStore(chatPortalSelectors.showDocument);
-};

package/src/features/Portal/FilePreview/useEnable.ts

@@ -1,6 +0,0 @@
-import { useChatStore } from '@/store/chat';
-import { chatPortalSelectors } from '@/store/chat/selectors';
-
-export const useEnable = () => {
-  return useChatStore(chatPortalSelectors.showFilePreview);
-};