@patternfly/react-code-editor 6.0.0-alpha.5 → 6.0.0-alpha.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-code-editor",
-  "version": "6.0.0-alpha.5",
+  "version": "6.0.0-alpha.50",
   "description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -30,20 +30,20 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/react-core": "^6.0.0-alpha.5",
-    "@patternfly/react-icons": "^6.0.0-alpha.4",
-    "@patternfly/react-styles": "^6.0.0-alpha.4",
+    "@monaco-editor/react": "^4.6.0",
+    "@patternfly/react-core": "^6.0.0-alpha.50",
+    "@patternfly/react-icons": "^6.0.0-alpha.19",
+    "@patternfly/react-styles": "^6.0.0-alpha.19",
     "react-dropzone": "14.2.3",
     "tslib": "^2.5.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
-    "react-monaco-editor": "^0.51.0"
+    "react-dom": "^17 || ^18"
   },
   "devDependencies": {
     "rimraf": "^2.6.2",
     "typescript": "^4.7.4"
   },
-  "gitHead": "0213323de9e62364f8cd3f401bec86f1f34ee4fe"
+  "gitHead": "ef6f95d064bfbb8f5aaa134ab6941f63ccf36111"
 }

package/src/components/CodeEditor/CodeEditor.tsx

@@ -7,17 +7,15 @@ import {
   ButtonVariant,
   EmptyState,
   EmptyStateBody,
-  EmptyStateIcon,
   EmptyStateActions,
   EmptyStateVariant,
   EmptyStateFooter,
   getResizeObserver,
   Popover,
   PopoverProps,
-  TooltipPosition,
-  EmptyStateHeader
+  TooltipPosition
 } from '@patternfly/react-core';
-import MonacoEditor, { ChangeHandler, EditorDidMount } from 'react-monaco-editor';
+import Editor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
@@ -28,6 +26,9 @@ import Dropzone, { FileRejection } from 'react-dropzone';
 import { CodeEditorContext } from './CodeEditorUtils';
 import { CodeEditorControl } from './CodeEditorControl';
 
