飞书公式编辑器 - CodeMirror 6 扩展

一个基于 CodeMirror 6 的飞书多维表格公式编辑器扩展，提供语法高亮、自动补全、语法检查等功能。

功能特性

• 🎨 语法高亮: 支持字段引用、函数调用、运算符等语法元素的颜色区分
• 🔍 自动补全: 智能补全函数名和字段引用
• ✅ 语法检查: 实时检查语法错误，包括未闭合括号、未知字段、函数参数错误等
• 📝 字段管理: 支持动态配置可用字段列表
• 🚀 现代化: 基于 CodeMirror 6 和 Lezer 构建

安装依赖

npm install

使用方法

参考example.html

支持的语法

字段引用

{字段名}  // 例如: {价格}, {数量}

函数调用

FUNC(参数1, 参数2, ...)  // 例如: SUM({价格}*{数量})

基础类型

• 字符串: "文本内容"
• 数字: 123, 45.67
• 布尔值: true, false

运算符

• 算术: +, -, *, /
• 比较: =, >, <, >=, <=, !=
• 逻辑: &&, ||

内置函数

| 函数名 | 描述 | 参数数量 | |--------|------|----------| | SUM | 求和 | 1+ | | AVERAGE | 平均值 | 1+ | | IF | 条件判断 | 3 | | COUNT | 计数 | 1+ | | MAX | 最大值 | 1+ | | MIN | 最小值 | 1+ | | ROUND | 四舍五入 | 2 | | CONCATENATE | 字符串连接 | 1+ |

语法高亮规则

{
  "FieldRef": "text-green-500",   // 字段引用
  "Function": "text-blue-400",    // 函数名
  "String": "text-orange-300",    // 字符串
  "Number": "text-purple-400",    // 数字
  "Operator": "text-red-500",     // 运算符
  "Bracket": "text-gray-400"      // 括号
}

自动补全

• 触发字符: ., {, 字母
• 智能上下文感知:
  • 在字段引用内优先补全字段
  • 在函数调用内优先补全字段和函数
  • 在普通位置补全函数和字段

语法检查

错误类型

• ❌ 未闭合的花括号/括号
• ❌ 未识别的字段名
• ❌ 函数参数数量错误

错误提示

• 红色波浪下划线
• 悬浮提示显示具体错误信息

项目结构

feishu-formula-editor/
├── src/
│   ├── grammar.grammar    # Lezer语法定义（参考用）
│   ├── parser.js         # 完整解析器（已预编译）
│   ├── highlight.js      # 语法高亮配置
│   ├── autocomplete.js   # 自动补全功能
│   ├── lint.js          # 语法检查规则
│   └── language.js      # 语言支持
├── dist/                 # 构建输出目录
│   ├── feishu-formula.js           # ES6模块格式
│   ├── feishu-formula.umd.js       # UMD格式（未压缩）
│   └── feishu-formula.umd.min.js   # UMD格式（压缩版）
├── feishu-formula.js     # 主扩展文件
├── styles.css            # 样式文件
├── example.html          # ES6模块版本示例
├── example-umd.html      # UMD版本示例
├── test-umd.html         # UMD功能测试页面
├── test.js              # 测试用例
├── package.json          # 项目配置
├── rollup.config.js      # 构建配置
├── UMD-USAGE.md         # UMD使用说明
└── README.md            # 项目文档

开发

构建项目

npm run build

开发模式

npm run dev

依赖包

• @codemirror/language - 语言支持
• @codemirror/autocomplete - 自动补全
• @codemirror/lint - 语法检查
• @lezer/highlight - 语法高亮
• @lezer/lr - 语法解析

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！