@next-bricks/vs 1.18.13 → 1.18.14

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.
Files changed (8) hide show
  1. package/dist/chunks/9384.9e238fa2.js.map +1 -1
  2. package/dist/chunks/code-editor.fc28f9a0.js.map +1 -1
  3. package/dist/examples.json +1 -1
  4. package/dist/manifest.json +33 -14
  5. package/dist-types/code-editor/index.d.ts +67 -18
  6. package/docs/code-editor.md +78 -150
  7. package/docs/code-editor.react.md +315 -0
  8. package/package.json +2 -2
package/docs/code-editor.md CHANGED
@@ -1,4 +1,63 @@
1
- 基于 [Monaco Editor](https://github.com/microsoft/monaco-editor) 的代码编辑器。
1
+ ---
2
+ tagName: vs.code-editor
3
+ displayName: WrappedVsCodeEditor
4
+ description: 基于 Monaco Editor 的代码编辑器构件，支持多种编程语言（typescript、yaml、brick_next_yaml、cel 等）的语法高亮与自动补全，支持作为表单项使用，支持自动布局、拼写检查、Lint 校验、标记高亮等高级功能。
5
+ category: form-input-advanced
6
+ source: "@next-bricks/vs"
7
+ ---
8
+
9
+ # vs.code-editor
10
+
11
+ > 基于 Monaco Editor 的代码编辑器构件，支持多种编程语言（typescript、yaml、brick_next_yaml、cel 等）的语法高亮与自动补全，支持作为表单项使用，支持自动布局、拼写检查、Lint 校验、标记高亮等高级功能。
12
+
13
+ ## Props
14
+
15
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
16
+ | ------------------------------- | --------------------------------------------------------- | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
17
+ | name | `string \| undefined` | - | - | 表单字段名，用于在表单提交时标识该字段。 |
18
+ | label | `string \| undefined` | - | - | 表单字段标签，显示在编辑器上方作为说明文字。 |
19
+ | value | `string \| undefined` | - | - | 编辑器的当前值（代码文本内容）。 |
20
+ | language | `string \| undefined` | - | `"plaintext"` | 编辑器的编程语言，决定语法高亮和自动补全行为，支持 `typescript`、`javascript`、`yaml`、`brick_next_yaml`、`cel`、`cel_yaml`、`cel_str` 等。 |
21
+ | theme | `string \| undefined` | - | `"auto"` | 编辑器主题，`auto` 跟随系统主题自动切换，`vs` 为亮色，`vs-dark` 为暗色。 |
22
+ | placeholder | `string \| undefined` | - | - | 编辑器为空时显示的占位提示文字。 |
23
+ | required | `boolean \| undefined` | - | - | 是否为表单必填项，启用后表单提交时会校验该字段不能为空。 |
24
+ | readOnly | `boolean \| undefined` | - | - | 是否为只读模式，启用后用户无法编辑代码内容。 |
25
+ | automaticLayout | `"fit-container" \| "fit-content" \| "none" \| undefined` | - | - | 自动布局模式：`fit-content` 根据内容高度自动调整编辑器高度（由 `minLines`/`maxLines` 控制范围），`fit-container` 自动填满父容器尺寸，`none` 不自动调整。 |
26
+ | minLines | `number \| undefined` | - | `3` | 编辑器最小行数，与 `automaticLayout: "fit-content"` 配合使用，控制编辑器的最小显示高度。 |
27
+ | maxLines | `number \| undefined` | - | `Infinity` | 编辑器最大行数，与 `automaticLayout: "fit-content"` 配合使用，控制编辑器的最大显示高度（超出后出现滚动条）。 |
28
+ | height | `string \| number \| undefined` | - | - | 固定高度（像素或 CSS 字符串），当 `automaticLayout` 不为 `fit-content` 时生效。 |
29
+ | completers | `monaco.languages.CompletionItem[] \| undefined` | - | - | 仅对 language 为 brick_next_yaml 有效，设置第一层属性名的自动补全。 |
30
+ | advancedCompleters | `AdvancedCompleterMap \| MixedCompleter[] \| undefined` | - | - | 高级自动补全配置。设置为键值对时仅对 language 为 brick_next_yaml 有效，设置任意路径的自动补全；设置为数组时当前仅对 language 为 cel 等系列语言有效。未来将统一改为数组格式，废弃键值对格式。 |
31
+ | markers | `Marker[] \| undefined` | - | - | 标记配置，用于在编辑器中对指定 token 进行高亮标注，并可关联错误/警告级别与提示信息，仅对 language 为 brick_next_yaml 有效。 |
32
+ | links | `string[] \| undefined` | - | - | 可点击链接的命名空间列表，在 language 为 brick_next_yaml 时，按住 Ctrl/Cmd 点击这些关键字可触发 `token.click` 事件。 |
33
+ | showExpandButton | `boolean \| undefined` | - | - | 是否展示展开/收起按钮，点击后编辑器全屏展开，按 Esc 键收起。 |
34
+ | showCopyButton | `boolean \| undefined` | - | `true` | 是否展示复制按钮，点击后将编辑器内容复制到剪贴板。 |
35
+ | lineNumbers | `monaco.editor.LineNumbersType \| undefined` | - | - | 行号显示模式，`on` 显示行号，`off` 隐藏行号，也可传入函数自定义行号格式。 |
36
+ | tokenConfig | `TokenConfig \| undefined` | - | - | 自定义高亮配置，目前支持 `showDSKey` 选项，在 brick_next_yaml 中控制是否对 DS（数据源）相关的 key 进行高亮显示。 |
37
+ | customValidationInBrickNextYaml | `boolean \| undefined` | - | `false` | 在 brick_next_yaml 中是否开启嵌入 JavaScript 的语义相关校验（TypeScript 类型检查）。 |
38
+ | glyphMargin | `boolean \| undefined` | - | `false` | 是否显示字形边距（Glyph Margin），启用后在行号左侧留出额外空间，可用于显示调试断点等装饰器。 |
39
+ | extraLibs | `ExtraLib[] \| undefined` | - | - | 额外声明的 TypeScript/JavaScript lib 库，用于在 javascript/typescript/brick_next_yaml 中提供自定义类型声明和自动补全提示。 |
40
+ | extraMarkers | `ExtraMarker[] \| undefined` | - | - | 额外的编辑器标记（Marker），可在指定位置显示错误/警告/信息级别的诊断提示，与 `markers` 不同，支持通过行列坐标精确定位。 |
41
+ | fixedOverflowWidgets | `boolean \| undefined` | - | `true` | 是否将编辑器的悬浮提示（如自动补全下拉框、悬停文档等）渲染到 body 层，避免被父容器 overflow 裁剪。 |
42
+ | spellCheck | `boolean \| undefined` | - | `true` | 是否启用英语拼写检查，启用后会对代码中的英文单词进行拼写校验并标注错误。 |
43
+ | knownWords | `string[] \| undefined` | - | - | 启用拼写检查时，在系统词汇表之外额外指定的已知单词列表（全小写），这些单词不会被标记为拼写错误。 |
44
+ | domLibsEnabled | `boolean \| undefined` | - | - | 是否启用 DOM 相关接口的 TypeScript 自动提示（lib: ["dom"]），启用后在 javascript/typescript 中可获得浏览器 DOM API 的类型声明。 |
45
+ | uri | `string \| undefined` | - | - | 编辑器模型的 URI 标识符，用于区分同一语言下的不同编辑器实例，影响 TypeScript/JavaScript 语言服务的作用域隔离。 |
46
+ | message | `string \| undefined` | - | - | 表单字段自定义校验提示信息。 |
47
+
48
+ ## Events
49
+
50
+ | 事件 | detail | 说明 |
51
+ | ----------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
52
+ | code.change | `string` — 当前编辑器的完整代码文本 | 编辑器内容发生变化时触发（仅用户主动编辑触发，setValue 等程序调用不触发）。 |
53
+ | user.input | `any` — 用户输入的内容 | 用户在编辑器中输入时触发。 |
54
+ | token.click | `string` — 被点击的 token 文本（如 `CTX`、`FN` 等命名空间关键字） | 在 language 为 brick_next_yaml 时，用户按住 Ctrl/Cmd 键点击 `links` 中配置的关键字时触发。 |
55
+
56
+ ## Examples
57
+
58
+ ### Basic
59
+
60
+ 展示基本的 TypeScript 代码编辑器用法，内置语法高亮和自动补全。
2
61
 
3
62
  ```yaml preview
4
63
  brick: vs.code-editor
@@ -10,9 +69,9 @@ properties:
10
69
  }
11
70
  ```
12
71
 
13
- ## Examples
72
+ ### Automatic Layout - fit-content
14
73
 
15
- ### Automatic layout - fit-content
74
+ `automaticLayout: fit-content` 模式下编辑器高度随内容自动伸缩，适合嵌入表单或卡片中使用。
16
75
 
17
76
  ```yaml preview
18
77
  brick: vs.code-editor
@@ -25,7 +84,9 @@ properties:
25
84
  }
26
85
  ```
27
86
 
28
- ### Automatic layout - fit-container
87
+ ### Automatic Layout - fit-container
88
+
89
+ `automaticLayout: fit-container` 模式下编辑器自动填满父容器尺寸，适合固定高度布局场景。
29
90
 
30
91
  ```yaml preview
31
92
  brick: div
@@ -45,6 +106,8 @@ children:
45
106
 
46
107
  ### Placeholder
47
108
 
109
+ 展示编辑器为空时的占位提示文字。
110
+
48
111
  ```yaml preview
49
112
  brick: div
50
113
  properties:
@@ -61,6 +124,8 @@ children:
61
124
 
62
125
  ### Brick Next YAML
63
126
 
127
+ 展示 `brick_next_yaml` 语言模式，支持表达式语法高亮（`<% ... %>`）和 YAML Lint 校验。
128
+
64
129
  ```yaml preview
65
130
  - brick: vs.code-editor
66
131
  properties:
@@ -84,7 +149,9 @@ children:
84
149
  marginTop: 2em
85
150
  ```
86
151
 
87
- ### Brick Next YAML with highlight
152
+ ### Brick Next YAML with Highlight
153
+
154
+ 展示 `brick_next_yaml` 模式的高级功能：使用 `markers` 对命名空间 token 进行高亮标注，使用 `links` 配置可点击链接，使用 `extraLibs` 提供自定义类型声明，通过 `token.click` 事件响应用户点击。
88
155
 
89
156
  ```yaml preview
90
157
  - brick: vs.code-editor
@@ -144,98 +211,8 @@ children:
144
211
  expression3:
145
212
  test1: |
146
213
  <%
147
- CTX.a ? CTX.b : CTX.c
148
- %>
149
- test2: |-
150
- <%
151
- CTX.a ? CTX.b : CTX.c
214
+ CTX.a ? CTX.b : CTX.c
152
215
  %>
153
- test3: >
154
- <%
155
- CTX.a ? CTX.b : CTX.c
156
- %>
157
- test4: >-
158
- <%
159
- CTX.a ? CTX.b : CTX.c
160
- %>
161
- expression4: "<% CTX.a ? CTX.b : CTX.c %>"
162
- expression7: <% CTX.list.map(item => FN.getDetail(item, CTX.name)) %>
163
- expression8: <% CTX.list.map(FN.getDetail) %>
164
- expression9: |
165
- <%
166
- [
167
- CTX.work,
168
- CTX.work.a,
169
- ACTX,
170
- CTXA,
171
- ACTX.noWork,
172
- CTXA.noWork,
173
- a.CTX.noWork,
174
- ]
175
- %>
176
- expression10: |
177
- <%
178
- "TPL is warn",
179
- TPL.id
180
- %>
181
- expression11: |
182
- <%
183
- FN.getDetail(CTX.abc, CTX.efg) %>
184
- expression12:
185
- test1:
186
- test2: <% CTX.name %>
187
- test3: |
188
- <%
189
- CTX.name
190
- %>
191
- expression13: <%= CTX.b + CTX.c %>
192
- expression14: |
193
- <%=
194
- APP.id + CTX.name
195
- %>
196
- expression15:
197
- test1: |
198
- <%
199
- CTX.name %>
200
- test2: |
201
- <% CTX.name
202
- %>
203
- test3: |
204
- <% "track context", CTX.name
205
- %>
206
- test4: |
207
- <%
208
- "track context", CTX.name
209
- %>
210
- test5: |
211
- <%
212
- "track context",
213
- CTX.name
214
- %>
215
- test6: |
216
- <% "track context",
217
- CTX.name
218
- %>
219
- test7: |
220
- <% "track context", CTX.name
221
- expression16:
222
- - <% CTX.a %>
223
- - CTX.b
224
- - <% CTX.c %>
225
- - <% "CTX.d" %>
226
- markers:
227
- hit:
228
- PATH: <% PATH.instanceId %>
229
- info:
230
- QUERY: <% QUERY.info %>
231
- warn:
232
- ANCHOR: <% ANCHOR.id %>
233
- error:
234
- STATE: <% STATE.name %>
235
- stringAndNoWork:
236
- string1: CTX.noWork
237
- string2: FN.getTest
238
- string3: <% "FN.getTest(CTX.test)" %>
239
216
  automaticLayout: fit-content
240
217
  links:
241
218
  - CTX
@@ -245,8 +222,6 @@ children:
245
222
  detail: string
246
223
  - label: buttonType
247
224
  detail: "primary|default|link|danger"
248
- - label: buttonSize
249
- insertText: size
250
225
  advancedCompleters:
251
226
  target:
252
227
  triggerCharacter: ":"
@@ -255,54 +230,11 @@ children:
255
230
  - label: b
256
231
  markers: <% CTX.commonMarkers %>
257
232
  extraLibs: <% CTX.commonLibs %>
258
- - brick: vs.code-editor
259
- events:
260
- highlight.click:
261
- - action: console.log
262
- properties:
263
- language: brick_next_yaml
264
- value: |
265
- <%
266
- `${"<"}% CTX.a %${">"}`
267
- %>
268
- automaticLayout: fit-content
269
- links:
270
- - CTX
271
- - FN
272
- markers: <% CTX.commonMarkers %>
273
- extraLibs: <% CTX.commonLibs %>
274
- - brick: vs.code-editor
275
- events:
276
- highlight.click:
277
- - action: console.log
278
- properties:
279
- language: brick_next_yaml
280
- value: |
281
- '<% CTX.a %>'
282
- automaticLayout: fit-content
283
- links:
284
- - CTX
285
- - FN
286
- markers: <% CTX.commonMarkers %>
287
- extraLibs: <% CTX.commonLibs %>
288
- - brick: vs.code-editor
289
- events:
290
- highlight.click:
291
- - action: console.log
292
- properties:
293
- language: brick_next_yaml
294
- value: |
295
- |-
296
- <% CTX.a %>
297
- automaticLayout: fit-content
298
- links:
299
- - CTX
300
- - FN
301
- markers: <% CTX.commonMarkers %>
302
- extraLibs: <% CTX.commonLibs %>
303
233
  ```
304
234
 
305
- ### Show CTX.DS
235
+ ### Form Integration
236
+
237
+ 展示在表单中使用代码编辑器，配置 `name`、`label`、`required` 等表单字段属性，并配合 `showExpandButton`、`tokenConfig` 等高级功能。
306
238
 
307
239
  ```yaml preview minHeight="500px"
308
240
  - brick: eo-form
@@ -315,12 +247,6 @@ children:
315
247
  a: <% CTX.DS.a %>
316
248
  b: <% CTX.DS.c %>
317
249
  c: <% CTX.a %>
318
- d: <% CTXDS.a %>
319
- e: <% CTX.a.DS %>
320
- f: <% CTX.DSA.a %>
321
- g: <% CTX.DS %>
322
- h: <% DS.a %>
323
- i: <% DS.c %>
324
250
  children:
325
251
  - brick: vs.code-editor
326
252
  events:
@@ -373,6 +299,8 @@ children:
373
299
 
374
300
  ### CEL
375
301
 
302
+ 展示 CEL（Common Expression Language）语言系列的编辑器，支持 `cel`、`cel_str`、`cel_yaml` 三种模式及高级自动补全。
303
+
376
304
  ```yaml preview
377
305
  brick: eo-content-layout
378
306
  context:
package/docs/code-editor.react.md ADDED
@@ -0,0 +1,315 @@
1
+ ---
2
+ tagName: vs.code-editor
3
+ displayName: WrappedVsCodeEditor
4
+ description: 基于 Monaco Editor 的代码编辑器构件，支持多种编程语言（typescript、yaml、brick_next_yaml、cel 等）的语法高亮与自动补全，支持作为表单项使用，支持自动布局、拼写检查、Lint 校验、标记高亮等高级功能。
5
+ category: form-input-advanced
6
+ source: "@next-bricks/vs"
7
+ ---
8
+
9
+ # WrappedVsCodeEditor
10
+
11
+ > 基于 Monaco Editor 的代码编辑器构件，支持多种编程语言（typescript、yaml、brick_next_yaml、cel 等）的语法高亮与自动补全，支持作为表单项使用，支持自动布局、拼写检查、Lint 校验、标记高亮等高级功能。
12
+
13
+ ## 导入
14
+
15
+ ```tsx
16
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
17
+ ```
18
+
19
+ ## Props
20
+
21
+ | 属性 | 类型 | 必填 | 默认值 | 说明 |
22
+ | ------------------------------- | --------------------------------------------------------- | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
23
+ | name | `string \| undefined` | - | - | 表单字段名，用于在表单提交时标识该字段。 |
24
+ | label | `string \| undefined` | - | - | 表单字段标签，显示在编辑器上方作为说明文字。 |
25
+ | value | `string \| undefined` | - | - | 编辑器的当前值（代码文本内容）。 |
26
+ | language | `string \| undefined` | - | `"plaintext"` | 编辑器的编程语言，决定语法高亮和自动补全行为，支持 `typescript`、`javascript`、`yaml`、`brick_next_yaml`、`cel`、`cel_yaml`、`cel_str` 等。 |
27
+ | theme | `string \| undefined` | - | `"auto"` | 编辑器主题，`auto` 跟随系统主题自动切换，`vs` 为亮色，`vs-dark` 为暗色。 |
28
+ | placeholder | `string \| undefined` | - | - | 编辑器为空时显示的占位提示文字。 |
29
+ | required | `boolean \| undefined` | - | - | 是否为表单必填项，启用后表单提交时会校验该字段不能为空。 |
30
+ | readOnly | `boolean \| undefined` | - | - | 是否为只读模式，启用后用户无法编辑代码内容。 |
31
+ | automaticLayout | `"fit-container" \| "fit-content" \| "none" \| undefined` | - | - | 自动布局模式：`fit-content` 根据内容高度自动调整编辑器高度（由 `minLines`/`maxLines` 控制范围），`fit-container` 自动填满父容器尺寸，`none` 不自动调整。 |
32
+ | minLines | `number \| undefined` | - | `3` | 编辑器最小行数，与 `automaticLayout: "fit-content"` 配合使用，控制编辑器的最小显示高度。 |
33
+ | maxLines | `number \| undefined` | - | `Infinity` | 编辑器最大行数，与 `automaticLayout: "fit-content"` 配合使用，控制编辑器的最大显示高度（超出后出现滚动条）。 |
34
+ | height | `string \| number \| undefined` | - | - | 固定高度（像素或 CSS 字符串），当 `automaticLayout` 不为 `fit-content` 时生效。 |
35
+ | completers | `monaco.languages.CompletionItem[] \| undefined` | - | - | 仅对 language 为 brick_next_yaml 有效，设置第一层属性名的自动补全。 |
36
+ | advancedCompleters | `AdvancedCompleterMap \| MixedCompleter[] \| undefined` | - | - | 高级自动补全配置。设置为键值对时仅对 language 为 brick_next_yaml 有效，设置任意路径的自动补全；设置为数组时当前仅对 language 为 cel 等系列语言有效。未来将统一改为数组格式，废弃键值对格式。 |
37
+ | markers | `Marker[] \| undefined` | - | - | 标记配置，用于在编辑器中对指定 token 进行高亮标注，并可关联错误/警告级别与提示信息，仅对 language 为 brick_next_yaml 有效。 |
38
+ | links | `string[] \| undefined` | - | - | 可点击链接的命名空间列表，在 language 为 brick_next_yaml 时，按住 Ctrl/Cmd 点击这些关键字可触发 `onTokenClick` 事件。 |
39
+ | showExpandButton | `boolean \| undefined` | - | - | 是否展示展开/收起按钮，点击后编辑器全屏展开，按 Esc 键收起。 |
40
+ | showCopyButton | `boolean \| undefined` | - | `true` | 是否展示复制按钮，点击后将编辑器内容复制到剪贴板。 |
41
+ | lineNumbers | `monaco.editor.LineNumbersType \| undefined` | - | - | 行号显示模式，`on` 显示行号，`off` 隐藏行号，也可传入函数自定义行号格式。 |
42
+ | tokenConfig | `TokenConfig \| undefined` | - | - | 自定义高亮配置，目前支持 `showDSKey` 选项，在 brick_next_yaml 中控制是否对 DS（数据源）相关的 key 进行高亮显示。 |
43
+ | customValidationInBrickNextYaml | `boolean \| undefined` | - | `false` | 在 brick_next_yaml 中是否开启嵌入 JavaScript 的语义相关校验（TypeScript 类型检查）。 |
44
+ | glyphMargin | `boolean \| undefined` | - | `false` | 是否显示字形边距（Glyph Margin），启用后在行号左侧留出额外空间，可用于显示调试断点等装饰器。 |
45
+ | extraLibs | `ExtraLib[] \| undefined` | - | - | 额外声明的 TypeScript/JavaScript lib 库，用于在 javascript/typescript/brick_next_yaml 中提供自定义类型声明和自动补全提示。 |
46
+ | extraMarkers | `ExtraMarker[] \| undefined` | - | - | 额外的编辑器标记（Marker），可在指定位置显示错误/警告/信息级别的诊断提示，与 `markers` 不同，支持通过行列坐标精确定位。 |
47
+ | fixedOverflowWidgets | `boolean \| undefined` | - | `true` | 是否将编辑器的悬浮提示（如自动补全下拉框、悬停文档等）渲染到 body 层，避免被父容器 overflow 裁剪。 |
48
+ | spellCheck | `boolean \| undefined` | - | `true` | 是否启用英语拼写检查，启用后会对代码中的英文单词进行拼写校验并标注错误。 |
49
+ | knownWords | `string[] \| undefined` | - | - | 启用拼写检查时，在系统词汇表之外额外指定的已知单词列表（全小写），这些单词不会被标记为拼写错误。 |
50
+ | domLibsEnabled | `boolean \| undefined` | - | - | 是否启用 DOM 相关接口的 TypeScript 自动提示（lib: ["dom"]），启用后在 javascript/typescript 中可获得浏览器 DOM API 的类型声明。 |
51
+ | uri | `string \| undefined` | - | - | 编辑器模型的 URI 标识符，用于区分同一语言下的不同编辑器实例，影响 TypeScript/JavaScript 语言服务的作用域隔离。 |
52
+ | message | `string \| undefined` | - | - | 表单字段自定义校验提示信息。 |
53
+ | onCodeChange | `(e: CustomEvent<string>) => void` | - | - | 编辑器内容发生变化时触发（仅用户主动编辑触发，setValue 等程序调用不触发）。 |
54
+ | onUserInput | `(e: CustomEvent<any>) => void` | - | - | 用户在编辑器中输入时触发。 |
55
+ | onTokenClick | `(e: CustomEvent<string>) => void` | - | - | 在 language 为 brick_next_yaml 时，用户按住 Ctrl/Cmd 键点击 `links` 中配置的关键字时触发。 |
56
+
57
+ ## Events
58
+
59
+ | 事件 | detail | 说明 |
60
+ | ------------ | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
61
+ | onCodeChange | `string` — 当前编辑器的完整代码文本 | 编辑器内容发生变化时触发（仅用户主动编辑触发，setValue 等程序调用不触发）。 |
62
+ | onUserInput | `any` — 用户输入的内容 | 用户在编辑器中输入时触发。 |
63
+ | onTokenClick | `string` — 被点击的 token 文本（如 `CTX`、`FN` 等命名空间关键字） | 在 language 为 brick_next_yaml 时，用户按住 Ctrl/Cmd 键点击 `links` 中配置的关键字时触发。 |
64
+
65
+ ## Examples
66
+
67
+ ### Basic
68
+
69
+ 展示基本的 TypeScript 代码编辑器用法，内置语法高亮和自动补全。
70
+
71
+ ```tsx
72
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
73
+
74
+ function BasicEditor() {
75
+ return (
76
+ <WrappedVsCodeEditor
77
+ language="typescript"
78
+ value={`function sayHello(): string {\n return "hello";\n}`}
79
+ />
80
+ );
81
+ }
82
+ ```
83
+
84
+ ### Automatic Layout - fit-content
85
+
86
+ `automaticLayout: fit-content` 模式下编辑器高度随内容自动伸缩，适合嵌入表单或卡片中使用。
87
+
88
+ ```tsx
89
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
90
+
91
+ function FitContentEditor() {
92
+ return (
93
+ <WrappedVsCodeEditor
94
+ automaticLayout="fit-content"
95
+ language="typescript"
96
+ value={`function sayHello(): string {\n return "hello";\n}`}
97
+ />
98
+ );
99
+ }
100
+ ```
101
+
102
+ ### Automatic Layout - fit-container
103
+
104
+ `automaticLayout: fit-container` 模式下编辑器自动填满父容器尺寸，适合固定高度布局场景。
105
+
106
+ ```tsx
107
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
108
+
109
+ function FitContainerEditor() {
110
+ return (
111
+ <div style={{ height: 200 }}>
112
+ <WrappedVsCodeEditor
113
+ automaticLayout="fit-container"
114
+ language="typescript"
115
+ value={`function sayHello(): string {\n return "hello";\n}`}
116
+ />
117
+ </div>
118
+ );
119
+ }
120
+ ```
121
+
122
+ ### Placeholder
123
+
124
+ 展示编辑器为空时的占位提示文字。
125
+
126
+ ```tsx
127
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
128
+
129
+ function PlaceholderEditor() {
130
+ return (
131
+ <div style={{ height: 200 }}>
132
+ <WrappedVsCodeEditor
133
+ language="typescript"
134
+ placeholder={"Hello World~\nTry to enter something!"}
135
+ />
136
+ </div>
137
+ );
138
+ }
139
+ ```
140
+
141
+ ### Brick Next YAML
142
+
143
+ 展示 `brick_next_yaml` 语言模式，支持表达式语法高亮（`<% ... %>`）和 YAML Lint 校验。
144
+
145
+ ```tsx
146
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
147
+
148
+ function BrickNextYamlEditor() {
149
+ return (
150
+ <div>
151
+ <WrappedVsCodeEditor
152
+ language="brick_next_yaml"
153
+ value={`# Enhanced yaml for Brick Next\nbrick: button\nproperties:\n textContent: '<% CTX.error ? "CTX.error": "Hello" %>'`}
154
+ automaticLayout="fit-content"
155
+ />
156
+ <WrappedVsCodeEditor
157
+ language="yaml"
158
+ value={`# Normal yaml\nbrick: button\nproperties:\n textContent: '<% CTX.error ? "Oops": "Hello" %>'`}
159
+ automaticLayout="fit-content"
160
+ style={{ marginTop: "2em" }}
161
+ />
162
+ </div>
163
+ );
164
+ }
165
+ ```
166
+
167
+ ### Brick Next YAML with Highlight
168
+
169
+ 展示 `brick_next_yaml` 模式的高级功能：使用 `markers` 对命名空间 token 进行高亮标注，使用 `links` 配置可点击链接，使用 `extraLibs` 提供自定义类型声明，通过 `onTokenClick` 事件响应用户点击。
170
+
171
+ ```tsx
172
+ import { WrappedVsCodeEditor } from "@easyops/wrapped-components";
173
+
174
+ const commonMarkers = [
175
+ { token: "PATH", message: "这是 PATH", level: "hit" },
176
+ { token: "QUERY", message: "这是 QUERY", level: "info" },
177
+ { token: "ANCHOR", message: "这是 ANCHOR", level: "warn" },
178
+ {
179
+ token: "STATE",
180
+ message: "这里不能写 STATE",
181
+ level: "error",
182
+ code: {
183
+ value: "详情地址",
184
+ target: "https://brick-next.js.org/docs/concepts/context",
185
+ },
186
+ },
187
+ { token: "TPL", level: "warn", message: "不允许写入TPL" },
188
+ ];
189
+
190
+ const commonLibs = [
191
+ {
192
+ filePath: "base.d.ts",
193
+ content: `declare namespace CTX {\n const pageTitle: string;\n const name: string;\n const a;\n const b;\n};\ndeclare namespace FN {\n function getPageDetail();\n function getInstance();\n};\ndeclare namespace PATH {\n const instanceId: string;\n const name: string;\n};\ndeclare namespace QUERY {\n const activeId: string;\n}`,
194
+ },
195
+ ];
196
+
197
+ function HighlightEditor() {
198
+ return (
199
+ <WrappedVsCodeEditor
200
+ language="brick_next_yaml"
201
+ value={`basicUsage:\n keyword:\n Expression:\n expression1: <% CTX.work %>\n expression2: <% \`\${CTX.work}\` %>`}
202
+ automaticLayout="fit-content"
203
+ links={["CTX", "FN"]}
204
+ completers={[
205
+ { label: "buttonName", detail: "string" } as any,
206
+ { label: "buttonType", detail: "primary|default|link|danger" } as any,
207
+ ]}
208
+ advancedCompleters={{
209
+ target: {
210
+ triggerCharacter: ":",
211
+ completers: [{ label: "a" }, { label: "b" }],
212
+ },
213
+ }}
214
+ markers={commonMarkers}
215
+ extraLibs={commonLibs}
216
+ onTokenClick={(e) => console.log(e.detail)}
217
+ />
218
+ );
219
+ }
220
+ ```
221
+
222
+ ### Form Integration
223
+
224
+ 展示在表单中使用代码编辑器，配置 `name`、`label`、`required` 等表单字段属性，并配合 `showExpandButton`、`tokenConfig` 等高级功能。
225
+
226
+ ```tsx
227
+ import {
228
+ WrappedVsCodeEditor,
229
+ WrappedEoForm,
230
+ WrappedEoSubmitButtons,
231
+ } from "@easyops/wrapped-components";
232
+
233
+ function FormEditor() {
234
+ return (
235
+ <WrappedEoForm
236
+ values={{ code: "a: <% CTX.DS.a %>\nb: <% CTX.DS.c %>\nc: <% CTX.a %>" }}
237
+ onValidateSuccess={(e) => console.log(e.detail)}
238
+ >
239
+ <WrappedVsCodeEditor
240
+ name="code"
241
+ label="code"
242
+ required={true}
243
+ language="brick_next_yaml"
244
+ showExpandButton={true}
245
+ automaticLayout="fit-content"
246
+ links={["CTX", "CTX.DS", "DS"]}
247
+ tokenConfig={{ showDSKey: true }}
248
+ markers={[
249
+ { token: "CTX", params: ["a", "DS"] },
250
+ { token: "CTX.DS", params: ["a", "b"] },
251
+ { token: "DS", params: ["a", "b"] },
252
+ ]}
253
+ extraLibs={[
254
+ {
255
+ filePath: "common.d.ts",
256
+ content: `declare namespace CTX {\n const a;\n namespace DS {\n const a;\n const b;\n };\n};\ndeclare namespace PATH {\n const instanceId: string;\n};\ndeclare namespace QUERY {\n const index: number;\n};`,
257
+ },
258
+ ]}
259
+ onTokenClick={(e) => console.log(e.detail)}
260
+ />
261
+ <WrappedEoSubmitButtons />
262
+ </WrappedEoForm>
263
+ );
264
+ }
265
+ ```
266
+
267
+ ### CEL
268
+
269
+ 展示 CEL（Common Expression Language）语言系列的编辑器，支持 `cel`、`cel_str`、`cel_yaml` 三种模式及高级自动补全。
270
+
271
+ ```tsx
272
+ import {
273
+ WrappedVsCodeEditor,
274
+ WrappedEoContentLayout,
275
+ } from "@easyops/wrapped-components";
276
+
277
+ const advancedCompleters = [
278
+ {
279
+ type: "members",
280
+ members: {
281
+ step: ["firstStep", "lastStep"],
282
+ },
283
+ },
284
+ ];
285
+
286
+ function CelEditor() {
287
+ return (
288
+ <WrappedEoContentLayout>
289
+ <WrappedVsCodeEditor
290
+ theme="auto"
291
+ language="cel"
292
+ automaticLayout="fit-content"
293
+ advancedCompleters={advancedCompleters}
294
+ value={"// Pure CEL\nhas(abc)"}
295
+ />
296
+ <WrappedVsCodeEditor
297
+ theme="auto"
298
+ language="cel_str"
299
+ automaticLayout="fit-content"
300
+ advancedCompleters={advancedCompleters}
301
+ value={"<%\n`${'<'}%\n // CEL with wrapper\n has(abc)\n%${'>'}`\n%>"}
302
+ />
303
+ <WrappedVsCodeEditor
304
+ theme="auto"
305
+ language="cel_yaml"
306
+ automaticLayout="fit-content"
307
+ advancedCompleters={advancedCompleters}
308
+ value={
309
+ "<%\n`# CEL in YAML\nname: |\n ${'<'}%\n has(abc)\n %${'>'}\n`\n%>"
310
+ }
311
+ />
312
+ </WrappedEoContentLayout>
313
+ );
314
+ }
315
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@next-bricks/vs",
3
- "version": "1.18.13",
3
+ "version": "1.18.14",
4
4
  "homepage": "https://github.com/easyops-cn/next-advanced-bricks/tree/master/bricks/vs",
5
5
  "repository": {
6
6
  "type": "git",
@@ -68,5 +68,5 @@
68
68
  "@next-bricks/form": "*",
69
69
  "@next-bricks/icons": "*"
70
70
  },
71
- "gitHead": "05072fd5cc9a9758927c7729df7bf49f853e079c"
71
+ "gitHead": "2670992c377a46bcaed4f3ed70431bb5441c4bb7"
72
72
  }