@elice/material-exercise 1.240718.0-trasncript.1 → 1.240718.0-trasncript.2

package/es/components/shared/file-viewer/FileViewerNonViewable.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button, Vspace, Text, Icon } from '@elice/blocks';
 import { eilDownload } from '@elice/icons';
 import { IntlComponentBuilder } from '@elice/intl';
@@ -10,33 +10,36 @@ import nonViewableMessageKo from './locales/nonViewable.ko.json.js';
 import nonViewableMessageTh from './locales/nonViewable.th.json.js';
 import nonViewableMessageJa from './locales/nonViewable.ja.json.js';
 
-const StyledContainer = styled.div.withConfig({
+var StyledContainer = styled.div.withConfig({
   componentId: "sc-l8149y-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
-const StyledContainerContent = styled.div.withConfig({
+var StyledContainerContent = styled.div.withConfig({
   componentId: "sc-l8149y-1"
 })(["display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center;"]);
-const StyledButton = styled(Button).withConfig({
+var StyledButton = styled(Button).withConfig({
   componentId: "sc-l8149y-2"
 })(["display:block;margin:0 auto;"]);
-const StyledButtonsWrap = styled.div.withConfig({
+var StyledButtonsWrap = styled.div.withConfig({
   componentId: "sc-l8149y-3"
 })(["text-align:center;> *{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"]);
-const FileViewerNonViewable = ({
-  filename,
-  fileurl,
-  onTextViewerClick,
-  __intl
-}) => {
+var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
+  var filename = _ref.filename,
+    fileurl = _ref.fileurl,
+    onTextViewerClick = _ref.onTextViewerClick,
+    __intl = _ref.__intl;
   /**
    * Handle download button click.
    */
-  const handleDownloadClick = () => {
+  var handleDownloadClick = function handleDownloadClick() {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(res => res.blob()).then(blob => FileSaver.saveAs(blob, filename)).catch(() => {
-      const win = window.open(fileurl, '_blank');
+    fetch(fileurl).then(function (res) {
+      return res.blob();
+    }).then(function (blob) {
+      return FileSaver.saveAs(blob, filename);
+    }).catch(function () {
+      var win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();
       }
@@ -45,59 +48,69 @@ const FileViewerNonViewable = ({
   /**
    * Download button.
    */
-  const renderFileViewerDownloadButton = () => {
+  var renderFileViewerDownloadButton = function renderFileViewerDownloadButton() {
     if (!fileurl) {
       return null;
     }
-    return React.createElement(StyledButton, {
+    return jsx(StyledButton, {
       size: "small",
-      icon: React.createElement(Icon, {
+      icon: jsx(Icon, {
         icon: eilDownload
       }),
-      onClick: handleDownloadClick
-    }, __intl.formatMessage({
-      id: 'fileViewer.nonViewable.downloadButton'
-    }));
+      onClick: handleDownloadClick,
+      children: __intl.formatMessage({
+        id: 'fileViewer.nonViewable.downloadButton'
+      })
+    });
   };
   /**
    * Link for enable text editor.
    */
-  const renderFileViewerTextEditorLink = () => {
+  var renderFileViewerTextEditorLink = function renderFileViewerTextEditorLink() {
     if (!fileurl || typeof onTextViewerClick !== 'function') {
       return null;
     }
-    return React.createElement(Text, {
+    return jsx(Text, {
       role: "gray5",
       size: "tiny",
       hoverable: true,
-      onClick: onTextViewerClick
-    }, __intl.formatMessage({
-      id: 'fileViewer.nonViewable.openViaTextEditor'
-    }));
+      onClick: onTextViewerClick,
+      children: __intl.formatMessage({
+        id: 'fileViewer.nonViewable.openViaTextEditor'
+      })
+    });
   };
   //
   //
   //
-  return React.createElement(StyledContainer, null, React.createElement(StyledContainerContent, null, React.createElement(FileIcon, {
-    filename: filename,
-    width: "3rem",
-    height: "3rem"
-  }), React.createElement(Vspace, {
-    height: 1
-  }), React.createElement(Text, {
-    role: "white"
-  }, filename), React.createElement(Vspace, {
-    height: 0.75
-  }), React.createElement(Text, {
-    role: "gray3",
-    size: "tiny",
-    lineHeight: 1.5,
-    wordBreak: "keep-all"
-  }, __intl.formatMessage({
-    id: 'fileViewer.nonViewable.content'
-  })), React.createElement(Vspace, {
-    height: 2
-  }), React.createElement(StyledButtonsWrap, null, renderFileViewerDownloadButton(), renderFileViewerTextEditorLink())));
+  return jsx(StyledContainer, {
+    children: jsxs(StyledContainerContent, {
+      children: [jsx(FileIcon, {
+        filename: filename,
+        width: "3rem",
+        height: "3rem"
+      }), jsx(Vspace, {
+        height: 1
+      }), jsx(Text, {
+        role: "white",
+        children: filename
+      }), jsx(Vspace, {
+        height: 0.75
+      }), jsx(Text, {
+        role: "gray3",
+        size: "tiny",
+        lineHeight: 1.5,
+        wordBreak: "keep-all",
+        children: __intl.formatMessage({
+          id: 'fileViewer.nonViewable.content'
+        })
+      }), jsx(Vspace, {
+        height: 2
+      }), jsxs(StyledButtonsWrap, {
+        children: [renderFileViewerDownloadButton(), renderFileViewerTextEditorLink()]
+      })]
+    })
+  });
 };
 //
 //

package/es/components/shared/file-viewer/FileViewerText.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
 import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
@@ -14,26 +16,32 @@ import MonacoEditorLazy from '../monaco-editor/MonacoEditorLazy.js';
 import '../monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
 
-const FileViewerText = ({
-  filename,
-  fileurl,
-  locale
-}) => {
-  const preference = useRecoilValue(exerciseEditorPreferenceState);
-  const [content, setContent] = React.useState(null);
-  React.useEffect(() => {
+var FileViewerText = function FileViewerText(_ref) {
+  var filename = _ref.filename,
+    fileurl = _ref.fileurl,
+    locale = _ref.locale;
+  var preference = useRecoilValue(exerciseEditorPreferenceState);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    content = _React$useState2[0],
+    setContent = _React$useState2[1];
+  React.useEffect(function () {
     if (!fileurl) {
       return;
     }
-    fetch(fileurl).then(res => res.text()).then(setContent).catch(err => console.error(err));
+    fetch(fileurl).then(function (res) {
+      return res.text();
+    }).then(setContent).catch(function (err) {
+      return console.error(err);
+    });
   }, [fileurl]);
   //
   //
   //
   if (content === null) {
-    return React.createElement(ExerciseFileShimmer, null);
+    return jsx(ExerciseFileShimmer, {});
   }
-  return React.createElement(MonacoEditorLazy, {
+  return jsx(MonacoEditorLazy, {
     filename: filename,
     defaultValue: content,
     preference: Object.assign(Object.assign({}, preference), {

package/es/components/shared/file-viewer/index.js

@@ -0,0 +1 @@
+export { default as FileViewer } from './FileViewer.js';

package/es/components/shared/file-viewer/locales/index.js

@@ -0,0 +1,8 @@
+export { default as messageEn } from './en.json.js';
+export { default as messageKo } from './ko.json.js';
+export { default as messageTh } from './th.json.js';
+export { default as messageJa } from './ja.json.js';
+export { default as nonViewableMessageEn } from './nonViewable.en.json.js';
+export { default as nonViewableMessageKo } from './nonViewable.ko.json.js';
+export { default as nonViewableMessageTh } from './nonViewable.th.json.js';
+export { default as nonViewableMessageJa } from './nonViewable.ja.json.js';

package/es/components/shared/material-modal/MaterialModal.js

@@ -1,32 +1,41 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useKeyPressEvent } from 'react-use';
 import { BorderlessDialog } from '@elice/blocks';
 import { eilMathsignMultiplyBasic } from '@elice/icons';
 import { StyledModalWrapper, StyledModalHeader, StyledModalBody, StyledModalFooter, StyledCloseButton } from './MaterialModal.styled.js';
 
-const MaterialModal = ({
-  children,
-  title,
-  footer,
-  onHide
-}) => {
-  useKeyPressEvent('Escape', () => {
+var MaterialModal = function MaterialModal(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    footer = _ref.footer,
+    onHide = _ref.onHide;
+  useKeyPressEvent('Escape', function () {
     if (typeof onHide === 'function') {
       onHide();
     }
   });
-  const renderCloseButton = () => {
+  var renderCloseButton = function renderCloseButton() {
     if (!onHide) {
       return null;
     }
-    return React.createElement(StyledCloseButton, {
+    return jsx(StyledCloseButton, {
       transparent: true,
       border: false,
       icon: eilMathsignMultiplyBasic,
       onClick: onHide
     });
   };
-  return React.createElement(BorderlessDialog, null, React.createElement(StyledModalWrapper, null, React.createElement(StyledModalHeader, null, title, renderCloseButton()), React.createElement(StyledModalBody, null, children), footer && React.createElement(StyledModalFooter, null, footer)));
+  return jsx(BorderlessDialog, {
+    children: jsxs(StyledModalWrapper, {
+      children: [jsxs(StyledModalHeader, {
+        children: [title, renderCloseButton()]
+      }), jsx(StyledModalBody, {
+        children: children
+      }), footer && jsx(StyledModalFooter, {
+        children: footer
+      })]
+    })
+  });
 };
 
 export { MaterialModal as default };

package/es/components/shared/material-modal/MaterialModal.styled.js

@@ -2,19 +2,19 @@ import { Text, Flex, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import styled from 'styled-components';
 
-const StyledModalWrapper = styled.div.withConfig({
+var StyledModalWrapper = styled.div.withConfig({
   componentId: "sc-1ej7kso-0"
 })(["position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", ";border-radius:0.375rem;"], base.color.gray8);
-const StyledModalHeader = styled(Text).withConfig({
+var StyledModalHeader = styled(Text).withConfig({
   componentId: "sc-1ej7kso-1"
 })(["flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", ";text-align:center;color:", ";"], base.color.navy9, base.color.white);
-const StyledModalBody = styled.div.withConfig({
+var StyledModalBody = styled.div.withConfig({
   componentId: "sc-1ej7kso-2"
 })(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
-const StyledModalFooter = styled(Flex).withConfig({
+var StyledModalFooter = styled(Flex).withConfig({
   componentId: "sc-1ej7kso-3"
 })(["flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;"], base.color.navy9);
-const StyledCloseButton = styled(IconButton).withConfig({
+var StyledCloseButton = styled(IconButton).withConfig({
   componentId: "sc-1ej7kso-4"
 })(["position:absolute;top:0;right:0;color:", " !important;"], base.color.gray4);
 

package/es/components/shared/material-modal/index.js

@@ -0,0 +1 @@
+export { default as MaterialModal } from './MaterialModal.js';

package/es/components/shared/monaco-editor/MonacoEditor.js

@@ -1,3 +1,5 @@
+import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { base } from '@elice/design-tokens';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
@@ -24,59 +26,68 @@ initMonacoGrammars().catch(console.warn);
 //
 //
 //
-const StyledMonacoEditorWrapper = styled.div.withConfig({
+var StyledMonacoEditorWrapper = styled.div.withConfig({
   componentId: "sc-1j3uyex-0"
 })(["width:100%;height:100%;"]);
-const StyledMonacoEditor = styled.div.withConfig({
+var StyledMonacoEditor = styled.div.withConfig({
   componentId: "sc-1j3uyex-1"
 })(["width:100%;height:100%;background-color:", ";", ""], base.color.navy9, cssRemoteMarker);
 /**
  *
  */
-const MonacoEditor = forwardRef(({
-  defaultValue = '',
-  filename = '/noname.txt',
-  preference = DEFAULT_MONACO_EDITOR_PREFERENCE,
-  markers = [],
-  width = '100%',
-  height = '100%',
-  noLanguageIntellisense = false,
-  onLoad,
-  onChange,
-  onSave,
-  onCursor,
-  onScroll,
-  onThemeChange
-}, ref) => {
+var MonacoEditor = forwardRef(function (_ref, ref) {
+  var _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$filename = _ref.filename,
+    filename = _ref$filename === void 0 ? '/noname.txt' : _ref$filename,
+    _ref$preference = _ref.preference,
+    preference = _ref$preference === void 0 ? DEFAULT_MONACO_EDITOR_PREFERENCE : _ref$preference,
+    _ref$markers = _ref.markers,
+    markers = _ref$markers === void 0 ? [] : _ref$markers,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$noLanguageIntell = _ref.noLanguageIntellisense,
+    noLanguageIntellisense = _ref$noLanguageIntell === void 0 ? false : _ref$noLanguageIntell,
+    onLoad = _ref.onLoad,
+    onChange = _ref.onChange,
+    onSave = _ref.onSave,
+    onCursor = _ref.onCursor,
+    onScroll = _ref.onScroll,
+    onThemeChange = _ref.onThemeChange;
   /** Ref of element which wraps editor. */
-  const editorElRef = React.useRef(null);
+  var editorElRef = React.useRef(null);
   /** Ref of editor exposed APIs. */
-  const editorApis = React.useRef({});
+  var editorApis = React.useRef({});
   /** Ref of monaco editor. */
-  const editor = React.useRef(null);
+  var editor = React.useRef(null);
   /** Editor options. */
-  const editorOptions = useEditorOptions({
-    width,
-    height,
-    preference,
-    noLanguageIntellisense
+  var editorOptions = useEditorOptions({
+    width: width,
+    height: height,
+    preference: preference,
+    noLanguageIntellisense: noLanguageIntellisense
   });
   /** Ref for preventing change event. */
-  const suppress = React.useRef(false);
+  var suppress = React.useRef(false);
   /** Is editor ready? */
-  const [isReady, setReady] = React.useState(false);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isReady = _React$useState2[0],
+    setReady = _React$useState2[1];
   /**
    * Get model of editor.
    */
-  const getMonacoModel = () => {
-    const uri = monaco.Uri.file(filename || '/noname.txt');
+  var getMonacoModel = function getMonacoModel() {
+    var uri = monaco.Uri.file(filename || '/noname.txt');
     return monaco.editor.getModel(uri);
   };
   /**
    * Has editor undo/redo history?
    * @public
    */
-  const hasHistory = () => {
+  var hasHistory = function hasHistory() {
     var _a;
     return (((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getAlternativeVersionId()) || 0) > 1;
   };
@@ -84,14 +95,14 @@ const MonacoEditor = forwardRef(({
    * Clear editor undo/redo history.
    * @public
    */
-  const clearHistory = () => {
+  var clearHistory = function clearHistory() {
     getMonacoModel();
   };
   /**
    * Get current value of editor.
    * @public
    */
-  const getValue = () => {
+  var getValue = function getValue() {
     var _a;
     return ((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getValue()) || '';
   };
@@ -99,16 +110,16 @@ const MonacoEditor = forwardRef(({
    * Get value in range of editor.
    * @public
    */
-  const getValueInRange = (from, to) => {
-    const model = getMonacoModel();
+  var getValueInRange = function getValueInRange(from, to) {
+    var model = getMonacoModel();
     if (!model) {
       return '';
     }
     if (from === to) {
       return '';
     }
-    const startPosition = model.getPositionAt(from);
-    const endPosition = model.getPositionAt(to);
+    var startPosition = model.getPositionAt(from);
+    var endPosition = model.getPositionAt(to);
     return model.getValueInRange({
       startLineNumber: startPosition.lineNumber,
       startColumn: startPosition.column,
@@ -120,14 +131,14 @@ const MonacoEditor = forwardRef(({
    * Set (overwrite) value to editor.
    * @public
    */
-  const setValue = newValue => {
+  var setValue = function setValue(newValue) {
     if (!editor.current) {
       return;
     }
     // Replace value EOL as LF.
     newValue = newValue.replace(/\r\n/g, '\n');
-    const uri = monaco.Uri.file(filename || '/noname.txt');
-    const model = monaco.editor.getModel(uri);
+    var uri = monaco.Uri.file(filename || '/noname.txt');
+    var model = monaco.editor.getModel(uri);
     if (model && !model.isDisposed()) {
       // Override EOL as LF to prevent error at Windows env.
       model.setEOL(monaco.editor.EndOfLineSequence.LF);
@@ -139,7 +150,9 @@ const MonacoEditor = forwardRef(({
           range: model.getFullModelRange(),
           text: newValue,
           forceMoveMarkers: true
-        }], () => null);
+        }], function () {
+          return null;
+        });
         editor.current.pushUndoStop();
         suppress.current = false;
         editor.current.setModel(model);
@@ -149,8 +162,8 @@ const MonacoEditor = forwardRef(({
     // If model has not created yet for this file,
     // create new model.
     else {
-      const lang = getLanguageFromFilename(filename);
-      const newModel = monaco.editor.createModel(newValue, lang, uri);
+      var lang = getLanguageFromFilename(filename);
+      var newModel = monaco.editor.createModel(newValue, lang, uri);
       newModel.setEOL(monaco.editor.EndOfLineSequence.LF);
       editor.current.setModel(newModel);
     }
@@ -159,22 +172,24 @@ const MonacoEditor = forwardRef(({
    * Insert value at specific position.
    * @public
    */
-  const insertValue = (offset, newValue) => {
+  var insertValue = function insertValue(offset, newValue) {
     if (!editor.current) {
       return;
     }
     // Replace value EOL as LF.
     newValue = newValue.replace(/\r\n/g, '\n');
-    const model = getMonacoModel();
+    var model = getMonacoModel();
     if (model) {
-      const position = model.getPositionAt(offset);
+      var position = model.getPositionAt(offset);
       suppress.current = true;
       editor.current.pushUndoStop();
       model.pushEditOperations([], [{
         range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
         text: newValue,
         forceMoveMarkers: true
-      }], () => null);
+      }], function () {
+        return null;
+      });
       editor.current.pushUndoStop();
       suppress.current = false;
     }
@@ -183,21 +198,23 @@ const MonacoEditor = forwardRef(({
    * Remove value at specific range.
    * @public
    */
-  const removeValue = (from, to) => {
+  var removeValue = function removeValue(from, to) {
     if (!editor.current) {
       return;
     }
-    const model = getMonacoModel();
+    var model = getMonacoModel();
     if (model) {
-      const startPosition = model.getPositionAt(from);
-      const endPosition = model.getPositionAt(to);
+      var startPosition = model.getPositionAt(from);
+      var endPosition = model.getPositionAt(to);
       suppress.current = true;
       editor.current.pushUndoStop();
       model.pushEditOperations([], [{
         range: new monaco.Range(startPosition.lineNumber, startPosition.column, endPosition.lineNumber, endPosition.column),
         text: '',
         forceMoveMarkers: true
-      }], () => null);
+      }], function () {
+        return null;
+      });
       editor.current.pushUndoStop();
       suppress.current = false;
     }
@@ -206,9 +223,9 @@ const MonacoEditor = forwardRef(({
    * Get offset of current cursor position.
    * @public
    */
-  const getPositionOffset = () => {
+  var getPositionOffset = function getPositionOffset() {
     var _a;
-    const model = getMonacoModel();
+    var model = getMonacoModel();
     if (!editor.current || !model) {
       return 0;
     }
@@ -218,12 +235,12 @@ const MonacoEditor = forwardRef(({
    * Set selection of editor with specific range.
    * @public
    */
-  const setSelection = (from, to) => {
+  var setSelection = function setSelection(from, to) {
     var _a;
-    const model = getMonacoModel();
+    var model = getMonacoModel();
     if (model) {
-      const markerStartPosition = model.getPositionAt(from);
-      const markerEndPosition = model.getPositionAt(to);
+      var markerStartPosition = model.getPositionAt(from);
+      var markerEndPosition = model.getPositionAt(to);
       (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setSelection(new monaco.Range(markerStartPosition.lineNumber, markerStartPosition.column, markerEndPosition.lineNumber, markerEndPosition.column));
     }
   };
@@ -231,7 +248,7 @@ const MonacoEditor = forwardRef(({
    * Scroll editor to specific `scrollTop`.
    * @public
    */
-  const scrollTo = scrollTop => {
+  var scrollTo = function scrollTo(scrollTop) {
     var _a;
     (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setScrollTop(scrollTop);
   };
@@ -243,11 +260,11 @@ const MonacoEditor = forwardRef(({
   useMonacoEventChange(editor, onChange, suppress, [isReady]);
   useMonacoEventCursor(editor, onCursor, [isReady]);
   useMonacoEventScroll(editor, onScroll, [isReady]);
-  const remoteMarker = useMonacoMarkers(editor, markers);
+  var remoteMarker = useMonacoMarkers(editor, markers);
   //
   // Init and dispose editor.
   //
-  React.useEffect(() => {
+  React.useEffect(function () {
     try {
       if (!editorElRef.current) {
         return;
@@ -258,11 +275,11 @@ const MonacoEditor = forwardRef(({
         language: getLanguageFromFilename(filename)
       }));
       // add keyboard shortcut.
-      editor.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      editor.current.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
         var _a, _b, _c;
         void ((_b = (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAction('editor.action.formatDocument')) === null || _b === void 0 ? void 0 : _b.run());
         if (typeof onSave === 'function') {
-          const content = ((_c = getMonacoModel()) === null || _c === void 0 ? void 0 : _c.getValue()) || '';
+          var content = ((_c = getMonacoModel()) === null || _c === void 0 ? void 0 : _c.getValue()) || '';
           onSave(content);
         }
       });
@@ -275,7 +292,7 @@ const MonacoEditor = forwardRef(({
     } catch (_) {
       setReady(false);
     }
-    return () => {
+    return function () {
       var _a;
       setReady(false);
       // dispose remote marker
@@ -291,7 +308,9 @@ const MonacoEditor = forwardRef(({
   //
   // Set value whenevet filename or value changed.
   //
-  React.useEffect(() => setValue(defaultValue),
+  React.useEffect(function () {
+    return setValue(defaultValue);
+  },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [filename, defaultValue]);
   //
@@ -309,17 +328,21 @@ const MonacoEditor = forwardRef(({
   editorApis.current.getPositionOffset = getPositionOffset;
   editorApis.current.setSelection = setSelection;
   editorApis.current.scrollTo = scrollTo;
-  React.useImperativeHandle(ref, () => editorApis.current, [editorApis]);
+  React.useImperativeHandle(ref, function () {
+    return editorApis.current;
+  }, [editorApis]);
   //
   //
   //
-  return React.createElement(StyledMonacoEditorWrapper, null, React.createElement(StyledMonacoEditor, {
-    style: {
-      width,
-      height
-    },
-    ref: editorElRef
-  }));
+  return jsx(StyledMonacoEditorWrapper, {
+    children: jsx(StyledMonacoEditor, {
+      style: {
+        width: width,
+        height: height
+      },
+      ref: editorElRef
+    })
+  });
 });
 
 export { MonacoEditor as default };