@patternfly/react-code-editor 5.0.0-alpha.13 → 5.0.0-alpha.131
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.
- package/CHANGELOG.md +488 -0
- package/README.md +3 -3
- package/dist/esm/components/CodeEditor/CodeEditor.d.ts.map +1 -1
- package/dist/esm/components/CodeEditor/CodeEditor.js +17 -15
- package/dist/esm/components/CodeEditor/CodeEditor.js.map +1 -1
- package/dist/js/components/CodeEditor/CodeEditor.d.ts.map +1 -1
- package/dist/js/components/CodeEditor/CodeEditor.js +16 -14
- package/dist/js/components/CodeEditor/CodeEditor.js.map +1 -1
- package/package.json +8 -8
- package/src/components/CodeEditor/CodeEditor.tsx +40 -29
- package/src/components/CodeEditor/__test__/CodeEditor.test.tsx +14 -0
- package/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +40 -49
- package/src/components/CodeEditor/examples/CodeEditorBasic.tsx +4 -4
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
4
4
|
<DocumentFragment>
|
|
5
5
|
<div
|
|
6
|
-
class="pf-c-code-editor pf-m-read-only"
|
|
6
|
+
class="pf-v5-c-code-editor pf-m-read-only"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="pf-c-file-upload false false"
|
|
9
|
+
class="pf-v5-c-file-upload false false"
|
|
10
10
|
role="presentation"
|
|
11
11
|
tabindex="0"
|
|
12
12
|
>
|
|
13
13
|
<div
|
|
14
|
-
class="pf-c-code-editor__header"
|
|
14
|
+
class="pf-v5-c-code-editor__header"
|
|
15
15
|
>
|
|
16
16
|
<div
|
|
17
|
-
class="pf-c-code-editor__controls"
|
|
17
|
+
class="pf-v5-c-code-editor__controls"
|
|
18
18
|
>
|
|
19
19
|
<div
|
|
20
20
|
style="display: contents;"
|
|
@@ -22,7 +22,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
22
22
|
<button
|
|
23
23
|
aria-disabled="false"
|
|
24
24
|
aria-label="Copy code to clipboard"
|
|
25
|
-
class="pf-c-button pf-m-control"
|
|
25
|
+
class="pf-v5-c-button pf-m-control"
|
|
26
26
|
data-ouia-component-id="OUIA-Generated-Button-control-1"
|
|
27
27
|
data-ouia-component-type="PF4/Button"
|
|
28
28
|
data-ouia-safe="true"
|
|
@@ -30,12 +30,10 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
30
30
|
>
|
|
31
31
|
<svg
|
|
32
32
|
aria-hidden="true"
|
|
33
|
+
class="pf-v5-svg"
|
|
33
34
|
fill="currentColor"
|
|
34
|
-
height="1em"
|
|
35
35
|
role="img"
|
|
36
|
-
style="vertical-align: -0.125em;"
|
|
37
36
|
viewBox="0 0 448 512"
|
|
38
|
-
width="1em"
|
|
39
37
|
>
|
|
40
38
|
<path
|
|
41
39
|
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"
|
|
@@ -49,7 +47,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
49
47
|
<button
|
|
50
48
|
aria-disabled="false"
|
|
51
49
|
aria-label="Upload code"
|
|
52
|
-
class="pf-c-button pf-m-control"
|
|
50
|
+
class="pf-v5-c-button pf-m-control"
|
|
53
51
|
data-ouia-component-id="OUIA-Generated-Button-control-2"
|
|
54
52
|
data-ouia-component-type="PF4/Button"
|
|
55
53
|
data-ouia-safe="true"
|
|
@@ -57,12 +55,10 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
57
55
|
>
|
|
58
56
|
<svg
|
|
59
57
|
aria-hidden="true"
|
|
58
|
+
class="pf-v5-svg"
|
|
60
59
|
fill="currentColor"
|
|
61
|
-
height="1em"
|
|
62
60
|
role="img"
|
|
63
|
-
style="vertical-align: -0.125em;"
|
|
64
61
|
viewBox="0 0 512 512"
|
|
65
|
-
width="1em"
|
|
66
62
|
>
|
|
67
63
|
<path
|
|
68
64
|
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"
|
|
@@ -76,7 +72,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
76
72
|
<button
|
|
77
73
|
aria-disabled="false"
|
|
78
74
|
aria-label="Download code"
|
|
79
|
-
class="pf-c-button pf-m-control"
|
|
75
|
+
class="pf-v5-c-button pf-m-control"
|
|
80
76
|
data-ouia-component-id="OUIA-Generated-Button-control-3"
|
|
81
77
|
data-ouia-component-type="PF4/Button"
|
|
82
78
|
data-ouia-safe="true"
|
|
@@ -84,12 +80,10 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
84
80
|
>
|
|
85
81
|
<svg
|
|
86
82
|
aria-hidden="true"
|
|
83
|
+
class="pf-v5-svg"
|
|
87
84
|
fill="currentColor"
|
|
88
|
-
height="1em"
|
|
89
85
|
role="img"
|
|
90
|
-
style="vertical-align: -0.125em;"
|
|
91
86
|
viewBox="0 0 512 512"
|
|
92
|
-
width="1em"
|
|
93
87
|
>
|
|
94
88
|
<path
|
|
95
89
|
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,22 +93,20 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
99
93
|
</div>
|
|
100
94
|
</div>
|
|
101
95
|
<div
|
|
102
|
-
class="pf-c-code-editor__header-main"
|
|
96
|
+
class="pf-v5-c-code-editor__header-main"
|
|
103
97
|
/>
|
|
104
98
|
<div
|
|
105
|
-
class="pf-c-code-editor__tab"
|
|
99
|
+
class="pf-v5-c-code-editor__tab"
|
|
106
100
|
>
|
|
107
101
|
<span
|
|
108
|
-
class="pf-c-code-editor__tab-icon"
|
|
102
|
+
class="pf-v5-c-code-editor__tab-icon"
|
|
109
103
|
>
|
|
110
104
|
<svg
|
|
111
105
|
aria-hidden="true"
|
|
106
|
+
class="pf-v5-svg"
|
|
112
107
|
fill="currentColor"
|
|
113
|
-
height="1em"
|
|
114
108
|
role="img"
|
|
115
|
-
style="vertical-align: -0.125em;"
|
|
116
109
|
viewBox="0 0 640 512"
|
|
117
|
-
width="1em"
|
|
118
110
|
>
|
|
119
111
|
<path
|
|
120
112
|
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"
|
|
@@ -122,14 +114,14 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
122
114
|
</svg>
|
|
123
115
|
</span>
|
|
124
116
|
<span
|
|
125
|
-
class="pf-c-code-editor__tab-text"
|
|
117
|
+
class="pf-v5-c-code-editor__tab-text"
|
|
126
118
|
>
|
|
127
119
|
JAVASCRIPT
|
|
128
120
|
</span>
|
|
129
121
|
</div>
|
|
130
122
|
</div>
|
|
131
123
|
<div
|
|
132
|
-
class="pf-c-code-editor__main"
|
|
124
|
+
class="pf-v5-c-code-editor__main"
|
|
133
125
|
>
|
|
134
126
|
<input
|
|
135
127
|
style="display: none;"
|
|
@@ -137,12 +129,12 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
137
129
|
type="file"
|
|
138
130
|
/>
|
|
139
131
|
<div
|
|
140
|
-
class="pf-c-code-editor__code"
|
|
132
|
+
class="pf-v5-c-code-editor__code"
|
|
141
133
|
tabindex="0"
|
|
142
134
|
>
|
|
143
135
|
<div
|
|
144
136
|
class="react-monaco-editor-container"
|
|
145
|
-
data-keybinding-context="
|
|
137
|
+
data-keybinding-context="2"
|
|
146
138
|
data-mode-id="plaintext"
|
|
147
139
|
style="height: 400px;"
|
|
148
140
|
>
|
|
@@ -199,6 +191,11 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
199
191
|
class="view-rulers"
|
|
200
192
|
role="presentation"
|
|
201
193
|
/>
|
|
194
|
+
<div
|
|
195
|
+
aria-hidden="true"
|
|
196
|
+
class="blockDecorations-container"
|
|
197
|
+
role="presentation"
|
|
198
|
+
/>
|
|
202
199
|
<div
|
|
203
200
|
aria-hidden="true"
|
|
204
201
|
class="view-zones"
|
|
@@ -210,7 +207,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
210
207
|
class="view-lines monaco-mouse-cursor-text"
|
|
211
208
|
data-mprt="7"
|
|
212
209
|
role="presentation"
|
|
213
|
-
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:
|
|
210
|
+
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;"
|
|
214
211
|
>
|
|
215
212
|
<div
|
|
216
213
|
class="view-line"
|
|
@@ -256,7 +253,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
256
253
|
aria-hidden="true"
|
|
257
254
|
class="decorationsOverviewRuler"
|
|
258
255
|
height="5"
|
|
259
|
-
style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
|
|
256
|
+
style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
|
|
260
257
|
width="14"
|
|
261
258
|
/>
|
|
262
259
|
<div
|
|
@@ -267,7 +264,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
267
264
|
>
|
|
268
265
|
<div
|
|
269
266
|
class="slider"
|
|
270
|
-
style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height:
|
|
267
|
+
style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
|
|
271
268
|
/>
|
|
272
269
|
</div>
|
|
273
270
|
</div>
|
|
@@ -286,7 +283,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
286
283
|
autocorrect="off"
|
|
287
284
|
class="inputarea monaco-mouse-cursor-text"
|
|
288
285
|
data-mprt="6"
|
|
289
|
-
readonly="true"
|
|
290
286
|
role="textbox"
|
|
291
287
|
spellcheck="false"
|
|
292
288
|
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;"
|
|
@@ -343,11 +339,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
343
339
|
class="overflowingContentWidgets"
|
|
344
340
|
data-mprt="2"
|
|
345
341
|
/>
|
|
346
|
-
<div
|
|
347
|
-
aria-hidden="true"
|
|
348
|
-
class="context-view"
|
|
349
|
-
style="display: none;"
|
|
350
|
-
/>
|
|
351
342
|
</div>
|
|
352
343
|
</div>
|
|
353
344
|
</div>
|
|
@@ -360,23 +351,23 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
|
|
|
360
351
|
exports[`CodeEditor matches snapshot without props 1`] = `
|
|
361
352
|
<DocumentFragment>
|
|
362
353
|
<div
|
|
363
|
-
class="pf-c-code-editor"
|
|
354
|
+
class="pf-v5-c-code-editor"
|
|
364
355
|
>
|
|
365
356
|
<div
|
|
366
|
-
class="pf-c-code-editor__header"
|
|
357
|
+
class="pf-v5-c-code-editor__header"
|
|
367
358
|
>
|
|
368
359
|
<div
|
|
369
|
-
class="pf-c-code-editor__controls"
|
|
360
|
+
class="pf-v5-c-code-editor__controls"
|
|
370
361
|
/>
|
|
371
362
|
<div
|
|
372
|
-
class="pf-c-code-editor__header-main"
|
|
363
|
+
class="pf-v5-c-code-editor__header-main"
|
|
373
364
|
/>
|
|
374
365
|
</div>
|
|
375
366
|
<div
|
|
376
|
-
class="pf-c-code-editor__main"
|
|
367
|
+
class="pf-v5-c-code-editor__main"
|
|
377
368
|
>
|
|
378
369
|
<div
|
|
379
|
-
class="pf-c-code-editor__code"
|
|
370
|
+
class="pf-v5-c-code-editor__code"
|
|
380
371
|
tabindex="0"
|
|
381
372
|
>
|
|
382
373
|
<div
|
|
@@ -437,6 +428,11 @@ exports[`CodeEditor matches snapshot without props 1`] = `
|
|
|
437
428
|
class="view-rulers"
|
|
438
429
|
role="presentation"
|
|
439
430
|
/>
|
|
431
|
+
<div
|
|
432
|
+
aria-hidden="true"
|
|
433
|
+
class="blockDecorations-container"
|
|
434
|
+
role="presentation"
|
|
435
|
+
/>
|
|
440
436
|
<div
|
|
441
437
|
aria-hidden="true"
|
|
442
438
|
class="view-zones"
|
|
@@ -448,7 +444,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
|
|
|
448
444
|
class="view-lines monaco-mouse-cursor-text"
|
|
449
445
|
data-mprt="7"
|
|
450
446
|
role="presentation"
|
|
451
|
-
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:
|
|
447
|
+
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;"
|
|
452
448
|
>
|
|
453
449
|
<div
|
|
454
450
|
class="view-line"
|
|
@@ -490,7 +486,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
|
|
|
490
486
|
aria-hidden="true"
|
|
491
487
|
class="decorationsOverviewRuler"
|
|
492
488
|
height="5"
|
|
493
|
-
style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
|
|
489
|
+
style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
|
|
494
490
|
width="14"
|
|
495
491
|
/>
|
|
496
492
|
<div
|
|
@@ -501,7 +497,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
|
|
|
501
497
|
>
|
|
502
498
|
<div
|
|
503
499
|
class="slider"
|
|
504
|
-
style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height:
|
|
500
|
+
style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
|
|
505
501
|
/>
|
|
506
502
|
</div>
|
|
507
503
|
</div>
|
|
@@ -576,11 +572,6 @@ exports[`CodeEditor matches snapshot without props 1`] = `
|
|
|
576
572
|
class="overflowingContentWidgets"
|
|
577
573
|
data-mprt="2"
|
|
578
574
|
/>
|
|
579
|
-
<div
|
|
580
|
-
aria-hidden="true"
|
|
581
|
-
class="context-view"
|
|
582
|
-
style="display: none;"
|
|
583
|
-
/>
|
|
584
575
|
</div>
|
|
585
576
|
</div>
|
|
586
577
|
</div>
|
|
@@ -40,7 +40,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
|
|
|
40
40
|
<Checkbox
|
|
41
41
|
label="Dark theme"
|
|
42
42
|
isChecked={isDarkTheme}
|
|
43
|
-
onChange={toggleDarkTheme}
|
|
43
|
+
onChange={(_event, checked) => toggleDarkTheme(checked)}
|
|
44
44
|
aria-label="dark theme checkbox"
|
|
45
45
|
id="toggle-theme"
|
|
46
46
|
name="toggle-theme"
|
|
@@ -48,7 +48,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
|
|
|
48
48
|
<Checkbox
|
|
49
49
|
label="Line numbers"
|
|
50
50
|
isChecked={isLineNumbersVisible}
|
|
51
|
-
onChange={toggleLineNumbers}
|
|
51
|
+
onChange={(_event, checked) => toggleLineNumbers(checked)}
|
|
52
52
|
aria-label="line numbers checkbox"
|
|
53
53
|
id="toggle-line-numbers"
|
|
54
54
|
name="toggle-line-numbers"
|
|
@@ -56,7 +56,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
|
|
|
56
56
|
<Checkbox
|
|
57
57
|
label="Read only"
|
|
58
58
|
isChecked={isReadOnly}
|
|
59
|
-
onChange={toggleReadOnly}
|
|
59
|
+
onChange={(_event, checked) => toggleReadOnly(checked)}
|
|
60
60
|
aria-label="read only checkbox"
|
|
61
61
|
id="toggle-read-only"
|
|
62
62
|
name="toggle-read-only"
|
|
@@ -64,7 +64,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
|
|
|
64
64
|
<Checkbox
|
|
65
65
|
label="Minimap"
|
|
66
66
|
isChecked={isMinimapVisible}
|
|
67
|
-
onChange={toggleMinimap}
|
|
67
|
+
onChange={(_event, checked) => toggleMinimap(checked)}
|
|
68
68
|
aria-label="display minimap checkbox"
|
|
69
69
|
id="toggle-minimap"
|
|
70
70
|
name="toggle-minimap"
|