@patternfly/react-code-editor 5.2.0-prerelease.9 → 5.3.0-prerelease.1

package/src/components/CodeEditor/CodeEditor.tsx

@@ -17,7 +17,7 @@ import {
   TooltipPosition,
   EmptyStateHeader
 } 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 +28,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 +137,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. */
@@ -496,7 +501,8 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
       shortcutsPopoverProps: shortcutsPopoverPropsProp,
       showEditor,
       options: optionsProp,
-      overrideServices
+      overrideServices,
+      editorProps
     } = this.props;
     const shortcutsPopoverProps: PopoverProps = {
       ...CodeEditor.defaultProps.shortcutsPopoverProps,
@@ -631,7 +637,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 +645,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>
           );

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

@@ -1,46 +1,79 @@
 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';
+import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
 
-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 ${fileUploadStyles.fileUpload} when isUploadEnabled = true`, () => {
+  render(<CodeEditor isUploadEnabled code="test" />);
+  expect(screen.getByTestId('mock-editor').parentElement?.parentElement?.parentElement).toHaveClass(
+    fileUploadStyles.fileUpload
+  );
+});
+
+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'));
+});

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CodeEditor matches snapshot with all props 1`] = `
+exports[`Matches snapshot with control buttons enabled 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-code-editor pf-m-read-only"
+    class="pf-v5-c-code-editor"
   >
     <div
       class="pf-v5-c-file-upload false false"
@@ -101,32 +101,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
         <div
           class="pf-v5-c-code-editor__header-main"
         />
-        <div
-          class="pf-v5-c-code-editor__tab"
-        >
-          <span
-            class="pf-v5-c-code-editor__tab-icon"
-          >
-            <svg
-              aria-hidden="true"
-              class="pf-v5-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 640 512"
-              width="1em"
-            >
-              <path
-                d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
-              />
-            </svg>
-          </span>
-          <span
-            class="pf-v5-c-code-editor__tab-text"
-          >
-            JAVASCRIPT
-          </span>
-        </div>
       </div>
       <div
         class="pf-v5-c-code-editor__main"
@@ -142,214 +116,8 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
           tabindex="0"
         >
           <div
