editor/README.md

@web/editor

CodeMirror 6 封装的现代代码编辑器组件，专为 @web/base 和 @web/state 生态设计。原生 ESM，零打包开箱即用。

核心特性

• 轻量原生：基于 ESM，直接在浏览器运行。
• AutoForm 集成：作为 AutoForm 的高阶组件，支持 type: 'CodeEditor'。
• 响应式绑定：深度集成 @web/state 的 $bind 机制。
• 语法支持：内置 JS、JSON、HTML 高亮。
• 双轨产物：提供源码级 editor.js 和压缩版 editor.min.js。

安装与引入

严禁使用 npm install。请通过 loader.js 或 importmap 引入。

Importmap 配置

{
  "imports": {
    "@web/editor": "/path/to/editor.js"
  }
}

API 手册

<CodeEditor> 组件

属性 (Attributes)

• lang: 语言类型，支持 javascript (默认), json, html。
• theme: 主题，支持 dark (默认, One Dark), light。
• value: 初始值。
• readonly: 是否只读。

属性 (Properties)

• value: 获取或设置编辑器文本内容。
• view: 获取底层的 CodeMirror EditorView 实例。

事件 (Events)

• input: 内容变化时触发（符合标准表单行为）。
• change: 内容变化时触发，event.detail 包含最新内容。

使用示例

基础用法

<CodeEditor lang="json" value='{"test": 123}'></CodeEditor>

在 AutoForm 中使用

const schema = [
  { name: 'config', label: '配置', type: 'CodeEditor', setting: { lang: 'json' } }
];

构建

npm run build

产出 dist/editor.js (源码) 和 dist/editor.min.js (压缩)。