@patternfly/react-code-editor 6.5.0-prerelease.3 → 6.5.0-prerelease.30

package/CHANGELOG.md

@@ -3,6 +3,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.30](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.29...@patternfly/react-code-editor@6.5.0-prerelease.30) (2026-01-12)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.29](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.28...@patternfly/react-code-editor@6.5.0-prerelease.29) (2026-01-09)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.28](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.27...@patternfly/react-code-editor@6.5.0-prerelease.28) (2026-01-09)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.26...@patternfly/react-code-editor@6.5.0-prerelease.27) (2025-12-17)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.22...@patternfly/react-code-editor@6.5.0-prerelease.26) (2025-12-16)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.21...@patternfly/react-code-editor@6.5.0-prerelease.22) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.20...@patternfly/react-code-editor@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.19...@patternfly/react-code-editor@6.5.0-prerelease.20) (2025-12-01)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.18...@patternfly/react-code-editor@6.5.0-prerelease.19) (2025-11-21)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.17...@patternfly/react-code-editor@6.5.0-prerelease.18) (2025-11-21)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.17](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.16...@patternfly/react-code-editor@6.5.0-prerelease.17) (2025-11-20)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.15...@patternfly/react-code-editor@6.5.0-prerelease.16) (2025-11-20)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.15](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.14...@patternfly/react-code-editor@6.5.0-prerelease.15) (2025-11-19)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.13...@patternfly/react-code-editor@6.5.0-prerelease.14) (2025-11-17)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.12...@patternfly/react-code-editor@6.5.0-prerelease.13) (2025-11-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.11...@patternfly/react-code-editor@6.5.0-prerelease.12) (2025-11-12)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.10...@patternfly/react-code-editor@6.5.0-prerelease.11) (2025-11-10)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.9...@patternfly/react-code-editor@6.5.0-prerelease.10) (2025-11-10)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.8...@patternfly/react-code-editor@6.5.0-prerelease.9) (2025-11-06)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.7...@patternfly/react-code-editor@6.5.0-prerelease.8) (2025-11-06)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.6...@patternfly/react-code-editor@6.5.0-prerelease.7) (2025-11-05)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.5...@patternfly/react-code-editor@6.5.0-prerelease.6) (2025-11-05)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.4...@patternfly/react-code-editor@6.5.0-prerelease.5) (2025-11-05)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.3...@patternfly/react-code-editor@6.5.0-prerelease.4) (2025-11-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
 # [6.5.0-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.2...@patternfly/react-code-editor@6.5.0-prerelease.3) (2025-11-03)
 
 **Note:** Version bump only for package @patternfly/react-code-editor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-code-editor",
-  "version": "6.5.0-prerelease.3",
+  "version": "6.5.0-prerelease.30",
   "description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
-    "@patternfly/react-core": "^6.5.0-prerelease.3",
-    "@patternfly/react-icons": "^6.5.0-prerelease.2",
-    "@patternfly/react-styles": "^6.5.0-prerelease.2",
+    "@patternfly/react-core": "^6.5.0-prerelease.28",
+    "@patternfly/react-icons": "^6.5.0-prerelease.12",
+    "@patternfly/react-styles": "^6.5.0-prerelease.10",
     "react-dropzone": "14.3.5",
     "tslib": "^2.8.1"
   },
@@ -42,7 +42,7 @@
     "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
-    "monaco-editor": "^0.52.2"
+    "monaco-editor": "^0.55.1"
   },
-  "gitHead": "40a5015cf1eb4730bda9c5c15e328f6d544bc857"
+  "gitHead": "884ad17d2ec8d71239e2f4f86b5fbc4fd4cc8196"
 }

package/src/components/CodeEditor/examples/CodeEditor.md

@@ -14,6 +14,7 @@ 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
 

package/src/components/CodeEditor/examples/CodeEditorConfigurationModal.tsx

