@patternfly/react-code-editor 6.2.1-prerelease.3 → 6.2.1-prerelease.4

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.2.1-prerelease.3...@patternfly/react-code-editor@6.2.1-prerelease.4) (2025-04-14)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
 ## [6.2.1-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.2.1-prerelease.2...@patternfly/react-code-editor@6.2.1-prerelease.3) (2025-04-11)
 
 **Note:** Version bump only for package @patternfly/react-code-editor

package/dist/esm/components/CodeEditor/CodeEditor.d.ts

@@ -1,9 +1,8 @@
-import { Component } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
 import { TooltipPosition } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { EditorProps, Monaco } from '@monaco-editor/react';
 import type { editor } from 'monaco-editor';
-import { FileRejection } from 'react-dropzone';
 export type ChangeHandler = (value: string, event: editor.IModelContentChangedEvent) => void;
 export type EditorDidMount = (editor: editor.IStandaloneCodeEditor, monaco: Monaco) => void;
 export interface Shortcut {
@@ -88,7 +87,7 @@ export declare enum Language {
     yaml = "yaml"
 }
 /** The main code editor component. */
-export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+export interface CodeEditorProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
     /** Additional classes added to the code editor. */
     className?: string;
     /** Code displayed in code editor. */
@@ -102,7 +101,7 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     /** A single node or array of nodes - ideally the code editor controls component - to display
      * above code editor.
      */
-    customControls?: React.ReactNode | React.ReactNode[];
+    customControls?: ReactNode | ReactNode[];
     /** Accessible label for the download button. */
     downloadButtonAriaLabel?: string;
     /** Text to display in the tooltip on the download button. */
@@ -112,15 +111,15 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     /** 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;
+    emptyState?: ReactNode;
     /** Override default empty state body text. */
-    emptyStateBody?: React.ReactNode;
+    emptyStateBody?: ReactNode;
     /** Override default empty state button text. */
-    emptyStateButton?: React.ReactNode;
+    emptyStateButton?: ReactNode;
     /** Override default empty state link text. */
-    emptyStateLink?: React.ReactNode;
+    emptyStateLink?: ReactNode;
     /** Override default empty state title text. */
-    emptyStateTitle?: React.ReactNode;
+    emptyStateTitle?: ReactNode;
     /** Editor header main content title. */
     headerMainContent?: string;
     /** Height of code editor. 'sizeToFit' will automatically change the height
@@ -151,13 +150,16 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     /** Language displayed in the editor. */
     language?: Language;
     /** The loading screen before the editor will be loaded. Defaults to 'loading...'. */
-    loading?: React.ReactNode;
+    loading?: ReactNode;
     /** Function which fires each time the content of the code editor is manually changed. Does
      * not fire when a file is uploaded.
      */
     onChange?: ChangeHandler;
     /** Function which fires each time the code changes in the code editor. */
     onCodeChange?: (value: string) => void;
+    /** Function which fires when the code is downloaded. Defaults to a function that
+     * downloads the current editor content. */
+    onDownload?: (value: string, fileName: string) => void;
     /** Callback which fires after the code editor is mounted containing a reference to the
      * monaco editor and the monaco instance.
      */
@@ -167,17 +169,17 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     /** Refer to Monaco interface {monaco.editor.IEditorOverrideServices}. */
     overrideServices?: editor.IEditorOverrideServices;
     /** Text to show in the button to open the shortcut popover. */
-    shortcutsPopoverButtonText: string;
+    shortcutsPopoverButtonText?: string;
     /** Properties for the shortcut popover. */
     shortcutsPopoverProps?: PopoverProps;
     /** Flag to show the editor. */
     showEditor?: boolean;
     /** The delay before tooltip fades after code copied. */
-    toolTipCopyExitDelay: number;
+    toolTipCopyExitDelay?: number;
     /** The entry and exit delay for all tooltips. */
-    toolTipDelay: number;
+    toolTipDelay?: number;
     /** The max width of the tooltips on all button. */
-    toolTipMaxWidth: string;
+    toolTipMaxWidth?: string;
     /** The position of tooltips on all buttons. */
     toolTipPosition?: TooltipPosition | 'auto' | 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
     /** Accessible label for the upload button. */
@@ -187,46 +189,8 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
     /** Width of code editor. Defaults to 100%. */
     width?: string;
 }
