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. To learn more go to our Beta components page on GitHub.
Note: Code editor lives in its own package at @patternfly/react-code-editor and has required peer deps.
Examples
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.
Props
CodeEditor
| 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 copied to clipboard |
| copyButtonToolTipText | string | 'Copy to clipboard' | Text to display in the tooltip on the copy button before text is copied |
| customControls | React.ReactNode | React.ReactNode[] | null | A single node or array of nodes - ideally CodeEditorControls - 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 |
| 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 title text |
| emptyStateLink | React.ReactNode | 'Start from scratch' | Override default empty state body 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 |
| 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 'loading...' |
| onChange | ChangeHandler | Function which fires each time the code changes in the code editor | |
| onEditorDidMount | EditorDidMount | () => {} | 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
| Name | Type | Default | Description |
|---|---|---|---|
| iconrequired | React.ReactNode | icon rendered inside the code editor control | |
| toolTipTextrequired | React.ReactNode | Text to display in the tooltip | |
| aria-label | string | accessible label for the code editor control | |
| className | string | additional classes added to the Code editor control | |
| entryDelay | number | 300 | Delay in ms before the tooltip appears. |
| exitDelay | number | 0 | Delay in ms before the tooltip disappears. |
| isVisible | boolean | true | Flag indicating that the button is visible above the code editor |
| maxWidth | string | '100px' | Maximum width of the tooltip (default 150px). |
| onClick | (code: string, event?: any) => void | () => {} | Event handler for the click of the button |
| position | PopoverPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top' | Copy button popover position. |
Popover
| Name | Type | Default | Description |
|---|---|---|---|
| bodyContentrequired | React.ReactNode | ((hide: () => void) => React.ReactNode) | Body content If you want to close the popover after an action within the bodyContent, 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>} | |
| alertSeverityScreenReaderTextBeta | string | Text announced by screen reader when alert severity variant is set to indicate severity level | |
| alertSeverityVariantBeta | 'default' | 'info' | 'warning' | 'success' | 'danger' | Severity variants for an alert popover. This modifies the color of the header to match the severity. | |
| animationDuration | number | 300 | CSS fade transition animation duration |
| appendTo | HTMLElement | ((ref?: HTMLElement) => HTMLElement) | () => document.body | The element to append the popover to, defaults to body |
| aria-label | string | '' | Accessible label, required when header is not present |
| Deprecated: boundary | 'scrollParent' | 'window' | 'viewport' | HTMLElement | - no longer used. if you want to constrain the popper to a specific element use the appendTo prop instead | |
| children | ReactElement<any> | The reference element to which the Popover is relatively placed to. If you cannot wrap the reference with the Popover, you can use the reference prop instead. Usage: <Popover><Button>Reference</Button></Popover> | |
| className | string | '' | Popover additional class |
| closeBtnAriaLabel | string | 'Close' | Aria label for the Close button |
| distance | number | 25 | Distance of the popover to its target, defaults to 25 |
| 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', 'right', 'bottom', 'left', 'top', 'right', 'bottom'] | 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 If you want to close the popover after an action within the bodyContent, 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. Default is 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 bodyContent, 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>} |
| headerIconBeta | 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, ESC 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 | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned out. Note: The tip argument is no longer passed and has been deprecated. |
| onHide | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover begins to transition out. Note: The tip argument is no longer passed and has been deprecated. |
| onMount | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has been mounted to the DOM. Note: The tip argument is no longer passed and has been deprecated. |
| onShow | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover begins to transition in. Note: The tip argument is no longer passed and has been deprecated. |
| onShown | (tip?: TippyInstance) => void | (): void => null | Lifecycle function invoked when the popover has fully transitioned in. Note: The tip argument is no longer passed and has been deprecated. |
| 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 'enableFlip' 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 prop. |
| reference | HTMLElement | (() => HTMLElement) | React.RefObject<any> | The reference element to which the Popover is relatively placed to. If you can wrap the reference with the Popover, you can use the children prop instead. Usage: <Popover reference={() => document.getElementById('reference-element')} /> | |
| shouldClose | (tip?: TippyInstance, hideFunction?: () => void, event?: MouseEvent | KeyboardEvent) => void | (): void => null | Callback function that is only invoked when isVisible is also controlled. Called when the popover Close button is clicked, Enter key was used on it, or the ESC key is used. Note: The tip argument is no longer passed and has been deprecated. |
| shouldOpen | (showFunction?: () => void, event?: MouseEvent | KeyboardEvent) => 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 | Whether to show the close button |
| Deprecated: tippyProps | Partial<TippyProps> | - no longer used | |
| withFocusTrap | boolean | Whether to trap focus in the popover | |
| zIndex | number | 9999 | z-index of the popover |
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__header-main--PaddingRight | 0.5rem | |
| .pf-c-code-editor | --pf-c-code-editor__header-main--PaddingLeft | 0.5rem | |
| .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
