CodeEditor.md

id	Code editor
section	components
cssPrefix	pf-v6-c-code-editor
propComponents	CodeEditor CodeEditorControl Popover

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

import { Fragment, useState } from 'react'; import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-editor'; import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon'; import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon'; import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon'; import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon'; import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon'; import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';

Examples

Basic

With sizeToFit height, height will grow/shrink with content

With isFullHeight height, height will match the size of the parent

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.

With actions

With custom control

With configuration modal