@aiao/code-editor-angular 0.0.25 → 0.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import { EditorView } from '@codemirror/view';
|
|
8
|
-
|
|
1
|
+
import { CodeEditorLanguageDescription, CodeEditorLanguageError, CodeEditorTheme, CodeEditorTheme as CodeEditorTheme$1 } from "@aiao/code-editor";
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
|
|
4
|
+
import { ControlValueAccessor } from "@angular/forms";
|
|
5
|
+
import { Extension, StateEffect } from "@codemirror/state";
|
|
6
|
+
import { EditorView } from "@codemirror/view";
|
|
9
7
|
/** CodeMirror 预设配置。 */
|
|
10
8
|
type CodeEditorSetup = 'basic' | 'minimal' | null;
|
|
11
9
|
/**
|
|
@@ -23,166 +21,262 @@ type CodeEditorSetup = 'basic' | 'minimal' | null;
|
|
|
23
21
|
* />
|
|
24
22
|
* ```
|
|
25
23
|
*/
|
|
26
|
-
declare class CodeEditor implements OnInit, ControlValueAccessor, OnDestroy, OnChanges {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
24
|
+
export declare class CodeEditor implements OnInit, ControlValueAccessor, OnDestroy, OnChanges {
|
|
25
|
+
#private;
|
|
26
|
+
/**
|
|
27
|
+
* 宿主元素上的 `aria-disabled`。
|
|
28
|
+
*
|
|
29
|
+
* @internal
|
|
30
|
+
* 未禁用时返回 `null` 让 Angular **移除**属性,而不是写 `aria-disabled="false"`;
|
|
31
|
+
* 理由与 {@link buildCodeEditorContentAttributes} 一致。`protected` 是可见性下限 ——
|
|
32
|
+
* host 绑定表达式读不到 `#` 私有字段。
|
|
33
|
+
*/
|
|
34
|
+
protected readonly _ariaDisabled: import("@angular/core").Signal<"true" | null>;
|
|
35
|
+
/** 初始化后立即聚焦编辑器。**仅初始化生效**,后续变更被忽略。 @defaultValue false */
|
|
36
|
+
autoFocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
37
|
+
/**
|
|
38
|
+
* 补充说明元素的 id,写成内部 textbox 的 `aria-describedby`。可动态更新。
|
|
39
|
+
*
|
|
40
|
+
* @defaultValue ''(空串按「未设置」处理,不产出属性)
|
|
41
|
+
* @remarks 属性落在 CodeMirror 的 `.cm-content` 上 —— 承担 `role="textbox"` 的是它,
|
|
42
|
+
* 不是本组件的宿主元素。三端同名同义。
|
|
43
|
+
*/
|
|
44
|
+
describedBy: import("@angular/core").InputSignal<string>;
|
|
45
|
+
/**
|
|
46
|
+
* 禁用编辑(只读且不可聚焦)。可动态更新。
|
|
47
|
+
*
|
|
48
|
+
* @defaultValue false
|
|
49
|
+
* @remarks 与表单的 `setDisabledState()` 是**两条独立来源**,任一为真即禁用。
|
|
50
|
+
* 用 Reactive Forms 时把控件设成 `disabled` 与在模板上写 `[disabled]="true"` 效果一样,
|
|
51
|
+
* 但只解开其中一条不会恢复可编辑 —— 两条都得放开。
|
|
52
|
+
*/
|
|
53
|
+
disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
54
|
+
/** 显示空白字符。可动态更新。 @defaultValue false */
|
|
55
|
+
highlightWhitespace: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
56
|
+
/** 一级缩进使用的字符串。可动态更新。 @defaultValue ' '(两个空格,三端一致) */
|
|
57
|
+
indentUnit: import("@angular/core").InputSignal<string>;
|
|
58
|
+
/** 允许 Tab 键缩进(会牺牲键盘可达性)。可动态更新。 @defaultValue false */
|
|
59
|
+
indentWithTab: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
60
|
+
/** 语法高亮语言名,取值见 {@link languages};`'plaintext'` 表示不高亮。可动态更新。 @defaultValue 'sql' */
|
|
61
|
+
language: import("@angular/core").InputSignal<string>;
|
|
62
|
+
/** 可选语言列表。可动态更新。 @defaultValue SUPPORT_LANGUAGES */
|
|
63
|
+
languages: import("@angular/core").InputSignal<readonly CodeEditorLanguageDescription[]>;
|
|
64
|
+
/**
|
|
65
|
+
* 可访问名称,写成内部 textbox 的 `aria-label`。可动态更新。
|
|
66
|
+
*
|
|
67
|
+
* @defaultValue ''(空串按「未设置」处理,不产出属性)
|
|
68
|
+
* @remarks 落点与 {@link CodeEditor.describedBy} 相同。
|
|
69
|
+
*/
|
|
70
|
+
label: import("@angular/core").InputSignal<string>;
|
|
71
|
+
/**
|
|
72
|
+
* 承担标签的元素 id,写成内部 textbox 的 `aria-labelledby`。可动态更新。
|
|
73
|
+
*
|
|
74
|
+
* @defaultValue ''(空串按「未设置」处理,不产出属性)
|
|
75
|
+
* @remarks 落点与 {@link CodeEditor.describedBy} 相同。
|
|
76
|
+
*/
|
|
77
|
+
labelledBy: import("@angular/core").InputSignal<string>;
|
|
78
|
+
/** 自动换行。可动态更新。 @defaultValue false */
|
|
79
|
+
lineWrapping: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
80
|
+
/** 空文档时显示的占位文本。可动态更新。 @defaultValue '' */
|
|
81
|
+
placeholder: import("@angular/core").InputSignal<string>;
|
|
82
|
+
/** 只读(仍可聚焦与选择)。可动态更新。 @defaultValue false */
|
|
83
|
+
readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
84
|
+
/** CodeMirror 挂载的 DOM 根,用于 Shadow DOM 场景。**仅初始化生效**。 */
|
|
85
|
+
root: import("@angular/core").InputSignal<Document | ShadowRoot | undefined>;
|
|
86
|
+
/** 预设扩展集;`null` 表示不加载任何预设。可动态更新。 @defaultValue 'basic' */
|
|
87
|
+
setup: import("@angular/core").InputSignal<CodeEditorSetup>;
|
|
88
|
+
/** 主题。可动态更新。 @defaultValue 'light' */
|
|
89
|
+
theme: import("@angular/core").InputSignal<CodeEditorTheme$1>;
|
|
90
|
+
/**
|
|
91
|
+
* 文档内容。作为受控输入使用时由外部驱动;与 `ngModel`/`FormControl` 同时使用以表单为准。
|
|
92
|
+
*
|
|
93
|
+
* @defaultValue ''
|
|
94
|
+
* @remarks RV-071:一旦 {@link writeValue} 被调用过(即宿主绑了 `ngModel` 或
|
|
95
|
+
* `formControl`),表单即接管值所有权,后续本输入的变更不再覆盖文档;
|
|
96
|
+
* 没有表单指令时仍是单向外部驱动,见 {@link CodeEditor.#formOwnsValue}。
|
|
97
|
+
*/
|
|
98
|
+
value: import("@angular/core").InputSignal<string>;
|
|
99
|
+
/** 编辑器获得焦点。 */
|
|
100
|
+
aoFocus: import("@angular/core").OutputEmitterRef<void>;
|
|
101
|
+
/** 文档内容变化(外部写入不触发,见 {@link External})。 */
|
|
102
|
+
aoChange: import("@angular/core").OutputEmitterRef<string>;
|
|
103
|
+
/** 编辑器失去焦点,同时触发表单 touched。 */
|
|
104
|
+
aoBlur: import("@angular/core").OutputEmitterRef<void>;
|
|
105
|
+
/**
|
|
106
|
+
* 语言解析或加载失败。
|
|
107
|
+
*
|
|
108
|
+
* @remarks
|
|
109
|
+
* CEA-007:这条路径此前只有一条 `console.error`,宿主完全观测不到 ——
|
|
110
|
+
* 拿不到错误、没有重试或降级的机会,用户只看到高亮突然消失。
|
|
111
|
+
* 降级策略不变(清空语言扩展退回纯文本),日志也保留,本事件是**新增的**观测通道。
|
|
112
|
+
* 与 React 的 `onLanguageError` 属性、Vue 的 `language-error` 事件同载荷。
|
|
113
|
+
*/
|
|
114
|
+
aoLanguageError: import("@angular/core").OutputEmitterRef<CodeEditorLanguageError>;
|
|
115
|
+
/**
|
|
116
|
+
* 底层 CodeMirror `EditorView`;未初始化或已销毁时为 `null`。
|
|
117
|
+
*
|
|
118
|
+
* @remarks 三端命令式面统一为 `view` / `host` / `focus()` / `blur()`(CEA-009)。
|
|
119
|
+
*/
|
|
120
|
+
get view(): EditorView | null;
|
|
121
|
+
/**
|
|
122
|
+
* CodeMirror 挂载所在的宿主元素;未初始化或已销毁时为 `null`。
|
|
123
|
+
*
|
|
124
|
+
* @remarks
|
|
125
|
+
* Angular 的宿主是 `<ao-code-editor>` 元素本身,React / Vue 是组件渲染出的 `div`——
|
|
126
|
+
* 类型不同但语义一致:「CodeMirror 挂在哪个元素里」。
|
|
127
|
+
*/
|
|
128
|
+
get host(): HTMLElement | null;
|
|
129
|
+
/** 把键盘焦点交给编辑器。未初始化时是空操作。 */
|
|
130
|
+
focus(): void;
|
|
131
|
+
/** 移开键盘焦点。未初始化时是空操作。 */
|
|
132
|
+
blur(): void;
|
|
133
|
+
ngOnInit(): void;
|
|
134
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
135
|
+
ngOnDestroy(): void;
|
|
136
|
+
/**
|
|
137
|
+
* `ControlValueAccessor` 的写入入口,由 Angular Forms 调用。
|
|
138
|
+
*
|
|
139
|
+
* @param value `null` / `undefined` 规整成空串;`string` 原样写入
|
|
140
|
+
* @throws TypeError 收到其他类型时立即抛出,错误信息含包名与实际类型
|
|
141
|
+
*
|
|
142
|
+
* @remarks
|
|
143
|
+
* CEA-005:签名此前写成 `string | null`,但 CVA 的契约是 `any` —— Angular
|
|
144
|
+
* **不做**运行时校验,`FormControl` 里放什么就原样送到这里。类型标注只骗过了编译期。
|
|
145
|
+
* 于是 `FormControl(42)` 在初始化前进 `#pendingValue`、在 `EditorState.create` 处炸,
|
|
146
|
+
* 初始化后又在 `computeMinimalDocumentChange` 处炸 —— 同一个错误配置,两个时机两种错,
|
|
147
|
+
* 且都指不回 `writeValue`。现在两个时机抛同一个错,且直接点名包与类型。
|
|
148
|
+
*/
|
|
149
|
+
writeValue(value: unknown): void;
|
|
150
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
151
|
+
registerOnTouched(fn: () => void): void;
|
|
152
|
+
/**
|
|
153
|
+
* 表单侧的禁用开关,由 Angular Forms 调用。
|
|
154
|
+
*
|
|
155
|
+
* @remarks 只写 {@link CodeEditor.#formDisabled} 这一条来源;模板上的
|
|
156
|
+
* `[disabled]` 输入是另一条独立来源,两者取或,见 {@link CodeEditor.#effectiveDisabled}。
|
|
157
|
+
*/
|
|
158
|
+
setDisabledState(isDisabled: boolean): void;
|
|
159
|
+
/**
|
|
160
|
+
* 装入消费者自己的 CodeMirror 扩展。
|
|
161
|
+
*
|
|
162
|
+
* @param value 本次要生效的扩展;**整体替换**上一次传入的那批,传 `[]` 即全部撤下
|
|
163
|
+
*
|
|
164
|
+
* @remarks
|
|
165
|
+
* CEA-003:早先这里发的是全局 `StateEffect.reconfigure.of(value)`,
|
|
166
|
+
* 它替换的是**整棵扩展树** —— 一次调用就清掉 updateListener、全部 Compartment、
|
|
167
|
+
* 主题、语言与 a11y 属性,名字叫「设置扩展」,实际是「摧毁编辑器配置」。
|
|
168
|
+
* 现在只重配 {@link CodeEditor.#userExtensionsConf} 这一个专属槽,
|
|
169
|
+
* 组件自身的配置与消费者的扩展互不影响。
|
|
170
|
+
*/
|
|
171
|
+
setExtensions(value: Extension[]): void;
|
|
172
|
+
/**
|
|
173
|
+
* 命令式地(重新)应用语言配置。
|
|
174
|
+
*
|
|
175
|
+
* @param lang 语言名或别名;空串与 `'plaintext'` 表示不高亮
|
|
176
|
+
*
|
|
177
|
+
* @remarks
|
|
178
|
+
* **无条件重新加载**,即使解析结果与当前生效的完全一致 —— 这是宿主换掉了同名描述
|
|
179
|
+
* 背后的 loader 实现时的显式重载入口,`language` 输入做不到(它走的是
|
|
180
|
+
* {@link CodeEditor.#syncLanguage} 里的等价性判断,CEA-006,不会重复加载)。
|
|
181
|
+
* 日常切换语言应当改 `language` 输入。
|
|
182
|
+
*
|
|
183
|
+
* 解析失败时清空语言扩展退回纯文本,并经 {@link CodeEditor.aoLanguageError} 报告。
|
|
184
|
+
*/
|
|
185
|
+
setLanguage(lang: string): void;
|
|
186
|
+
protected _get_all_extensions(): Extension[];
|
|
187
|
+
protected _dispatch_effects(effects: StateEffect<unknown> | readonly StateEffect<unknown>[]): void | undefined;
|
|
188
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CodeEditor, never>;
|
|
189
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<CodeEditor, "ao-code-editor", never, {
|
|
190
|
+
"autoFocus": {
|
|
191
|
+
"alias": "autoFocus";
|
|
192
|
+
"required": false;
|
|
193
|
+
"isSignal": true;
|
|
194
|
+
};
|
|
195
|
+
"describedBy": {
|
|
196
|
+
"alias": "describedBy";
|
|
197
|
+
"required": false;
|
|
198
|
+
"isSignal": true;
|
|
199
|
+
};
|
|
200
|
+
"disabled": {
|
|
201
|
+
"alias": "disabled";
|
|
202
|
+
"required": false;
|
|
203
|
+
"isSignal": true;
|
|
204
|
+
};
|
|
205
|
+
"highlightWhitespace": {
|
|
206
|
+
"alias": "highlightWhitespace";
|
|
207
|
+
"required": false;
|
|
208
|
+
"isSignal": true;
|
|
209
|
+
};
|
|
210
|
+
"indentUnit": {
|
|
211
|
+
"alias": "indentUnit";
|
|
212
|
+
"required": false;
|
|
213
|
+
"isSignal": true;
|
|
214
|
+
};
|
|
215
|
+
"indentWithTab": {
|
|
216
|
+
"alias": "indentWithTab";
|
|
217
|
+
"required": false;
|
|
218
|
+
"isSignal": true;
|
|
219
|
+
};
|
|
220
|
+
"language": {
|
|
221
|
+
"alias": "language";
|
|
222
|
+
"required": false;
|
|
223
|
+
"isSignal": true;
|
|
224
|
+
};
|
|
225
|
+
"languages": {
|
|
226
|
+
"alias": "languages";
|
|
227
|
+
"required": false;
|
|
228
|
+
"isSignal": true;
|
|
229
|
+
};
|
|
230
|
+
"label": {
|
|
231
|
+
"alias": "label";
|
|
232
|
+
"required": false;
|
|
233
|
+
"isSignal": true;
|
|
234
|
+
};
|
|
235
|
+
"labelledBy": {
|
|
236
|
+
"alias": "labelledBy";
|
|
237
|
+
"required": false;
|
|
238
|
+
"isSignal": true;
|
|
239
|
+
};
|
|
240
|
+
"lineWrapping": {
|
|
241
|
+
"alias": "lineWrapping";
|
|
242
|
+
"required": false;
|
|
243
|
+
"isSignal": true;
|
|
244
|
+
};
|
|
245
|
+
"placeholder": {
|
|
246
|
+
"alias": "placeholder";
|
|
247
|
+
"required": false;
|
|
248
|
+
"isSignal": true;
|
|
249
|
+
};
|
|
250
|
+
"readonly": {
|
|
251
|
+
"alias": "readonly";
|
|
252
|
+
"required": false;
|
|
253
|
+
"isSignal": true;
|
|
254
|
+
};
|
|
255
|
+
"root": {
|
|
256
|
+
"alias": "root";
|
|
257
|
+
"required": false;
|
|
258
|
+
"isSignal": true;
|
|
259
|
+
};
|
|
260
|
+
"setup": {
|
|
261
|
+
"alias": "setup";
|
|
262
|
+
"required": false;
|
|
263
|
+
"isSignal": true;
|
|
264
|
+
};
|
|
265
|
+
"theme": {
|
|
266
|
+
"alias": "theme";
|
|
267
|
+
"required": false;
|
|
268
|
+
"isSignal": true;
|
|
269
|
+
};
|
|
270
|
+
"value": {
|
|
271
|
+
"alias": "value";
|
|
272
|
+
"required": false;
|
|
273
|
+
"isSignal": true;
|
|
274
|
+
};
|
|
275
|
+
}, {
|
|
276
|
+
"aoFocus": "aoFocus";
|
|
277
|
+
"aoChange": "aoChange";
|
|
278
|
+
"aoBlur": "aoBlur";
|
|
279
|
+
"aoLanguageError": "aoLanguageError";
|
|
280
|
+
}, never, never, true, never>;
|
|
185
281
|
}
|
|
186
|
-
|
|
187
|
-
export { CodeEditor };
|
|
188
|
-
export type { CodeEditorSetup };
|
|
282
|
+
export type { CodeEditorSetup, CodeEditorTheme };
|