-            class="react-monaco-editor-container"
-            data-keybinding-context="2"
-            data-mode-id="plaintext"
-            style="height: 400px;"
-          >
-            <div
-              class="monaco-editor showUnused showDeprecated vs-dark"
-              data-uri="inmemory://model/2"
-              style="width: 5px; height: 5px;"
-            >
-              <div
-                class="overflow-guard"
-                data-mprt="3"
-                style="width: 5px; height: 5px;"
-              >
-                <div
-                  aria-hidden="true"
-                  class="margin"
-                  role="presentation"
-                  style="position: absolute;"
-                >
-                  <div
-                    class="glyph-margin"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="margin-view-zones"
-                    role="presentation"
-                    style="position: absolute;"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="margin-view-overlays"
-                    role="presentation"
-                    style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
-                  />
-                </div>
-                <div
-                  class="monaco-scrollable-element editor-scrollable vs-dark"
-                  data-mprt="5"
-                  role="presentation"
-                  style="position: absolute; overflow: hidden; left: 26px; width: -21px; height: 5px;"
-                >
-                  <div
-                    class="lines-content monaco-editor-background"
-                    style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
-                  >
-                    <div
-                      aria-hidden="true"
-                      class="view-overlays"
-                      role="presentation"
-                      style="position: absolute; height: 0px;"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="view-rulers"
-                      role="presentation"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="blockDecorations-container"
-                      role="presentation"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="view-zones"
-                      role="presentation"
-                      style="position: absolute;"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="view-lines monaco-mouse-cursor-text"
-                      data-mprt="7"
-                      role="presentation"
-                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 54px; height: 19px;"
-                    >
-                      <div
-                        class="view-line"
-                        style="top:0px;height:19px;"
-                      >
-                        <span>
-                          <span
-                            class="mtk1"
-                          >
-                            test
-                          </span>
-                        </span>
-                      </div>
-                    </div>
-                    <div
-                      class="contentWidgets"
-                      data-mprt="1"
-                      style="position: absolute; top: 0px;"
-                    />
-                    <div
-                      aria-hidden="true"
-                      class="cursors-layer cursor-line-style cursor-solid"
-                      role="presentation"
-                    >
-                      <div
-                        class="cursor monaco-mouse-cursor-text"
-                        style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    aria-hidden="true"
-                    class="invisible scrollbar horizontal"
-                    role="presentation"
-                    style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
-                  >
-                    <div
-                      class="slider"
-                      style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
-                    />
-                  </div>
-                  <canvas
-                    aria-hidden="true"
-                    class="decorationsOverviewRuler"
-                    height="5"
-                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
-                    width="14"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="invisible scrollbar vertical"
-                    role="presentation"
-                    style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
-                  >
-                    <div
-                      class="slider"
-                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
-                    />
-                  </div>
-                </div>
-                <div
-                  aria-hidden="true"
-                  role="presentation"
-                />
-                <textarea
-                  aria-autocomplete="both"
-                  aria-haspopup="false"
-                  aria-label="Editor content;Press Alt+F1 for Accessibility Options."
-                  aria-multiline="true"
-                  aria-roledescription="editor"
-                  autocapitalize="off"
-                  autocomplete="off"
-                  autocorrect="off"
-                  class="inputarea monaco-mouse-cursor-text"
-                  data-mprt="6"
-                  role="textbox"
-                  spellcheck="false"
-                  style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
-                  tabindex="-1"
-                  wrap="off"
-                />
-                <div
-                  class="monaco-editor-background textAreaCover"
-                  style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
-                />
-                <div
-                  class="overlayWidgets"
-                  data-mprt="4"
-                >
-                  <div
-                    style="position: absolute;"
-                    widgetid="editor.contrib.quickInputWidget"
-                  />
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="minimap slider-mouseover"
-                  data-mprt="8"
-                  role="presentation"
-                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
-                >
-                  <div
-                    class="minimap-shadow-hidden"
-                    style="height: 5px;"
-                  />
-                  <canvas
-                    height="5"
-                    style="position: absolute; left: 0px; width: 0px; height: 5px;"
-                    width="0"
-                  />
-                  <canvas
-                    class="minimap-decorations-layer"
-                    height="5"
-                    style="position: absolute; left: 0px; width: 0px; height: 5px;"
-                    width="0"
-                  />
-                  <div
-                    class="minimap-slider"
-                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
-                  >
-                    <div
-                      class="minimap-slider-horizontal"
-                      style="position: absolute;"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                class="overflowingContentWidgets"
-                data-mprt="2"
-              />
-            </div>
-          </div>
+            data-testid="mock-editor"
+          />
         </div>
       </div>
     </div>
@@ -357,7 +125,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`CodeEditor matches snapshot without props 1`] = `
+exports[`Matches snapshot without props 1`] = `
 <DocumentFragment>
   <div
     class="pf-v5-c-code-editor"