-interface CodeEditorState {
-    height: string;
-    prevPropsCode: string;
-    value: string;
-    filename: string;
-    isLoading: boolean;
-    showEmptyState: boolean;
-    copied: boolean;
-}
-declare class CodeEditor extends Component<CodeEditorProps, CodeEditorState> {
-    static displayName: string;
-    private editor;
-    private wrapperRef;
-    private ref;
-    private timer;
-    private observer;
-    static defaultProps: CodeEditorProps;
-    static getExtensionFromLanguage(language: Language): string;
-    constructor(props: CodeEditorProps);
-    setHeightToFitContent(): void;
-    onChange: ChangeHandler;
-    static getDerivedStateFromProps(nextProps: CodeEditorProps, prevState: CodeEditorState): {
-        value: string;
-        prevPropsCode: string;
-    };
-    handleResize: () => void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    handleGlobalKeys: (event: KeyboardEvent) => void;
-    editorDidMount: EditorDidMount;
-    handleFileChange: (value: string, filename: string) => void;
-    handleFileReadStarted: () => void;
-    handleFileReadFinished: () => void;
-    readFile(fileHandle: Blob): Promise<string>;
-    onDropAccepted: (acceptedFiles: File[]) => void;
-    onDropRejected: (rejectedFiles: FileRejection[]) => void;
-    copyCode: () => void;
-    download: () => void;
-    toggleEmptyState: () => void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-export { CodeEditor };
+export declare const CodeEditor: {
+    ({ className, code, copyButtonAriaLabel, copyButtonSuccessTooltipText, copyButtonToolTipText, customControls, downloadButtonAriaLabel, downloadButtonToolTipText, downloadFileName, editorProps, emptyState, emptyStateBody, emptyStateButton, emptyStateLink, emptyStateTitle, headerMainContent, height, isCopyEnabled, isDarkTheme, isDownloadEnabled, isFullHeight, isHeaderPlain, isLanguageLabelVisible, isLineNumbersVisible, isMinimapVisible, isReadOnly, isUploadEnabled, language, loading, onChange, onCodeChange, onDownload, onEditorDidMount, options, overrideServices, shortcutsPopoverButtonText, shortcutsPopoverProps, showEditor, toolTipCopyExitDelay, toolTipDelay, toolTipMaxWidth, toolTipPosition, uploadButtonAriaLabel, uploadButtonToolTipText, width }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=CodeEditor.d.ts.map

package/dist/esm/components/CodeEditor/CodeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/CodeEditor/CodeEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/CodeEditor/CodeEditor.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Component, createRef, Fragment } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor.mjs';
 import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload.mjs';
@@ -94,246 +94,168 @@ export var Language;
     Language["xml"] = "xml";
     Language["yaml"] = "yaml";
 })(Language || (Language = {}));
