编辑功能现已在 diffs[dot]com 上线。

这不仅仅是又一个 Monaco 或 ProseMirror 封装。

这是一个全新的编辑实现，构建在我们的文件和差异渲染原语之上。

• 超过 189 次提交
• 超过 900 个新测试

立即试用 – https://t.co/p2rSGxCFf0 https://t.co/3gA22LTXu5

Pierre Diffs — 现已支持编辑

来源：https://diffs.com/edit 首页 (https://diffs.com/)编辑 (https://diffs.com/edit)文档 (https://diffs.com/docs)主题 (https://diffs.com/theme)Trees (https://trees.software/)DiffsHub (https://diffshub.com/)https://discord.gg/pierrehttps://github.com/pierrecomputer/pierreBeta

编辑文件和差异

在任何 File 或 FileDiff 上启用功能完备且轻量的编辑器，按需懒加载。拥有 @pierre/diffs 的所有人体工程学设计和自定义能力，以及就地编辑所需的一切。

浏览文档 (https://diffs.com/docs#edit-mode)

实时编辑

编辑模式（实验性）使任何代码表面——File 或 FileDiff——都可以就地编辑。在只读的审阅和实时的编辑之间切换，在文件和差异之间切换表面，并可将差异渲染为统一视图或并排分栏视图。在下方代码中开始输入，它会随编辑实时更新。

选择操作

选择任意文本即可显示浮动弹出层，锚定在选区上，通过 renderSelectionAction() 渲染。在其中放置任意数量的操作——此处，一个编辑器风格的添加到聊天将选中的代码片段发送到右侧面板，而次要操作则复制它。

使用标记标注代码

使用 editor.setMarkers() 向代码中注入内联上下文，用于 linter、格式化等场景。支持感知严重级别的下划线和悬停弹出层。将鼠标悬停在下方示例中的标记（以彩色波浪下划线显示）上。

查找和替换

在任何 File 或 FileDiff 上使用 Cmd/Ctrl-F 跨文件查找字符串。使用 Cmd-Opt-F（Mac）或 Ctrl-Alt-F（Linux/Windows）查找和替换。下方的搜索面板已打开——输入查询词可高亮匹配项，使用 Enter 或箭头键在匹配项之间跳转，并随时切换大小写、全词或正则表达式。

撤销历史

编辑操作开箱即用地落在结构感知的撤销栈上。使用键盘快捷键和下方的工具栏浏览撤销历史，或在代码中通过 editor.undo()、editor.redo() 和 editor.applyEdits() 驱动它。该示例加载时已包含跨多个提交应用的一次简短重构。

0/7 步骤

1. 输入签名
2. 声明 CartItem 类型
3. 使用 reduce 对项目求和
4. 内联折扣
5. 内联运费
6. 添加销售税
7. 四舍五入到分

键盘快捷键

浏览所有默认按键绑定，并可按快捷键、操作或命令搜索。切换到可编辑的 JSON 视图，探索用于自定义编辑器命令的 keymap 格式。

以及你需要的一切…

上面的演示涵盖了主要功能。以下是编辑模式免费提供的其余功能。

编辑

文件和差异：编辑 File、FileDiff、MultiFileDiff 或 PatchDiff；差异的新文件一侧会随输入重新进行词法标记。

多光标：Cmd/Ctrl-点击添加光标；一次编辑应用于所有选区，重叠范围会合并。

智能缩进：缩进或减少整个选区的缩进，根据每行现有缩进推断使用制表符还是空格。

括号匹配：使用 matchBrackets 选项在输入时高亮代码中匹配的括号对。

自动包围：通过输入左引号或左括号将选区包围起来，可使用 autoSurround 选项调节。

移动行：使用 Alt-↑/↓ 上下移动行或选区。

渲染

兼容 CodeView：使用 edit: true 编辑虚拟化的 CodeView 实例。React 使用最近的 EditProvider；原生 JavaScript 使用 CodeViewOptions.createEditor。编辑器在文件滚动进出时保持持久。

虚拟化文件：使用 VirtualizedFile 和 VirtualizedFileDiff 编辑大型文件；屏幕外的行按需渲染。

主题和颜色模式：词法标记和编辑器界面跟随表面主题，在切换主题或切换浅色和深色模式时实时重新标记。

UI 自适应容器：容器查询在窄宽度下重新布局查找和替换面板及标记弹出层，无论布局如何都能获得更流畅的体验。

变更和焦点事件：使用 onChange、onFocus 和 onBlur 回调响应编辑和焦点变化。

换行：光标、选区和匹配项在换行后的视觉行中正确渲染。

集成与交付

差异标注：可编辑一侧的标注跟随结构性编辑和历史记录，包括行合并；只读的旧文件一侧标注保持固定。

SSR 与水合：从预渲染且已高亮的 HTML 水合，无闪烁。

移动端和无障碍：原生 contentEditable，带有 role="textbox"；自动更正、拼写检查和自动大写已关闭。

可懒加载：独立的 @pierre/diffs/edit 入口——仅在编辑开始时导入。

自定义剪贴板：提供你自己的 clipboard 读取器——在 Electron 应用中实现原生复制/粘贴很方便。

来自 Pierre Computer Company 的爱

我们的团队汇集了超过 150 年的专业经验，曾在 Cloudflare、Coinbase、Discord、GitHub、Reddit、Stripe、X 等公司设计、构建和扩展全球最大的分布式系统。

加入 Discord (https://discord.gg/pierre)在 GitHub 上查看 (https://github.com/pierrecomputer/pierre)