@@ -381,209 +149,8 @@ exports[`CodeEditor matches snapshot without props 1`] = `
         tabindex="0"
       >
         <div
-          class="react-monaco-editor-container"
-          data-keybinding-context="1"
-          data-mode-id="plaintext"
-        >
-          <div
-            class="monaco-editor showUnused showDeprecated vs"
-            data-uri="inmemory://model/1"
-            style="width: 5px; height: 5px;"
-          >
-            <div
-              class="overflow-guard"
-              data-mprt="3"
-              style="width: 5px; height: 5px;"
-            >
-              <div
-                aria-hidden="true"
-                class="margin"
-                role="presentation"
-                style="position: absolute;"
-              >
-                <div
-                  class="glyph-margin"
-                />
-                <div
-                  aria-hidden="true"
-                  class="margin-view-zones"
-                  role="presentation"
-                  style="position: absolute;"
-                />
-                <div
-                  aria-hidden="true"
-                  class="margin-view-overlays"
-                  role="presentation"
-                  style="position: absolute; width: 1px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px;"
-                />
-              </div>
-              <div
-                class="monaco-scrollable-element editor-scrollable vs"
-                data-mprt="5"
-                role="presentation"
-                style="position: absolute; overflow: hidden; left: 51px; width: -46px; height: 5px;"
-              >
-                <div
-                  class="lines-content monaco-editor-background"
-                  style="position: absolute; overflow: hidden; width: 1000000px; height: 1000000px; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="view-overlays"
-                    role="presentation"
-                    style="position: absolute; height: 0px;"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="view-rulers"
-                    role="presentation"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="blockDecorations-container"
-                    role="presentation"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="view-zones"
-                    role="presentation"
-                    style="position: absolute;"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="view-lines monaco-mouse-cursor-text"
-                    data-mprt="7"
-                    role="presentation"
-                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 35px; height: 19px;"
-                  >
-                    <div
-                      class="view-line"
-                      style="top:0px;height:19px;"
-                    >
-                      <span>
-                        <span />
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="contentWidgets"
-                    data-mprt="1"
-                    style="position: absolute; top: 0px;"
-                  />
-                  <div
-                    aria-hidden="true"
-                    class="cursors-layer cursor-line-style cursor-solid"
-                    role="presentation"
-                  >
-                    <div
-                      class="cursor monaco-mouse-cursor-text"
-                      style="height: 19px; top: 0px; left: 0px; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; display: none; visibility: hidden;"
-                    />
-                  </div>
-                </div>
-                <div
-                  aria-hidden="true"
-                  class="invisible scrollbar horizontal"
-                  role="presentation"
-                  style="position: absolute; width: 0px; height: 12px; left: 0px; bottom: 0px;"
-                >
-                  <div
-                    class="slider"
-                    style="position: absolute; top: 0px; left: 0px; height: 12px; transform: translate3d(0px, 0px, 0px); contain: strict; width: 20px;"
-                  />
-                </div>
-                <canvas
-                  aria-hidden="true"
-                  class="decorationsOverviewRuler"
-                  height="5"
-                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
-                  width="14"
-                />
-                <div
-                  aria-hidden="true"
-                  class="invisible scrollbar vertical"
-                  role="presentation"
-                  style="position: absolute; width: 14px; height: 5px; right: 0px; top: 0px;"
-                >
-                  <div
-                    class="slider"
-                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
-                  />
-                </div>
-              </div>
-              <div
-                aria-hidden="true"
-                role="presentation"
-              />
-              <textarea
-                aria-autocomplete="both"
-                aria-haspopup="false"
-                aria-label="Editor content;Press Alt+F1 for Accessibility Options."
-                aria-multiline="true"
-                aria-roledescription="editor"
-                autocapitalize="off"
-                autocomplete="off"
-                autocorrect="off"
-                class="inputarea monaco-mouse-cursor-text"
-                data-mprt="6"
-                role="textbox"
-                spellcheck="false"
-                style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
-                tabindex="-1"
-                wrap="off"
-              />
-              <div
-                class="monaco-editor-background textAreaCover line-numbers"
-                style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px;"
-              />
-              <div
-                class="overlayWidgets"
-                data-mprt="4"
-              >
-                <div
-                  style="position: absolute;"
-                  widgetid="editor.contrib.quickInputWidget"
-                />
-              </div>
-              <div
-                aria-hidden="true"
-                class="minimap slider-mouseover"
-                data-mprt="8"
-                role="presentation"
-                style="position: absolute; left: 0px; width: 0px; height: 5px;"
-              >
-                <div
-                  class="minimap-shadow-hidden"
-                  style="height: 5px;"
-                />
-                <canvas
-                  height="5"
-                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
-                  width="0"
-                />
-                <canvas
-                  class="minimap-decorations-layer"
-                  height="5"
-                  style="position: absolute; left: 0px; width: 0px; height: 5px;"
-                  width="0"
-                />
-                <div
-                  class="minimap-slider"
-                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; width: 0px;"
-                >
-                  <div
-                    class="minimap-slider-horizontal"
-                    style="position: absolute;"
-                  />
-                </div>
-              </div>
-            </div>
-            <div
-              class="overflowingContentWidgets"
-              data-mprt="2"
-            />
-          </div>
-        </div>
+          data-testid="mock-editor"
+        />
       </div>
     </div>
   </div>