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

JAVASCRIPT
Loading...

With sizeToFit height, height will grow/shrink with content

Loading...

With shortcut menu and main header content

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

JAVASCRIPT
Loading...

With actions

PLAINTEXT

Start editing

Drag and drop a file or upload one.

With custom control

Loading...

Props

CodeEditor

The main code editor component.
*required
NameTypeDefaultDescription
classNamestring''Additional classes added to the code editor.
codestring''Code displayed in code editor.
copyButtonAriaLabelstring'Copy code to clipboard'Accessible label for the copy button.
copyButtonSuccessTooltipTextstring'Content added to clipboard'Text to display in the tooltip on the copy button after code is copied to clipboard.
copyButtonToolTipTextstring'Copy to clipboard'Text to display in the tooltip on the copy button before code is copied.
customControlsReact.ReactNode | React.ReactNode[]nullA single node or array of nodes - ideally the code editor controls component - to display above code editor.
downloadButtonAriaLabelstring'Download code'Accessible label for the download button.
downloadButtonToolTipTextstring'Download'Text to display in the tooltip on the download button.
downloadFileNamestringDate.now().toString()Name of the file if user downloads code to local file.
editorPropsEditorPropsAdditional props to pass to the monaco editor.
emptyStateReact.ReactNode''Content to display in space of the code editor when there is no code to display.
emptyStateBodyReact.ReactNode'Drag and drop a file or upload one.'Override default empty state body text.
emptyStateButtonReact.ReactNode'Browse'Override default empty state button text.
emptyStateLinkReact.ReactNode'Start from scratch'Override default empty state link text.
emptyStateTitleReact.ReactNode'Start editing'Override default empty state title text.
headerMainContentstring''Editor header main content title.
heightstring | 'sizeToFit'''Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height to the height of the content.
isCopyEnabledbooleanfalseFlag to add copy button to code editor actions.
isDarkThemebooleanfalseFlag indicating the editor is styled using monaco's dark theme.
isDownloadEnabledbooleanfalseFlag to add download button to code editor actions.
isHeaderPlainbooleanfalseFlag indicating the editor has a plain header.
isLanguageLabelVisiblebooleanfalseFlag to include a label indicating the currently configured editor language.
isLineNumbersVisiblebooleantrueFlag indicating the editor is displaying line numbers.
isMinimapVisiblebooleanfalseFlag to add the minimap to the code editor.
isReadOnlybooleanfalseFlag indicating the editor is read only.
isUploadEnabledbooleanfalseFlag to add upload button to code editor actions. Also makes the code editor accept a file using drag and drop.
languageLanguageLanguage.plaintextLanguage displayed in the editor.
loadingReact.ReactNode''The loading screen before the editor will be loaded. Defaults to 'loading...'.
onChange(value: string, event: editor.IModelContentChangedEvent) => voidFunction 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.
optionseditor.IStandaloneEditorConstructionOptions{}Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.
overrideServiceseditor.IEditorOverrideServices{}Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.
shortcutsPopoverButtonTextstring'View Shortcuts'Text to show in the button to open the shortcut popover.
shortcutsPopoverPropsPopoverProps{ bodyContent: '', 'aria-label': 'Keyboard Shortcuts', ...Popover.defaultProps }Properties for the shortcut popover.
showEditorbooleantrueFlag to show the editor.
toolTipCopyExitDelaynumber1600The delay before tooltip fades after code copied.
toolTipDelaynumber300The entry and exit delay for all tooltips.
toolTipMaxWidthstring'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.
uploadButtonAriaLabelstring'Upload code'Accessible label for the upload button.
uploadButtonToolTipTextstring'Upload'Text to display in the tooltip on the upload button.
widthstring''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
NameTypeDefaultDescription
iconrequiredReact.ReactNodeIcon rendered inside the code editor control.
aria-labelstringAccessible label for the code editor control
classNamestringAdditional classes added to the code editor control.
isVisiblebooleantrueFlag indicating that the button is visible above the code editor.
onClick(code: string, event?: any) => void() => {}Event handler for the click of the button
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component