-class CodeEditor extends Component {
-    static getExtensionFromLanguage(language) {
-        switch (language) {
-            case Language.shell:
-                return 'sh';
-            case Language.ruby:
-                return 'rb';
-            case Language.perl:
-                return 'pl';
-            case Language.python:
-                return 'py';
-            case Language.mysql:
-                return 'sql';
-            case Language.javascript:
-                return 'js';
-            case Language.typescript:
-                return 'ts';
-            case Language.markdown:
-                return 'md';
-            case Language.plaintext:
-                return 'txt';
-            default:
-                return language.toString();
-        }
+const getExtensionFromLanguage = (language) => {
+    switch (language) {
+        case Language.shell:
+            return 'sh';
+        case Language.ruby:
+            return 'rb';
+        case Language.perl:
+            return 'pl';
+        case Language.python:
+            return 'py';
+        case Language.mysql:
+            return 'sql';
+        case Language.javascript:
+            return 'js';
+        case Language.typescript:
+            return 'ts';
+        case Language.markdown:
+            return 'md';
+        case Language.plaintext:
+            return 'txt';
+        default:
+            return language.toString();
     }
-    constructor(props) {
-        super(props);
-        this.editor = null;
-        this.wrapperRef = createRef();
-        this.ref = createRef();
-        this.timer = null;
-        this.observer = () => { };
-        this.onChange = (value, event) => {
-            if (this.props.height === 'sizeToFit') {
-                this.setHeightToFitContent();
-            }
-            if (this.props.onChange) {
-                this.props.onChange(value, event);
-            }
-            this.setState({ value });
-            this.props.onCodeChange(value);
-        };
-        this.handleResize = () => {
-            if (this.editor) {
-                this.editor.layout({ width: 0, height: 0 }); // ensures the editor won't take up more space than it needs
-                this.editor.layout();
-            }
-        };
-        this.handleGlobalKeys = (event) => {
-            var _a;
-            if (this.wrapperRef.current === document.activeElement && (event.key === 'ArrowDown' || event.key === ' ')) {
-                (_a = this.editor) === null || _a === void 0 ? void 0 : _a.focus();
-                event.preventDefault();
-            }
-        };
-        this.editorDidMount = (editor, monaco) => {
-            // eslint-disable-next-line no-bitwise
-            editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Tab, () => this.wrapperRef.current.focus());
-            Array.from(document.getElementsByClassName('monaco-editor')).forEach((editorElement) => editorElement.removeAttribute('role'));
-            this.props.onEditorDidMount(editor, monaco);
-            this.editor = editor;
-            if (this.props.height === 'sizeToFit') {
-                this.setHeightToFitContent();
-            }
-        };
-        this.handleFileChange = (value, filename) => {
-            this.setState({
-                value,
-                filename
-            });
-            this.props.onCodeChange(value);
-        };
-        this.handleFileReadStarted = () => this.setState({ isLoading: true });
-        this.handleFileReadFinished = () => this.setState({ isLoading: false });
-        this.onDropAccepted = (acceptedFiles) => {
-            if (acceptedFiles.length > 0) {
-                const fileHandle = acceptedFiles[0];
-                this.handleFileChange('', fileHandle.name); // Show the filename while reading
-                this.handleFileReadStarted();
-                this.readFile(fileHandle)
-                    .then((data) => {
-                    this.handleFileReadFinished();
-                    this.toggleEmptyState();
-                    this.handleFileChange(data, fileHandle.name);
-                })
-                    .catch((error) => {
-                    // eslint-disable-next-line no-console
-                    console.error('error', error);
-                    this.handleFileReadFinished();
-                    this.handleFileChange('', ''); // Clear the filename field on a failure
-                });
-            }
+};
+/**
+ * Downloads a file to a users device given its string content and a full file name.
+ */
+const defaultOnDownload = (value, fileName) => {
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(new Blob([value], { type: 'text' }));
+    link.download = fileName;
+    link.click();
+};
+export const CodeEditor = ({ className = '', code = '', copyButtonAriaLabel = 'Copy code to clipboard', copyButtonSuccessTooltipText = 'Content added to clipboard', copyButtonToolTipText = 'Copy to clipboard', customControls = null, downloadButtonAriaLabel = 'Download code', downloadButtonToolTipText = 'Download', downloadFileName = Date.now().toString(), editorProps, emptyState = '', emptyStateBody = 'Drag and drop a file or upload one.', emptyStateButton = 'Browse', emptyStateLink = 'Start from scratch', emptyStateTitle = 'Start editing', headerMainContent = '', height, isCopyEnabled = false, isDarkTheme = false, isDownloadEnabled = false, isFullHeight = false, isHeaderPlain = false, isLanguageLabelVisible = false, isLineNumbersVisible = true, isMinimapVisible = false, isReadOnly = false, isUploadEnabled = false, language = Language.plaintext, loading = '', onChange = () => { }, onCodeChange = () => { }, onDownload = defaultOnDownload, onEditorDidMount = () => { }, options = {}, overrideServices = {}, shortcutsPopoverButtonText = 'View Shortcuts', shortcutsPopoverProps = { bodyContent: '', 'aria-label': 'Keyboard Shortcuts' }, showEditor = true, toolTipCopyExitDelay = 1600, toolTipDelay = 300, toolTipMaxWidth = '100px', toolTipPosition = 'top', uploadButtonAriaLabel = 'Upload code', uploadButtonToolTipText = 'Upload', width = '' }) => {
+    const [value, setValue] = useState(code);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showEmptyState, setShowEmptyState] = useState(true);
+    const [copied, setCopied] = useState(false);
+    const editorRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const ref = useRef(null);
+    const observer = useRef(() => { });
+    const setHeightToFitContent = () => {
+        var _a, _b, _c;
+        const contentHeight = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.getContentHeight();
+        const layoutInfo = (_b = editorRef.current) === null || _b === void 0 ? void 0 : _b.getLayoutInfo();
+        (_c = editorRef.current) === null || _c === void 0 ? void 0 : _c.layout({ width: layoutInfo.width, height: contentHeight });
+    };
+    const onModelChange = (value, event) => {
+        if (height === 'sizeToFit') {
+            setHeightToFitContent();
+        }
+        if (onChange) {
+            onChange(value, event);
+        }
+        setValue(value);
+        onCodeChange(value);
+    };
+    const handleResize = () => {
+        if (editorRef.current) {
+            editorRef.current.layout({ width: 0, height: 0 }); // ensures the editor won't take up more space than it needs
+            editorRef.current.layout();
+        }
+    };
+    const handleGlobalKeys = (event) => {
+        var _a;
+        if (wrapperRef.current === document.activeElement && (event.key === 'ArrowDown' || event.key === ' ')) {
+            (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            event.preventDefault();
+        }
+    };
+    // if the code changes due to the prop changing
+    // set the value to the code prop
+    useEffect(() => setValue(code), [code]);
+    useEffect(() => {
+        document.addEventListener('keydown', handleGlobalKeys);
+        observer.current = getResizeObserver(ref.current, handleResize, true);
+        handleResize();
+        return () => {
+            document.removeEventListener('keydown', handleGlobalKeys);
+            observer.current();
         };
-        this.onDropRejected = (rejectedFiles) => {
-            if (rejectedFiles.length > 0) {
+    }, []);
+    const editorDidMount = (editor, monaco) => {
+        // eslint-disable-next-line no-bitwise
+        editor.addCommand(monaco.KeyMod.Shift | monaco.KeyCode.Tab, () => wrapperRef.current.focus());
+        Array.from(document.getElementsByClassName('monaco-editor')).forEach((editorElement) => editorElement.removeAttribute('role'));
+        onEditorDidMount(editor, monaco);
+        editorRef.current = editor;
+        if (height === 'sizeToFit') {
+            setHeightToFitContent();
+        }
+    };
+    const handleFileChange = (value) => {
+        setValue(value);
+        onCodeChange(value);
+    };
+    const handleFileReadStarted = () => setIsLoading(true);
+    const handleFileReadFinished = () => setIsLoading(false);
+    const readFile = (fileHandle) => new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsText(fileHandle);
+    });
+    const onDropAccepted = (acceptedFiles) => {
+        if (acceptedFiles.length > 0) {
+            const fileHandle = acceptedFiles[0];
+            handleFileChange(''); // Show the filename while reading
+            handleFileReadStarted();
+            readFile(fileHandle)
+                .then((data) => {
+                handleFileReadFinished();
+                setShowEmptyState(false);
+                handleFileChange(data);
+            })
+                .catch((error) => {
                 // eslint-disable-next-line no-console
-                console.error('There was an error accepting that dropped file'); // TODO
-            }
-        };
-        this.copyCode = () => {
-            navigator.clipboard.writeText(this.state.value);
-            this.setState({ copied: true });
-        };
-        this.download = () => {
-            const { value } = this.state;
-            const element = document.createElement('a');
-            const file = new Blob([value], { type: 'text' });
-            element.href = URL.createObjectURL(file);
-            element.download = `${this.props.downloadFileName}.${CodeEditor.getExtensionFromLanguage(this.props.language)}`;
-            document.body.appendChild(element); // Required for this to work in FireFox
-            element.click();
-        };
-        this.toggleEmptyState = () => {
-            this.setState({ showEmptyState: false });
-        };
-        this.state = {
-            height: this.props.height,
-            prevPropsCode: this.props.code,
-            value: this.props.code,
-            filename: '',
-            isLoading: false,
-            showEmptyState: true,
-            copied: false
-        };
-    }
-    setHeightToFitContent() {
-        const contentHeight = this.editor.getContentHeight();
-        const layoutInfo = this.editor.getLayoutInfo();
-        this.editor.layout({ width: layoutInfo.width, height: contentHeight });
-    }
-    // this function is only called when the props change
-    // the only conflict is between props.code and state.value
-    static getDerivedStateFromProps(nextProps, prevState) {
-        // if the code changes due to the props.code changing
-        // set the value to props.code
-        if (nextProps.code !== prevState.prevPropsCode) {
-            return {
-                value: nextProps.code,
-                prevPropsCode: nextProps.code
-            };
+                console.error('error', error);
+                handleFileReadFinished();
+                handleFileChange('');
+            });
         }
-        // else, don't need to change the state.value
-        // because the onChange function will do all the work
-        return null;
-    }
-    componentDidMount() {
-        document.addEventListener('keydown', this.handleGlobalKeys);
-        this.observer = getResizeObserver(this.ref.current, this.handleResize, true);
-        this.handleResize();
-    }
-    componentWillUnmount() {
-        document.removeEventListener('keydown', this.handleGlobalKeys);
-        this.observer();
-    }
-    readFile(fileHandle) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => resolve(reader.result);
-            reader.onerror = () => reject(reader.error);
-            reader.readAsText(fileHandle);
-        });
-    }
-    render() {
-        const { height, value, isLoading, showEmptyState, copied } = this.state;
-        const { isDarkTheme, width, className, isCopyEnabled, copyButtonSuccessTooltipText, isReadOnly, isUploadEnabled, isLanguageLabelVisible, copyButtonAriaLabel, copyButtonToolTipText, uploadButtonAriaLabel, uploadButtonToolTipText, downloadButtonAriaLabel, downloadButtonToolTipText, toolTipDelay, toolTipCopyExitDelay, toolTipMaxWidth, toolTipPosition, isLineNumbersVisible, isDownloadEnabled, language, emptyState: providedEmptyState, emptyStateTitle, emptyStateBody, emptyStateButton, emptyStateLink, customControls, isMinimapVisible, isHeaderPlain, headerMainContent, shortcutsPopoverButtonText, shortcutsPopoverProps: shortcutsPopoverPropsProp, showEditor, options: optionsProp, overrideServices, loading, editorProps } = this.props;
-        const shortcutsPopoverProps = Object.assign(Object.assign({}, CodeEditor.defaultProps.shortcutsPopoverProps), shortcutsPopoverPropsProp);
-        const options = Object.assign({ scrollBeyondLastLine: height !== 'sizeToFit', readOnly: isReadOnly, cursorStyle: 'line', lineNumbers: isLineNumbersVisible ? 'on' : 'off', tabIndex: -1, minimap: {
-                enabled: isMinimapVisible
-            } }, optionsProp);
-        const isFullHeight = this.props.height === '100%' ? true : this.props.isFullHeight;
-        return (_jsx(Dropzone, { multiple: false, onDropAccepted: this.onDropAccepted, onDropRejected: this.onDropRejected, children: ({ getRootProps, getInputProps, isDragActive, open }) => {
-                const emptyState = providedEmptyState ||
-                    (isUploadEnabled ? (_jsxs(EmptyState, { variant: EmptyStateVariant.sm, titleText: emptyStateTitle, icon: CodeIcon, headingLevel: "h4", children: [_jsx(EmptyStateBody, { children: emptyStateBody }), !isReadOnly && (_jsxs(EmptyStateFooter, { children: [_jsx(EmptyStateActions, { children: _jsx(Button, { variant: "primary", onClick: open, children: emptyStateButton }) }), _jsx(EmptyStateActions, { children: _jsx(Button, { variant: "link", onClick: this.toggleEmptyState, children: emptyStateLink }) })] }))] })) : (_jsx(EmptyState, { variant: EmptyStateVariant.sm, titleText: emptyStateTitle, icon: CodeIcon, headingLevel: "h4", children: !isReadOnly && (_jsx(EmptyStateFooter, { children: _jsx(EmptyStateActions, { children: _jsx(Button, { variant: "primary", onClick: this.toggleEmptyState, children: emptyStateLink }) }) })) })));
-                const tooltipProps = {
-                    position: toolTipPosition,
-                    exitDelay: toolTipDelay,
-                    entryDelay: toolTipDelay,
-                    maxWidth: toolTipMaxWidth,
-                    trigger: 'mouseenter focus'
-                };
-                const hasEditorHeaderContent = ((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) ||
-                    isUploadEnabled ||
-                    customControls ||
-                    headerMainContent ||
-                    !!shortcutsPopoverProps.bodyContent;
-                const editorHeaderContent = (_jsxs(Fragment, { children: [_jsx("div", { className: css(styles.codeEditorControls), children: _jsxs(CodeEditorContext.Provider, { value: { code: value }, children: [isCopyEnabled && (!showEmptyState || !!value) && (_jsx(CodeEditorControl, { icon: _jsx(CopyIcon, {}), "aria-label": copyButtonAriaLabel, tooltipProps: Object.assign(Object.assign({}, tooltipProps), { 'aria-live': 'polite', content: _jsx("div", { children: copied ? copyButtonSuccessTooltipText : copyButtonToolTipText }), exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, onTooltipHidden: () => this.setState({ copied: false }) }), onClick: this.copyCode })), isUploadEnabled && (_jsx(CodeEditorControl, { icon: _jsx(UploadIcon, {}), "aria-label": uploadButtonAriaLabel, tooltipProps: Object.assign({ content: _jsx("div", { children: uploadButtonToolTipText }) }, tooltipProps), onClick: open })), isDownloadEnabled && (!showEmptyState || !!value) && (_jsx(CodeEditorControl, { icon: _jsx(DownloadIcon, {}), "aria-label": downloadButtonAriaLabel, tooltipProps: Object.assign({ content: _jsx("div", { children: downloadButtonToolTipText }) }, tooltipProps), onClick: this.download })), customControls && customControls] }) }), headerMainContent && _jsx("div", { className: css(styles.codeEditorHeaderMain), children: headerMainContent }), !!shortcutsPopoverProps.bodyContent && (_jsx("div", { className: `${styles.codeEditor}__keyboard-shortcuts`, children: _jsx(Popover, Object.assign({}, shortcutsPopoverProps, { children: _jsx(Button, { variant: ButtonVariant.link, icon: _jsx(HelpIcon, {}), children: shortcutsPopoverButtonText }) })) }))] }));
-                const editorHeader = (_jsxs("div", { className: css(styles.codeEditorHeader, isHeaderPlain && styles.modifiers.plain), children: [hasEditorHeaderContent && (_jsx("div", { className: css(styles.codeEditorHeaderContent), children: editorHeaderContent })), isLanguageLabelVisible && (_jsxs("div", { className: css(styles.codeEditorTab), children: [_jsx("span", { className: css(styles.codeEditorTabIcon), children: _jsx(CodeIcon, {}) }), _jsx("span", { className: css(styles.codeEditorTabText), children: language.toUpperCase() })] }))] }));
-                const editor = (_jsx("div", { className: css(styles.codeEditorCode), ref: this.wrapperRef, tabIndex: 0, dir: "ltr", children: _jsx(Editor, Object.assign({ height: height === '100%' ? undefined : height, width: width, language: language, value: value, options: options, overrideServices: overrideServices, onChange: this.onChange, onMount: this.editorDidMount, theme: isDarkTheme ? 'vs-dark' : 'vs-light', loading: loading }, editorProps)) }));
-                const hiddenFileInput = _jsx("input", Object.assign({}, getInputProps(), { hidden: true }));
-                return (_jsx("div", { className: css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, isFullHeight && styles.modifiers.fullHeight, className), ref: this.ref, children: (isUploadEnabled || providedEmptyState) && !value ? (_jsxs("div", Object.assign({}, getRootProps({
-                        onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
-                    }), { className: css(styles.codeEditorContainer, isLoading && fileUploadStyles.modifiers.loading), children: [editorHeader, _jsx("div", { className: css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover), children: (showEmptyState || providedEmptyState) && !value ? (_jsxs("div", { className: css(styles.codeEditorUpload), children: [hiddenFileInput, emptyState] })) : (_jsxs(_Fragment, { children: [hiddenFileInput, editor] })) })] }))) : (_jsxs(_Fragment, { children: [editorHeader, showEditor && (_jsxs("div", { className: css(styles.codeEditorMain), children: [hiddenFileInput, editor] }))] })) }));
-            } }));
-    }
-}
-CodeEditor.displayName = 'CodeEditor';
-CodeEditor.defaultProps = {
-    className: '',
-    code: '',
-    onEditorDidMount: () => { },
-    language: Language.plaintext,
-    isDarkTheme: false,
-    width: '',
-    isLineNumbersVisible: true,
-    isReadOnly: false,
-    isLanguageLabelVisible: false,
-    loading: '',
-    emptyState: '',
-    emptyStateTitle: 'Start editing',
-    emptyStateBody: 'Drag and drop a file or upload one.',
-    emptyStateButton: 'Browse',
-    emptyStateLink: 'Start from scratch',
-    downloadFileName: Date.now().toString(),
-    isUploadEnabled: false,
-    isDownloadEnabled: false,
-    isCopyEnabled: false,
-    isHeaderPlain: false,
-    copyButtonAriaLabel: 'Copy code to clipboard',
-    uploadButtonAriaLabel: 'Upload code',
-    downloadButtonAriaLabel: 'Download code',
-    copyButtonToolTipText: 'Copy to clipboard',
-    uploadButtonToolTipText: 'Upload',
-    downloadButtonToolTipText: 'Download',
-    copyButtonSuccessTooltipText: 'Content added to clipboard',
-    toolTipCopyExitDelay: 1600,
-    toolTipDelay: 300,
-    toolTipMaxWidth: '100px',
-    toolTipPosition: 'top',
-    customControls: null,
-    isMinimapVisible: false,
-    headerMainContent: '',
-    shortcutsPopoverButtonText: 'View Shortcuts',
-    shortcutsPopoverProps: {
-        bodyContent: '',
-        'aria-label': 'Keyboard Shortcuts'
-    },
-    showEditor: true,
-    options: {},
-    overrideServices: {},
-    onCodeChange: () => { }
+    };
+    const onDropRejected = (rejectedFiles) => {
+        if (rejectedFiles.length > 0) {
+            // eslint-disable-next-line no-console
+            console.error('There was an error accepting that dropped file'); // TODO
+        }
+    };
+    const copyCode = () => {
+        navigator.clipboard.writeText(value);
+        setCopied(true);
+    };
+    const editorOptions = Object.assign({ scrollBeyondLastLine: height !== 'sizeToFit', readOnly: isReadOnly, cursorStyle: 'line', lineNumbers: isLineNumbersVisible ? 'on' : 'off', tabIndex: -1, minimap: {
+            enabled: isMinimapVisible
+        } }, options);
+    const tooltipProps = {
+        position: toolTipPosition,
+        exitDelay: toolTipDelay,
+        entryDelay: toolTipDelay,
+        maxWidth: toolTipMaxWidth,
+        trigger: 'mouseenter focus'
+    };
+    const hasEditorHeaderContent = ((isCopyEnabled || isDownloadEnabled) && (!showEmptyState || !!value)) ||
+        isUploadEnabled ||
+        customControls ||
+        headerMainContent ||
+        !!shortcutsPopoverProps.bodyContent;
+    return (_jsx(Dropzone, { multiple: false, onDropAccepted: onDropAccepted, onDropRejected: onDropRejected, children: ({ getRootProps, getInputProps, isDragActive, open }) => {
+            const hiddenFileInput = _jsx("input", Object.assign({}, getInputProps(), { hidden: true }));
+            const editorEmptyState = emptyState ||
+                (isUploadEnabled ? (_jsxs(EmptyState, { variant: EmptyStateVariant.sm, titleText: emptyStateTitle, icon: CodeIcon, headingLevel: "h4", children: [_jsx(EmptyStateBody, { children: emptyStateBody }), !isReadOnly && (_jsxs(EmptyStateFooter, { children: [_jsx(EmptyStateActions, { children: _jsx(Button, { variant: "primary", onClick: open, children: emptyStateButton }) }), _jsx(EmptyStateActions, { children: _jsx(Button, { variant: "link", onClick: () => setShowEmptyState(false), children: emptyStateLink }) })] }))] })) : (_jsx(EmptyState, { variant: EmptyStateVariant.sm, titleText: emptyStateTitle, icon: CodeIcon, headingLevel: "h4", children: !isReadOnly && (_jsx(EmptyStateFooter, { children: _jsx(EmptyStateActions, { children: _jsx(Button, { variant: "primary", onClick: () => setShowEmptyState(false), children: emptyStateLink }) }) })) })));
+            const editorHeaderContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: css(styles.codeEditorControls), children: _jsxs(CodeEditorContext.Provider, { value: { code: value }, children: [isCopyEnabled && (!showEmptyState || !!value) && (_jsx(CodeEditorControl, { icon: _jsx(CopyIcon, {}), "aria-label": copyButtonAriaLabel, tooltipProps: Object.assign(Object.assign({}, tooltipProps), { 'aria-live': 'polite', content: _jsx("div", { children: copied ? copyButtonSuccessTooltipText : copyButtonToolTipText }), exitDelay: copied ? toolTipCopyExitDelay : toolTipDelay, onTooltipHidden: () => setCopied(false) }), onClick: copyCode })), isUploadEnabled && (_jsx(CodeEditorControl, { icon: _jsx(UploadIcon, {}), "aria-label": uploadButtonAriaLabel, tooltipProps: Object.assign({ content: _jsx("div", { children: uploadButtonToolTipText }) }, tooltipProps), onClick: open })), isDownloadEnabled && (!showEmptyState || !!value) && (_jsx(CodeEditorControl, { icon: _jsx(DownloadIcon, {}), "aria-label": downloadButtonAriaLabel, tooltipProps: Object.assign({ content: _jsx("div", { children: downloadButtonToolTipText }) }, tooltipProps), onClick: () => {
+                                        onDownload(value, `${downloadFileName}.${getExtensionFromLanguage(language)}`);
+                                    } })), customControls && customControls] }) }), headerMainContent && _jsx("div", { className: css(styles.codeEditorHeaderMain), children: headerMainContent }), !!shortcutsPopoverProps.bodyContent && (_jsx("div", { className: `${styles.codeEditor}__keyboard-shortcuts`, children: _jsx(Popover, Object.assign({}, shortcutsPopoverProps, { children: _jsx(Button, { variant: ButtonVariant.link, icon: _jsx(HelpIcon, {}), children: shortcutsPopoverButtonText }) })) }))] }));
+            const editorHeader = (_jsxs("div", { className: css(styles.codeEditorHeader, isHeaderPlain && styles.modifiers.plain), children: [hasEditorHeaderContent && _jsx("div", { className: css(styles.codeEditorHeaderContent), children: editorHeaderContent }), isLanguageLabelVisible && (_jsxs("div", { className: css(styles.codeEditorTab), children: [_jsx("span", { className: css(styles.codeEditorTabIcon), children: _jsx(CodeIcon, {}) }), _jsx("span", { className: css(styles.codeEditorTabText), children: language.toUpperCase() })] }))] }));
+            const editor = (_jsx("div", { className: css(styles.codeEditorCode), ref: wrapperRef, tabIndex: 0, dir: "ltr", children: _jsx(Editor, Object.assign({ height: height === '100%' ? undefined : height, width: width, language: language, value: value, options: editorOptions, overrideServices: overrideServices, onChange: onModelChange, onMount: editorDidMount, loading: loading, theme: isDarkTheme ? 'vs-dark' : 'vs-light' }, editorProps)) }));
+            return (_jsx("div", { className: css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, (height === '100%' ? true : isFullHeight) && styles.modifiers.fullHeight, className), ref: ref, children: (isUploadEnabled || emptyState) && !value ? (_jsxs("div", Object.assign({}, getRootProps({
+                    onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
+                }), { className: css(styles.codeEditorContainer, isLoading && fileUploadStyles.modifiers.loading), children: [editorHeader, _jsx("div", { className: css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover), children: (showEmptyState || emptyState) && !value ? (_jsxs("div", { className: css(styles.codeEditorUpload), children: [hiddenFileInput, editorEmptyState] })) : (_jsxs(_Fragment, { children: [hiddenFileInput, editor] })) })] }))) : (_jsxs(_Fragment, { children: [editorHeader, showEditor && (_jsxs("div", { className: css(styles.codeEditorMain), children: [hiddenFileInput, editor] }))] })) }));
+        } }));
 };
-export { CodeEditor };
+CodeEditor.displayName = 'CodeEditor';
 //# sourceMappingURL=CodeEditor.js.map