gpui-kit Base 无样式源代码编辑器 Editor 完整指南：语言规则、快捷键、搜索与高亮扩展

gpui-kit Base 无样式源代码编辑器 Editor 完整指南语言规则、快捷键、搜索与高亮扩展【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kitEditor是 gpui-kit Base 层提供的无样式源代码编辑控件它建立在共享文本编辑引擎之上为语言、行号槽gutter、折叠folding、空白字符显示、文本装饰、语法高亮、内置搜索、诊断与 LSP 扩展提供了统一入口。阅读本文后你将能够在自己的 GPUI 应用中直接嵌入一个可编辑源码的编辑器配置语言编辑规则自动闭合、智能缩进启用行号与折叠打开内置搜索面板并通过 decoration 与 highlighter 扩展点接入自定义高亮和视觉方案。单行值应使用 Input普通多行文本使用 Textarea。Editor 的定位一个共享引擎、三种输入形态从源码结构看Base 的输入体系在 crates/base/src/input 下按base、editor、textarea三个子模块组织。Editor对应的核心类型定义在 crates/base/src/input/editor/mod.rspub type EditorState InputBaseStateEditorMode;也就是说EditorState就是共享编辑引擎InputBaseState在「代码编辑器」这个 mode 下的别名。同一引擎只有代码编辑形态会暴露语言、行号、折叠、缩进参考线、诊断、装饰和 LSP provider普通Input与Textarea永远不会暴露这些能力。EditorMode在InputModeKind中声明了MULTI_LINE true与CODE_EDITOR true见 mod.rs并挂载了EditorExtras用于承载 hover 定义弹层、装饰集合、语义 token、文档色块、内联补全和上下文菜单等代码编辑专属状态。渲染端Editor只是一个持有EntityEditorState的轻量包装mod.rs通过RenderOnce把状态实体直接作为元素渲染因此它本身不带任何样式——颜色、行号槽、折叠图标、覆盖层全部由应用层提供这正是无样式源代码编辑器的含义。语言编辑规则Base 编辑器接受LanguageConfig以及两个独立的编辑器偏好auto_close与smart_indent。它读取已注册的语言配置但自身不加载任何解析器解析器只存在于应用或 UI crate 层。Component 层在初始化时安装LanguageProvider提供内置语言名称、默认规则与语法提供者Base 使用者可通过set_language_provider安装自己的语言服务并通过set_language_config配置某个语言的编辑规则直接使用 Base 时从gpui_kit::base::input导入与 Component 相同的配置类型。详细配置字段与语言注册方式参见 语言编辑规则这里结合 Base 源码补充底层实现要点。LanguageConfig声明式编辑规则LanguageConfig定义在 crates/base/src/input/editor/language_config.rs由四部分组成字段含义默认值见Default实现brackets结构性括号对用于缩进判断与在定界符之间拆分 Enter()、[]、{}auto_closing_pairs自动闭合对及其禁用上下文三个括号对 、均not_in [String, Comment]auto_close_before允许自动插入的后续字符集合;:.,}])indentation_rules智能缩进的正则规则None其中brackets使用BracketPair::new({, })这样的结构auto_closing_pairs是可选的取None时回退使用结构性brackets取Some(vec![])则禁用所有自动配对见 language_config.rs 的closing_pairs实现。配对串支持多字符定界符例如/*与*/。not_in需要一个语法上下文提供者如果没有安装提供者Base 编辑器一律上报SyntaxContext::Codelanguage.rs。样式化的编辑器在语言启用 Tree-sitter 语法时才会提供该上下文。智能缩进与语法上下文IndentationRules::new(increase, decrease)接受两个已编译的regex::Regex模式。按 Enter 时increase模式匹配光标前的文本decrease模式匹配光标后的文本language_config.rs。没有 increase 模式时结构性开括号提供默认缩进language_config.rs。这些规则不会重排已有行或粘贴文本Python 的语言默认值额外识别行尾冒号未知语言只使用结构性括号。SyntaxContext是解析器无关的枚举Code/String/Comment见 highlighting.rs供配对、跳过后置与缩进决策使用。配置替换的语义set_language_config(language, config, cx)会替换当前应用中该语言的配置现有编辑器在下次编辑时立即生效包括同一事件处理器内。别名共享配置python、py、pyi即使没有启用语法 feature 也指向同一语言。自定义语法注册优先于内置别名并保留原始大小写未知语言使用LanguageConfig::default()language.rs。注意它不会改动auto_close与smart_indent两个独立偏好。这套接口是 Monaco 风格语言配置的受支持子集不是 Monaco JSON 或 Tree-sitter.scm文件的加载器选区包围与自定义onEnterRules尚不在接口范围内。快捷键与矩形列选Base 与样式组件共享键盘和鼠标行为默认快捷键在编辑器聚焦时生效。macOS 上 Option 即 Alt 修饰键Linux 默认不绑定 Super/Win。各平台快捷键、多光标编辑与矩形列选细节参见 快捷键与矩形列选要点速查如下操作macOSLinuxWindows在上/下方添加光标CmdOptionUp / DownAltShiftUp / DownCtrlAltUp / Down每个选区扩展一个字符ShiftLeft / RightShiftLeft / RightShiftLeft / Right每个选区扩展一个单词OptionShiftLeft / RightCtrlShiftLeft / RightCtrlShiftLeft / Right鼠标添加光标Option左键点击Alt左键点击Alt左键点击矩形块选择OptionShift左键拖动AltShift左键拖动AltShift左键拖动仅保留活动光标EscapeEscapeEscapeLinux 还接受 CtrlAlt左键拖动做矩形选择与 Ghostty 一致、AltShiftLeft / Right 做单词选择Windows 额外接受 AltShiftLeft / Right 做字符选择。按住 Alt/Option 悬停在编辑器上会显示十字光标包含 Alt 的选择手势优先于 Ctrl/Cmd 点击的跳转定义。需要留意Linux 桌面环境可能先于编辑器拦截组合键其中 CtrlAltUp / Down 因部分桌面用于切换工作区而默认不绑定。搜索编辑器内置搜索面板。编辑器聚焦时按Ctrl-FWindows/Linux或Cmd-FmacOS打开Enter跳到下一个匹配ShiftEnter跳到上一个Escape关闭面板。编程式 API 如下// 打开查找面板replace_mode false editor.update(cx, |state, cx| { state.open_search(false, cx); }); // 关闭面板 editor.update(cx, |state, cx| { state.close_search(cx); }); // 禁用搜索Editor 默认启用 editor.update(cx, |state, cx| { state.set_searchable(false, cx); });open_search不是幂等操作每次调用都会推进search_activation_revision表现层据此重新聚焦搜索框并选中内容与再次按下快捷键一致。因此它应当从 action 或用户手势中调用绝不能在渲染回调或每帧运行的 observer 里调用——那会在每一帧抢走焦点、导致无法输入search.rs。搜索实现层面SearchMatcher使用aho-corasick算法一次性构建多模式匹配器默认大小写不敏感相同查询重复提交不会重置当前激活匹配保留上次查询会恢复到之前的匹配位置search.rs 及单元测试identical_query_keeps_the_current_match。只读编辑器仍然可以被搜索——替换 UI 会自动隐藏。详细行为参见 搜索。导入与基本用法use gpui_kit::base::input::{Editor, EditorState, TabSize};最小可运行示例let editor cx.new(|cx| { EditorState::new(window, cx) .language(rust) .line_number(true) .folding(true) .tab_size(TabSize { tab_size: 4, hard_tabs: false }) .default_value(fn main() {\n println!(\Hello\);\n}) }); Editor::new(editor).language()指定的语言同时用于选择语法高亮启用对应的 Cargo feature如tree-sitter-rust、tree-sitter-markdown或用tree-sitter-languages打包全部内置语法。空白字符与装饰通过show_whitespaces(true)显示空格、制表符等空白字符。通过create_decorations_collection创建随文本编辑自动跟踪范围的装饰集合let decorations editor.update(cx, |state, cx| { state.create_decorations_collection(initial_decorations, cx) });返回的TextDecorationCollection必须在装饰仍需生效期间一直持有。其底层行为在 crates/base/src/input/editor/decorations.rs 有完整定义装饰范围使用指向value()的 UTF-8 字节偏移集合按插入顺序分层重叠装饰设置同一HighlightStyle属性时先创建的集合获胜范围边界处的插入不会扩张范围对应 Monaco 的NeverGrowsWhenTypingAtEdges语义范围会随编辑自动调整无需在每次修改后重新设置单元测试decoration_ranges_follow_text_edits验证了插入、删除场景下的偏移计算输入处于掩码masked状态时不渲染装饰集合的生命周期与所属InputBaseState一致。集合还支持set/append/clear/get_ranges操作分别对应 Monaco 的IEditorDecorationsCollection同名方法decorations.rs。高亮与语言功能InputHighlighterFactory、InputHighlighter、诊断类型与 LSP provider trait 是提供给设计系统作者的底层扩展点它们作用于共享的InputBaseState。普通文本输入框不会用到这些能力样式化组件的应用应通过编辑器集成来配置它们。关键扩展点定义在 crates/base/src/input/editor/highlighting.rsHighlightStyleResolver把语义高亮名称解析为可渲染的 GPUIHighlightStyle。Base 刻意不感知具体语法主题任何 UI crate 或应用都可以提供自己的 resolverInputHighlighter解析器无关的高亮接缝实现方自己负责解析、增量状态与语言特有行为Base 只索取样式区间与折叠候选styles、fold_ranges、fold_ranges_for_edit见 highlighting.rsSyntaxContextProvider按编辑器创建为编辑决策配对、跳过、缩进提供SyntaxContextInputEditorStyle应用拥有的颜色与高亮 resolver供编辑器绘制前景、光标、选区、诊断色与可选的行号槽背景、活动行背景、折叠图标渲染器fold_icon_renderer使用。可运行展示使用syntect作为语法后端并在 WASM 中选择兼容的fancy-regex后端。Syntect 只识别语法 scope适配器把这些 scope 映射为语义名称再由HighlightStyleResolver从应用主题解析颜色与字体样式。示例会在每次编辑后重新解析短代码生产集成可以在InputHighlighter中保留增量解析状态以获得更好性能。字体与表现Editor没有独立的字体设置而是使用环境文本样式。在外层元素设置font_family、text_size、字重与行高即可作用于编辑器这些是每个元素都有的标准Styled方法Editor::new(editor).text_sm() Editor::new(editor) .font_family(JetBrains Mono) .text_size(px(15.))编辑器默认以等宽字体绘制代码行高为字体大小的 1.5 倍行号槽与行高会跟随字号变化。应用负责编辑器颜色、行号槽、折叠图标与覆盖层通过InputEditorStyle、FoldIconRenderer与 provider trait 接入。现成的视觉方案参见gpui-componentEditor。补充一点源码层面的实现事实InputEditorStyle::resolved()会把未显式设置的透明颜色从当前语义主题调色板补齐前景、光标、选区、背景、边框等选区默认使用主题 accent 且透明度固定为 0.4确保被选中的字形仍然可读见 highlighting.rs 及配套单元测试。可运行示例cargo run -p gpui-base-examples -- editor该命令从crates/base的 examples 目录crates/base/examples启动 Base 编辑器演示。样式化的完整编辑器体验含主题、语法高亮、行号、折叠、搜索面板与只读/禁用外观控制请参阅 gpui-component Editor 文档。【免费下载链接】gpui-kitRust GUI components for building fantastic cross-platform desktop application by using GPUI.项目地址: https://gitcode.com/GitHub_Trending/gp/gpui-kit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考