feat: code tools, editor, executor (#4632)

* feat: code tools, editor, executor

CodeEditor & Preview
- CodeEditor: CodeMirror 6
  - Switch to CodeEditor in the settings
  - Support edit&save with a accurate diff&lookup strategy
  - Use CodeEditor for editing MCP json configuration
- CodePreview: Original Shiki syntax highlighting
  - Implemented using a custom Shiki stream tokenizer
  - Remov code caching as it is incompatible with the current streaming code highlighting
  - Add a webworker for shiki
- Other preview components
  - Merge MermaidPopup and Mermaid to MermaidPreview, use local mermaidjs
  - Show mermaid syntax error message on demand
  - Rename PlantUML to PlantUmlPreview
- Rename SyntaxHighlighterProvider to CodeStyleProvider for clarity
- Both light and dark themes are preserved for convenience

CodeToolbar
- Top sticky toolbar provides quick tools (left) and core tools (right)
- Quick tools are hidden under the `More` button to avoid clutter, while core tools are always visible
- View&edit mode
  - Allow switching between preview and edit modes
  - Add a split view

Code execution
- Pyodide for executing Python scripts
- Add a webworker for Pyodide

* fix: migrate version and lint error

* refactor: use constants for defining tool specs

* refactor: add user-select, fix tool specs

* refactor: simplify some state changing

* fix: make sure editor tools registered after the editor is ready

---------

Co-authored-by: 自由的世界人 <3196812536@qq.com>

Author: 2 people

electron.vite.config.ts

@@ -73,13 +73,26 @@ export default defineConfig({
       }
     },
     optimizeDeps: {
-      exclude: []
+      exclude: ['pyodide']
+    },
+    worker: {
+      format: 'es'
     },
     build: {
       rollupOptions: {
         input: {
           index: resolve(__dirname, 'src/renderer/index.html'),
           miniWindow: resolve(__dirname, 'src/renderer/miniWindow.html')
+        },
+        output: {
+          manualChunks: (id) => {
+            // 检测所有 worker 文件，提取 worker 名称作为 chunk 名
+            if (id.includes('.worker') && id.endsWith('?worker')) {
+              const workerName = id.split('/').pop()?.split('.')[0] || 'worker'
+              return `workers/${workerName}`
+            }
+            return undefined
+          }
         }
       }
     }

package.json

@@ -74,6 +74,9 @@
     "@strongtz/win32-arm64-msvc": "^0.4.7",
     "@tanstack/react-query": "^5.27.0",
     "@types/react-infinite-scroll-component": "^5.0.0",
+    "@uiw/codemirror-extensions-langs": "^4.23.12",
+    "@uiw/codemirror-themes-all": "^4.23.12",
+    "@uiw/react-codemirror": "^4.23.12",
     "archiver": "^7.0.1",
     "async-mutex": "^0.5.0",
     "color": "^5.0.0",
@@ -84,12 +87,14 @@
     "electron-updater": "6.6.4",
     "electron-window-state": "^5.0.3",
     "epub": "patch:epub@npm%3A1.3.0#~/.yarn/patches/epub-npm-1.3.0-8325494ffe.patch",
+    "fast-diff": "^1.3.0",
     "fast-xml-parser": "^5.2.0",
     "fetch-socks": "^1.3.2",
     "fs-extra": "^11.2.0",
     "got-scraping": "^4.1.1",
     "jsdom": "^26.0.0",
     "markdown-it": "^14.1.0",
+    "mermaid": "^11.6.0",
     "node-stream-zip": "^1.15.0",
     "officeparser": "^4.1.1",
     "os-proxy-config": "^1.1.2",
@@ -145,6 +150,7 @@
     "@vitejs/plugin-react-swc": "^3.9.0",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
+    "@vitest/web-worker": "^3.1.3",
     "@xyflow/react": "^12.4.4",
     "antd": "^5.22.5",
     "applescript": "^1.0.0",

src/renderer/src/App.tsx

@@ -8,8 +8,8 @@ import { PersistGate } from 'redux-persist/integration/react'
 import Sidebar from './components/app/Sidebar'
 import TopViewContainer from './components/TopView'
 import AntdProvider from './context/AntdProvider'
+import { CodeStyleProvider } from './context/CodeStyleProvider'
 import StyleSheetManager from './context/StyleSheetManager'
-import { SyntaxHighlighterProvider } from './context/SyntaxHighlighterProvider'
 import { ThemeProvider } from './context/ThemeProvider'
 import NavigationHandler from './handler/NavigationHandler'
 import AgentsPage from './pages/agents/AgentsPage'
@@ -27,7 +27,7 @@ function App(): React.ReactElement {
       <StyleSheetManager>
         <ThemeProvider>
           <AntdProvider>
-            <SyntaxHighlighterProvider>
+            <CodeStyleProvider>
               <PersistGate loading={null} persistor={persistor}>
                 <TopViewContainer>
                   <HashRouter>
@@ -46,7 +46,7 @@ function App(): React.ReactElement {
                   </HashRouter>
                 </TopViewContainer>
               </PersistGate>
-            </SyntaxHighlighterProvider>
+            </CodeStyleProvider>
           </AntdProvider>
         </ThemeProvider>
       </StyleSheetManager>

src/renderer/src/assets/styles/markdown.scss

@@ -125,7 +125,9 @@
     overflow-x: auto;
     font-family: 'Fira Code', 'Courier New', Courier, monospace;
     background-color: var(--color-background-mute);
-    &:has(> .mermaid) {
+    &:has(.mermaid),
+    &:has(.plantuml-preview),
+    &:has(.svg-preview) {
       background-color: transparent;
     }
     &:not(pre pre) {
@@ -304,3 +306,26 @@ emoji-picker {
 mjx-container {
   overflow-x: auto;
 }
+
+/* CodeMirror 相关样式 */
+.cm-editor {
+  .cm-scroller {
+    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
+    padding: 1px;
+    border-radius: 5px;
+
+    .cm-gutters {
+      line-height: 1.6;
+    }
+
+    .cm-content {
+      line-height: 1.6;
+      padding-left: 0.25em;
+    }
+
+    .cm-lineWrapping * {
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+  }
+}