@yl2/editor

基于 Monaco Editor 封装的 React 代码编辑器组件库，支持暗/亮主题切换、TextMate 语法高亮、Diff 对比、实时代码校验等能力。

✨ 特性

• 🎨 基于 Monaco Editor，VS Code 级别的编辑体验
• 🌓 内置 VS Code Dark+ / Light+ 主题（通过 TextMate 语法高亮）
• 📝 支持多语言语法高亮（JavaScript、TypeScript、JSON、CSS、Less 等）
• 🔄 Diff 对比视图，并排展示代码差异
• ✅ CodeEditor 模式：实时语法校验 + 加密存储 + 防抖输出
• 📐 Prettier 代码格式化集成
• 🪝 Ref 暴露编辑器实例，支持外部控制

📦 安装

# pnpm
pnpm install @yl2/editor

# npm
npm install @yl2/editor

前置依赖

{
  "peerDependencies": {
    "react": "^18.x",
    "sucrase": "^3.35.0"
  }
}

💡 CodeEditor 组件依赖 window 上挂载的 prettier 和 prettierPlugins，请确保在页面中通过 CDN 引入 Prettier。

🚀 使用

import { Monaco, MonacoDiff, CodeEditor } from "@yl2/editor";

📖 组件列表

Monaco 基础编辑器

通用代码编辑器，支持语言设置、只读模式、主题切换，可通过 codeRef 获取编辑器实例。

import { Monaco } from "@yl2/editor";

<Monaco
  value={code}
  onChange={(newCode) => setCode(newCode)}
  language="javascript"
  theme="vs-dark"
  height="400px"
/>

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value | string | - | 编辑器代码内容 | | onChange | (code: string) => void | - | 代码变更回调 | | language | string | 'javascript' | 编程语言 | | readOnly | boolean | false | 是否只读 | | style | CSSProperties | {} | 容器样式 | | height | string \| number | - | 编辑器高度 | | theme | string | 'vs-dark' | 主题（'vs' / 'vs-dark'） | | codeRef | RefObject | - | 编辑器实例引用 |

codeRef 能力：

const codeRef = useRef({});

// 获取 Monaco 编辑器实例
const instance = await codeRef.current.getMonacoInstance();
instance.getValue(); // 获取当前代码
instance.setValue("new code"); // 设置代码

MonacoDiff 差异对比编辑器

并排对比两段代码的差异，基于 Monaco DiffEditor，只读模式，适用于版本对比/代码审查场景。

import { MonacoDiff } from "@yl2/editor";

<MonacoDiff
  originalCode={oldCode}
  modifiedCode={newCode}
  language="json"
  theme="vs-dark"
  height="500px"
/>

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | originalCode | string | - | 原始代码（左侧） | | modifiedCode | string | - | 修改后代码（右侧） | | language | string | 'json' | 编程语言 | | theme | string | 'vs-dark' | 主题 | | style | CSSProperties | {} | 容器样式 | | height | string \| number | - | 编辑器高度 | | monacoProps | object | {} | 透传给 DiffEditor 的额外配置 |

CodeEditor 业务代码编辑器

面向低代码场景的增强编辑器。在 Monaco 基础上增加了：

• 实时语法校验：代码变更后通过 Sucrase 编译验证，错误信息实时展示
• 加密存储：支持对代码进行 encrypt/decrypt，适配 Schema 存储
• 防抖输出：避免频繁触发 onChange，默认 300ms
• Prettier 格式化：输出前自动格式化代码

import { CodeEditor } from "@yl2/editor";

<CodeEditor
  value={encryptedCode}
  onChange={(code, esModule) => {
    // code: 加密后的代码字符串
    // esModule: 编译后的模块对象
  }}
  style={{ height: 300, width: 360 }}
  defaultCode="() => {}"
  theme="vs-dark"
/>

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | value | string | - | 代码值（加密格式） | | defaultValue | string | - | 默认代码值 | | onChange | (code: string, esModule: any) => void | - | 变更回调 | | style | CSSProperties | { height: 300, width: 360 } | 容器样式 | | defaultCode | string | '() => {}' | 空值时的默认代码 | | debounceTime | number | 300 | 防抖时间(ms) | | useEncrypt | boolean | true | 是否加密输出 | | theme | 'vs' \| 'vs-dark' | 'vs-dark' | 主题 | | readOnly | boolean | false | 是否只读 | | require | Record<string, any> | {} | 注入的外部依赖模块 | | codeRef | RefObject | - | 编辑器实例引用 |

initialLoad 资源加载

手动预加载 Monaco Editor 资源（CDN），可在应用初始化时调用以加速首次编辑器渲染。

import { initialLoad } from "@yl2/editor";

// 预加载 Monaco 资源
await initialLoad();

// 或传入自定义创建逻辑
await initialLoad((monaco) => {
  // 注册自定义语言、主题等
  return monaco.editor.create(container, options);
});

🏗️ 架构

src/
├── index.ts              # 统一导出
├── monaco/
│   ├── index.tsx         # Monaco 基础编辑器组件
│   ├── diff.tsx          # MonacoDiff 对比编辑器组件
│   ├── wasm.ts           # TextMate 语法高亮加载（Onigasm WASM）
│   └── code-editor/
│       ├── index.tsx     # CodeEditor 业务编辑器
│       ├── type.ts       # 类型定义
│       └── utils.ts      # encrypt/decrypt/executeCode 工具

🔗 相关包

• @yl2/designer - 低代码设计器（内嵌使用本编辑器）
• @yl2/transcoder - 代码转换引擎

📄 License

MIT