Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ed8d75c801 | ||
|
|
9ce07ce5e4 |
11
CHANGELOG.md
Normal file
11
CHANGELOG.md
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
# CHANGELOG
|
||||||
|
|
||||||
|
## v1.0.2 (2026-06-12)
|
||||||
|
- **架构对齐**: 遵循 `base` 包新设计,优化全局依赖加载。
|
||||||
|
- **构建优化**: 产物调整为纯 UMD 模式,通过 `globalThis.CodeEditor` 暴露 API。
|
||||||
|
- **AutoForm 集成**: 优化与 `AutoForm` 的解耦注册逻辑。
|
||||||
|
|
||||||
|
## v1.0.1 (2026-05-30)
|
||||||
|
- **核心特性**: 基于 CodeMirror 6 实现 Web Component 代码编辑器。
|
||||||
|
- **多语言支持**: 内置 JS/JSON/HTML 语法高亮。
|
||||||
|
- **主题系统**: 支持 One Dark 主题与明亮模式切换。
|
||||||
96
README.md
96
README.md
@ -1,59 +1,61 @@
|
|||||||
# @web/editor
|
# @apigo.cc/editor API 手册
|
||||||
|
|
||||||
CodeMirror 6 封装的现代代码编辑器组件,专为 `@web/base` 和 `@web/state` 生态设计。原生 ESM,零打包开箱即用。
|
基于 CodeMirror 6 的代码编辑器 Web Component。
|
||||||
|
|
||||||
## 核心特性
|
---
|
||||||
- **轻量原生**:基于 ESM,直接在浏览器运行。
|
|
||||||
- **AutoForm 集成**:作为 `AutoForm` 的高阶组件,支持 `type: 'CodeEditor'`。
|
|
||||||
- **响应式绑定**:深度集成 `@web/state` 的 `$bind` 机制。
|
|
||||||
- **语法支持**:内置 JS、JSON、HTML 高亮。
|
|
||||||
- **双轨产物**:提供源码级 `editor.js` 和压缩版 `editor.min.js`。
|
|
||||||
|
|
||||||
## 安装与引入
|
## 1. 引入方式 (UMD 优先)
|
||||||
严禁使用 `npm install`。请通过 `loader.js` 或 `importmap` 引入。
|
|
||||||
|
|
||||||
### Importmap 配置
|
在 HTML 中引入脚本即刻注册 `<CodeEditor>` 标签。
|
||||||
```json
|
|
||||||
{
|
|
||||||
"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` 包含最新内容。
|
|
||||||
|
|
||||||
## 使用示例
|
|
||||||
|
|
||||||
### 基础用法
|
|
||||||
```html
|
```html
|
||||||
<CodeEditor lang="json" value='{"test": 123}'></CodeEditor>
|
<!-- 引入依赖链(或使用 loader.js) -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.12/dist/state.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.8/dist/base.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/editor@1.0.1/dist/editor.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 直接使用全局 CodeEditor 类
|
||||||
|
console.log(CodeEditor);
|
||||||
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 在 AutoForm 中使用
|
---
|
||||||
|
|
||||||
|
## 2. 核心用法
|
||||||
|
|
||||||
|
### 直接使用
|
||||||
|
```html
|
||||||
|
<CodeEditor id="ed" lang="javascript" value="console.log('Hello');"></CodeEditor>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
ed.addEventListener('change', e => {
|
||||||
|
console.log('最新内容:', e.detail);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### AutoForm 集成
|
||||||
|
引入 editor 后,`AutoForm` 自动解锁 `type: 'code'`。
|
||||||
```javascript
|
```javascript
|
||||||
const schema = [
|
State.schema = [
|
||||||
{ name: 'config', label: '配置', type: 'CodeEditor', setting: { lang: 'json' } }
|
{ name: 'script', label: '代码', type: 'code', setting: { lang: 'json' } }
|
||||||
];
|
];
|
||||||
```
|
```
|
||||||
|
|
||||||
## 构建
|
---
|
||||||
```bash
|
|
||||||
npm run build
|
## 3. API 参考
|
||||||
```
|
|
||||||
产出 `dist/editor.js` (源码) 和 `dist/editor.min.js` (压缩)。
|
### 属性 (Attributes)
|
||||||
|
- **`lang`**: `javascript`, `json`, `html`。
|
||||||
|
- **`theme`**: `dark`, `light`。
|
||||||
|
- **`readonly`**: 布尔属性。
|
||||||
|
- **`.value`**: 获取或设置编辑器文本。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 开发者提示 (AI 必读)
|
||||||
|
1. **自动依赖**: 引入 editor 即代表引入了 base/bootstrap。
|
||||||
|
2. **全局变量**: UMD 模式下,`CodeEditor` 类自动挂载到 `window`。
|
||||||
|
3. **数据同步**: 修改 `.value` 属性会同步更新编辑器视图。
|
||||||
|
|||||||
2978
dist/editor.js
vendored
2978
dist/editor.js
vendored
File diff suppressed because it is too large
Load Diff
2
dist/editor.min.js
vendored
2
dist/editor.min.js
vendored
File diff suppressed because one or more lines are too long
16
editorTODO.md
Normal file
16
editorTODO.md
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
# editor TODO
|
||||||
|
|
||||||
|
- [x] 架构对齐:Align with `base` project's "No ESM" design.
|
||||||
|
- [ ] 构建配置:Modify `vite.config.js` to output only UMD (`editor.js` and `editor.min.js`).
|
||||||
|
- [ ] 源码重构:
|
||||||
|
- [ ] 优化依赖引入,优先使用 `globalThis` 上的状态库和基类。
|
||||||
|
- [ ] 确保 `CodeEditor` 类在 `globalThis` 上可用。
|
||||||
|
- [ ] 保持与 `AutoForm` 的解耦注册。
|
||||||
|
- [ ] 测试验证:运行 `npm test` 确保功能无损。
|
||||||
|
- [ ] 文档更新:
|
||||||
|
- [ ] 更新 `package.json` 版本号。
|
||||||
|
- [ ] 更新 `README.md`。
|
||||||
|
- [ ] 更新 `CHANGELOG.md`。
|
||||||
|
|
||||||
|
## 当前状态 (v1.0.1)
|
||||||
|
- 基准渲染耗时: ~40ms (from TEST.md)
|
||||||
30
node_modules/.package-lock.json
generated
vendored
30
node_modules/.package-lock.json
generated
vendored
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@web/editor",
|
"name": "@apigo.cc/editor",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
@ -404,6 +404,20 @@
|
|||||||
"@esbuild/win32-x64": "0.21.5"
|
"@esbuild/win32-x64": "0.21.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fsevents": {
|
||||||
|
"version": "2.3.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||||
|
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/nanoid": {
|
"node_modules/nanoid": {
|
||||||
"version": "3.3.12",
|
"version": "3.3.12",
|
||||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
|
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.12.tgz",
|
||||||
@ -687,6 +701,20 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/vite/node_modules/fsevents": {
|
||||||
|
"version": "2.3.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||||
|
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||||
|
"dev": true,
|
||||||
|
"hasInstallScript": true,
|
||||||
|
"optional": true,
|
||||||
|
"os": [
|
||||||
|
"darwin"
|
||||||
|
],
|
||||||
|
"engines": {
|
||||||
|
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/w3c-keyname": {
|
"node_modules/w3c-keyname": {
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||||
|
|||||||
79
node_modules/.vite/deps/_metadata.json
generated
vendored
79
node_modules/.vite/deps/_metadata.json
generated
vendored
@ -1,79 +0,0 @@
|
|||||||
{
|
|
||||||
"hash": "8d19e731",
|
|
||||||
"configHash": "fa5d5474",
|
|
||||||
"lockfileHash": "8f9276e7",
|
|
||||||
"browserHash": "3d56c365",
|
|
||||||
"optimized": {
|
|
||||||
"@codemirror/commands": {
|
|
||||||
"src": "../../@codemirror/commands/dist/index.js",
|
|
||||||
"file": "@codemirror_commands.js",
|
|
||||||
"fileHash": "c282c62f",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/lang-html": {
|
|
||||||
"src": "../../@codemirror/lang-html/dist/index.js",
|
|
||||||
"file": "@codemirror_lang-html.js",
|
|
||||||
"fileHash": "6faf8bb8",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/lang-javascript": {
|
|
||||||
"src": "../../@codemirror/lang-javascript/dist/index.js",
|
|
||||||
"file": "@codemirror_lang-javascript.js",
|
|
||||||
"fileHash": "f80bd902",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/lang-json": {
|
|
||||||
"src": "../../@codemirror/lang-json/dist/index.js",
|
|
||||||
"file": "@codemirror_lang-json.js",
|
|
||||||
"fileHash": "cba3b21a",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/state": {
|
|
||||||
"src": "../../@codemirror/state/dist/index.js",
|
|
||||||
"file": "@codemirror_state.js",
|
|
||||||
"fileHash": "2dc86e37",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/theme-one-dark": {
|
|
||||||
"src": "../../@codemirror/theme-one-dark/dist/index.js",
|
|
||||||
"file": "@codemirror_theme-one-dark.js",
|
|
||||||
"fileHash": "23669839",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"@codemirror/view": {
|
|
||||||
"src": "../../@codemirror/view/dist/index.js",
|
|
||||||
"file": "@codemirror_view.js",
|
|
||||||
"fileHash": "efc6c8aa",
|
|
||||||
"needsInterop": false
|
|
||||||
},
|
|
||||||
"codemirror": {
|
|
||||||
"src": "../../codemirror/dist/index.js",
|
|
||||||
"file": "codemirror.js",
|
|
||||||
"fileHash": "babef521",
|
|
||||||
"needsInterop": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"chunks": {
|
|
||||||
"chunk-Q3KCCTLX": {
|
|
||||||
"file": "chunk-Q3KCCTLX.js"
|
|
||||||
},
|
|
||||||
"chunk-JSDLYWAN": {
|
|
||||||
"file": "chunk-JSDLYWAN.js"
|
|
||||||
},
|
|
||||||
"chunk-JXETLIGR": {
|
|
||||||
"file": "chunk-JXETLIGR.js"
|
|
||||||
},
|
|
||||||
"chunk-FTVURZJQ": {
|
|
||||||
"file": "chunk-FTVURZJQ.js"
|
|
||||||
},
|
|
||||||
"chunk-UIRP74HC": {
|
|
||||||
"file": "chunk-UIRP74HC.js"
|
|
||||||
},
|
|
||||||
"chunk-M6T3QFJD": {
|
|
||||||
"file": "chunk-M6T3QFJD.js"
|
|
||||||
},
|
|
||||||
"chunk-4MUKC4ON": {
|
|
||||||
"file": "chunk-4MUKC4ON.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,14 +1,14 @@
|
|||||||
import {
|
|
||||||
defaultKeymap,
|
|
||||||
history,
|
|
||||||
historyKeymap
|
|
||||||
} from "./chunk-JXETLIGR.js";
|
|
||||||
import {
|
import {
|
||||||
autocompletion,
|
autocompletion,
|
||||||
closeBrackets,
|
closeBrackets,
|
||||||
closeBracketsKeymap,
|
closeBracketsKeymap,
|
||||||
completionKeymap
|
completionKeymap
|
||||||
} from "./chunk-FTVURZJQ.js";
|
} from "./chunk-FTVURZJQ.js";
|
||||||
|
import {
|
||||||
|
defaultKeymap,
|
||||||
|
history,
|
||||||
|
historyKeymap
|
||||||
|
} from "./chunk-JXETLIGR.js";
|
||||||
import {
|
import {
|
||||||
bracketMatching,
|
bracketMatching,
|
||||||
defaultHighlightStyle,
|
defaultHighlightStyle,
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user