@elice/material-exercise 1.251120.1 → 1.260128.0-rc.0

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerCodeHelpRequestButton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface ExerciseRunnerControllerCodeHelpRequestButtonProps {
     onClick: () => void;
 }

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactUse = require('react-use');
@@ -12,31 +13,35 @@ var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var types = require('@elice/types');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExerciseRunnerControllerCodeHelpRequestButton = require('./ExerciseRunnerControllerCodeHelpRequestButton.js');
+var context = require('../context/context.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
-var StyledHr = styled__default.default(blocks.Hr).withConfig({
-  componentId: "sc-30ywzi-0"
-})(["height:2rem;"]);
-var StyledRunnerInfoTitle = styled__default.default.span.withConfig({
-  componentId: "sc-30ywzi-1"
-})(["display:block;color:", ";font-size:11px;line-height:1.25;"], designTokens.base.color.navy3);
-var StyledRunnerInfoContent = styled__default.default.span.withConfig({
-  componentId: "sc-30ywzi-2"
-})(["display:block;color:", ";font-size:12px;line-height:1.25;"], designTokens.base.color.navy1);
+var StyledHr = /*#__PURE__*/_styled__default.default(blocks.Hr, {
+  target: "e12hdw272"
+})("production" === "production" ? {
+  name: "hw7i2k",
+  styles: "height:2rem"
+} : {
+  name: "hw7i2k",
+  styles: "height:2rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledRunnerInfoTitle = /*#__PURE__*/_styled__default.default("span", {
+  target: "e12hdw271"
+})("display:block;color:", designTokens.base.color.navy3, ";font-size:11px;line-height:1.25;");
+var StyledRunnerInfoContent = /*#__PURE__*/_styled__default.default("span", {
+  target: "e12hdw270"
+})("display:block;color:", designTokens.base.color.navy1, ";font-size:12px;line-height:1.25;");
 //
 //
 //
@@ -105,11 +110,11 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
     }
     var abortCtrl = new AbortController();
     var _fetch = /*#__PURE__*/function () {
-      var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(runType) {
-        return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+      var _ref = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee(runType) {
+        return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
             case 0:
-              return _context.abrupt("return", apiClient.getOrgMaterialExerciseExerciseRunningList({
+              return _context.a(2, apiClient.getOrgMaterialExerciseExerciseRunningList({
                 exerciseRoomId: exerciseRoomId,
                 filterRunType: runType,
                 offset: 0,
@@ -121,9 +126,6 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
                 var _a;
                 return (_a = exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
               }));
-            case 1:
-            case "end":
-              return _context.stop();
           }
         }, _callee);
       }));
@@ -149,7 +151,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
       if (isRunningDone && typeof onExerciseRunningDone === 'function') {
         onExerciseRunningDone(exerciseLastRunning);
       }
-    }).catch(function (err) {
+    })["catch"](function (err) {
       if (err.name === 'AbortError') {
         return;
       }
@@ -180,7 +182,7 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
       signal: abortCtrl.signal
     }).then(function (res) {
       return res.course;
-    }).then(setCourse).catch(console.error);
+    }).then(setCourse)["catch"](console.error);
     return function () {
       abortCtrl.abort();
     };
@@ -211,8 +213,8 @@ var ExerciseRunnerControllerRunningInfo = function ExerciseRunnerControllerRunni
           }) : '--'
         })]
       }), jsxRuntime.jsx(StyledHr, {
-        color: designTokens.base.color.navy6,
         vertical: true,
+        color: designTokens.base.color.navy6,
         marginStart: "0.5rem",
         marginEnd: "0.5rem"
       })]

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.d.ts

@@ -1,5 +1,8 @@
 interface ExerciseRunnerControllerStatusIndicatorProps {
     status: 'success' | 'warning' | 'error';
 }
-declare const ExerciseRunnerControllerStatusIndicator: import("styled-components").StyledComponent<"div", any, ExerciseRunnerControllerStatusIndicatorProps, never>;
+declare const ExerciseRunnerControllerStatusIndicator: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ExerciseRunnerControllerStatusIndicatorProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default ExerciseRunnerControllerStatusIndicator;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _styled = require('@emotion/styled/base');
 var designTokens = require('@elice/design-tokens');
