Code editor

A code editor is a versatile Monaco-based text editor that supports various programming languages.

Note: Code editor lives in its own package at @patternfly/react-code-editor and has required peer deps.

Examples

Basic

Dark theme

Line numbers

Read only

Minimap

With sizeToFit height, height will grow/shrink with content

These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.

With actions

Drag and drop a file or upload one.

With custom control

Props

CodeEditor

The main code editor component.
*required
Name	Type	Default	Description
className	string	''	Additional classes added to the code editor.
code	string	''	Code displayed in code editor.
copyButtonAriaLabel	string	'Copy code to clipboard'	Accessible label for the copy button.
copyButtonSuccessTooltipText	string	'Content added to clipboard'	Text to display in the tooltip on the copy button after code is copied to clipboard.
copyButtonToolTipText	string	'Copy to clipboard'	Text to display in the tooltip on the copy button before code is copied.
customControls	React.ReactNode \| React.ReactNode[]	null	A single node or array of nodes - ideally the code editor controls component - to display above code editor.
downloadButtonAriaLabel	string	'Download code'	Accessible label for the download button.
downloadButtonToolTipText	string	'Download'	Text to display in the tooltip on the download button.
downloadFileName	string	Date.now().toString()	Name of the file if user downloads code to local file.
editorProps	EditorProps		Additional props to pass to the monaco editor.
emptyState	React.ReactNode	''	Content to display in space of the code editor when there is no code to display.
emptyStateBody	React.ReactNode	'Drag and drop a file or upload one.'	Override default empty state body text.
emptyStateButton	React.ReactNode	'Browse'	Override default empty state button text.
emptyStateLink	React.ReactNode	'Start from scratch'	Override default empty state link text.
emptyStateTitle	React.ReactNode	'Start editing'	Override default empty state title text.
headerMainContent	string	''	Editor header main content title.
height	string \| 'sizeToFit'	''	Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height to the height of the content.
isCopyEnabled	boolean	false	Flag to add copy button to code editor actions.
isDarkTheme	boolean	false	Flag indicating the editor is styled using monaco's dark theme.
isDownloadEnabled	boolean	false	Flag to add download button to code editor actions.
isHeaderPlain	boolean	false	Flag indicating the editor has a plain header.
isLanguageLabelVisible	boolean	false	Flag to include a label indicating the currently configured editor language.
isLineNumbersVisible	boolean	true	Flag indicating the editor is displaying line numbers.
isMinimapVisible	boolean	false	Flag to add the minimap to the code editor.
isReadOnly	boolean	false	Flag indicating the editor is read only.
isUploadEnabled	boolean	false	Flag to add upload button to code editor actions. Also makes the code editor accept a file using drag and drop.
language	Language	Language.plaintext	Language displayed in the editor.
loading	React.ReactNode	''	The loading screen before the editor will be loaded. Defaults to 'loading...'.
onChange	(value: string, event: editor.IModelContentChangedEvent) => void		Function which fires each time the content of the code editor is manually changed. Does not fire when a file is uploaded.
onCodeChange	(value: string) => void	() => {}	Function which fires each time the code changes in the code editor.
onEditorDidMount	(editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void	() => {}	Callback which fires after the code editor is mounted containing a reference to the monaco editor and the monaco instance.
options	editor.IStandaloneEditorConstructionOptions	{}	Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.
overrideServices	editor.IEditorOverrideServices	{}	Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.
shortcutsPopoverButtonText	string	'View Shortcuts'	Text to show in the button to open the shortcut popover.
shortcutsPopoverProps	PopoverProps	{ bodyContent: '', 'aria-label': 'Keyboard Shortcuts', ...Popover.defaultProps }	Properties for the shortcut popover.
showEditor	boolean	true	Flag to show the editor.
toolTipCopyExitDelay	number	1600	The delay before tooltip fades after code copied.
toolTipDelay	number	300	The entry and exit delay for all tooltips.
toolTipMaxWidth	string	'100px'	The max width of the tooltips on all button.
toolTipPosition	\| TooltipPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	The position of tooltips on all buttons.
uploadButtonAriaLabel	string	'Upload code'	Accessible label for the upload button.
uploadButtonToolTipText	string	'Upload'	Text to display in the tooltip on the upload button.
width	string	''	Width of code editor. Defaults to 100%.

CodeEditorControl

Allows customizing the code editor controls by passing this sub-component into the code editor's customControl property.
*required
Name	Type	Default	Description
iconrequired	React.ReactNode		Icon rendered inside the code editor control.
aria-label	string		Accessible label for the code editor control
className	string		Additional classes added to the code editor control.
isVisible	boolean	true	Flag indicating that the button is visible above the code editor.
onClick	(code: string, event?: any) => void	() => {}	Event handler for the click of the button
tooltipProps	any	{}	Additional tooltip props forwarded to the Tooltip component

The main popover component. The following properties can also be passed into another component that has a property specifically for passing in popover properties.
*required
Name	Type	Default	Description
bodyContentrequired	React.ReactNode \| ((hide: () => void) => React.ReactNode)		Body content of the popover. If you want to close the popover after an action within the body content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. bodyContent={hide => <Button onClick={() => hide()}>Close</Button>}
alertSeverityScreenReaderText	string		Text announced by screen reader when alert severity variant is set to indicate severity level.
alertSeverityVariant	'custom' \| 'info' \| 'warning' \| 'success' \| 'danger'		Severity variants for an alert popover. This modifies the color of the header to match the severity.
animationDuration	number	300	The duration of the CSS fade transition animation.
appendTo	HTMLElement \| ((ref?: HTMLElement) => HTMLElement) \| 'inline'	() => document.body	The element to append the popover to. Defaults to "inline".
aria-label	string	''	Accessible label for the popover, required when header is not present.
children	ReactElement<any>		The trigger reference element to which the popover is relatively placed to. If you cannot wrap the element with the Popover, you can use the triggerRef prop instead. Usage: <Popover><Button>Reference</Button></Popover>
className	string	''	Additional classes added to the popover.
closeBtnAriaLabel	string	'Close'	Accessible label for the close button.
distance	number	25	Distance of the popover to its target. Defaults to 25.
elementToFocus	HTMLElement \| SVGElement \| string		The element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlip	boolean	true	If true, tries to keep the popover in view by flipping it if necessary. If the position is set to 'auto', this prop is ignored.
flipBehavior	\| 'flip' \| ( \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end' )[]	[ 'top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end' ]	The desired position to flip the popover to if the initial position is not possible. By setting this prop to 'flip' it attempts to flip the popover to the opposite side if there is no space. You can also pass an array of positions that determines the flip order. It should contain the initial position followed by alternative positions if that position is unavailable. Example: Initial position is 'top'. Button with popover is in the top right corner. 'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it checks if right is available. There's also no space to the right, so it finally shows the popover on the left.
footerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Footer content of the popover. If you want to close the popover after an action within the footer content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. footerContent={hide => <Button onClick={() => hide()}>Close</Button>}
hasAutoWidth	boolean	false	Removes fixed-width and allows width to be defined by contents.
hasNoPadding	boolean	false	Allows content to touch edges of popover container.
headerComponent	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'	'h6'	Sets the heading level to use for the popover header. Defaults to h6.
headerContent	React.ReactNode \| ((hide: () => void) => React.ReactNode)	null	Simple header content to be placed within a title. If you want to close the popover after an action within the header content, you can use the isVisible prop for manual control, or you can provide a function which will receive a callback as an argument to hide the popover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}
headerIcon	React.ReactNode	null	Icon to be displayed in the popover header. *
hideOnOutsideClick	boolean	true	Hides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
id	string		Id used as part of the various popover elements (popover-${id}-header/body/footer).
isVisible	boolean	null	True to show the popover programmatically. Used in conjunction with the shouldClose prop. By default, the popover child element handles click events automatically. If you want to control this programmatically, the popover will not auto-close if the close button is clicked, the escape key is used, or if a click occurs outside the popover. Instead, the consumer is responsible for closing the popover themselves by adding a callback listener for the shouldClose prop.
maxWidth	string	popoverMaxWidth && popoverMaxWidth.value	Maximum width of the popover (default 18.75rem).
minWidth	string	popoverMinWidth && popoverMinWidth.value	Minimum width of the popover (default 6.25rem).
onHidden	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned out.
onHide	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition out.
onMount	() => void	(): void => null	Lifecycle function invoked when the popover has been mounted to the DOM.
onShow	(event: MouseEvent \| KeyboardEvent) => void	(): void => null	Lifecycle function invoked when the popover begins to transition in.
onShown	() => void	(): void => null	Lifecycle function invoked when the popover has fully transitioned in.
position	\| PopoverPosition \| 'auto' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end' \| 'right-start' \| 'right-end'	'top'	Popover position. Note: With the enableFlip property set to true, it will change the position if there is not enough space for the starting position. The behavior of where it flips to can be controlled through the flipBehavior property.
shouldClose	(event: MouseEvent \| KeyboardEvent, hideFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the popover close button is clicked, the enter key was used on it, or the escape key is used.
shouldOpen	(event: MouseEvent \| KeyboardEvent, showFunction?: () => void) => void	(): void => null	Callback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClose	boolean	true	Flag indicating whether the close button should be shown.
triggerAction	'click' \| 'hover'	'click'	Sets an interaction to open popover, defaults to "click"
triggerRef	HTMLElement \| (() => HTMLElement) \| React.RefObject<any>		The trigger reference element to which the popover is relatively placed to. If you can wrap the element with the popover, you can use the children prop instead, or both props together. When passed along with the trigger prop, the div element that wraps the trigger will be removed. Usage: <Popover triggerRef={() => document.getElementById('reference-element')} />
withFocusTrap	boolean		Whether to trap focus in the popover.
zIndex	number	9999	The z-index of the popover.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__controls--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__controls--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__controls--Gap	0.25rem
--pf-v6-c-code-editor__controls--Gap --pf-t--global--spacer--gap--action-to-action--plain --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--before--BorderBlockEndWidth	1px
--pf-v6-c-code-editor__header--before--BorderBlockEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header--before--BorderBlockEndColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__header--before--BorderBlockEndColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__header-content--m-plain--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingBlockStart	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingBlockEnd	0.25rem
--pf-v6-c-code-editor__header-content--PaddingBlockEnd --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__header-content--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BorderStartStartRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-content--BorderStartEndRadius	16px
--pf-v6-c-code-editor__header-content--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingInlineStart	1rem
--pf-v6-c-code-editor__upload--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingInlineEnd	1rem
--pf-v6-c-code-editor__upload--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingBlockStart	1rem
--pf-v6-c-code-editor__upload--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--PaddingBlockEnd	1rem
--pf-v6-c-code-editor__upload--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--BorderRadius	16px
--pf-v6-c-code-editor__upload--BorderRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__main--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderWidth	1px
--pf-v6-c-code-editor__main--BorderWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderEndStartRadius	16px
--pf-v6-c-code-editor__main--BorderEndStartRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BorderEndEndRadius	16px
--pf-v6-c-code-editor__main--BorderEndEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__main--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor	--pf-v6-c-code-editor--m-read-only__main--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--before--BorderWidth	0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__upload--before--BorderColor	transparent
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth	1px
--pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor	var( --pf-t--global--border--color--clicked)
--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) var( --pf-t--global--border--color--clicked)
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__main--m-drag-hover--after--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__main--m-drag-hover--after--Opacity	.1
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingBlockStart	0.5rem
--pf-v6-c-code-editor__code--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingBlockEnd	0.5rem
--pf-v6-c-code-editor__code--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__code--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code-pre--FontSize	0.875rem
--pf-v6-c-code-editor__code-pre--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__code-pre--FontFamily	"Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
--pf-v6-c-code-editor__code-pre--FontFamily --pf-t--global--font--family--mono --pf-t--global--font--family--300 "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-main--PaddingInlineEnd	0.5rem
--pf-v6-c-code-editor__header-main--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__header-main--PaddingInlineStart	0.5rem
--pf-v6-c-code-editor__header-main--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__tab--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--Color	(In light theme) #4d4d4d
--pf-v6-c-code-editor__tab--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--PaddingBlockStart	0.5rem
--pf-v6-c-code-editor__tab--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--PaddingInlineEnd	var( --pf-t--global--spacer--sm)
--pf-v6-c-code-editor__tab--PaddingInlineEnd var( --pf-t--global--spacer--sm) var( --pf-t--global--spacer--sm)
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--PaddingBlockEnd	0.5rem
--pf-v6-c-code-editor__tab--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--PaddingInlineStart	var( --pf-t--global--spacer--sm)
--pf-v6-c-code-editor__tab--PaddingInlineStart var( --pf-t--global--spacer--sm) var( --pf-t--global--spacer--sm)
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderBlockStartWidth	1px
--pf-v6-c-code-editor__tab--BorderBlockStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderInlineEndWidth	1px
--pf-v6-c-code-editor__tab--BorderInlineEndWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderBlockEndWidth	0
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderInlineStartWidth	1px
--pf-v6-c-code-editor__tab--BorderInlineStartWidth --pf-t--global--border--width--box--default --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-code-editor__tab--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab--BorderStartEndRadius	16px
--pf-v6-c-code-editor__tab--BorderStartEndRadius --pf-t--global--border--radius--medium --pf-t--global--border--radius--300 16px
	.pf-v6-c-code-editor	--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart	0.5rem
--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-code-editor.pf-m-read-only	--pf-v6-c-code-editor__main--BackgroundColor	(In light theme) #f2f2f2
--pf-v6-c-code-editor__main--BackgroundColor --pf-v6-c-code-editor--m-read-only__main--BackgroundColor --pf-t--global--background--color--secondary--default --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-code-editor__header.pf-m-plain	--pf-v6-c-code-editor__header-content--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-code-editor__header-content--BackgroundColor --pf-v6-c-code-editor__header-content--m-plain--BackgroundColor --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-code-editor__main.pf-m-drag-hover	--pf-v6-c-code-editor__upload--before--BorderWidth	1px
--pf-v6-c-code-editor__upload--before--BorderWidth --pf-v6-c-code-editor__main--m-drag-hover--before--BorderWidth --pf-t--global--border--width--divider--hover --pf-t--global--border--width--100 1px
	.pf-v6-c-code-editor__main.pf-m-drag-hover	--pf-v6-c-code-editor__upload--before--BorderColor	var( --pf-t--global--border--color--clicked)
--pf-v6-c-code-editor__upload--before--BorderColor --pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor var( --pf-t--global--border--color--clicked) var( --pf-t--global--border--color--clicked)

View source on GitHub