@patternfly/react-code-editor 6.0.0-alpha.9 → 6.0.0-alpha.91

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 (26) hide show
  1. package/CHANGELOG.md +884 -0
  2. package/README.md +46 -36
  3. package/dist/esm/components/CodeEditor/CodeEditor.d.ts +8 -2
  4. package/dist/esm/components/CodeEditor/CodeEditor.d.ts.map +1 -1
  5. package/dist/esm/components/CodeEditor/CodeEditor.js +47 -41
  6. package/dist/esm/components/CodeEditor/CodeEditor.js.map +1 -1
  7. package/dist/esm/components/CodeEditor/CodeEditorControl.d.ts.map +1 -1
  8. package/dist/esm/components/CodeEditor/CodeEditorControl.js +1 -1
  9. package/dist/esm/components/CodeEditor/CodeEditorControl.js.map +1 -1
  10. package/dist/js/components/CodeEditor/CodeEditor.d.ts +8 -2
  11. package/dist/js/components/CodeEditor/CodeEditor.d.ts.map +1 -1
  12. package/dist/js/components/CodeEditor/CodeEditor.js +47 -41
  13. package/dist/js/components/CodeEditor/CodeEditor.js.map +1 -1
  14. package/dist/js/components/CodeEditor/CodeEditorControl.d.ts.map +1 -1
  15. package/dist/js/components/CodeEditor/CodeEditorControl.js +1 -1
  16. package/dist/js/components/CodeEditor/CodeEditorControl.js.map +1 -1
  17. package/package.json +9 -10
  18. package/src/components/CodeEditor/CodeEditor.tsx +77 -65
  19. package/src/components/CodeEditor/CodeEditorControl.tsx +8 -3
  20. package/src/components/CodeEditor/__test__/CodeEditor.test.tsx +69 -39
  21. package/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx +18 -0
  22. package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +116 -536
  23. package/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap +26 -0
  24. package/src/components/CodeEditor/examples/CodeEditor.md +5 -0
  25. package/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx +2 -1
  26. package/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx +51 -18
package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap CHANGED
@@ -1,354 +1,142 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`CodeEditor matches snapshot with all props 1`] = `
3
+ exports[`Matches snapshot with control buttons enabled 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="pf-v5-c-code-editor pf-m-read-only"
6
+ class="pf-v6-c-code-editor"
7
7
  >
8
8
  <div
9
- class="pf-v5-c-file-upload false false"
9
+ class=""
10
10
  role="presentation"
11
11
  tabindex="0"
12
12
  >
13
13
  <div
14
- class="pf-v5-c-code-editor__header"
14
+ class="pf-v6-c-code-editor__header"
15
15
  >
16
16
  <div
17
- class="pf-v5-c-code-editor__controls"
17
+ class="pf-v6-c-code-editor__header-content"
18
18
  >
19
19
  <div
20
- style="display: contents;"
20
+ class="pf-v6-c-code-editor__controls"
21
21
  >
22
- <button
23
- aria-disabled="false"
24
- aria-label="Copy code to clipboard"
25
- class="pf-v5-c-button pf-m-control"
26
- data-ouia-component-id="OUIA-Generated-Button-control-1"
27
- data-ouia-component-type="PF5/Button"
28
- data-ouia-safe="true"
29
- type="button"
22
+ <div
23
+ style="display: contents;"
30
24
  >
31
- <svg
32
- aria-hidden="true"
33
- class="pf-v5-svg"
34
- fill="currentColor"
35
- height="1em"
36
- role="img"
37
- viewBox="0 0 448 512"
38
- width="1em"
25
+ <button
26
+ aria-disabled="false"
27
+ aria-label="Copy code to clipboard"
28
+ class="pf-v6-c-button pf-m-plain"
29
+ data-ouia-component-id="OUIA-Generated-Button-plain-1"
30
+ data-ouia-component-type="PF6/Button"
31
+ data-ouia-safe="true"
32
+ type="button"
39
33
  >
