@patternfly/react-code-editor 6.0.0-alpha.8 → 6.0.0-alpha.80

package/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    style="display: contents;"
+  >
+    <button
+      aria-disabled="false"
+      class="pf-v6-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
+      >
+        <div>
+          icon
+        </div>
+      </span>
+    </button>
+  </div>
+</DocumentFragment>
+`;

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

@@ -15,11 +15,13 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 ### Basic
 
 ```ts file="./CodeEditorBasic.tsx"
+
 ```
 
 ### With sizeToFit height, height will grow/shrink with content
 
 ```ts file="./CodeEditorSizeToFit.tsx"
+
 ```
 
 ### With shortcut menu and main header content
@@ -27,14 +29,17 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.
 
 ```ts file="./CodeEditorShortcutMainHeader.tsx"
+
 ```
 
 ### With actions
 
 ```ts file="./CodeEditorWithActions.tsx"
+
 ```
 
 ### With custom control
 
 ```ts file="CodeEditorCustomControl.tsx"
+
 ```

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

@@ -3,7 +3,7 @@ import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
-  const [code, setCode] = React.useState('');
+  const [code, setCode] = React.useState('Some example content');
 
   const onChange = (code) => {
     setCode(code);
@@ -32,6 +32,7 @@ export const CodeEditorCustomControl: React.FunctionComponent = () => {
       customControls={customControl}
       code={code}
       onChange={onChange}
+      isHeaderPlain={code === ''}
     />
   );
 };

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

@@ -1,34 +1,49 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem, Chip } from '@patternfly/react-core';
+import { Grid, GridItem, Label, Radio } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
+  type ShortcutMode = 'PC' | 'Mac';
+
+  const [currentShortcutMode, setCurrentShortcutMode] = React.useState<ShortcutMode>('PC');
+
   const onEditorDidMount = (editor, monaco) => {
     editor.layout();
     editor.focus();
     monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
   };
 
-  const onChange = (value) => {
+  const onChange = (value: string) => {
     // eslint-disable-next-line no-console
     console.log(value);
   };
 
+  const onShortcutModeChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
+    if (checked) {
+      const newMode = event.currentTarget.value as ShortcutMode;
+      setCurrentShortcutMode(newMode);
+    }
+  };
+
   const shortcuts = [
     {
-      keys: ['Opt', 'F1'],
+      PC: ['Alt', 'F1'],
+      Mac: ['Opt', 'F1'],
       description: 'Accessibility helps'
     },
     {
-      keys: ['F1'],
+      PC: ['F1'],
+      Mac: ['F1'],
       description: 'View all editor shortcuts'
     },
     {
-      keys: ['Ctrl', 'Space'],
+      PC: ['Ctrl', 'Space'],
+      Mac: ['Opt', 'Esc'],
       description: 'Activate auto complete'
     },
     {
-      keys: ['Cmd', 'S'],
+      PC: ['Ctrl', 'S'],
+      Mac: ['Cmd', 'S'],
       description: 'Save'
     }
   ];
@@ -38,11 +53,11 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
         {shortcuts.map((shortcut, index) => (
           <React.Fragment key={index}>
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
-              {shortcut.keys
+              {shortcut[currentShortcutMode]
                 .map((key) => (
-                  <Chip key={key} isReadOnly>
+                  <Label variant="outline" key={key}>
                     {key}
-                  </Chip>
+                  </Label>
                 ))
                 .reduce((prev, curr) => (
                   <>{[prev, ' + ', curr]}</>
@@ -57,14 +72,32 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   };
 
   return (
-    <CodeEditor
-      shortcutsPopoverProps={shortcutsPopoverProps}
-      isLanguageLabelVisible
-      code="Some example content"
-      onChange={onChange}
-      language={Language.javascript}
-      onEditorDidMount={onEditorDidMount}
-      height="400px"
-    />
+    <>
+      <Radio
+        checked={currentShortcutMode === 'PC'}
+        onChange={onShortcutModeChange}
+        label="PC shortcuts"
+        name="shortcut-radio"
+        id="pc-shortcuts"
+        value="PC"
+      />
+      <Radio
+        checked={currentShortcutMode === 'Mac'}
+        onChange={onShortcutModeChange}
+        label="Mac shortcuts"
+        name="shortcut-radio"
+        id="mac-shortcuts"
+        value="Mac"
+      />
+      <CodeEditor
+        shortcutsPopoverProps={shortcutsPopoverProps}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
   );
 };