Skip to content
Patternfly Logo

Code editor

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Note: Code editor lives in its own package at @patternfly/react-code-editor! Note: This code editor is built using the 'monaco-editor-webpack-plugin' and requires webpack to be configured to use the plugin.

Examples

Basic

JAVASCRIPT

With actions

TEXT

Start editing

Drag a file here or browse to upload

With custom control

Props

CodeEditor

NameTypeRequiredDefaultDescription
classNamestringNo''additional classes added to the code editor
codestringNo''code displayed in code editor
copyButtonAriaLabelstringNo'Copy code to clipboard'Accessibly label for the copy button
copyButtonSuccessTooltipTextstringNo'Content added to clipboard'Text to display in the tooltip on the copy button after code copied to clipboard
copyButtonToolTipTextstringNo'Copy to clipboard'Text to display in the tooltip on the copy button before text is copied
customControlsReact.ReactNode | React.ReactNode[]NonullA single node or array of nodes - ideally CodeEditorControls - to display above code editor
downloadButtonAriaLabelstringNo'Download code'Accessible label for the download button
downloadButtonToolTipTextstringNo'Download'Text to display in the tooltip on the download button
downloadFileNamestringNoDate.now().toString()Name of the file if user downloads code to local file
emptyStateReact.ReactNodeNo''Content to display in space of the code editor when there is no code to display
heightstringNo''Height of code editor. Defaults to 100%
isCopyEnabledbooleanNofalseFlag to add copy button to code editor actions
isDarkThemebooleanNofalseFlag indicating the editor is styled using monaco's dark theme
isDownloadEnabledbooleanNofalseFlag to add download button to code editor actions
isLanguageLabelVisiblebooleanNofalseFlag to include a label indicating the currently configured editor language
isLineNumbersVisiblebooleanNotrueFlag indicating the editor is displaying line numbers
isMinimapVisiblebooleanNofalseFlag to add the minimap to the code editor
isReadOnlybooleanNofalseFlag indicating the editor is read only
isUploadEnabledbooleanNofalseFlag to add upload button to code editor actions. Also makes the code editor accept a file using drag and drop
languageLanguageNoLanguage.textlanguage displayed in the editor
loadingReact.ReactNodeNo''The loading screen before the editor will be loaded. Defaults 'loading...'
onChange(value?: string, event?: any) => voidNoFunction which fires each time the code changes in the code editor
onEditorDidMount(editor: any, monaco: any) => voidNo() => {}Callback which fires after the code editor is mounted containing a reference to the monaco editor and the monaco instance
toolTipCopyExitDelaynumberNo1600The delay before tooltip fades after code copied
toolTipDelaynumberNo100The entry and exit delay for all tooltips
toolTipMaxWidthstringNo'100px'The max width of the tooltips on all button
toolTipPosition'auto' | 'top' | 'bottom' | 'left' | 'right'No'top'The position of tooltips on all buttons
uploadButtonAriaLabelstringNo'Upload code'Accessible label for the upload button
uploadButtonToolTipTextstringNo'Upload'Text to display in the tooltip on the upload button
widthstringNo''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