-var styled = require('styled-components');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var ExerciseRunnerControllerStatusIndicator = styled__default.default.div.withConfig({
-  componentId: "sc-15703mt-0"
-})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], function (props) {
+var ExerciseRunnerControllerStatusIndicator = /*#__PURE__*/_styled__default.default("div", {
+  target: "e1g2gefq0"
+})("margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", function (props) {
   switch (props.status) {
     case 'success':
       return designTokens.base.color.green8;
@@ -20,6 +20,6 @@ var ExerciseRunnerControllerStatusIndicator = styled__default.default.div.withCo
     case 'error':
       return designTokens.base.color.red8;
   }
-});
+}, ";");
 
 exports.default = ExerciseRunnerControllerStatusIndicator;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 declare const ExerciseRunnerControllerStatusMessage: React.FC;
 export default ExerciseRunnerControllerStatusMessage;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
@@ -10,21 +11,24 @@ var intl = require('@elice/intl');
 var websocket = require('@elice/websocket');
 var react = require('@emotion/react');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var recoil$1 = require('../context/recoil.js');
-require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExerciseRunnerControllerStatusIndicator = require('./ExerciseRunnerControllerStatusIndicator.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 
-var StyledMessageWrapper = styled__default.default(blocks.Flex).withConfig({
-  componentId: "sc-1yqi8o2-0"
-})(["height:1rem;"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledMessageWrapper = /*#__PURE__*/_styled__default.default(blocks.Flex, {
+  target: "e1khqna70"
+})("production" === "production" ? {
+  name: "1f87p0t",
+  styles: "height:1rem"
+} : {
+  name: "1f87p0t",
+  styles: "height:1rem",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerStatusMessage() {
   var theme = react.useTheme();
   var intl$1 = intl.useRawEliceIntl();
@@ -76,9 +80,9 @@ var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerSta
       children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusIndicator.default, {
         status: websocketStatus === websocket.EliceWebSocket.OPEN ? 'success' : websocketStatus === websocket.EliceWebSocket.CLOSED ? 'error' : 'warning'
       }), jsxRuntime.jsx(blocks.Text, {
+        bold: true,
         role: "gray3",
         size: "tiny",
-        bold: true,
         children: getWebsocketStateMessage()
       })]
     })

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.js

@@ -3,27 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var _styled = require('@emotion/styled/base');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var blocks = require('@elice/blocks');
 var designTokens = require('@elice/design-tokens');
 var intl = require('@elice/intl');
 var recoil = require('recoil');
-var styled = require('styled-components');
-var recoil$1 = require('../context/recoil.js');
 var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefaultCompat(_styled);
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-var StyledControllerTimerText = styled__default.default(blocks.Text).withConfig({
-  componentId: "sc-1ez8ns0-0"
-})(["margin-top:-3px;color:", ";"], designTokens.base.color.secondary4);
+var StyledControllerTimerText = /*#__PURE__*/_styled__default.default(blocks.Text, {
+  target: "e4q8u940"
+})("margin-top:-3px;color:", designTokens.base.color.secondary4, ";");
 var ExerciseRunnerControllerTimer = function ExerciseRunnerControllerTimer() {
   var intl$1 = intl.useRawEliceIntl();
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),

package/cjs/components/material-exercise/exercise-submit-history/ExerciseSubmitHistory.js

@@ -13,25 +13,20 @@ var material = require('@mui/material');
 var dayjs = require('dayjs');
 var humps = require('humps');
 var recoil = require('recoil');
-var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
-var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
-var MaterialModal = require('../../shared/material-modal/MaterialModal.js');
-var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
-require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
-require('monaco-editor/esm/vs/editor/editor.api');
 var stylesheets = require('../../../constants/stylesheets.js');
 var useMaterialExerciseFileUrl = require('../../../hooks/useMaterialExerciseFileUrl.js');
-var recoil$1 = require('../context/recoil.js');
-var context = require('../context/context.js');
-require('../context/recoilTypes.js');
-require('../context/subjects.js');
-require('../context/ExerciseProvider.js');
 var ExerciseSubmitHistoryOutput = require('./ExerciseSubmitHistoryOutput.js');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 var ExerciseVersionListItem_styled = require('../../shared/exercise-version-list/ExerciseVersionListItem.styled.js');
 var ExerciseSubmitHistory_styled = require('./ExerciseSubmitHistory.styled.js');
 var empty = require('../../../assets/empty.png.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var MaterialModal = require('../../shared/material-modal/MaterialModal.js');
+var ExerciseVersionList = require('../../shared/exercise-version-list/ExerciseVersionList.js');
+var ExerciseVersionListItem = require('../../shared/exercise-version-list/ExerciseVersionListItem.js');
+var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
+var context = require('../context/context.js');
+var recoil$1 = require('../context/recoil.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -74,29 +69,29 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
     offset = _useState8[0],
     setOffset = _useState8[1];
   var _useState9 = React.useState([]),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    fileList = _useState10[0],
-    setFileList = _useState10[1];
+    _useState0 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    fileList = _useState0[0],
+    setFileList = _useState0[1];
+  var _useState1 = React.useState(null),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState1, 2),
+    selectedFile = _useState10[0],
+    setSelectedFile = _useState10[1];
   var _useState11 = React.useState(null),
     _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    selectedFile = _useState12[0],
-    setSelectedFile = _useState12[1];
-  var _useState13 = React.useState(null),
+    usercodeContent = _useState12[0],
+    setUsercodeContent = _useState12[1];
+  var _useState13 = React.useState(false),
     _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
-    usercodeContent = _useState14[0],
-    setUsercodeContent = _useState14[1];
+    isUserChanged = _useState14[0],
+    setIsUserChanged = _useState14[1];
   var _useState15 = React.useState(false),
     _useState16 = _rollupPluginBabelHelpers.slicedToArray(_useState15, 2),
-    isUserChanged = _useState16[0],
-    setIsUserChanged = _useState16[1];
+    isFile = _useState16[0],
+    setIsFile = _useState16[1];
   var _useState17 = React.useState(false),
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
-    isFile = _useState18[0],
-    setIsFile = _useState18[1];
-  var _useState19 = React.useState(false),
-    _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    isFileReady = _useState20[0],
-    setIsFileReady = _useState20[1];
+    isFileReady = _useState18[0],
+    setIsFileReady = _useState18[1];
   var selectedFileUrl = useMaterialExerciseFileUrl.useMaterialExerciseFileUrl({
     filename: selectedFile,
     exercise: exercise,
@@ -107,21 +102,21 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
   //
   //
   React.useEffect(function () {
-    void _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+    void _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee() {
       var _yield$getOrgMaterial, exerciseRunnings;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _rollupPluginBabelHelpers.regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
           case 0:
-            _context.prev = 0;
-            _context.next = 3;
+            _context.p = 0;
+            _context.n = 1;
             return apiClient.getOrgMaterialExerciseExerciseRunningList({
               materialExerciseId: materialExerciseId,
               userId: exerciseRoomUserId,
               offset: offset,
               count: COUNT
             });
-          case 3:
-            _yield$getOrgMaterial = _context.sent;
+          case 1:
+            _yield$getOrgMaterial = _context.v;
             exerciseRunnings = _yield$getOrgMaterial.exerciseRunnings;
             setRunningList(function (runningList) {
               if (runningList.length === 0 && exerciseRunnings[0]) {
@@ -130,16 +125,15 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
               return [].concat(_rollupPluginBabelHelpers.toConsumableArray(runningList), _rollupPluginBabelHelpers.toConsumableArray(exerciseRunnings));
             });
             setMoreRunning(exerciseRunnings.length === COUNT);
-            _context.next = 11;
+            _context.n = 3;
             break;
-          case 9:
-            _context.prev = 9;
-            _context.t0 = _context["catch"](0);
-          case 11:
-          case "end":
-            return _context.stop();
+          case 2:
+            _context.p = 2;
+            _context.v;
+          case 3:
+            return _context.a(2);
         }
-      }, _callee, null, [[0, 9]]);
+      }, _callee, null, [[0, 2]]);
     }))();
   }, [materialExerciseId, exerciseRoomUserId, offset]);
   //