40
- <path
41
- d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
42
- />
43
- </svg>
44
- </button>
45
- </div>
46
- <div
47
- style="display: contents;"
48
- >
49
- <button
50
- aria-disabled="false"
51
- aria-label="Upload code"
52
- class="pf-v5-c-button pf-m-control"
53
- data-ouia-component-id="OUIA-Generated-Button-control-2"
54
- data-ouia-component-type="PF5/Button"
55
- data-ouia-safe="true"
56
- type="button"
34
+ <span
35
+ class="pf-v6-c-button__icon pf-m-start"
36
+ >
37
+ <svg
38
+ aria-hidden="true"
39
+ class="pf-v6-svg"
40
+ fill="currentColor"
41
+ height="1em"
42
+ role="img"
43
+ viewBox="0 0 448 512"
44
+ width="1em"
45
+ >
46
+ <path
47
+ d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
48
+ />
49
+ </svg>
50
+ </span>
51
+ </button>
52
+ </div>
53
+ <div
54
+ style="display: contents;"
57
55
  >
58
- <svg
59
- aria-hidden="true"
60
- class="pf-v5-svg"
61
- fill="currentColor"
62
- height="1em"
63
- role="img"
64
- viewBox="0 0 512 512"
65
- width="1em"
56
+ <button
57
+ aria-disabled="false"
58
+ aria-label="Upload code"
59
+ class="pf-v6-c-button pf-m-plain"
60
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
61
+ data-ouia-component-type="PF6/Button"
62
+ data-ouia-safe="true"
63
+ type="button"
66
64
  >
67
- <path
68
- d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
69
- />
70
- </svg>
71
- </button>
72
- </div>
73
- <div
74
- style="display: contents;"
75
- >
76
- <button
77
- aria-disabled="false"
78
- aria-label="Download code"
79
- class="pf-v5-c-button pf-m-control"
80
- data-ouia-component-id="OUIA-Generated-Button-control-3"
81
- data-ouia-component-type="PF5/Button"
82
- data-ouia-safe="true"
83
- type="button"
65
+ <span
66
+ class="pf-v6-c-button__icon pf-m-start"
67
+ >
68
+ <svg
69
+ aria-hidden="true"
70
+ class="pf-v6-svg"
71
+ fill="currentColor"
72
+ height="1em"
73
+ role="img"
74
+ viewBox="0 0 512 512"
75
+ width="1em"
76
+ >
77
+ <path
78
+ d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
79
+ />
80
+ </svg>
81
+ </span>
82
+ </button>
83
+ </div>
84
+ <div
85
+ style="display: contents;"
84
86
  >
85
- <svg
86
- aria-hidden="true"
87
- class="pf-v5-svg"
88
- fill="currentColor"
89
- height="1em"
90
- role="img"
91
- viewBox="0 0 512 512"
92
- width="1em"
87
+ <button
88
+ aria-disabled="false"
89
+ aria-label="Download code"
90
+ class="pf-v6-c-button pf-m-plain"
91
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
92
+ data-ouia-component-type="PF6/Button"
93
+ data-ouia-safe="true"
94
+ type="button"
93
95
  >
94
- <path
95
- d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
96
- />
97
- </svg>
98
- </button>
96
+ <span
97
+ class="pf-v6-c-button__icon pf-m-start"
98
+ >
99
+ <svg
100
+ aria-hidden="true"
101
+ class="pf-v6-svg"
102
+ fill="currentColor"
103
+ height="1em"
104
+ role="img"
105
+ viewBox="0 0 512 512"
106
+ width="1em"
107
+ >
108
+ <path
109
+ d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"
110
+ />
111
+ </svg>
112
+ </span>
113
+ </button>
114
+ </div>
99
115
  </div>
100
- </div>
101
- <div
102
- class="pf-v5-c-code-editor__header-main"
103
- />
104
- <div
105
- class="pf-v5-c-code-editor__tab"
106
- >
107
- <span
108
- class="pf-v5-c-code-editor__tab-icon"
109
- >
110
- <svg
111
- aria-hidden="true"
112
- class="pf-v5-svg"
113
- fill="currentColor"
114
- height="1em"
115
- role="img"
116
- viewBox="0 0 640 512"
117
- width="1em"
118
- >
119
- <path
120
- d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
121
- />
122
- </svg>
123
- </span>
124
- <span
125
- class="pf-v5-c-code-editor__tab-text"
126
- >
127
- JAVASCRIPT
128
- </span>
116
+ <div
117
+ class="pf-v6-c-code-editor__header-main"
118
+ />
129
119
  </div>
