@lobehub/lobehub 2.0.0-next.217 → 2.0.0-next.218

package/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 # Changelog
 
+## [Version 2.0.0-next.218](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.217...v2.0.0-next.218)
+
+<sup>Released on **2026-01-05**</sup>
+
+#### ✨ Features
+
+- **misc**: Update the sandbox export files & save files way.
+
+#### 🐛 Bug Fixes
+
+- **misc**: Fix editor modal when Markdown rendering off.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Update the sandbox export files & save files way, closes [#11249](https://github.com/lobehub/lobe-chat/issues/11249) ([039b0a1](https://github.com/lobehub/lobe-chat/commit/039b0a1))
+
+#### What's fixed
+
+- **misc**: Fix editor modal when Markdown rendering off, closes [#11251](https://github.com/lobehub/lobe-chat/issues/11251) ([eb86d3b](https://github.com/lobehub/lobe-chat/commit/eb86d3b))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.217](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.216...v2.0.0-next.217)
 
 <sup>Released on **2026-01-05**</sup>

package/changelog/v1.json

@@ -1,4 +1,16 @@
 [
+  {
+    "children": {
+      "features": [
+        "Update the sandbox export files & save files way."
+      ],
+      "fixes": [
+        "Fix editor modal when Markdown rendering off."
+      ]
+    },
+    "date": "2026-01-05",
+    "version": "2.0.0-next.218"
+  },
   {
     "children": {},
     "date": "2026-01-05",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.217",
+  "version": "2.0.0-next.218",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/builtin-tool-cloud-sandbox/src/ExecutionRuntime/index.ts

@@ -425,51 +425,38 @@ export class CloudSandboxExecutionRuntime {
 
   /**
    * Export a file from the sandbox to cloud storage
-   * 1. Get a pre-signed upload URL from our server
-   * 2. Call the sandbox to upload the file to that URL
-   * 3. Return the download URL to the user
+   * Uses a single tRPC call that handles:
+   * 1. Generate pre-signed upload URL
+   * 2. Call sandbox to upload file
+   * 3. Create persistent file record
+   * 4. Return permanent /f/:id URL
    */
   async exportFile(args: ExportFileParams): Promise<BuiltinServerRuntimeOutput> {
     try {
       // Extract filename from path
       const filename = args.path.split('/').pop() || 'exported_file';
 
-      // Step 1: Get pre-signed upload URL from our server
-      const uploadUrlResult = await codeInterpreterService.getExportFileUploadUrl(
+      // Single call that handles everything: upload URL generation, sandbox upload, and file record creation
+      const result = await codeInterpreterService.exportAndUploadFile(
+        args.path,
         filename,
         this.context.topicId,
       );
 
-      if (!uploadUrlResult.success) {
-        throw new Error(uploadUrlResult.error?.message || 'Failed to get upload URL');
-      }
-
-      // Step 2: Call the sandbox's exportFile tool with the upload URL
-      // The sandbox will read the file and upload it to the pre-signed URL
-      const result = await this.callTool('exportFile', {
-        path: args.path,
-        uploadUrl: uploadUrlResult.uploadUrl,
-      });
-
-      // Check if the sandbox upload was successful
-      const uploadSuccess = result.success && result.result?.success !== false;
-      const fileSize = result.result?.size;
-      const mimeType = result.result?.mimeType;
-      const fileContent = result.result?.content;
-
       const state: ExportFileState = {
-        content: fileContent,
-        downloadUrl: uploadSuccess ? uploadUrlResult.downloadUrl : '',
-        filename,
-        mimeType,
+        downloadUrl: result.success && result.url ? result.url : '',
+        fileId: result.fileId,
+        filename: result.filename,
+        mimeType: result.mimeType,
         path: args.path,
-        size: fileSize,
-        success: uploadSuccess,
+        size: result.size,
+        success: result.success,
       };
-      if (!uploadSuccess) {
+
+      if (!result.success) {
         return {
           content: JSON.stringify({
-            error: result.result?.error || 'Failed to upload file from sandbox',
+            error: result.error?.message || 'Failed to export file from sandbox',
             filename,
             success: false,
           }),
@@ -479,7 +466,7 @@ export class CloudSandboxExecutionRuntime {
       }
 
       return {
-        content: `File exported successfully.\n\nFilename: ${filename}\nDownload URL: ${uploadUrlResult.downloadUrl}`,
+        content: `File exported successfully.\n\nFilename: ${filename}\nDownload URL: ${result.url}`,
         state,
         success: true,
       };

package/packages/builtin-tool-cloud-sandbox/src/types.ts

@@ -90,10 +90,10 @@ export interface GlobFilesState {
 }
 
 export interface ExportFileState {
-  /** File content for text files (only when mimeType is text-like and size <= 1MB) */
-  content?: string;
-  /** The download URL for the exported file */
+  /** The download URL for the exported file (permanent /f/:id URL) */
   downloadUrl: string;
+  /** The file ID in database (returned from server) */
+  fileId?: string;
   /** The exported file name */
   filename: string;
   /** The MIME type of the file */

package/src/app/[variants]/(main)/chat/profile/features/EditorCanvas/TypoBar.tsx

@@ -1,6 +1,6 @@
 import { HotkeyEnum, getHotkeyById } from '@lobehub/editor';
 import { FloatActions } from '@lobehub/editor/react';
-import { type ChatInputActionsProps, CodeLanguageSelect } from '@lobehub/editor/react';
+import { type ChatInputActionsProps } from '@lobehub/editor/react';
 import {
   BoldIcon,
   CodeXmlIcon,
@@ -116,16 +116,6 @@ const TypoBar = memo(() => {
         label: t('typobar.codeblock'),
         onClick: editorState.codeblock,
       },
-      editorState.isCodeblock && {
-        children: (
-          <CodeLanguageSelect
-            onSelect={(value) => editorState.updateCodeblockLang(value)}
-            value={editorState.codeblockLang}
-          />
-        ),
-        disabled: !editorState.isCodeblock,
-        key: 'codeblockLang',
-      },
     ].filter(Boolean) as ChatInputActionsProps['items'];
   }, [editorState, t]);
 

package/src/app/[variants]/(main)/group/profile/features/EditorCanvas/TypoBar.tsx

@@ -1,6 +1,6 @@
 import { HotkeyEnum, getHotkeyById } from '@lobehub/editor';
 import { FloatActions } from '@lobehub/editor/react';
-import { type ChatInputActionsProps, CodeLanguageSelect } from '@lobehub/editor/react';
+import { type ChatInputActionsProps } from '@lobehub/editor/react';
 import {
   BoldIcon,
   CodeXmlIcon,
@@ -116,16 +116,6 @@ const TypoBar = memo(() => {
         label: t('typobar.codeblock'),
         onClick: editorState.codeblock,
       },
-      editorState.isCodeblock && {
-        children: (
-          <CodeLanguageSelect
-            onSelect={(value) => editorState.updateCodeblockLang(value)}
-            value={editorState.codeblockLang}
-          />
-        ),
-        disabled: !editorState.isCodeblock,
-        key: 'codeblockLang',
-      },
     ].filter(Boolean) as ChatInputActionsProps['items'];
   }, [editorState, t]);
 

package/src/app/[variants]/(main)/memory/features/EditableModal/index.tsx

@@ -1,66 +1,16 @@
-import {
-  ReactCodePlugin,
-  ReactCodemirrorPlugin,
-  ReactHRPlugin,
-  ReactLinkHighlightPlugin,
-  ReactListPlugin,
-  ReactMathPlugin,
-  ReactTablePlugin,
-} from '@lobehub/editor';
-import { Editor, useEditor } from '@lobehub/editor/react';
-import { Flexbox, Modal } from '@lobehub/ui';
-import { memo, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
-import { useUserStore } from '@/store/user';
-import { labPreferSelectors } from '@/store/user/slices/preference/selectors';
+import { EditorModal } from '@/features/EditorModal';
 import { useUserMemoryStore } from '@/store/userMemory';
 import { LayersEnum } from '@/types/userMemory';
 
-import TypoBar from './Typobar';
-
 const EditableModal = memo(() => {
-  const { t } = useTranslation('common');
-  const editor = useEditor();
-  const [confirmLoading, setConfirmLoading] = useState(false);
   const editingMemoryId = useUserMemoryStore((s) => s.editingMemoryId);
   const editingMemoryContent = useUserMemoryStore((s) => s.editingMemoryContent);
   const editingMemoryLayer = useUserMemoryStore((s) => s.editingMemoryLayer);
   const clearEditingMemory = useUserMemoryStore((s) => s.clearEditingMemory);
   const updateMemory = useUserMemoryStore((s) => s.updateMemory);
 
-  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
-
-  const richRenderProps = useMemo(
-    () =>
-      !enableRichRender
-        ? {
-            enablePasteMarkdown: false,
-            markdownOption: {
-              bold: false,
-              code: false,
-              header: false,
-              italic: false,
-              quote: false,
-              strikethrough: false,
-              underline: false,
-              underlineStrikethrough: false,
-            },
-          }
-        : {
-            plugins: [
-              ReactListPlugin,
-              ReactCodePlugin,
-              ReactCodemirrorPlugin,
-              ReactHRPlugin,
-              ReactLinkHighlightPlugin,
-              ReactTablePlugin,
-              ReactMathPlugin,
-            ],
-          },
-    [enableRichRender],
-  );
-
   const layerMap = {
     context: LayersEnum.Context,
     experience: LayersEnum.Experience,
@@ -69,58 +19,15 @@ const EditableModal = memo(() => {
   };
 
   return (
-    <Modal
-      cancelText={t('cancel')}
-      closable={false}
-      confirmLoading={confirmLoading}
-      destroyOnHidden
-      okText={t('ok')}
+    <EditorModal
       onCancel={clearEditingMemory}
-      onOk={async () => {
-        if (!editor || !editingMemoryId || !editingMemoryLayer) return;
-        setConfirmLoading(true);
-        const newValue = editor.getDocument('markdown') as unknown as string;
-        await updateMemory(editingMemoryId, newValue, layerMap[editingMemoryLayer]);
-        setConfirmLoading(false);
+      onConfirm={async (value) => {
+        if (!editingMemoryId || !editingMemoryLayer) return;
+        await updateMemory(editingMemoryId, value, layerMap[editingMemoryLayer]);
       }}
       open={!!editingMemoryId}
-      styles={{
-        body: {
-          overflow: 'hidden',
-          padding: 0,
-        },
-      }}
-      title={null}
-      width={'min(90vw, 960px)'}
-    >
-      <TypoBar editor={editor} />
-      <Flexbox
-        onClick={() => {
-          editor.focus();
-        }}
-        paddingBlock={16}
-        paddingInline={48}
-        style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
-      >
-        <Editor
-          autoFocus
-          content={''}
-          editor={editor}
-          onInit={(editor) => {
-            if (!editor) return;
-            try {
-              editor?.setDocument('markdown', editingMemoryContent);
-            } catch {}
-          }}
-          style={{
-            paddingBottom: 120,
-          }}
-          type={'text'}
-          variant={'chat'}
-          {...richRenderProps}
-        />
-      </Flexbox>
-    </Modal>
+      value={editingMemoryContent}
+    />
   );
 });
 

package/src/features/ChatInput/InputEditor/index.tsx

@@ -99,6 +99,7 @@ const InputEditor = memo<{ defaultRows?: number }>(({ defaultRows = 2 }) => {
               underline: false,
               underlineStrikethrough: false,
             },
+            plugins: [ReactCodemirrorPlugin],
           }
         : {
             plugins: [

package/src/features/ChatInput/TypoBar/index.tsx

@@ -4,7 +4,6 @@ import {
   ChatInputActionBar,
   ChatInputActions,
   type ChatInputActionsProps,
-  CodeLanguageSelect,
 } from '@lobehub/editor/react';
 import { cssVar } from 'antd-style';
 import {
@@ -122,16 +121,6 @@ const TypoBar = memo(() => {
           label: t('typobar.codeblock'),
           onClick: editorState.codeblock,
         },
-        editorState.isCodeblock && {
-          children: (
-            <CodeLanguageSelect
-              onSelect={(value) => editorState.updateCodeblockLang(value)}
-              value={editorState.codeblockLang}
-            />
-          ),
-          disabled: !editorState.isCodeblock,
-          key: 'codeblockLang',
-        },
       ].filter(Boolean) as ChatInputActionsProps['items'],
     [editorState],
   );

package/src/features/Conversation/ChatItem/components/MessageContent/index.tsx

@@ -7,7 +7,10 @@ import { useConversationStore } from '@/features/Conversation/store';
 
 import { type ChatItemProps } from '../../type';
 
-const EditableModal = dynamic(() => import('./EditableModal'), { ssr: false });
+const EditorModal = dynamic(
+  () => import('@/features/EditorModal').then((mode) => mode.EditorModal),
+  { ssr: false },
+);
 
 export const MSG_CONTENT_CLASSNAME = 'msg_content_flag';
 
@@ -60,13 +63,6 @@ const MessageContent = memo<MessageContentProps>(
       s.updateMessageContent,
     ]);
 
-    const onChange = useCallback(
-      (value: string) => {
-        updateMessageContent(id, value);
-      },
-      [id, updateMessageContent],
-    );
-
     const onEditingChange = useCallback(
       (edit: boolean) => toggleMessageEditing(id, edit),
       [id, toggleMessageEditing],
@@ -90,10 +86,13 @@ const MessageContent = memo<MessageContentProps>(
         </Flexbox>
         <Suspense fallback={null}>
           {editing && (
-            <EditableModal
-              editing={editing}
-              onChange={onChange}
-              onEditingChange={onEditingChange}
+            <EditorModal
+              onCancel={() => onEditingChange(false)}
+              onConfirm={async (value) => {
+                await updateMessageContent(id, value);
+                onEditingChange(false);
+              }}
+              open={editing}
               value={message ? String(message) : ''}
             />
           )}

package/src/features/EditorModal/EditorCanvas.tsx

@@ -0,0 +1,81 @@
+import {
+  ReactCodePlugin,
+  ReactCodemirrorPlugin,
+  ReactHRPlugin,
+  ReactLinkPlugin,
+  ReactListPlugin,
+  ReactMathPlugin,
+  ReactTablePlugin,
+} from '@lobehub/editor';
+import { Editor, useEditor } from '@lobehub/editor/react';
+import { Flexbox } from '@lobehub/ui';
+import { FC } from 'react';
+
+import TypoBar from './Typobar';
+
+interface EditorCanvasProps {
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
+  const editor = useEditor();
+  return (
+    <>
+      <TypoBar editor={editor} />
+      <Flexbox
+        onClick={() => {
+          editor?.focus();
+        }}
+        padding={16}
+        style={{ cursor: 'text', maxHeight: '80vh', minHeight: '50vh', overflowY: 'auto' }}
+      >
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+            e.preventDefault();
+          }}
+        >
+          <Editor
+            autoFocus
+            content={''}
+            editor={editor}
+            onInit={(editor) => {
+              if (!editor || !value) return;
+              try {
+                editor?.setDocument('markdown', value);
+              } catch (e) {
+                console.error('setDocument error:', e);
+              }
+            }}
+            onTextChange={(editor) => {
+              try {
+                const newValue = editor.getDocument('markdown') as unknown as string;
+                onChange?.(newValue);
+              } catch (e) {
+                console.error('getDocument error:', e);
+                onChange?.('');
+              }
+            }}
+            plugins={[
+              ReactListPlugin,
+              ReactCodePlugin,
+              ReactCodemirrorPlugin,
+              ReactHRPlugin,
+              ReactLinkPlugin,
+              ReactTablePlugin,
+              ReactMathPlugin,
+            ]}
+            style={{
+              paddingBottom: 120,
+            }}
+            type={'text'}
+            variant={'chat'}
+          />
+        </div>
+      </Flexbox>
+    </>
+  );
+};
+
+export default EditorCanvas;

package/src/features/EditorModal/TextareCanvas.tsx

@@ -0,0 +1,28 @@
+import { TextArea } from '@lobehub/ui';
+import { FC } from 'react';
+
+interface EditorCanvasProps {
+  onChange?: (value: string) => void;
+  value?: string;
+}
+
+const EditorCanvas: FC<EditorCanvasProps> = ({ value, onChange }) => {
+  return (
+    <TextArea
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+      style={{
+        cursor: 'text',
+        maxHeight: '80vh',
+        minHeight: '50vh',
+        overflowY: 'auto',
+        padding: 16,
+      }}
+      value={value}
+      variant={'borderless'}
+    />
+  );
+};
+
+export default EditorCanvas;

package/src/{app/[variants]/(main)/memory/features/EditableModal → features/EditorModal}/Typobar.tsx

@@ -4,7 +4,6 @@ import {
   ChatInputActionBar,
   ChatInputActions,
   type ChatInputActionsProps,
-  CodeLanguageSelect,
 } from '@lobehub/editor/react';
 import { cssVar } from 'antd-style';
 import {
@@ -119,16 +118,6 @@ const TypoBar = memo<{ editor?: IEditor }>(({ editor }) => {
           label: t('typobar.codeblock'),
           onClick: editorState.codeblock,
         },
-        editorState.isCodeblock && {
-          children: (
-            <CodeLanguageSelect
-              onSelect={(value) => editorState.updateCodeblockLang(value)}
-              value={editorState.codeblockLang}
-            />
-          ),
-          disabled: !editorState.isCodeblock,
-          key: 'codeblockLang',
-        },
       ].filter(Boolean) as ChatInputActionsProps['items'],
     [editorState],
   );

package/src/features/EditorModal/index.tsx

@@ -0,0 +1,51 @@
+import { Modal, ModalProps, createRawModal } from '@lobehub/ui';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useUserStore } from '@/store/user';
+import { labPreferSelectors } from '@/store/user/slices/preference/selectors';
+
+import EditorCanvas from './EditorCanvas';
+import TextareCanvas from './TextareCanvas';
+
+interface EditorModalProps extends ModalProps {
+  onConfirm?: (value: string) => Promise<void>;
+  value?: string;
+}
+
+export const EditorModal = memo<EditorModalProps>(({ value, onConfirm, ...rest }) => {
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const { t } = useTranslation('common');
+  const [v, setV] = useState(value);
+  const enableRichRender = useUserStore(labPreferSelectors.enableInputMarkdown);
+
+  const Canvas = enableRichRender ? EditorCanvas : TextareCanvas;
+
+  return (
+    <Modal
+      cancelText={t('cancel')}
+      closable={false}
+      confirmLoading={confirmLoading}
+      destroyOnHidden
+      okText={t('ok')}
+      onOk={async () => {
+        setConfirmLoading(true);
+        await onConfirm?.(v || '');
+        setConfirmLoading(false);
+      }}
+      styles={{
+        body: {
+          overflow: 'hidden',
+          padding: 0,
+        },
+      }}
+      title={null}
+      width={'min(90vw, 920px)'}
+      {...rest}
+    >
+      <Canvas onChange={(v) => setV(v)} value={v} />
+    </Modal>
+  );
+});
+
+export const createEditorModal = (props: EditorModalProps) => createRawModal(EditorModal, props);

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

@@ -7,12 +7,7 @@ import {
   INSERT_HEADING_COMMAND,
   getHotkeyById,
 } from '@lobehub/editor';
-import {
-  ChatInputActions,
-  type ChatInputActionsProps,
-  CodeLanguageSelect,
-  FloatActions,
-} from '@lobehub/editor/react';
+import { ChatInputActions, type ChatInputActionsProps, FloatActions } from '@lobehub/editor/react';
 import { Block } from '@lobehub/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import {
@@ -283,17 +278,6 @@ const TypoBar = memo<ToolbarProps>(({ floating, style, className }) => {
         label: t('typobar.codeblock'),
         onClick: editorState.codeblock,
       },
-      !floating &&
-        editorState.isCodeblock && {
-          children: (
-            <CodeLanguageSelect
-              onSelect={(value) => editorState.updateCodeblockLang(value)}
-              value={editorState.codeblockLang}
-            />
-          ),
-          disabled: !editorState.isCodeblock,
-          key: 'codeblockLang',
-        },
     ];
 
     return baseItems.filter(Boolean) as ChatInputActionsProps['items'];