feat: code tools, editor, executor

[alephpiece]

主要改动

代码编辑器

现在可以在设置中切换到代码编辑器。

• 源代码预览：原 shiki 高亮代码
  • 采用自定义的 shiki stream 实现
  • 移除代码缓存，它和现在的流式代码高亮不兼容
• 源代码编辑：codemirror 6

统一代码块工具栏

• 顶部 sticky 工具栏提供快速工具（左）和核心工具（右）。
• 快速工具隐藏在 更多 按钮中，避免拥挤，核心工具总是会显示。
• 允许在预览和编辑之间切换。

代码执行

• pyodide 执行 python 脚本

相关 issues

• 渲染更快了，应该不容易卡死，close [错误]: v1.1.18 生成代码太长时，渲染窗口依然存在卡死的问题 #4469 close [错误]: 流式输出在生成大量代码的情况下会导致无响应 #4319
• 修复语言匹配问题 close [错误]: Objective-C代码没有高亮 #1510
• 调整工具栏样式， close [功能]: 关于代码块超出当前可视区域时的标题粘性布局 #3957
• 显示 mermaid 错误信息， close [功能]: 优化 mermaid 语法错误提示 #1295

演示

代码编辑器

通过设置中的 代码编辑器 启用。

编辑后需要手动保存。

工具栏

图片预览视图中（如 mermaid），鼠标悬停时显示显示工具栏，源代码视图中，始终显示工具栏。

代码运行

目前只支持 python 执行。Python 代码块的工具栏会出现执行按钮。

具体改动

CodeBlockView

• 集中代码块相关组件，主要包括 preview, editor, toolbar
• Mermaid 和 MermaidPopup 合并，图像操作功能提取到公共工具定义中
• PlantUML 和 SvgPreview 也使用通用图像操作工具
• Artifacts 是 HTML 的工具，合并到工具栏
• 各组件可以注册自己需要使用的工具

代码编辑器，代码预览

• CodeEditor 是新的代码编辑器，和原本的代码渲染相互替换
• SourcePreview 是原本的 shiki 渲染代码块，迁移到 worker
• 代码编辑器需要从设置侧边栏启用，默认关闭
• 代码编辑器的保存功能按语法树节点定位，应该能处理各种情况，包括内容相同的代码块（需要更多测试）

代码执行

• Pyodide worker 用于执行 python 脚本，目前从工具栏启动
• StatusBar 是代码块底部信息栏，目前用于显示代码执行结果

其他

• SyntaxHighlighterProvider 重命名为 CodeStyleProvider，因为它还负责管理代码主题
• Mermaid, PlantUML 等组件相关 i18n keys 全部合并到代码块
• 给 useMinappPopup 增加 useCallback 避免死循环

[alephpiece]

main 分支的代码块好像有问题，代码块右下角好像有什么隐藏元素，我没细看。这个pr好像没有，不知道是哪里引入的

[kangfenmao]

网页预览那个按钮隐藏了不太方便看了，最好能在下面再加回来

[alephpiece]

我看看

[Pleasurecruise]

可以把bash类代码块这的代码编辑去除一下

[alephpiece]

可以把bash类代码块这的代码编辑去除一下

是要禁止编辑bash代码吗？

[Pleasurecruise]

嗯嗯 个人认为像bash这样的 应该用不到下载保存之类的功能吧

[alephpiece]

这样的话似乎需要匹配所有shell类型的？

• codemirror 支持的语言里shell类型的
• shiki 支持的语言里shell类型的

我可以加条件给这些工具，或者干脆全部隐藏，只在鼠标放到代码块上才显示，你看哪个合适

[alephpiece]

[alephpiece]

感觉隐藏起来会显得干净点

[0xfullex]

嗯嗯 个人认为像bash这样的 应该用不到下载保存之类的功能吧

没必要单独处理吧，选择权给用户好了，用户不想下载自然不会点击