130
120
  </div>
131
121
  <div
132
- class="pf-v5-c-code-editor__main"
122
+ class="pf-v6-c-code-editor__main"
133
123
  >
134
- <input
135
- style="display: none;"
136
- tabindex="-1"
137
- type="file"
138
- />
139
124
  <div
140
- class="pf-v5-c-code-editor__code"
141
- dir="ltr"
142
- tabindex="0"
125
+ class="pf-v6-c-code-editor__upload"
143
126
  >
127
+ <input
128
+ style="display: none;"
129
+ tabindex="-1"
130
+ type="file"
131
+ />
144
132
  <div
145
- class="react-monaco-editor-container"
146
- data-keybinding-context="2"
147
- data-mode-id="plaintext"
148
- style="height: 400px;"
133
+ class="pf-v6-c-code-editor__code"
134
+ dir="ltr"
135
+ tabindex="0"
149
136
  >
150
137
  <div
151
- class="monaco-editor showUnused showDeprecated vs-dark"
152
- data-uri="inmemory://model/2"
153
- style="width: 5px; height: 5px;"
154
- >
155
- <div
156
- class="overflow-guard"
157
- data-mprt="3"
158
- style="width: 5px; height: 5px;"
159
- >
160
- <div
161
- aria-hidden="true"
162
- class="margin"
163
- role="presentation"
164
- style="position: absolute;"
165
- >
166
- <div
167
- class="glyph-margin"
168
- />
169
- <div
170
- aria-hidden="true"
171
- class="margin-view-zones"
172
- role="presentation"
173
- style="position: absolute;"
174
- />
175
- <div
176
- aria-hidden="true"
177
- class="margin-view-overlays"
178
- role="presentation"
179
- style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
180
- />
181
- </div>
182
- <div
183
- class="monaco-scrollable-element editor-scrollable vs-dark"
184
- data-mprt="5"
185
- role="presentation"
186
- style="position: absolute; overflow: hidden; left: 26px; width: -21px; height: 5px;"
187
- >
188
- <div
189
- class="lines-content monaco-editor-background"
190
- style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
191
- >
192
- <div
193
- aria-hidden="true"
194
- class="view-overlays"
195
- role="presentation"
196
- style="position: absolute; height: 0px;"
197
- />
198
- <div
199
- aria-hidden="true"
200
- class="view-rulers"
201
- role="presentation"
202
- />
203
- <div
204
- aria-hidden="true"
205
- class="blockDecorations-container"
206
- role="presentation"
207
- />
208
- <div
209
- aria-hidden="true"
210
- class="view-zones"
211
- role="presentation"
212
- style="position: absolute;"
213
- />
214
- <div
215
- aria-hidden="true"
216
- class="view-lines monaco-mouse-cursor-text"
217
- data-mprt="7"
218
- role="presentation"
219
- style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 54px; height: 19px;"
220
- >
221
- <div
222
- class="view-line"
223
- style="top:0px;height:19px;"
224
- >
225
- <span>
226
- <span
227
- class="mtk1"
228
- >
229
- test
230
- </span>
231
- </span>
232
- </div>
233
- </div>
234
- <div
235
- class="contentWidgets"
236
- data-mprt="1"
237
- style="position: absolute; top: 0px;"
238
- />
239
- <div
240
- aria-hidden="true"
241
- class="cursors-layer cursor-line-style cursor-solid"
242
- role="presentation"
243
- >
244
- <div
245
- class="cursor monaco-mouse-cursor-text"
246
- style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
247
- />
248
- </div>
249
- </div>
250
- <div
251
- aria-hidden="true"
252
- class="invisible scrollbar horizontal"
253
- role="presentation"
254
- style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
255
- >
256
- <div
257
- class="slider"
258
- style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
259
- />
260
- </div>
261
- <canvas
262
- aria-hidden="true"
263
- class="decorationsOverviewRuler"
264
- height="5"
265
- style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
266
- width="14"
267
- />
268
- <div
269
- aria-hidden="true"
270
- class="invisible scrollbar vertical"
271
- role="presentation"
272
- style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
273
- >
274
- <div
275
- class="slider"
276
- style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
277
- />
278
- </div>
279
- </div>
280
- <div
281
- aria-hidden="true"
282
- role="presentation"
283
- />
284
- <textarea
285
- aria-autocomplete="both"
286
- aria-haspopup="false"
287
- aria-label="Editor content;Press Alt+F1 for Accessibility Options."
288
- aria-multiline="true"
289
- aria-roledescription="editor"
290
- autocapitalize="off"
291
- autocomplete="off"
292
- autocorrect="off"
293
- class="inputarea monaco-mouse-cursor-text"
294
- data-mprt="6"
295
- role="textbox"
296
- spellcheck="false"
297
- style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
298
- tabindex="-1"
299
- wrap="off"
300
- />
301
- <div
302
- class="monaco-editor-background textAreaCover"
303
- style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
304
- />
305
- <div
306
- class="overlayWidgets"
307
- data-mprt="4"
308
- >
309
- <div
310
- style="position: absolute;"
311
- widgetid="editor.contrib.quickInputWidget"
312
- />
313
- </div>
314
- <div
315
- aria-hidden="true"
316
- class="minimap slider-mouseover"
317
- data-mprt="8"
318
- role="presentation"
319
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
320
- >
321
- <div
322
- class="minimap-shadow-hidden"
323
- style="height: 5px;"
324
- />
325
- <canvas
326
- height="5"
327
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
328
- width="0"
329
- />
330
- <canvas
331
- class="minimap-decorations-layer"
332
- height="5"
333
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
334
- width="0"
335
- />
336
- <div
337
- class="minimap-slider"
338
- style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
339
- >
340
- <div
341
- class="minimap-slider-horizontal"
342
- style="position: absolute;"
343
- />
344
- </div>
345
- </div>
346
- </div>
347
- <div
348
- class="overflowingContentWidgets"
349
- data-mprt="2"
350
- />
351
- </div>
138
+ data-testid="mock-editor"
139
+ />
352
140
  </div>
