- HTML

import ’./CodeEditor.css’;

## Examples

### Default

### Read-only

### Without actions

### Drag file and hover over component

### With optional header content and keyboard shortcuts

### With optional code editor container

This is an extra container used in React to prevent event propagation if upload is enabled or there is a provided empty state.

### With full height modifier

## Documentation

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-code-editor` | `<div>` | Initiates the code editor component. Required
`.pf-v6-c-code-editor__header` | `<div>` | Initiates the code editor header used for the controls and tab elements. Required
`.pf-v6-c-code-editor__header-content` | `<div>` | Initiates the code editor header content used for the controls and tab elements. Required
`.pf-v6-c-code-editor__main` | `<div>` | Initiates the main container for a code editor e.g. Monaco Required
`.pf-v6-c-code-editor__code` | `<div>` | Initiates the container for code without a JS code editor. Comes with PatternFly styling.
`.pf-v6-c-code-editor__controls` | `<div>` | Initiates the code editor controls.
`.pf-v6-c-code-editor__header-main` | `<div>` | Initiates the code editor header content area.
`.pf-v6-c-code-editor__keyboard-shortcuts` | `<div>` | Initiates the code editor header keyboard shortcuts area.
`.pf-v6-c-code-editor__tab` | `<div>` | Initiates the code editor tab.
`.pf-v6-c-code-editor__tab-text` | `<span>` | Initiates the code editor tab text.
`.pf-v6-c-code-editor__tab-icon` | `<span>` | Initiates the code editor tab icon.
`.pf-v6-c-code-editor__upload` | `<div>` | Initiates the code editor upload border.
`.pf-v6-c-code-editor__container` | `<div>` | Initiates the container used inside `.pf-v6-c-code-editor` in PatternFly React. This is used in PatternFly React to prevent event propagation if upload is enabled or there is a provided empty state.
`.pf-m-full-height` | `.pf-v6-c-code-editor` | Modifies for full-height style.

##
CSS variables