Compare commits

...

3 Commits
v1.0.0 ... main

Author SHA1 Message Date
AI Engineer
ed8d75c801 fix(publish): publish.js 强制包名全小写以符合 npm 规范(by AI)
Co-Authored-By: deepseek-v4-pro[1m] <deepseek-ai@claude-code-best.win>
2026-06-22 19:29:13 +08:00
AI Engineer
9ce07ce5e4 feat: align with base project's No ESM design and optimize global dependency loading (by AI) 2026-06-12 02:00:37 +08:00
AI Engineer
9141f39bc4 chore: version 1.0.1 2026-06-04 19:21:45 +08:00
185 changed files with 27842 additions and 27192 deletions

1
.npmrc Normal file
View File

@ -0,0 +1 @@
//registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN}

11
CHANGELOG.md Normal file
View 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 主题与明亮模式切换。

View File

@ -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

File diff suppressed because it is too large Load Diff

2
dist/editor.min.js vendored

File diff suppressed because one or more lines are too long

16
editorTODO.md Normal file
View 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
View File

@ -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",

View File

@ -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"
}
}
}

View File

@ -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