@patternfly/react-code-editor 6.4.0-prerelease.5 → 6.4.1-prerelease.0
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
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [6.4.1-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.4.0...@patternfly/react-code-editor@6.4.1-prerelease.0) (2025-10-21)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @patternfly/react-code-editor
|
|
9
|
+
|
|
10
|
+
# [6.4.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.4.0-prerelease.5...@patternfly/react-code-editor@6.4.0) (2025-10-16)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @patternfly/react-code-editor
|
|
13
|
+
|
|
6
14
|
# [6.4.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.4.0-prerelease.4...@patternfly/react-code-editor@6.4.0-prerelease.5) (2025-10-16)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @patternfly/react-code-editor
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/react-code-editor",
|
|
3
|
-
"version": "6.4.
|
|
3
|
+
"version": "6.4.1-prerelease.0",
|
|
4
4
|
"description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
|
|
5
5
|
"main": "dist/js/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@monaco-editor/react": "^4.6.0",
|
|
34
|
-
"@patternfly/react-core": "^6.4.
|
|
35
|
-
"@patternfly/react-icons": "^6.4.0
|
|
36
|
-
"@patternfly/react-styles": "^6.4.0
|
|
34
|
+
"@patternfly/react-core": "^6.4.1-prerelease.0",
|
|
35
|
+
"@patternfly/react-icons": "^6.4.0",
|
|
36
|
+
"@patternfly/react-styles": "^6.4.0",
|
|
37
37
|
"react-dropzone": "14.3.5",
|
|
38
38
|
"tslib": "^2.8.1"
|
|
39
39
|
},
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"monaco-editor": "^0.52.2"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "f783f064d4256000fec110dae7e4e04d42f7e9ac"
|
|
48
48
|
}
|
|
@@ -9,6 +9,10 @@ Note: Code editor lives in its own package at [@patternfly/react-code-editor](ht
|
|
|
9
9
|
|
|
10
10
|
import { Fragment, useState } from 'react';
|
|
11
11
|
import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor';
|
|
12
|
+
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
13
|
+
import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
|
|
14
|
+
import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
|
|
15
|
+
import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
|
|
12
16
|
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
|
|
13
17
|
|
|
14
18
|
## Examples
|
|
@@ -50,3 +54,9 @@ These examples below are the shortcuts that we recommend describing in the popov
|
|
|
50
54
|
```ts file="CodeEditorCustomControl.tsx"
|
|
51
55
|
|
|
52
56
|
```
|
|
57
|
+
|
|
58
|
+
### With configuration modal
|
|
59
|
+
|
|
60
|
+
```ts file="CodeEditorConfigurationModal.tsx"
|
|
61
|
+
|
|
62
|
+
```
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
|
|
2
|
+
import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
|
|
3
|
+
import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
|
|
4
|
+
import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
|
|
5
|
+
import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
|
|
6
|
+
import { Flex, FlexItem, Icon, Modal, ModalBody, ModalHeader, Switch, SwitchProps } from '@patternfly/react-core';
|
|
7
|
+
import { useState } from 'react';
|
|
8
|
+
|
|
9
|
+
interface ConfigModalItemProps {
|
|
10
|
+
/** Icon rendered inside the configuration modal. */
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
/** Description of the configuration option. */
|
|
13
|
+
description: string;
|
|
14
|
+
/** Flag indicating whether the option is enabled or disabled. */
|
|
15
|
+
isChecked?: SwitchProps['isChecked'];
|
|
16
|
+
/** onChange handler for the switch. */
|
|
17
|
+
onChange?: SwitchProps['onChange'];
|
|
18
|
+
/** Title of the configuration option. We assume that titles are unique. */
|
|
19
|
+
title: string;
|
|
20
|
+
/** Labels for the enabled and disabled states of the switch. */
|
|
21
|
+
labels?: {
|
|
22
|
+
enabled: string;
|
|
23
|
+
disabled: string;
|
|
24
|
+
};
|
|
25
|
+
/** Optional OUIA ID of the configuration option. Also used as a prefix for the ids of inner elements. */
|
|
26
|
+
ouiaId?: string;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
|
|
30
|
+
icon = <CogIcon />,
|
|
31
|
+
description,
|
|
32
|
+
isChecked = false,
|
|
33
|
+
labels = { enabled: undefined, disabled: undefined },
|
|
34
|
+
onChange,
|
|
35
|
+
title,
|
|
36
|
+
ouiaId
|
|
37
|
+
}) => (
|
|
38
|
+
<Flex
|
|
39
|
+
alignItems={{ default: 'alignItemsCenter' }}
|
|
40
|
+
justifyContent={{ default: 'justifyContentSpaceBetween' }}
|
|
41
|
+
spaceItems={{ default: 'spaceItemsMd' }}
|
|
42
|
+
>
|
|
43
|
+
<FlexItem flex={{ default: 'flex_1' }}>
|
|
44
|
+
<Flex spaceItems={{ default: 'spaceItemsSm' }}>
|
|
45
|
+
<Icon isInline>{icon}</Icon>
|
|
46
|
+
<strong id={`${ouiaId}-title`} className="pf-v6-u-font-weight-bold">
|
|
47
|
+
{title}
|
|
48
|
+
</strong>
|
|
49
|
+
</Flex>
|
|
50
|
+
|
|
51
|
+
<div id={`${ouiaId}-description`}>{description}</div>
|
|
52
|
+
</FlexItem>
|
|
53
|
+
<FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
|
|
54
|
+
<Switch
|
|
55
|
+
aria-labelledby={`${ouiaId}-title`}
|
|
56
|
+
aria-describedby={`${ouiaId}-description`}
|
|
57
|
+
ouiaId={`${ouiaId}-switch`}
|
|
58
|
+
isChecked={isChecked}
|
|
59
|
+
isReversed
|
|
60
|
+
label={isChecked ? labels.enabled : labels.disabled}
|
|
61
|
+
onChange={onChange}
|
|
62
|
+
/>
|
|
63
|
+
</FlexItem>
|
|
64
|
+
</Flex>
|
|
65
|
+
);
|
|
66
|
+
|
|
67
|
+
interface ConfigModalControlProps {
|
|
68
|
+
/** Array of configuration controls to be rendered inside the modal. */
|
|
69
|
+
controls: ConfigModalItemProps[];
|
|
70
|
+
/** Title of the configuration modal. */
|
|
71
|
+
title?: string;
|
|
72
|
+
/** Description of the configuration modal. */
|
|
73
|
+
description?: string;
|
|
74
|
+
/** Optional OUIA ID of the configuration modal. Also used as a prefix for the ids of inner elements. */
|
|
75
|
+
ouiaId?: string;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
|
|
79
|
+
controls,
|
|
80
|
+
title = 'Editor settings',
|
|
81
|
+
description = 'Settings will be applied immediately',
|
|
82
|
+
ouiaId = 'CodeEditorConfigurationModal'
|
|
83
|
+
}) => {
|
|
84
|
+
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<>
|
|
88
|
+
<Modal
|
|
89
|
+
aria-describedby={`${ouiaId}-body`}
|
|
90
|
+
aria-labelledby={`${ouiaId}-title`}
|
|
91
|
+
isOpen={isModalOpen}
|
|
92
|
+
onClose={() => setIsModalOpen(!isModalOpen)}
|
|
93
|
+
ouiaId={ouiaId}
|
|
94
|
+
variant="small"
|
|
95
|
+
>
|
|
96
|
+
<ModalHeader title={title} description={description} labelId={`${ouiaId}-title`} />
|
|
97
|
+
<ModalBody id={`${ouiaId}-body`}>
|
|
98
|
+
<Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
|
|
99
|
+
{controls.map((control) => (
|
|
100
|
+
<ConfigModalItem
|
|
101
|
+
key={control.title}
|
|
102
|
+
ouiaId={`${ouiaId}-${control.title.replace(/\s+/g, '-').toLowerCase()}`}
|
|
103
|
+
{...control}
|
|
104
|
+
/>
|
|
105
|
+
))}
|
|
106
|
+
</Flex>
|
|
107
|
+
</ModalBody>
|
|
108
|
+
</Modal>
|
|
109
|
+
<CodeEditorControl
|
|
110
|
+
aria-label={title}
|
|
111
|
+
aria-haspopup="dialog"
|
|
112
|
+
icon={<CogIcon />}
|
|
113
|
+
onClick={() => setIsModalOpen(true)}
|
|
114
|
+
tooltipProps={{ content: title, ariaLive: 'off' }}
|
|
115
|
+
/>
|
|
116
|
+
</>
|
|
117
|
+
);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
|
|
121
|
+
const [code, setCode] = useState('Some example content');
|
|
122
|
+
|
|
123
|
+
const [isMinimapVisible, setIsMinimapVisible] = useState(true);
|
|
124
|
+
const [isDarkTheme, setIsDarkTheme] = useState(false);
|
|
125
|
+
const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
|
|
126
|
+
|
|
127
|
+
const onChange = (code: string) => {
|
|
128
|
+
setCode(code);
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const customControl = (
|
|
132
|
+
<ConfigModalControl
|
|
133
|
+
controls={[
|
|
134
|
+
{
|
|
135
|
+
title: 'Minimap',
|
|
136
|
+
description: 'Show a preview of the full code on the side of the editor',
|
|
137
|
+
isChecked: isMinimapVisible,
|
|
138
|
+
onChange: (_e, checked) => setIsMinimapVisible(checked),
|
|
139
|
+
icon: <MapIcon />
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
title: 'Dark theme',
|
|
143
|
+
description: 'Switch the editor to a dark color theme',
|
|
144
|
+
isChecked: isDarkTheme,
|
|
145
|
+
onChange: (_e, checked) => setIsDarkTheme(checked),
|
|
146
|
+
icon: <MoonIcon />
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
title: 'Line numbers',
|
|
150
|
+
description: 'Show line numbers to the left of each line of code',
|
|
151
|
+
isChecked: isLineNumbersVisible,
|
|
152
|
+
onChange: (_e, checked) => setIsLineNumbersVisible(checked),
|
|
153
|
+
icon: <HashtagIcon />
|
|
154
|
+
}
|
|
155
|
+
]}
|
|
156
|
+
/>
|
|
157
|
+
);
|
|
158
|
+
|
|
159
|
+
return (
|
|
160
|
+
<CodeEditor
|
|
161
|
+
code={code}
|
|
162
|
+
customControls={customControl}
|
|
163
|
+
height="400px"
|
|
164
|
+
isDarkTheme={isDarkTheme}
|
|
165
|
+
isLineNumbersVisible={isLineNumbersVisible}
|
|
166
|
+
isMinimapVisible={isMinimapVisible}
|
|
167
|
+
onChange={onChange}
|
|
168
|
+
/>
|
|
169
|
+
);
|
|
170
|
+
};
|