功能

#222 在 monaco-sql-languages 中新增可插拔的 SQL 语句级 gutter 运行按钮，含语句拆分、主题样式、只读/dispose 处理

验证截图

变更描述

功能概述

为 Monaco SQL 编辑器新增 「按语句运行」 能力：在每条 SQL 语句的首个可执行行前显示 gutter 运行图标（绿色三角），点击后通过回调把该语句交给业务侧执行。

核心新增模块 src/runStatementButton/

1. createRunStatementButton()（index.ts）

主入口，负责：

• 在 glyph margin 渲染运行图标（Monaco decoration）
• 监听内容变化（200ms debounce）、model 切换、readOnly 配置变化并刷新图标
• 点击 gutter 图标触发 onRun(context)
• 返回 { refresh, dispose } 控制器

可配置项包括：languageId、onRun、自定义 getStatementRanges、shouldShowRunButton、preprocessCode、主题色、hover 文案等。

健壮性处理：

• refreshRequestId + disposed 防异步竞态
• 只读编辑器不显示图标、不响应点击
• onRun 异步错误 catch 并打日志
• 同一行多条语句冲突时 console.warn
• dispose() 时取消 debounce、清理 decoration 和事件

2. SQL 语句拆分（statementRanges.ts）

拆分策略：

1. 优先用 dt-sql-parser 的 splitSQLByStatement（按 languageId 选 parser）
2. 失败或无 parser 时 fallback 到分号拆分（识别引号内分号）
3. 计算 executableLineNumber：跳过 leading 空白、-- 行注释、多行/行内 /* */ 块注释

导出工具：

• getStatementRangesByLanguage() — 内置拆分
• normalizeStatementRange(s) — custom resolver 结果归一化
• findFirstExecutableLine() — 找首个可执行行

3. 类型定义（types.ts）

• StatementRange：executableLineNumber（图标行）、text、startLineNumber 等
• RunStatementContext：点击回调上下文（statement + editor + model）
• RunStatementButtonOptions / RunStatementButtonController

4. 样式（styles.ts）

• CSS 三角形图标（::before）
• 适配 vs-dark / vs / hc-black / hc-light
• injectRunStatementButtonStyles() 按 className 注入/更新 style 标签

其它改动

预览地址

https://cythia828.github.io/monaco-sql-languages/