Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE] 改进 inline diff 的展示效果,使其更自然更顺滑,并允许局部 accept #3778

Closed
Ricbet opened this issue Jun 14, 2024 · 1 comment · Fixed by #3798
Assignees
Labels
🎨 feature feature required

Comments

@Ricbet
Copy link
Member

Ricbet commented Jun 14, 2024

现状

这是现在的 inline diff 效果
image

主要存在几个问题

  1. 以左右 diff 视图的展示方式嵌入到主编辑器当中会阻断上下文代码的阅读体验
  2. 生成的预览代码不具备语言服务功能,例如查看引用、静态检查等。必须 accept 之后才能知道语法是否有问题
  3. 多个不同的 diff 区域无法局部采纳
  4. 全选编辑器内容然后展示这个 diff 面板会有 bug,不好修

所以,新增一种 inline diff 的展示方式用于解决以上问题,具体交互参考 cursor

保留现有的旧 diff 模式,并配置开关让用户选择

优化点

  1. 将左右 diff 统一切换成内敛 diff
  2. 支持局部采纳
  3. 流式渲染效果优化,目前的左右 diff 在流式的时候会有很明显的红绿色块变化,影响阅读体验
@Ricbet Ricbet added the 🎨 feature feature required label Jun 14, 2024
@Ricbet Ricbet self-assigned this Jun 14, 2024
@Ricbet
Copy link
Member Author

Ricbet commented Jun 14, 2024

实现思路

  1. 流式输出的过程当中使用 monaco worker 手动计算 diff,并自行处理 range 逻辑,例如区分哪些是 add、remove 等

corsor 也是类似这样的处理
image
返回的数据模型
image

  1. 根据数据模型渲染视图,包含 remove 区域、add 区域
    例如:
    image

remove 区域:使用 zone widget 渲染代码,只读模式
add 区域:使用 pushEditOperations api,直接覆写代码
色块使用 monaco decoration 渲染

  1. ⌘Y,⌘N 的功能实现
    显示在 add 区域最右侧,并绑定快捷键。
    如果有多个区域,则从第一个开始

@Ricbet Ricbet linked a pull request Jun 21, 2024 that will close this issue
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 feature feature required
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant