GCWing / GCWing/OpenBitFun

[Feature]: 内置 Markdown 查看器/编辑器支持数学公式(KaTeX)渲染

Đang mở
#1,952 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

feature good first issue
Ngôn ngữ chính
Rust
Star
2.3k
Fork
231
Merge trung bình
2 giờ 49 phút
Pull request đã merge (30 ngày)
589

Mô tả

### Problem / opportunity

BitFun 内置的 Markdown 查看器/编辑器(打开 .md 文件时使用)不渲染数学公式,`$...$` 与 `$$...$$` 只显示为原始文本;而对话(chat)中的 Markdown 已经支持 KaTeX 公式渲染。两者渲染能力不一致。

对以 Markdown + LaTeX 记笔记的用户(如数学/理科笔记)影响较大:在 BitFun 内打开自己的笔记看不到公式渲染,只能借助外部编辑器,或自行编写 MiniApp 阅读器绕过。

根因(源码层面):BitFun 内部有两套独立的 Markdown 渲染路径——
1. 对话渲染(已支持公式):`src/web-ui/src/component-library/components/Markdown/Markdown.tsx` 通过 `mayContainMarkdownMath()` 检测 `$$` / `\(` / `\[` / 行内 `$...$`,命中后懒加载 `MarkdownMathRenderer.tsx`(react-markdown + remark-gfm + remark-math + rehype-katex)。
2. 文件查看器/编辑器(不支持):打开 .md 走 `FileViewerScene → ContentCanvas → MarkdownEditor`(`src/web-ui/src/tools/editor/components/MarkdownEditor.tsx`),底层是 tiptap 编辑器(`src/web-ui/src/tools/editor/meditor/`),其 `extensions/` 只有 Alignment / Image / Table 扩展,没有任何数学公式扩展。

### Proposed behavior

文件查看器/编辑器的预览能像对话一样渲染行内(`$...$`、`\(...\)`)与块级(`$$...$$`、`\[...\]`)数学公式。

建议方案(任选其一或结合):
- 为 tiptap 编辑器(meditor)增加数学节点扩展(社区已有成熟的 tiptap + KaTeX 扩展可参考),复用现有 KaTeX 依赖;
- 或让文件预览复用 component-library 的 `Markdown` + `MarkdownMathRenderer` 渲染路径,统一两套渲染的公式能力。

### Product surface

Desktop app

### Details, examples, or constraints

复现步骤:
1. 工作区放一个含公式的 .md 文件,例如:`质能方程 $E=mc^2$,以及 $$\int_0^1 x^2 dx = \frac13$$`
2. 在 BitFun 内打开该文件(文件查看器)→ 公式原样显示,未渲染
3. 对比:把同样内容让 AI 在对话中输出 → 公式正常渲染

验收标准:
- 打开含 `$...$` / `$$...$$` 的 .md 文件,公式以排版形式渲染
- 代码块内的 `$` 不被误判为公式

环境:Windows 11,BitFun 桌面版。

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Hướng nghiên cứu

Bắt đầu với src/web-ui/src/component-library/components/Markdown/Markdown.tsx và MarkdownMathRenderer.tsx để hiểu luồng xử lý toán học hiện có của chat, sau đó kiểm tra MarkdownEditor.tsx và src/web-ui/src/tools/editor/meditor/extensions/. So sánh hai điểm đầu vào và chạy trình xem Markdown với các công thức được cung cấp. Được xem là hoàn tất khi toán học nội tuyến và toán học dạng khối được hiển thị trong các tệp .md đã mở, còn các ký hiệu đô la bên trong các khối mã vẫn giữ nguyên.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react, typescript
Lĩnh vực
desktop, frontend
Loại issue
Tính năng
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
55/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.