@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/code-editor/react.js

@@ -0,0 +1,659 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+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 RhUiDarkModeFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-dark-mode-fill-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';
+const pageData = {
+  "id": "Code editor",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/code-editor/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md",
+  "relPath": "packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md",
+  "propComponents": [
+    {
+      "name": "CodeEditor",
+      "description": "The main code editor component.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the code editor.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "code",
+          "type": "string",
+          "description": "Code displayed in code editor.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "copyButtonAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the copy button.",
+          "defaultValue": "'Copy code to clipboard'"
+        },
+        {
+          "name": "copyButtonSuccessTooltipText",
+          "type": "string",
+          "description": "Text to display in the tooltip on the copy button after code is copied to clipboard.",
+          "defaultValue": "'Content added to clipboard'"
+        },
+        {
+          "name": "copyButtonToolTipText",
+          "type": "string",
+          "description": "Text to display in the tooltip on the copy button before code is copied.",
+          "defaultValue": "'Copy to clipboard'"
+        },
+        {
+          "name": "customControls",
+          "type": "ReactNode | ReactNode[]",
+          "description": "A single node or array of nodes - ideally the code editor controls component - to display\nabove code editor.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "downloadButtonAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the download button.",
+          "defaultValue": "'Download code'"
+        },
+        {
+          "name": "downloadButtonToolTipText",
+          "type": "string",
+          "description": "Text to display in the tooltip on the download button.",
+          "defaultValue": "'Download'"
+        },
+        {
+          "name": "downloadFileName",
+          "type": "string",
+          "description": "Name of the file if user downloads code to local file.",
+          "defaultValue": "Date.now().toString()"
+        },
+        {
+          "name": "editorProps",
+          "type": "EditorProps",
+          "description": "Additional props to pass to the monaco editor."
+        },
+        {
+          "name": "emptyState",
+          "type": "ReactNode",
+          "description": "Content to display in space of the code editor when there is no code to display.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "emptyStateBody",
+          "type": "ReactNode",
+          "description": "Override default empty state body text.",
+          "defaultValue": "'Drag and drop a file or upload one.'"
+        },
+        {
+          "name": "emptyStateButton",
+          "type": "ReactNode",
+          "description": "Override default empty state button text.",
+          "defaultValue": "'Browse'"
+        },
+        {
+          "name": "emptyStateLink",
+          "type": "ReactNode",
+          "description": "Override default empty state link text.",
+          "defaultValue": "'Start from scratch'"
+        },
+        {
+          "name": "emptyStateTitle",
+          "type": "ReactNode",
+          "description": "Override default empty state title text.",
+          "defaultValue": "'Start editing'"
+        },
+        {
+          "name": "headerMainContent",
+          "type": "string",
+          "description": "Editor header main content title.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "height",
+          "type": "string | 'sizeToFit'",
+          "description": "Height of code editor. 'sizeToFit' will automatically change the height\nto the height of the content."
+        },
+        {
+          "name": "isCopyEnabled",
+          "type": "boolean",
+          "description": "Flag to add copy button to code editor actions.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDarkTheme",
+          "type": "boolean",
+          "description": "Flag indicating the editor is styled using monaco's dark theme.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDownloadEnabled",
+          "type": "boolean",
+          "description": "Flag to add download button to code editor actions.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag that enables component to consume the available height of its container. If `height` prop is set to 100%, this will also become enabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isHeaderPlain",
+          "type": "boolean",
+          "description": "Flag indicating the editor has a plain header.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isHighContrastTheme",
+          "type": "boolean",
+          "description": "Flag indicating the editor is styled using monaco's high contrast themes.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isLanguageLabelVisible",
+          "type": "boolean",
+          "description": "Flag to include a label indicating the currently configured editor language.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isLineNumbersVisible",
+          "type": "boolean",
+          "description": "Flag indicating the editor is displaying line numbers.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "isMinimapVisible",
+          "type": "boolean",
+          "description": "Flag to add the minimap to the code editor.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isReadOnly",
+          "type": "boolean",
+          "description": "Flag indicating the editor is read only.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isUploadEnabled",
+          "type": "boolean",
+          "description": "Flag to add upload button to code editor actions. Also makes the code editor accept a\nfile using drag and drop.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "language",
+          "type": "Language",
+          "description": "Language displayed in the editor.",
+          "defaultValue": "Language.plaintext"
+        },
+        {
+          "name": "loading",
+          "type": "ReactNode",
+          "description": "The loading screen before the editor will be loaded. Defaults to 'loading...'.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "onChange",
+          "type": "(value: string, event: editor.IModelContentChangedEvent) => void",
+          "description": "Function which fires each time the content of the code editor is manually changed. Does\nnot fire when a file is uploaded.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onCodeChange",
+          "type": "(value: string) => void",
+          "description": "Function which fires each time the code changes in the code editor.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "onDownload",
+          "type": "(value: string, fileName: string) => void",
+          "description": "Function which fires when the code is downloaded. Defaults to a function that\ndownloads the current editor content.",
+          "defaultValue": "(value: string, fileName: string) => {\n  const link = document.createElement('a');\n  link.href = URL.createObjectURL(new Blob([value], { type: 'text' }));\n  link.download = fileName;\n  link.click();\n}"
+        },
+        {
+          "name": "onEditorDidMount",
+          "type": "(editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void",
+          "description": "Callback which fires after the code editor is mounted containing a reference to the\nmonaco editor and the monaco instance.",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "options",
+          "type": "editor.IStandaloneEditorConstructionOptions",
+          "description": "Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.",
+          "defaultValue": "{}"
+        },
+        {
+          "name": "overrideServices",
+          "type": "editor.IEditorOverrideServices",
+          "description": "Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.",
+          "defaultValue": "{}"
+        },
+        {
+          "name": "shortcutsPopoverButtonText",
+          "type": "string",
+          "description": "Text to show in the button to open the shortcut popover.",
+          "defaultValue": "'View Shortcuts'"
+        },
+        {
+          "name": "shortcutsPopoverProps",
+          "type": "PopoverProps",
+          "description": "Properties for the shortcut popover.",
+          "defaultValue": "{ bodyContent: '', 'aria-label': 'Keyboard Shortcuts' }"
+        },
+        {
+          "name": "showEditor",
+          "type": "boolean",
+          "description": "Flag to show the editor.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "toolTipCopyExitDelay",
+          "type": "number",
+          "description": "The delay before tooltip fades after code copied.",
+          "defaultValue": "1600"
+        },
+        {
+          "name": "toolTipDelay",
+          "type": "number",
+          "description": "The entry and exit delay for all tooltips.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "toolTipMaxWidth",
+          "type": "string",
+          "description": "The max width of the tooltips on all button.",
+          "defaultValue": "'100px'"
+        },
+        {
+          "name": "toolTipPosition",
+          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "The position of tooltips on all buttons.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "uploadButtonAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the upload button.",
+          "defaultValue": "'Upload code'"
+        },
+        {
+          "name": "uploadButtonToolTipText",
+          "type": "string",
+          "description": "Text to display in the tooltip on the upload button.",
+          "defaultValue": "'Upload'"
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "description": "Width of code editor. Defaults to 100%.",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "CodeEditorControl",
+      "description": "Allows customizing the code editor controls by passing this sub-component into the\ncode editor's customControl property.",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the code editor control"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the code editor control."
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Icon rendered inside the code editor control."
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "Flag indicating that the button is visible above the code editor.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "onClick",
+          "type": "(code: string, event?: any) => void",
+          "description": "Event handler for the click of the button",
+          "defaultValue": "() => {}"
+        },
+        {
+          "name": "tooltipProps",
+          "type": "any",
+          "description": "Additional tooltip props forwarded to the Tooltip component",
+          "defaultValue": "{}"
+        }
+      ]
+    },
+    {
+      "name": "Popover",
+      "description": "The main popover component. The following properties can also be passed into another component\nthat has a property specifically for passing in popover properties.",
+      "props": [
+        {
+          "name": "alertSeverityScreenReaderText",
+          "type": "string",
+          "description": "Text announced by screen reader when alert severity variant is set to indicate\nseverity level."
+        },
+        {
+          "name": "alertSeverityVariant",
+          "type": "'custom' | 'info' | 'warning' | 'success' | 'danger'",
+          "description": "Severity variants for an alert popover. This modifies the color of the header to\nmatch the severity."
+        },
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation.",
+          "defaultValue": "300"
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline'",
+          "description": "The element to append the popover to. Defaults to \"inline\".",
+          "defaultValue": "() => document.body"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the popover, required when header is not present.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "bodyContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Body content of the popover. If you want to close the popover after an action within the\nbody content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nbodyContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "ReactElement<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you cannot wrap\nthe element with the Popover, you can use the triggerRef prop instead.\nUsage: <Popover><Button>Reference</Button></Popover>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the popover.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "closeBtnAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the close button.",
+          "defaultValue": "'Close'"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popover to its target. Defaults to 25.",
+          "defaultValue": "25"
+        },
+        {
+          "name": "elementToFocus",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the popover becomes visible. By default the first\nfocusable element will receive focus."
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "If true, tries to keep the popover in view by flipping it if necessary.\nIf the position is set to 'auto', this prop is ignored.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n| (\n    | 'top'\n    | 'bottom'\n    | 'left'\n    | 'right'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left-start'\n    | 'left-end'\n    | 'right-start'\n    | 'right-end'\n  )[]",
+          "description": "The desired position to flip the popover to if the initial position is not possible.\nBy setting this prop to 'flip' it attempts to flip the popover to the opposite side if\nthere is no space.\nYou can also pass an array of positions that determines the flip order. It should contain\nthe initial position followed by alternative positions if that position is unavailable.\nExample: Initial position is 'top'. Button with popover is in the top right corner.\n'flipBehavior' is set to ['top', 'right', 'left']. Since there is no space to the top, it\nchecks if right is available. There's also no space to the right, so it finally shows the\npopover on the left.",
+          "defaultValue": "[\n  'top',\n  'bottom',\n  'left',\n  'right',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'left-start',\n  'left-end',\n  'right-start',\n  'right-end'\n]"
+        },
+        {
+          "name": "footerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Footer content of the popover. If you want to close the popover after an action within the\nfooter content, you can use the isVisible prop for manual control, or you can provide a\nfunction which will receive a callback as an argument to hide the popover, i.e.\nfooterContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hasAutoWidth",
+          "type": "boolean",
+          "description": "Removes fixed-width and allows width to be defined by contents.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Allows content to touch edges of popover container.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "headerComponent",
+          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "description": "Sets the heading level to use for the popover header. Defaults to h6.",
+          "defaultValue": "'h6'"
+        },
+        {
+          "name": "headerContent",
+          "type": "React.ReactNode | ((hide: () => void) => React.ReactNode)",
+          "description": "Simple header content to be placed within a title. If you want to close the popover after\nan action within the header content, you can use the isVisible prop for manual control,\nor you can provide a function which will receive a callback as an argument to hide the\npopover, i.e. headerContent={hide => <Button onClick={() => hide()}>Close</Button>}",
+          "defaultValue": "null"
+        },
+        {
+          "name": "headerIcon",
+          "type": "React.ReactNode",
+          "description": "Icon to be displayed in the popover header. *",
+          "defaultValue": "null"
+        },
+        {
+          "name": "hideOnOutsideClick",
+          "type": "boolean",
+          "description": "Hides the popover when a click occurs outside (only works if isVisible is not controlled\nby the user).",
+          "defaultValue": "true"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id used as part of the various popover elements (popover-${id}-header/body/footer)."
+        },
+        {
+          "name": "isVisible",
+          "type": "boolean",
+          "description": "True to show the popover programmatically. Used in conjunction with the shouldClose prop.\nBy default, the popover child element handles click events automatically. If you want to\ncontrol this programmatically, the popover will not auto-close if the close button is\nclicked, the escape key is used, or if a click occurs outside the popover. Instead, the\nconsumer is responsible for closing the popover themselves by adding a callback listener\nfor the shouldClose prop.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "description": "Maximum width of the popover (default 18.75rem).",
+          "defaultValue": "popoverMaxWidth && popoverMaxWidth.value"
+        },
+        {
+          "name": "minWidth",
+          "type": "string",
+          "description": "Minimum width of the popover (default 6.25rem).",
+          "defaultValue": "popoverMinWidth && popoverMinWidth.value"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onHide",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition out.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has been mounted to the DOM.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShow",
+          "type": "(event: MouseEvent | KeyboardEvent) => void",
+          "description": "Lifecycle function invoked when the popover begins to transition in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popover has fully transitioned in.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "position",
+          "type": "| PopoverPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
+          "description": "Popover position. Note: With the enableFlip property set to true, it will change the\nposition if there is not enough space for the starting position. The behavior of where it\nflips to can be controlled through the flipBehavior property.",
+          "defaultValue": "'top'"
+        },
+        {
+          "name": "shouldClose",
+          "type": "(event: MouseEvent | KeyboardEvent, hideFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\npopover close button is clicked, the enter key was used on it, or the escape key is used.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "shouldOpen",
+          "type": "(event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void",
+          "description": "Callback function that is only invoked when isVisible is also controlled. Called when the\nenter key is used on the focused trigger.",
+          "defaultValue": "(): void => null"
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "description": "Flag indicating whether the close button should be shown.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "triggerAction",
+          "type": "'click' | 'hover'",
+          "description": "Sets an interaction to open popover, defaults to \"click\"",
+          "defaultValue": "'click'"
+        },
+        {
+          "name": "triggerRef",
+          "type": "HTMLElement | (() => HTMLElement) | React.RefObject<any>",
+          "description": "The trigger reference element to which the popover is relatively placed to. If you can wrap the\nelement with the popover, you can use the children prop instead, or both props together.\nWhen passed along with the trigger prop, the div element that wraps the trigger will be removed.\nUsage: <Popover triggerRef={() => document.getElementById('reference-element')} />"
+        },
+        {
+          "name": "withFocusTrap",
+          "type": "boolean",
+          "description": "Whether to trap focus in the popover."
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "The z-index of the popover.",
+          "defaultValue": "9999"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-code-editor"
+  ],
+  "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",
+    "With actions",
+    "With custom control",
+    "With configuration modal"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  CodeEditor,
+  CodeEditorControl,
+  Language,
+  RhUiSettingsFillIcon,
+  HashtagIcon,
+  MapIcon,
+  RhUiDarkModeFillIcon,
+  PlayIcon,
+  FontIcon,
+  AdjustIcon
+};
+pageData.examples = {
+  'Basic': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { CodeEditor, Language } from '@patternfly/react-code-editor';\nimport { Checkbox } from '@patternfly/react-core';\n\nexport const CodeEditorBasic: React.FunctionComponent = () => {\n  const [isDarkTheme, setIsDarkTheme] = useState(false);\n  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);\n  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);\n  const [isReadOnly, setIsReadOnly] = useState(false);\n  const [isMinimapVisible, setIsMinimapVisible] = useState(false);\n\n  const toggleDarkTheme = (checked) => {\n    setIsDarkTheme(checked);\n  };\n\n  const toggleHighContrastTheme = (checked) => {\n    setIsHighContrastTheme(checked);\n  };\n\n  const toggleLineNumbers = (checked) => {\n    setIsLineNumbersVisible(checked);\n  };\n  const toggleReadOnly = (checked) => {\n    setIsReadOnly(checked);\n  };\n  const toggleMinimap = (checked) => {\n    setIsMinimapVisible(checked);\n  };\n\n  const onEditorDidMount = (editor, monaco) => {\n    editor.layout();\n    editor.focus();\n    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n  };\n\n  const onChange = (value) => {\n    // eslint-disable-next-line no-console\n    console.log(value);\n  };\n\n  return (\n    <>\n      <Checkbox\n        label=\"Dark theme\"\n        isChecked={isDarkTheme}\n        onChange={(_event, checked) => toggleDarkTheme(checked)}\n        aria-label=\"dark theme checkbox\"\n        id=\"toggle-theme\"\n        name=\"toggle-theme\"\n      />\n      <Checkbox\n        label=\"High contrast theme\"\n        isChecked={isHighContrastTheme}\n        onChange={(_event, checked) => toggleHighContrastTheme(checked)}\n        aria-label=\"high contrast theme checkbox\"\n        id=\"toggle-high-contrast-theme\"\n        name=\"toggle-high-contrast-theme\"\n      />\n      <Checkbox\n        label=\"Line numbers\"\n        isChecked={isLineNumbersVisible}\n        onChange={(_event, checked) => toggleLineNumbers(checked)}\n        aria-label=\"line numbers checkbox\"\n        id=\"toggle-line-numbers\"\n        name=\"toggle-line-numbers\"\n      />\n      <Checkbox\n        label=\"Read only\"\n        isChecked={isReadOnly}\n        onChange={(_event, checked) => toggleReadOnly(checked)}\n        aria-label=\"read only checkbox\"\n        id=\"toggle-read-only\"\n        name=\"toggle-read-only\"\n      />\n      <Checkbox\n        label=\"Minimap\"\n        isChecked={isMinimapVisible}\n        onChange={(_event, checked) => toggleMinimap(checked)}\n        aria-label=\"display minimap checkbox\"\n        id=\"toggle-minimap\"\n        name=\"toggle-minimap\"\n      />\n      <CodeEditor\n        isDarkTheme={isDarkTheme}\n        isHighContrastTheme={isHighContrastTheme}\n        isLineNumbersVisible={isLineNumbersVisible}\n        isReadOnly={isReadOnly}\n        isMinimapVisible={isMinimapVisible}\n        isLanguageLabelVisible\n        code=\"Some example content\"\n        onChange={onChange}\n        language={Language.javascript}\n        onEditorDidMount={onEditorDidMount}\n        height=\"400px\"\n      />\n    </>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With sizeToFit height, height will grow/shrink with content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { CodeEditor, Language } from '@patternfly/react-code-editor';\n\nexport const CodeEditorSizeToFit: React.FunctionComponent = () => {\n  const onEditorDidMount = (editor, monaco) => {\n    editor.layout();\n    editor.focus();\n    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n  };\n\n  const onChange = (value) => {\n    // eslint-disable-next-line no-console\n    console.log(value);\n  };\n\n  return (\n    <CodeEditor\n      code=\"Some example content\"\n      onChange={onChange}\n      language={Language.javascript}\n      onEditorDidMount={onEditorDidMount}\n      height=\"sizeToFit\"\n    />\n  );\n};\n","title":"With sizeToFit height, height will grow/shrink with content","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With isFullHeight height, height will match the size of the parent': props => 
+    <Example {...pageData} {...props} {...{"code":"import { CodeEditor, Language } from '@patternfly/react-code-editor';\n\nexport const CodeEditorFullHeight: React.FunctionComponent = () => {\n  const onEditorDidMount = (editor, monaco) => {\n    editor.layout();\n    editor.focus();\n    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n  };\n\n  const onChange = (value) => {\n    // eslint-disable-next-line no-console\n    console.log(value);\n  };\n\n  return (\n    <div style={{ height: '400px' }}>\n      <CodeEditor\n        code=\"Some example content\"\n        onChange={onChange}\n        language={Language.javascript}\n        onEditorDidMount={onEditorDidMount}\n        isFullHeight\n      />\n    </div>\n  );\n};\n","title":"With isFullHeight height, height will match the size of the parent","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With shortcut menu and main header content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { CodeEditor, Language } from '@patternfly/react-code-editor';\nimport { Grid, GridItem, Label, Radio } from '@patternfly/react-core';\n\nexport const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {\n  type ShortcutMode = 'PC' | 'Mac';\n\n  const [currentShortcutMode, setCurrentShortcutMode] = useState<ShortcutMode>('PC');\n\n  const onEditorDidMount = (editor, monaco) => {\n    editor.layout();\n    editor.focus();\n    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });\n  };\n\n  const onChange = (value: string) => {\n    // eslint-disable-next-line no-console\n    console.log(value);\n  };\n\n  const onShortcutModeChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {\n    if (checked) {\n      const newMode = event.currentTarget.value as ShortcutMode;\n      setCurrentShortcutMode(newMode);\n    }\n  };\n\n  const shortcuts = [\n    {\n      PC: ['Alt', 'F1'],\n      Mac: ['Opt', 'F1'],\n      description: 'Accessibility helps'\n    },\n    {\n      PC: ['F1'],\n      Mac: ['F1'],\n      description: 'View all editor shortcuts'\n    },\n    {\n      PC: ['Ctrl', 'Space'],\n      Mac: ['Opt', 'Esc'],\n      description: 'Activate auto complete'\n    },\n    {\n      PC: ['Ctrl', 'S'],\n      Mac: ['Cmd', 'S'],\n      description: 'Save'\n    }\n  ];\n  const shortcutsPopoverProps = {\n    bodyContent: (\n      <Grid span={6} hasGutter key=\"grid\">\n        {shortcuts.map((shortcut, index) => (\n          <Fragment key={index}>\n            <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>\n              {shortcut[currentShortcutMode]\n                .map((key) => (\n                  <Label variant=\"outline\" key={key}>\n                    {key}\n                  </Label>\n                ))\n                .reduce((prev, curr) => (\n                  <>{[prev, ' + ', curr]}</>\n                ))}\n            </GridItem>\n            <GridItem>{shortcut.description}</GridItem>\n          </Fragment>\n        ))}\n      </Grid>\n    ),\n    'aria-label': 'Shortcuts'\n  };\n\n  return (\n    <>\n      <Radio\n        checked={currentShortcutMode === 'PC'}\n        onChange={onShortcutModeChange}\n        label=\"PC shortcuts\"\n        name=\"shortcut-radio\"\n        id=\"pc-shortcuts\"\n        value=\"PC\"\n      />\n      <Radio\n        checked={currentShortcutMode === 'Mac'}\n        onChange={onShortcutModeChange}\n        label=\"Mac shortcuts\"\n        name=\"shortcut-radio\"\n        id=\"mac-shortcuts\"\n        value=\"Mac\"\n      />\n      <CodeEditor\n        headerMainContent=\"Header main content\"\n        shortcutsPopoverProps={shortcutsPopoverProps}\n        isLanguageLabelVisible\n        code=\"Some example content\"\n        onChange={onChange}\n        language={Language.javascript}\n        onEditorDidMount={onEditorDidMount}\n        height=\"400px\"\n      />\n    </>\n  );\n};\n","title":"With shortcut menu and main header content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.`}
+      </p>
+    </Example>,
+  'With actions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { CodeEditor } from '@patternfly/react-code-editor';\n\nexport const CodeEditorWithActions: React.FunctionComponent = () => (\n  <CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled isLanguageLabelVisible height=\"400px\" />\n);\n","title":"With actions","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With custom control': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';\nimport PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';\n\nexport const CodeEditorCustomControl: React.FunctionComponent = () => {\n  const [code, setCode] = useState('Some example content');\n\n  const onChange = (code) => {\n    setCode(code);\n  };\n\n  const onExecuteCode = (code) => {\n    // eslint-disable-next-line no-console\n    console.log(code);\n  };\n\n  const customControl = (\n    <CodeEditorControl\n      icon={<PlayIcon />}\n      aria-label=\"Execute code\"\n      tooltipProps={{ content: 'Execute code' }}\n      onClick={onExecuteCode}\n      isVisible={code !== ''}\n    />\n  );\n\n  return (\n    <CodeEditor\n      isDownloadEnabled\n      isCopyEnabled\n      height=\"400px\"\n      customControls={customControl}\n      code={code}\n      onChange={onChange}\n      isHeaderPlain={code === ''}\n    />\n  );\n};\n","title":"With custom control","lang":"ts","className":""}}>
+      
+    </Example>,
+  'With configuration modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';\nimport RhUiDarkModeFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-dark-mode-fill-icon';\nimport HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';\nimport FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';\nimport AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';\nimport { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';\nimport {\n  Flex,\n  FlexItem,\n  Icon,\n  Modal,\n  ModalBody,\n  ModalHeader,\n  NumberInput,\n  Switch,\n  SwitchProps\n} from '@patternfly/react-core';\nimport { useState } from 'react';\n\ninterface ConfigModalItemProps {\n  /** Icon rendered inside the configuration modal. */\n  icon?: React.ReactNode;\n  /** Description of the configuration option. */\n  description: string;\n  /** Title of the configuration option. We assume that titles are unique. */\n  title: string;\n  /**\n   * Optional ID of the configuration option. Also used as a prefix for the following elements:\n   * - `${id}-title` for the element which contains the title\n   * - `${id}-description` for the element which contains the description\n   */\n  id?: string;\n  /**\n   * Slot to render inside the configuration modal. Remember to add `aria-labelledby` and `aria-describedby` props\n   * to the control inside the slot, pointing to the title and description ids respectively.\n   */\n  slot?: React.ReactNode;\n}\n\nconst ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({\n  icon = <RhUiSettingsFillIcon />,\n  description,\n  title,\n  id = `ConfigModalItem-${title.replace(/\\s+/g, '-').toLowerCase()}`,\n  slot\n}) => (\n  <Flex\n    alignItems={{ default: 'alignItemsCenter' }}\n    justifyContent={{ default: 'justifyContentSpaceBetween' }}\n    spaceItems={{ default: 'spaceItemsMd' }}\n    id={id}\n  >\n    <FlexItem flex={{ default: 'flex_1' }}>\n      <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n        <Icon isInline>{icon}</Icon>\n        <strong id={`${id}-title`} className=\"pf-v6-u-font-weight-bold\">\n          {title}\n        </strong>\n      </Flex>\n\n      <div id={`${id}-description`}>{description}</div>\n    </FlexItem>\n    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>{slot}</FlexItem>\n  </Flex>\n);\n\ninterface ConfigModalSwitchProps extends Omit<ConfigModalItemProps, 'slot'> {\n  /** Flag indicating whether the option is enabled or disabled. */\n  isChecked?: SwitchProps['isChecked'];\n  /** onChange handler for the switch. */\n  onChange?: SwitchProps['onChange'];\n  /** Labels for the enabled and disabled states of the switch. */\n  labels?: {\n    enabled: string;\n    disabled: string;\n  };\n}\n\nconst ConfigModalSwitch: React.FunctionComponent<ConfigModalSwitchProps> = ({\n  icon = <RhUiSettingsFillIcon />,\n  description,\n  title,\n  id = `ConfigModalSwitch-${title.replace(/\\s+/g, '-').toLowerCase()}`,\n  isChecked = false,\n  onChange,\n  labels = { enabled: undefined, disabled: undefined }\n}) => (\n  <ConfigModalItem\n    icon={icon}\n    description={description}\n    title={title}\n    id={id}\n    slot={\n      <Switch\n        aria-labelledby={`${id}-title`}\n        aria-describedby={`${id}-description`}\n        ouiaId={`${id}-switch`}\n        isChecked={isChecked}\n        isReversed\n        label={isChecked ? labels.enabled : labels.disabled}\n        onChange={onChange}\n      />\n    }\n  />\n);\n\ninterface ConfigModalControlProps {\n  /** Controls to be rendered inside the configuration modal. */\n  children: React.ReactNode;\n  /** Title of the configuration modal. */\n  title?: string;\n  /** Description of the configuration modal. */\n  description?: string;\n  /** Optional ID of the configuration modal. Also used as a prefix for the ids of inner elements and the OUIA id. */\n  ouiaId?: string;\n}\n\nconst ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({\n  children,\n  title = 'Editor settings',\n  description = 'Changes apply immediately',\n  ouiaId = 'CodeEditorConfigurationModal'\n}: ConfigModalControlProps) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  return (\n    <>\n      <Modal\n        aria-describedby={`${ouiaId}-body`}\n        aria-labelledby={`${ouiaId}-title`}\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        ouiaId={ouiaId}\n        variant=\"small\"\n      >\n        <ModalHeader title={title} description={description} labelId={`${ouiaId}-title`} />\n        <ModalBody id={`${ouiaId}-body`}>\n          <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>\n            {children}\n          </Flex>\n        </ModalBody>\n      </Modal>\n      <CodeEditorControl\n        aria-label={title}\n        aria-haspopup=\"dialog\"\n        isSettings\n        onClick={() => setIsModalOpen(true)}\n        tooltipProps={{ content: title, ariaLive: 'off' }}\n      />\n    </>\n  );\n};\n\nexport const CodeEditorConfigurationModal: React.FunctionComponent = () => {\n  const [code, setCode] = useState('Some example content');\n\n  const [isMinimapVisible, setIsMinimapVisible] = useState(true);\n  const [isDarkTheme, setIsDarkTheme] = useState(false);\n  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);\n  const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);\n  const [fontSize, setFontSize] = useState(14);\n\n  const onChange = (code: string) => {\n    setCode(code);\n  };\n\n  const customControl = (\n    <ConfigModalControl>\n      <ConfigModalSwitch\n        key=\"minimap-switch\"\n        title=\"Minimap\"\n        description=\"Show a preview of the full code on the side of the editor\"\n        isChecked={isMinimapVisible}\n        onChange={(_e, checked) => setIsMinimapVisible(checked)}\n        icon={<MapIcon />}\n      />\n      <ConfigModalSwitch\n        key=\"dark-theme-switch\"\n        title=\"Dark theme\"\n        description=\"Switch the editor to a dark color theme\"\n        isChecked={isDarkTheme}\n        onChange={(_e, checked) => setIsDarkTheme(checked)}\n        icon={<RhUiDarkModeFillIcon />}\n      />\n      <ConfigModalSwitch\n        key=\"high-contrast-theme-switch\"\n        title=\"High contrast theme\"\n        description=\"Switch the editor to a high contrast color theme\"\n        isChecked={isHighContrastTheme}\n        onChange={(_e, checked) => setIsHighContrastTheme(checked)}\n        icon={<AdjustIcon />}\n      />\n      <ConfigModalSwitch\n        key=\"line-numbers-switch\"\n        title=\"Line numbers\"\n        description=\"Show line numbers to the left of each line of code\"\n        isChecked={isLineNumbersVisible}\n        onChange={(_e, checked) => setIsLineNumbersVisible(checked)}\n        icon={<HashtagIcon />}\n      />\n      <ConfigModalItem\n        key=\"font-size\"\n        title=\"Font size\"\n        description=\"Adjust the font size of the code editor\"\n        ouia-id=\"ConfigModalItem-font-size\"\n        icon={<FontIcon />}\n        slot={\n          <NumberInput\n            aria-labelledby=\"ConfigModalItem-font-size-title\"\n            aria-describedby=\"ConfigModalItem-font-size-description\"\n            inputAriaLabel=\"Enter a font size\"\n            minusBtnAriaLabel=\"Decrease font size\"\n            plusBtnAriaLabel=\"Increase font size\"\n            role=\"group\" // For screen readers to group the input and buttons as one widget\n            value={fontSize}\n            min={5}\n            onMinus={() => setFontSize((size) => Math.max(5, size - 1))}\n            onChange={(event) => setFontSize(Number((event.target as HTMLInputElement).value))}\n            onPlus={() => setFontSize((size) => size + 1)}\n            widthChars={2}\n          />\n        }\n      />\n    </ConfigModalControl>\n  );\n\n  return (\n    <CodeEditor\n      code={code}\n      customControls={customControl}\n      height=\"400px\"\n      isDarkTheme={isDarkTheme}\n      isHighContrastTheme={isHighContrastTheme}\n      isLineNumbersVisible={isLineNumbersVisible}\n      isMinimapVisible={isMinimapVisible}\n      onChange={onChange}\n      options={{ fontSize }}\n    />\n  );\n};\n","title":"With configuration modal","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Note: Code editor lives in its own package at `}
+      <PatternflyThemeLink {...{"to":"https://www.npmjs.com/package/@patternfly/react-code-editor","className":""}}>
+        {`@patternfly/react-code-editor`}
+      </PatternflyThemeLink>
+      {` and has `}
+      <PatternflyThemeLink {...{"to":"https://github.com/patternfly/patternfly-react/blob/main/packages/react-code-editor/package.json","className":""}}>
+        <strong {...{"className":""}}>
+          {`required peer deps`}
+        </strong>
+      </PatternflyThemeLink>
+      {`.`}
+    </p>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic"])}
+    {React.createElement(pageData.examples["With sizeToFit height, height will grow/shrink with content"])}
+    {React.createElement(pageData.examples["With isFullHeight height, height will match the size of the parent"])}
+    {React.createElement(pageData.examples["With shortcut menu and main header content"])}
+    {React.createElement(pageData.examples["With actions"])}
+    {React.createElement(pageData.examples["With custom control"])}
+    {React.createElement(pageData.examples["With configuration modal"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsCodeEditorReactDocs';
+Component.pageData = pageData;
+
+export default Component;