@@ -2,8 +2,19 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
+import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import { Flex, FlexItem, Icon, Modal, ModalBody, ModalHeader, Switch, SwitchProps } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  NumberInput,
+  Switch,
+  SwitchProps
+} from '@patternfly/react-core';
 import { useState } from 'react';
 
 interface ConfigModalItemProps {
@@ -11,76 +22,105 @@ interface ConfigModalItemProps {
   icon?: React.ReactNode;
   /** Description of the configuration option. */
   description: string;
-  /** Flag indicating whether the option is enabled or disabled. */
-  isChecked?: SwitchProps['isChecked'];
-  /** onChange handler for the switch. */
-  onChange?: SwitchProps['onChange'];
   /** Title of the configuration option. We assume that titles are unique. */
   title: string;
-  /** Labels for the enabled and disabled states of the switch. */
-  labels?: {
-    enabled: string;
-    disabled: string;
-  };
-  /** Optional OUIA ID of the configuration option. Also used as a prefix for the ids of inner elements. */
-  ouiaId?: string;
+  /**
+   * Optional ID of the configuration option. Also used as a prefix for the following elements:
+   * - `${id}-title` for the element which contains the title
+   * - `${id}-description` for the element which contains the description
+   */
+  id?: string;
+  /**
+   * Slot to render inside the configuration modal. Remember to add `aria-labelledby` and `aria-describedby` props
+   * to the control inside the slot, pointing to the title and description ids respectively.
+   */
+  slot?: React.ReactNode;
 }
 
 const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
   icon = <CogIcon />,
   description,
-  isChecked = false,
-  labels = { enabled: undefined, disabled: undefined },
-  onChange,
   title,
-  ouiaId
+  id = `ConfigModalItem-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  slot
 }) => (
   <Flex
     alignItems={{ default: 'alignItemsCenter' }}
     justifyContent={{ default: 'justifyContentSpaceBetween' }}
     spaceItems={{ default: 'spaceItemsMd' }}
+    id={id}
   >
     <FlexItem flex={{ default: 'flex_1' }}>
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <Icon isInline>{icon}</Icon>
-        <strong id={`${ouiaId}-title`} className="pf-v6-u-font-weight-bold">
+        <strong id={`${id}-title`} className="pf-v6-u-font-weight-bold">
           {title}
         </strong>
       </Flex>
 
-      <div id={`${ouiaId}-description`}>{description}</div>
+      <div id={`${id}-description`}>{description}</div>
     </FlexItem>
-    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>{slot}</FlexItem>
+  </Flex>
+);
+
+interface ConfigModalSwitchProps extends Omit<ConfigModalItemProps, 'slot'> {
+  /** Flag indicating whether the option is enabled or disabled. */
+  isChecked?: SwitchProps['isChecked'];
+  /** onChange handler for the switch. */
+  onChange?: SwitchProps['onChange'];
+  /** Labels for the enabled and disabled states of the switch. */
+  labels?: {
+    enabled: string;
+    disabled: string;
+  };
+}
+
+const ConfigModalSwitch: React.FunctionComponent<ConfigModalSwitchProps> = ({
+  icon = <CogIcon />,
+  description,
+  title,
+  id = `ConfigModalSwitch-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  isChecked = false,
+  onChange,
+  labels = { enabled: undefined, disabled: undefined }
+}) => (
+  <ConfigModalItem
+    icon={icon}
+    description={description}
+    title={title}
+    id={id}
+    slot={
       <Switch
-        aria-labelledby={`${ouiaId}-title`}
-        aria-describedby={`${ouiaId}-description`}
-        ouiaId={`${ouiaId}-switch`}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-description`}
+        ouiaId={`${id}-switch`}
         isChecked={isChecked}
         isReversed
         label={isChecked ? labels.enabled : labels.disabled}
         onChange={onChange}
       />
-    </FlexItem>
-  </Flex>
+    }
+  />
 );
 
 interface ConfigModalControlProps {
-  /** Array of configuration controls to be rendered inside the modal. */
-  controls: ConfigModalItemProps[];
+  /** Controls to be rendered inside the configuration modal. */
+  children: React.ReactNode;
   /** Title of the configuration modal. */
   title?: string;
   /** Description of the configuration modal. */
   description?: string;
-  /** Optional OUIA ID of the configuration modal. Also used as a prefix for the ids of inner elements. */
+  /** Optional ID of the configuration modal. Also used as a prefix for the ids of inner elements and the OUIA id. */
   ouiaId?: string;
 }
 
 const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
-  controls,
+  children,
   title = 'Editor settings',
-  description = 'Settings will be applied immediately',
+  description = 'Changes apply immediately',
   ouiaId = 'CodeEditorConfigurationModal'
-}) => {
+}: ConfigModalControlProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
@@ -89,27 +129,21 @@ const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
         aria-describedby={`${ouiaId}-body`}
         aria-labelledby={`${ouiaId}-title`}
         isOpen={isModalOpen}
-        onClose={() => setIsModalOpen(!isModalOpen)}
+        onClose={() => setIsModalOpen(false)}
         ouiaId={ouiaId}
         variant="small"
       >
         <ModalHeader title={title} description={description} labelId={`${ouiaId}-title`} />
         <ModalBody id={`${ouiaId}-body`}>
           <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
-            {controls.map((control) => (
-              <ConfigModalItem
-                key={control.title}
-                ouiaId={`${ouiaId}-${control.title.replace(/\s+/g, '-').toLowerCase()}`}
-                {...control}
-              />
-            ))}
+            {children}
           </Flex>
         </ModalBody>
       </Modal>
       <CodeEditorControl
         aria-label={title}
         aria-haspopup="dialog"
-        icon={<CogIcon />}
+        isSettings
         onClick={() => setIsModalOpen(true)}
         tooltipProps={{ content: title, ariaLive: 'off' }}
       />
@@ -123,37 +157,62 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
   const [isMinimapVisible, setIsMinimapVisible] = useState(true);
   const [isDarkTheme, setIsDarkTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+  const [fontSize, setFontSize] = useState(14);
 
   const onChange = (code: string) => {
     setCode(code);
   };
 
   const customControl = (
-    <ConfigModalControl
-      controls={[
-        {
-          title: 'Minimap',
-          description: 'Show a preview of the full code on the side of the editor',
-          isChecked: isMinimapVisible,
-          onChange: (_e, checked) => setIsMinimapVisible(checked),
-          icon: <MapIcon />
-        },
-        {
-          title: 'Dark theme',
-          description: 'Switch the editor to a dark color theme',
-          isChecked: isDarkTheme,
-          onChange: (_e, checked) => setIsDarkTheme(checked),
-          icon: <MoonIcon />
-        },
-        {
-          title: 'Line numbers',
-          description: 'Show line numbers to the left of each line of code',
-          isChecked: isLineNumbersVisible,
-          onChange: (_e, checked) => setIsLineNumbersVisible(checked),
-          icon: <HashtagIcon />
+    <ConfigModalControl>
+      <ConfigModalSwitch
+        key="minimap-switch"
+        title="Minimap"
+        description="Show a preview of the full code on the side of the editor"
+        isChecked={isMinimapVisible}
+        onChange={(_e, checked) => setIsMinimapVisible(checked)}
+        icon={<MapIcon />}
+      />
+      <ConfigModalSwitch
+        key="dark-theme-switch"
+        title="Dark theme"
+        description="Switch the editor to a dark color theme"
+        isChecked={isDarkTheme}
+        onChange={(_e, checked) => setIsDarkTheme(checked)}
+        icon={<MoonIcon />}
+      />
+      <ConfigModalSwitch
+        key="line-numbers-switch"
+        title="Line numbers"
+        description="Show line numbers to the left of each line of code"
+        isChecked={isLineNumbersVisible}
+        onChange={(_e, checked) => setIsLineNumbersVisible(checked)}
+        icon={<HashtagIcon />}
+      />
+      <ConfigModalItem
+        key="font-size"
+        title="Font size"
+        description="Adjust the font size of the code editor"
+        ouia-id="ConfigModalItem-font-size"
+        icon={<FontIcon />}
+        slot={
+          <NumberInput
+            aria-labelledby="ConfigModalItem-font-size-title"
+            aria-describedby="ConfigModalItem-font-size-description"
+            inputAriaLabel="Enter a font size"
+            minusBtnAriaLabel="Decrease font size"
+            plusBtnAriaLabel="Increase font size"
+            role="group" // For screen readers to group the input and buttons as one widget
+            value={fontSize}
+            min={5}
+            onMinus={() => setFontSize((size) => Math.max(5, size - 1))}
+            onChange={(event) => setFontSize(Number((event.target as HTMLInputElement).value))}
+            onPlus={() => setFontSize((size) => size + 1)}
+            widthChars={2}
+          />
         }
-      ]}
-    />
+      />
+    </ConfigModalControl>
   );
 
   return (
@@ -165,6 +224,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
       isLineNumbersVisible={isLineNumbersVisible}
       isMinimapVisible={isMinimapVisible}
       onChange={onChange}
+      options={{ fontSize }}
     />
   );
 };