Skip to content
Patternfly Logo

Code editor

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

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

Examples

Basic

JAVASCRIPT

With actions

PLAINTEXT

Start editing

Drag and drop a file or upload one.

With custom control

Props

CodeEditor

*required
NameTypeDefaultDescription
classNamestring''additional classes added to the code editor
codestring''code displayed in code editor
copyButtonAriaLabelstring'Copy code to clipboard'Accessibly label for the copy button
copyButtonSuccessTooltipTextstring'Content added to clipboard'Text to display in the tooltip on the copy button after code copied to clipboard
copyButtonToolTipTextstring'Copy to clipboard'Text to display in the tooltip on the copy button before text is copied
customControlsReact.ReactNode | React.ReactNode[]nullA single node or array of nodes - ideally CodeEditorControls - 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
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 title text
emptyStateLinkReact.ReactNode'Start from scratch'Override default empty state body text
emptyStateTitleReact.ReactNode'Start editing'Override default empty state title text
heightstring''Height of code editor. Defaults to 100%
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
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 'loading...'
onChange(value?: string, event?: any) => voidFunction which fires each time the code changes in the code editor
onEditorDidMount(editor: any, monaco: any) => 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}.
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'auto' | 'top' | 'bottom' | 'left' | 'right''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%

CSS variables

.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--Color
#6a6e73
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--hover--Color
#151515
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--focus--Color
#151515
.pf-c-code-editor--pf-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__header--before--BorderBottomWidth
1px
.pf-c-code-editor--pf-c-code-editor__header--before--BorderBottomColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__main--BorderColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__main--BorderWidth
1px
.pf-c-code-editor--pf-c-code-editor__main--BackgroundColor
#fff
.pf-c-code-editor--pf-c-code-editor--m-read-only__main--BackgroundColor
#f0f0f0
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--before--BorderWidth
1px
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--before--BorderColor
#06c
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--after--BackgroundColor
#06c
.pf-c-code-editor--pf-c-code-editor__main--m-drag-hover--after--Opacity
.1
.pf-c-code-editor--pf-c-code-editor__code--PaddingTop
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingRight
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingBottom
0.5rem
.pf-c-code-editor--pf-c-code-editor__code--PaddingLeft
0.5rem
.pf-c-code-editor--pf-c-code-editor__code-pre--FontSize
0.875rem
.pf-c-code-editor--pf-c-code-editor__code-pre--FontFamily
'"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace'
.pf-c-code-editor--pf-c-code-editor__tab--BackgroundColor
#fff
.pf-c-code-editor--pf-c-code-editor__tab--Color
#6a6e73
.pf-c-code-editor--pf-c-code-editor__tab--PaddingTop
0.375rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingRight
0.5rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingBottom
0.375rem
.pf-c-code-editor--pf-c-code-editor__tab--PaddingLeft
0.5rem
.pf-c-code-editor--pf-c-code-editor__tab--BorderTopWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderRightWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderBottomWidth
0
.pf-c-code-editor--pf-c-code-editor__tab--BorderLeftWidth
1px
.pf-c-code-editor--pf-c-code-editor__tab--BorderColor
#d2d2d2
.pf-c-code-editor--pf-c-code-editor__tab-icon--text--MarginLeft
0.5rem
.pf-c-code-editor.pf-m-read-only--pf-c-code-editor__main--BackgroundColor
#f0f0f0
.pf-c-code-editor__controls .pf-c-button.pf-m-control--pf-c-button--m-control--Color
#6a6e73
.pf-c-code-editor__controls .pf-c-button.pf-m-control:hover--pf-c-code-editor__controls--c-button--m-control--Color
#151515
.pf-c-code-editor__controls .pf-c-button.pf-m-control:focus--pf-c-code-editor__controls--c-button--m-control--Color
#151515

View source on GitHub