@@ -147,26 +141,26 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
   // Get exercise running data and filelist.
   //
   React.useEffect(function () {
-    void _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2() {
-      var _a, _b, _c, _d, _yield$getOrgMaterial2, exerciseRunning, exerciseFileList, exerciseImageTaskFilelist, languages, environment, languagesResponse, response, rootDir, initialOpenFilelist;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    void _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee2() {
+      var _a, _b, _c, _d, _yield$getOrgMaterial2, exerciseRunning, exerciseFileList, exerciseImageTaskFilelist, languages, environment, languagesResponse, response, rootDir, initialOpenFilelist, _t2, _t4;
+      return _rollupPluginBabelHelpers.regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
             if (selectedRunning) {
-              _context2.next = 2;
+              _context2.n = 1;
               break;
             }
-            return _context2.abrupt("return");
-          case 2:
-            _context2.prev = 2;
-            _context2.next = 5;
+            return _context2.a(2);
+          case 1:
+            _context2.p = 1;
+            _context2.n = 2;
             return apiClient.getOrgMaterialExerciseExerciseRunningGet({
               exerciseRunningId: selectedRunning.id,
               returnFilelist: true,
               returnUsercodeFilelist: true
             });
-          case 5:
-            _yield$getOrgMaterial2 = _context2.sent;
+          case 2:
+            _yield$getOrgMaterial2 = _context2.v;
             exerciseRunning = _yield$getOrgMaterial2.exerciseRunning;
             setSelectedRunning(exerciseRunning);
             exerciseFileList = [].concat(_rollupPluginBabelHelpers.toConsumableArray((_a = exerciseRunning.exerciseImage.filelist) !== null && _a !== void 0 ? _a : []), _rollupPluginBabelHelpers.toConsumableArray((_b = exerciseRunning.exerciseRoom.filelist) !== null && _b !== void 0 ? _b : [])).filter(function (item) {
@@ -176,47 +170,47 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
               return !exerciseRunning.exerciseImage.hiddenFilelist.includes(item);
             });
             if (!((exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.MultiLanguage)) {
-              _context2.next = 37;
+              _context2.n = 10;
               break;
             }
-            _context2.prev = 11;
-            _context2.next = 14;
+            _context2.p = 3;
+            _context2.n = 4;
             return apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: exerciseRunning.exerciseImage.id,
               filename: '.languages.json'
             });
-          case 14:
-            languagesResponse = _context2.sent;
+          case 4:
+            languagesResponse = _context2.v;
             languages = humps.camelizeKeys(JSON.parse(languagesResponse.exerciseFile.content));
-            _context2.next = 21;
+            _context2.n = 6;
             break;
-          case 18:
-            _context2.prev = 18;
-            _context2.t0 = _context2["catch"](11);
-            console.error(_context2.t0);
-          case 21:
-            _context2.prev = 21;
-            _context2.next = 24;
+          case 5:
+            _context2.p = 5;
+            _t2 = _context2.v;
+            console.error(_t2);
+          case 6:
+            _context2.p = 6;
+            _context2.n = 7;
             return apiClient.getOrgMaterialExerciseExerciseRoomUserFileGet({
               filename: '.environment.json',
               exerciseRoomId: exerciseRoomId,
               targetDatetime: exerciseRunning.createdDatetime
             });
-          case 24:
-            response = _context2.sent;
+          case 7:
+            response = _context2.v;
             environment = humps.camelizeKeys(JSON.parse(response.userFile.content));
-            _context2.next = 31;
+            _context2.n = 9;
             break;
-          case 28:
-            _context2.prev = 28;
-            _context2.t1 = _context2["catch"](21);
+          case 8:
+            _context2.p = 8;
+            _context2.v;
             // API returns error when the user hasn't changed the language
             if (languages && Object.keys(languages).length > 0) {
               environment = {
                 language: Object.keys(languages)[0]
               };
             }
-          case 31:
+          case 9:
             rootDir = languages[environment.language].rootDir;
             initialOpenFilelist = (_d = languages === null || languages === void 0 ? void 0 : languages[environment === null || environment === void 0 ? void 0 : environment.language]) === null || _d === void 0 ? void 0 : _d.initialOpenFilelist;
             setFileList(exerciseFileList.filter(function (filepath) {
@@ -225,73 +219,73 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
             if ((initialOpenFilelist === null || initialOpenFilelist === void 0 ? void 0 : initialOpenFilelist.length) > 0) {
               setSelectedFile(initialOpenFilelist[0]);
             }
-            _context2.next = 39;
+            _context2.n = 11;
             break;
-          case 37:
+          case 10:
             setFileList(exerciseFileList);
             if (exerciseImageTaskFilelist && exerciseImageTaskFilelist.length > 0) {
               setSelectedFile(exerciseImageTaskFilelist[0]);
             }
-          case 39:
-            _context2.next = 44;
+          case 11:
+            _context2.n = 13;
             break;
-          case 41:
-            _context2.prev = 41;
-            _context2.t2 = _context2["catch"](2);
-            console.error(_context2.t2);
-          case 44:
-          case "end":
-            return _context2.stop();
+          case 12:
+            _context2.p = 12;
+            _t4 = _context2.v;
+            console.error(_t4);
+          case 13:
+            return _context2.a(2);
         }
-      }, _callee2, null, [[2, 41], [11, 18], [21, 28]]);
+      }, _callee2, null, [[6, 8], [3, 5], [1, 12]]);
     }))();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.id]);
   //
   // When selectedFile or selectedRunning is updated,
   // Get usercode of selected file.
   //
   React.useEffect(function () {
-    void _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee3() {
+    void _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regenerator().m(function _callee3() {
       var _yield$getOrgMaterial3, usercode, _yield$getOrgMaterial4, exerciseFile;
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+      return _rollupPluginBabelHelpers.regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
           case 0:
             setIsFileReady(false);
             if (!(!(selectedRunning === null || selectedRunning === void 0 ? void 0 : selectedRunning.exerciseImage) || !selectedFile || !exerciseRoomId)) {
-              _context3.next = 3;
+              _context3.n = 1;
               break;
             }
-            return _context3.abrupt("return");
-          case 3:
-            _context3.next = 5;
+            return _context3.a(2);
+          case 1:
+            _context3.n = 2;
             return apiClient.getOrgMaterialExerciseUsercodeGet({
               filename: selectedFile,
               exerciseRoomId: selectedRunning.exerciseRoom.id,
               targetDatetime: selectedRunning.createdDatetime
             });
-          case 5:
-            _yield$getOrgMaterial3 = _context3.sent;
+          case 2:
+            _yield$getOrgMaterial3 = _context3.v;
             usercode = _yield$getOrgMaterial3.usercode;
             if (!((usercode === null || usercode === void 0 ? void 0 : usercode.content) !== null && (usercode === null || usercode === void 0 ? void 0 : usercode.content) !== undefined)) {
-              _context3.next = 14;
+              _context3.n = 3;
               break;
             }
             setIsUserChanged(true);
             setIsFile(false);
             setUsercodeContent(usercode.content);
             setIsFileReady(true);
-            _context3.next = 27;
+            _context3.n = 6;
             break;
-          case 14:
-            _context3.prev = 14;
-            _context3.next = 17;
+          case 3:
+            _context3.p = 3;
+            _context3.n = 4;
             return apiClient.getOrgMaterialExerciseExerciseImageExerciseFileGet({
               exerciseImageId: selectedRunning.exerciseImage.id,
               filename: selectedFile
             });
-          case 17:
-            _yield$getOrgMaterial4 = _context3.sent;
+          case 4:
+            _yield$getOrgMaterial4 = _context3.v;
             exerciseFile = _yield$getOrgMaterial4.exerciseFile;
             if ((exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== null && (exerciseFile === null || exerciseFile === void 0 ? void 0 : exerciseFile.content) !== undefined) {
               setIsUserChanged(false);
@@ -303,19 +297,18 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
               setIsFile(true);
               setIsFileReady(true);
             }
-            _context3.next = 27;
+            _context3.n = 6;
             break;
-          case 22:
-            _context3.prev = 22;
-            _context3.t0 = _context3["catch"](14);
+          case 5:
+            _context3.p = 5;
+            _context3.v;
             setIsUserChanged(false);
             setIsFile(true);
             setIsFileReady(true);
-          case 27:
-          case "end":
-            return _context3.stop();
+          case 6:
+            return _context3.a(2);
         }
-      }, _callee3, null, [[14, 22]]);
+      }, _callee3, null, [[3, 5]]);
     }))();
   }, [selectedFile, exerciseRoomId, selectedRunning]);
   /**
@@ -390,8 +383,8 @@ var ExerciseSubmitHistory = function ExerciseSubmitHistory(_ref) {
     var uniqueFilePath = "submit-history/".concat(exerciseRoomId, "/r").concat(runningId);
     var editorFilename = "".concat(uniqueFilePath, "/").concat(selectedFile);
     return jsxRuntime.jsxs(blocks.Flex, {
-      width: "100%",
       auto: true,
+      width: "100%",
       overflow: "hidden",
       children: [jsxRuntime.jsx(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
         initialWidth: 240,