@patternfly/react-code-editor 6.0.0-alpha.7 → 6.0.0-alpha.70

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 (24) hide show
  1. package/CHANGELOG.md +806 -0
  2. package/README.md +37 -40
  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.js +1 -1
  8. package/dist/esm/components/CodeEditor/CodeEditorControl.js.map +1 -1
  9. package/dist/js/components/CodeEditor/CodeEditor.d.ts +8 -2
  10. package/dist/js/components/CodeEditor/CodeEditor.d.ts.map +1 -1
  11. package/dist/js/components/CodeEditor/CodeEditor.js +47 -41
  12. package/dist/js/components/CodeEditor/CodeEditor.js.map +1 -1
  13. package/dist/js/components/CodeEditor/CodeEditorControl.js +1 -1
  14. package/dist/js/components/CodeEditor/CodeEditorControl.js.map +1 -1
  15. package/package.json +9 -10
  16. package/src/components/CodeEditor/CodeEditor.tsx +77 -65
  17. package/src/components/CodeEditor/CodeEditorControl.tsx +1 -1
  18. package/src/components/CodeEditor/__test__/CodeEditor.test.tsx +69 -39
  19. package/src/components/CodeEditor/__test__/CodeEditorControl.test.tsx +18 -0
  20. package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +104 -536
  21. package/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap +22 -0
  22. package/src/components/CodeEditor/examples/CodeEditor.md +5 -0
  23. package/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx +2 -1
  24. package/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx +3 -3
package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap CHANGED
@@ -1,354 +1,130 @@
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
+ <svg
35
+ aria-hidden="true"
36
+ class="pf-v6-svg"
37
+ fill="currentColor"
38
+ height="1em"
39
+ role="img"
40
+ viewBox="0 0 448 512"
41
+ width="1em"
42
+ >
43
+ <path
44
+ 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"
45
+ />
46
+ </svg>
47
+ </button>
48
+ </div>
49
+ <div
50
+ style="display: contents;"
57
51
  >
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"
52
+ <button
53
+ aria-disabled="false"
54
+ aria-label="Upload code"
55
+ class="pf-v6-c-button pf-m-plain"
56
+ data-ouia-component-id="OUIA-Generated-Button-plain-2"
57
+ data-ouia-component-type="PF6/Button"
58
+ data-ouia-safe="true"
59
+ type="button"
66
60
  >
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"
61
+ <svg
62
+ aria-hidden="true"
63
+ class="pf-v6-svg"
64
+ fill="currentColor"
65
+ height="1em"
66
+ role="img"
67
+ viewBox="0 0 512 512"
68
+ width="1em"
69
+ >
70
+ <path
71
+ 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"
72
+ />
73
+ </svg>
74
+ </button>
75
+ </div>
76
+ <div
77
+ style="display: contents;"
84
78
  >
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"
79
+ <button
80
+ aria-disabled="false"
81
+ aria-label="Download code"
82
+ class="pf-v6-c-button pf-m-plain"
83
+ data-ouia-component-id="OUIA-Generated-Button-plain-3"
84
+ data-ouia-component-type="PF6/Button"
85
+ data-ouia-safe="true"
86
+ type="button"
93
87
  >
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>
88
+ <svg
89
+ aria-hidden="true"
90
+ class="pf-v6-svg"
91
+ fill="currentColor"
92
+ height="1em"
93
+ role="img"
94
+ viewBox="0 0 512 512"
95
+ width="1em"
96
+ >
97
+ <path
98
+ 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"
99
+ />
100
+ </svg>
101
+ </button>
102
+ </div>
99
103
  </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>
104
+ <div
105
+ class="pf-v6-c-code-editor__header-main"
106
+ />
129
107
  </div>
130
108
  </div>
131
109
  <div
132
- class="pf-v5-c-code-editor__main"
110
+ class="pf-v6-c-code-editor__main"
133
111
  >
134
- <input
135
- style="display: none;"
136
- tabindex="-1"
137
- type="file"
138
- />
139
112
  <div
140
- class="pf-v5-c-code-editor__code"
141
- dir="ltr"
142
- tabindex="0"
113
+ class="pf-v6-c-code-editor__upload"
143
114
  >
115
+ <input
116
+ style="display: none;"
117
+ tabindex="-1"
118
+ type="file"
119
+ />
144
120
  <div
145
- class="react-monaco-editor-container"
146
- data-keybinding-context="2"
147
- data-mode-id="plaintext"
148
- style="height: 400px;"
121
+ class="pf-v6-c-code-editor__code"
122
+ dir="ltr"
123
+ tabindex="0"
149
124
  >
150
125
  <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>
126
+ data-testid="mock-editor"
127
+ />
352
128
  </div>
353
129
  </div>
354
130
  </div>
@@ -357,233 +133,25 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
357
133
  </DocumentFragment>
358
134
  `;
359
135
 
360
- exports[`CodeEditor matches snapshot without props 1`] = `
136
+ exports[`Matches snapshot without props 1`] = `
361
137
  <DocumentFragment>
362
138
  <div
363
- class="pf-v5-c-code-editor"
139
+ class="pf-v6-c-code-editor"
364
140
  >
365
141
  <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>
142
+ class="pf-v6-c-code-editor__header"
143
+ />
375
144
  <div
376
- class="pf-v5-c-code-editor__main"
145
+ class="pf-v6-c-code-editor__main"
377
146
  >
378
147
  <div
379
- class="pf-v5-c-code-editor__code"
148
+ class="pf-v6-c-code-editor__code"
380
149
  dir="ltr"
381
150
  tabindex="0"
382
151
  >
383
152
  <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>
153
+ data-testid="mock-editor"
154
+ />
587
155
  </div>
588
156
  </div>
589
157
  </div>