CodeEditor.md

id	section	cssPrefix	propComponents
Code editor	components	pf-v6-c-code-editor	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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-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';

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