Popover

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
NameTypeDefaultDescription
bodyContentrequiredReact.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>}
alertSeverityScreenReaderTextstringText 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.
animationDurationnumber300The duration of the CSS fade transition animation.
appendToHTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'() => document.bodyThe element to append the popover to. Defaults to "inline".
aria-labelstring''Accessible label for the popover, required when header is not present.
childrenReactElement<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>
classNamestring''Additional classes added to the popover.
closeBtnAriaLabelstring'Close'Accessible label for the close button.
distancenumber25Distance of the popover to its target. Defaults to 25.
elementToFocusHTMLElement | SVGElement | stringThe element to focus when the popover becomes visible. By default the first focusable element will receive focus.
enableFlipbooleantrueIf 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.
footerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullFooter 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>}
hasAutoWidthbooleanfalseRemoves fixed-width and allows width to be defined by contents.
hasNoPaddingbooleanfalseAllows 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.
headerContentReact.ReactNode | ((hide: () => void) => React.ReactNode)nullSimple 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>}
headerIconReact.ReactNodenullIcon to be displayed in the popover header. *
hideOnOutsideClickbooleantrueHides the popover when a click occurs outside (only works if isVisible is not controlled by the user).
idstringId used as part of the various popover elements (popover-${id}-header/body/footer).
isVisiblebooleannullTrue 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.
maxWidthstringpopoverMaxWidth && popoverMaxWidth.valueMaximum width of the popover (default 18.75rem).
minWidthstringpopoverMinWidth && popoverMinWidth.valueMinimum width of the popover (default 6.25rem).
onHidden() => void(): void => nullLifecycle function invoked when the popover has fully transitioned out.
onHide(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition out.
onMount() => void(): void => nullLifecycle function invoked when the popover has been mounted to the DOM.
onShow(event: MouseEvent | KeyboardEvent) => void(): void => nullLifecycle function invoked when the popover begins to transition in.
onShown() => void(): void => nullLifecycle 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 => nullCallback 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 => nullCallback function that is only invoked when isVisible is also controlled. Called when the enter key is used on the focused trigger.
showClosebooleantrueFlag indicating whether the close button should be shown.
triggerAction'click' | 'hover''click'Sets an interaction to open popover, defaults to "click"
triggerRefHTMLElement | (() => 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')} />
withFocusTrapbooleanWhether to trap focus in the popover.
zIndexnumber9999The z-index of the popover.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-code-editor--pf-v6-c-code-editor__controls--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__controls--Gap
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header--before--BorderBlockEndWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__header--before--BorderBlockEndColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BackgroundColor
(In light theme) #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--pf-v6-c-code-editor__header-content--PaddingBlockStart
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingBlockEnd
0.25rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BorderStartStartRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-content--BorderStartEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingInlineStart
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingInlineEnd
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingBlockStart
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--PaddingBlockEnd
1rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__upload--BorderRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderEndStartRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BorderEndEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__main--BackgroundColor
(In light theme) #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--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--pf-v6-c-code-editor__main--m-drag-hover--before--BorderColor
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--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--pf-v6-c-code-editor__code--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingBlockEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__code-pre--FontSize
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--pf-v6-c-code-editor__header-main--PaddingInlineEnd
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__header-main--PaddingInlineStart
0.5rem
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--Color
(In light theme) #4d4d4d
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--PaddingBlockStart
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--pf-v6-c-code-editor__tab--PaddingBlockEnd
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--pf-v6-c-code-editor__tab--BorderBlockStartWidth
1px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderInlineEndWidth
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--pf-v6-c-code-editor__tab--BorderColor
(In light theme) #c7c7c7
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab--BorderStartEndRadius
16px
.pf-v6-c-code-editor--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart
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__header.pf-m-plain--pf-v6-c-code-editor__header-content--BackgroundColor
(In light theme) #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__main.pf-m-drag-hover--pf-v6-c-code-editor__upload--before--BorderColor
var( --pf-t--global--border--color--clicked)