+export type ChangeHandler = (value: string, event: editor.IModelContentChangedEvent) => void;
+export type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
+
 export interface Shortcut {
   description: string;
   keys: string[];
@@ -134,6 +135,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   downloadButtonToolTipText?: string;
   /** Name of the file if user downloads code to local file. */
   downloadFileName?: string;
+  /** Additional props to pass to the monaco editor. */
+  editorProps?: EditorProps;
   /** Content to display in space of the code editor when there is no code to display. */
   emptyState?: React.ReactNode;
   /** Override default empty state body text. */
@@ -154,6 +157,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   isCopyEnabled?: boolean;
   /** Flag indicating the editor is styled using monaco's dark theme. */
   isDarkTheme?: boolean;
+  /** Flag indicating the editor has a plain header. */
+  isHeaderPlain?: boolean;
   /** Flag to add download button to code editor actions. */
   isDownloadEnabled?: boolean;
   /** Flag to include a label indicating the currently configured editor language. */
@@ -260,6 +265,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     isUploadEnabled: false,
     isDownloadEnabled: false,
     isCopyEnabled: false,
+    isHeaderPlain: false,
     copyButtonAriaLabel: 'Copy code to clipboard',
     uploadButtonAriaLabel: 'Upload code',
     downloadButtonAriaLabel: 'Download code',
@@ -491,12 +497,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
       emptyStateLink,
       customControls,
       isMinimapVisible,
+      isHeaderPlain,
       headerMainContent,
       shortcutsPopoverButtonText,
       shortcutsPopoverProps: shortcutsPopoverPropsProp,
       showEditor,
       options: optionsProp,
-      overrideServices
+      overrideServices,
+      editorProps
     } = this.props;
     const shortcutsPopoverProps: PopoverProps = {
       ...CodeEditor.defaultProps.shortcutsPopoverProps,
@@ -520,12 +528,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           const emptyState =
             providedEmptyState ||
             (isUploadEnabled ? (
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText={emptyStateTitle}
-                  icon={<EmptyStateIcon icon={CodeIcon} />}
-                  headingLevel="h4"
-                />
+              <EmptyState variant={EmptyStateVariant.sm} titleText={emptyStateTitle} icon={CodeIcon} headingLevel="h4">
                 <EmptyStateBody>{emptyStateBody}</EmptyStateBody>
                 {!isReadOnly && (
                   <EmptyStateFooter>
@@ -543,12 +546,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 )}
               </EmptyState>
             ) : (
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText={emptyStateTitle}
-                  icon={<EmptyStateIcon icon={CodeIcon} />}
-                  headingLevel="h4"
-                />
+              <EmptyState variant={EmptyStateVariant.sm} titleText={emptyStateTitle} icon={CodeIcon} headingLevel="h4">
                 {!isReadOnly && (
                   <EmptyStateFooter>
                     <EmptyStateActions>
@@ -569,45 +567,50 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
             trigger: 'mouseenter focus'
           };
 
-          const editorHeader = (
-            <div className={css(styles.codeEditorHeader)}>
-              {
-                <div className={css(styles.codeEditorControls)}>
-                  <CodeEditorContext.Provider value={{ code: value }}>
-                    {isCopyEnabled && (!showEmptyState || !!value) && (
-                      <CodeEditorControl
-                        icon={<CopyIcon />}
-                        aria-label={copyButtonAriaLabel}
-                        tooltipProps={{
-                          ...tooltipProps,
-                          'aria-live': 'polite',
-                          content: <div>{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}</div>,
-                          exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay,
-                          onTooltipHidden: () => this.setState({ copied: false })
-                        }}
-                        onClick={this.copyCode}
-                      />
-                    )}
-                    {isUploadEnabled && (
-                      <CodeEditorControl
-                        icon={<UploadIcon />}
-                        aria-label={uploadButtonAriaLabel}
-                        tooltipProps={{ content: <div>{uploadButtonToolTipText}</div>, ...tooltipProps }}
-                        onClick={open}
-                      />
-                    )}
-                    {isDownloadEnabled && (!showEmptyState || !!value) && (
-                      <CodeEditorControl
-                        icon={<DownloadIcon />}
-                        aria-label={downloadButtonAriaLabel}
-                        tooltipProps={{ content: <div>{downloadButtonToolTipText}</div>, ...tooltipProps }}
-                        onClick={this.download}
-                      />
-                    )}
-                    {customControls && customControls}
-                  </CodeEditorContext.Provider>
-                </div>
-              }
+          const hasEditorHeaderContent =
+            ((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) ||
+            isUploadEnabled ||
+            customControls ||
+            headerMainContent ||
+            !!shortcutsPopoverProps.bodyContent;
+
+          const editorHeaderContent = (
+            <React.Fragment>
+              <div className={css(styles.codeEditorControls)}>
+                <CodeEditorContext.Provider value={{ code: value }}>
+                  {isCopyEnabled && (!showEmptyState || !!value) && (
+                    <CodeEditorControl
+                      icon={<CopyIcon />}
+                      aria-label={copyButtonAriaLabel}
+                      tooltipProps={{
+                        ...tooltipProps,
+                        'aria-live': 'polite',
+                        content: <div>{copied ? copyButtonSuccessTooltipText : copyButtonToolTipText}</div>,
+                        exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay,
+                        onTooltipHidden: () => this.setState({ copied: false })
+                      }}
+                      onClick={this.copyCode}
+                    />
+                  )}
+                  {isUploadEnabled && (
+                    <CodeEditorControl
+                      icon={<UploadIcon />}
+                      aria-label={uploadButtonAriaLabel}
+                      tooltipProps={{ content: <div>{uploadButtonToolTipText}</div>, ...tooltipProps }}
+                      onClick={open}
+                    />
+                  )}
+                  {isDownloadEnabled && (!showEmptyState || !!value) && (
+                    <CodeEditorControl
+                      icon={<DownloadIcon />}
+                      aria-label={downloadButtonAriaLabel}
+                      tooltipProps={{ content: <div>{downloadButtonToolTipText}</div>, ...tooltipProps }}
+                      onClick={this.download}
+                    />
+                  )}
+                  {customControls && customControls}
+                </CodeEditorContext.Provider>
+              </div>
               {<div className={css(styles.codeEditorHeaderMain)}>{headerMainContent}</div>}
               {!!shortcutsPopoverProps.bodyContent && (
                 <div className={`${styles.codeEditor}__keyboard-shortcuts`}>
@@ -618,6 +621,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   </Popover>
                 </div>
               )}
+            </React.Fragment>
+          );
+
+          const editorHeader = (
+            <div className={css(styles.codeEditorHeader, isHeaderPlain && styles.modifiers.plain)}>
+              {hasEditorHeaderContent && (
+                <div className={css(styles.codeEditorHeaderContent)}>{editorHeaderContent}</div>
+              )}
               {isLanguageLabelVisible && (
                 <div className={css(styles.codeEditorTab)}>
                   <span className={css(styles.codeEditorTabIcon)}>
@@ -631,7 +642,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
 
           const editor = (
             <div className={css(styles.codeEditorCode)} ref={this.wrapperRef} tabIndex={0} dir="ltr">
-              <MonacoEditor
+              <Editor
                 height={height}
                 width={width}
                 language={language}
@@ -639,8 +650,9 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                 options={options}
                 overrideServices={overrideServices}
                 onChange={this.onChange}
-                editorDidMount={this.editorDidMount}
+                onMount={this.editorDidMount}
                 theme={isDarkTheme ? 'vs-dark' : 'vs-light'}
+                {...editorProps}
               />
             </div>
           );
@@ -652,14 +664,14 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   {...getRootProps({
                     onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
                   })}
-                  className={`${fileUploadStyles.fileUpload} ${isDragActive && fileUploadStyles.modifiers.dragHover} ${
-                    isLoading && fileUploadStyles.modifiers.loading
-                  }`}
+                  className={css(isLoading && fileUploadStyles.modifiers.loading)}
                 >
                   {editorHeader}
-                  <div className={css(styles.codeEditorMain)}>
-                    <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
-                    {(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
+                  <div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
+                    <div className={css(styles.codeEditorUpload)}>
+                      <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
+                      {(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
+                    </div>
                   </div>
                 </div>
               ) : (

package/src/components/CodeEditor/CodeEditorControl.tsx

@@ -38,7 +38,7 @@ export const CodeEditorControl: React.FunctionComponent<CodeEditorControlProps>
 
   return isVisible ? (
     <Tooltip {...tooltipProps}>
-      <Button className={className} onClick={onCustomClick} variant="control" aria-label={ariaLabel} {...props}>
+      <Button className={className} onClick={onCustomClick} variant="plain" aria-label={ariaLabel} {...props}>
         {icon}
       </Button>
     </Tooltip>

package/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -1,46 +1,76 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, act } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
+import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-});
-
-describe('CodeEditor', () => {
-  beforeAll(() => {
-    window.HTMLCanvasElement.prototype.getContext = () => ({}) as any;
-  });
+jest.mock('@monaco-editor/react', () => jest.fn(() => <div data-testid="mock-editor"></div>));
 
-  test('matches snapshot without props', () => {
-    const { asFragment } = render(<CodeEditor />);
-    expect(asFragment()).toMatchSnapshot();
-  });
+test('Matches snapshot without props', () => {
+  const { asFragment } = render(<CodeEditor code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with control buttons enabled', () => {
+  const { asFragment } = render(<CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled code="test" />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test(`Renders with default classes ${styles.codeEditor}, ${styles.codeEditorMain}, ${styles.codeEditorCode}`, () => {
+  render(<CodeEditor />);
+  expect(screen.getByTestId('mock-editor').parentElement).toHaveClass(styles.codeEditorCode);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorMain);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(styles.codeEditor);
+});
+
+test('Renders custom class when className is passed', () => {
+  render(<CodeEditor className="custom" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass('custom');
+});
+
+test(`Renders with ${styles.modifiers.readOnly} when isReadOnly = true`, () => {
+  render(<CodeEditor isReadOnly />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+    styles.modifiers.readOnly
+  );
+});
+
+test(`Renders with ${styles.codeEditorUpload} when isUploadEnabled = true`, () => {
+  render(<CodeEditor isUploadEnabled code="test" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement).toHaveClass(styles.codeEditorUpload);
+});
+
+test(`Renders with empty state when code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with empty state when isUploadEnabled = true and code = undefined`, () => {
+  render(<CodeEditor emptyState={<div>empty</div>} isUploadEnabled />);
+  expect(screen.getByText('empty')).toBeInTheDocument();
+});
+
+test(`Renders with language label when isLanguageLabelVisible`, () => {
+  render(<CodeEditor isLanguageLabelVisible language={Language.java} />);
+  expect(screen.getByText('JAVA')).toBeInTheDocument();
+});
+
+test(`Renders with custom controls when customControls is passed`, () => {
+  render(<CodeEditor customControls={<div>control</div>} />);
+  expect(screen.getByText('control')).toBeInTheDocument();
+});
+
+test(`Renders with custom header content when headerMainContent is passed`, () => {
+  render(<CodeEditor headerMainContent="header content" />);
+  expect(screen.getByText('header content')).toBeInTheDocument();
+});
 
-  test('matches snapshot with all props', () => {
-    const { asFragment } = render(
-      <CodeEditor
-        isReadOnly
-        isDarkTheme
-        isLineNumbersVisible={false}
-        isUploadEnabled
-        isLanguageLabelVisible
-        isDownloadEnabled
-        isCopyEnabled
-        height="400px"
-        code={'test'}
-        language={Language.javascript}
-      />
-    );
-    expect(asFragment()).toMatchSnapshot();
+test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => {
+  render(
+    <CodeEditor shortcutsPopoverButtonText="shortcuts-button" shortcutsPopoverProps={{ bodyContent: 'shortcuts' }} />
+  );
+  expect(screen.getByText('shortcuts-button')).toBeInTheDocument();
+  act(() => {
+    screen.getByText('shortcuts-button').click();
   });
+  expect(screen.getByText('shortcuts')).toBeInTheDocument();
 });

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { CodeEditorControl } from '../CodeEditorControl';
+
+test('Matches snapshot', () => {
+  const { asFragment } = render(<CodeEditorControl icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders with custom class when className is passed', () => {
+  render(<CodeEditorControl className="custom" icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(screen.getByText('icon').parentElement).toHaveClass('custom');
+});
+
+test('Renders with accessible name when aria-label is passed', () => {
+  render(<CodeEditorControl aria-label="aria-test" icon={<div>icon</div>} onClick={jest.fn()} />);
+  expect(screen.getByLabelText('aria-test'));
+});