353
141
  </div>
354
142
  </div>
@@ -357,233 +145,25 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
357
145
  </DocumentFragment>
358
146
  `;
359
147
 
360
- exports[`CodeEditor matches snapshot without props 1`] = `
148
+ exports[`Matches snapshot without props 1`] = `
361
149
  <DocumentFragment>
362
150
  <div
363
- class="pf-v5-c-code-editor"
151
+ class="pf-v6-c-code-editor"
364
152
  >
365
153
  <div
366
- class="pf-v5-c-code-editor__header"
367
- >
368
- <div
369
- class="pf-v5-c-code-editor__controls"
370
- />
371
- <div
372
- class="pf-v5-c-code-editor__header-main"
373
- />
374
- </div>
154
+ class="pf-v6-c-code-editor__header"
155
+ />
375
156
  <div
376
- class="pf-v5-c-code-editor__main"
157
+ class="pf-v6-c-code-editor__main"
377
158
  >
378
159
  <div
379
- class="pf-v5-c-code-editor__code"
160
+ class="pf-v6-c-code-editor__code"
380
161
  dir="ltr"
381
162
  tabindex="0"
382
163
  >
383
164
  <div
384
- class="react-monaco-editor-container"
385
- data-keybinding-context="1"
386
- data-mode-id="plaintext"
387
- >
388
- <div
389
- class="monaco-editor showUnused showDeprecated vs"
390
- data-uri="inmemory://model/1"
391
- style="width: 5px; height: 5px;"
392
- >
393
- <div
394
- class="overflow-guard"
395
- data-mprt="3"
396
- style="width: 5px; height: 5px;"
397
- >
398
- <div
399
- aria-hidden="true"
400
- class="margin"
401
- role="presentation"
402
- style="position: absolute;"
403
- >
404
- <div
405
- class="glyph-margin"
406
- />
407
- <div
408
- aria-hidden="true"
409
- class="margin-view-zones"
410
- role="presentation"
411
- style="position: absolute;"
412
- />
413
- <div
414
- aria-hidden="true"
415
- class="margin-view-overlays"
416
- role="presentation"
417
- style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
418
- />
419
- </div>
420
- <div
421
- class="monaco-scrollable-element editor-scrollable vs"
422
- data-mprt="5"
423
- role="presentation"
424
- style="position: absolute; overflow: hidden; left: 51px; width: -46px; height: 5px;"
425
- >
426
- <div
427
- class="lines-content monaco-editor-background"
428
- style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
429
- >
430
- <div
431
- aria-hidden="true"
432
- class="view-overlays"
433
- role="presentation"
434
- style="position: absolute; height: 0px;"
435
- />
436
- <div
437
- aria-hidden="true"
438
- class="view-rulers"
439
- role="presentation"
440
- />
441
- <div
442
- aria-hidden="true"
443
- class="blockDecorations-container"
444
- role="presentation"
445
- />
446
- <div
447
- aria-hidden="true"
448
- class="view-zones"
449
- role="presentation"
450
- style="position: absolute;"
451
- />
452
- <div
453
- aria-hidden="true"
454
- class="view-lines monaco-mouse-cursor-text"
455
- data-mprt="7"
456
- role="presentation"
457
- style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 35px; height: 19px;"
458
- >
459
- <div
460
- class="view-line"
461
- style="top:0px;height:19px;"
462
- >
463
- <span>
464
- <span />
465
- </span>
466
- </div>
467
- </div>
468
- <div
469
- class="contentWidgets"
470
- data-mprt="1"
471
- style="position: absolute; top: 0px;"
472
- />
473
- <div
474
- aria-hidden="true"
475
- class="cursors-layer cursor-line-style cursor-solid"
476
- role="presentation"
477
- >
478
- <div
479
- class="cursor monaco-mouse-cursor-text"
480
- style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
481
- />
482
- </div>
483
- </div>
484
- <div
485
- aria-hidden="true"
486
- class="invisible scrollbar horizontal"
487
- role="presentation"
488
- style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
489
- >
490
- <div
491
- class="slider"
492
- style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
493
- />
494
- </div>
495
- <canvas
496
- aria-hidden="true"
497
- class="decorationsOverviewRuler"
498
- height="5"
499
- style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
500
- width="14"
501
- />
502
- <div
503
- aria-hidden="true"
504
- class="invisible scrollbar vertical"
505
- role="presentation"
506
- style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
507
- >
508
- <div
509
- class="slider"
510
- style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
511
- />
512
- </div>
513
- </div>
514
- <div
515
- aria-hidden="true"
516
- role="presentation"
517
- />
518
- <textarea
519
- aria-autocomplete="both"
520
- aria-haspopup="false"
521
- aria-label="Editor content;Press Alt+F1 for Accessibility Options."
522
- aria-multiline="true"
523
- aria-roledescription="editor"
524
- autocapitalize="off"
525
- autocomplete="off"
526
- autocorrect="off"
527
- class="inputarea monaco-mouse-cursor-text"
528
- data-mprt="6"
529
- role="textbox"
530
- spellcheck="false"
531
- style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
532
- tabindex="-1"
533
- wrap="off"
534
- />
535
- <div
536
- class="monaco-editor-background textAreaCover line-numbers"
537
- style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
538
- />
539
- <div
540
- class="overlayWidgets"
541
- data-mprt="4"
542
- >
543
- <div
544
- style="position: absolute;"
545
- widgetid="editor.contrib.quickInputWidget"
546
- />
547
- </div>
548
- <div
549
- aria-hidden="true"
550
- class="minimap slider-mouseover"
551
- data-mprt="8"
552
- role="presentation"
553
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
554
- >
555
- <div
556
- class="minimap-shadow-hidden"
557
- style="height: 5px;"
558
- />
559
- <canvas
560
- height="5"
561
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
562
- width="0"
563
- />
564
- <canvas
565
- class="minimap-decorations-layer"
566
- height="5"
567
- style="position: absolute; left: 0px; width: 0px; height: 5px;"
568
- width="0"
569
- />
570
- <div
571
- class="minimap-slider"
572
- style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
573
- >
574
- <div
575
- class="minimap-slider-horizontal"
576
- style="position: absolute;"
577
- />
578
- </div>
579
- </div>
580
- </div>
581
- <div
582
- class="overflowingContentWidgets"
583
- data-mprt="2"
584
- />
585
- </div>
586
- </div>
165
+ data-testid="mock-editor"
166
+ />
587
167
  </div>
588
168
  </div>
589
169
  </div>