@elice/material-exercise 1.250618.0 → 1.250711.0

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileEditor.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-/**
- * Exercise file (code) editor for editable files
- */
-declare const ExerciseFileEditor: React.VFC;
-export default ExerciseFileEditor;
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -8,6 +8,7 @@ var React = require('react');
 var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var utils = require('@elice/utils');
 var recoil = require('recoil');
@@ -35,6 +36,8 @@ require('humps');
 require('ot-text-unicode');
 var useUsercodeEditWebSocket = require('../../../hooks/useUsercodeEditWebSocket.js');
 var ExerciseFileReadOnlyBanner = require('./ExerciseFileReadOnlyBanner.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -46,7 +49,8 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 /**
  * Exercise file (code) editor for editable files
  */
-var ExerciseFileEditor = function ExerciseFileEditor() {
+var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
+  var __intl = _ref.__intl;
   var _React$useContext = React__default.default.useContext(context.ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId,
     exerciseRoomId = _React$useContext.exerciseRoomId,
@@ -104,7 +108,7 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
    * Set value of current file.
    */
   var setValue = /*#__PURE__*/function () {
-    var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(content) {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(content) {
       var _a, readyExerciseImage;
       return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -162,7 +166,7 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       }, _callee);
     }));
     return function setValue(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   /**
@@ -224,6 +228,9 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       _iterator.f();
     }
   };
+  /**
+   * Handle `WRITE_SUCCEED` event.
+   */
   var handleWebsocketUsercodeWriteSucceed = function handleWebsocketUsercodeWriteSucceed(msg, requestId) {
     var request = usercodeSyncRequestsRef.current.get(requestId);
     if (request) {
@@ -231,6 +238,16 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       request.onSucceed(msg);
     }
   };
+  /**
+   * Handle `WRITE_FAILED` event.
+   */
+  var handleWebsocketUsercodeWriteFailedAndReset = function handleWebsocketUsercodeWriteFailedAndReset(msg) {
+    blocks.Notification.error(__intl.formatMessage({
+      id: 'materialExercise.websocket.writeFailedAndReset'
+    }), {
+      duration: 5000
+    });
+  };
   /**
    * Usercode edit web socket.
    */
@@ -238,10 +255,16 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     exerciseRoomId: exerciseRoomId,
     filename: activeFilename,
     onInit: function onInit() {
-      return setWebSocketReady(true);
+      setWebSocketReady(false);
+      serverInitiatedVersions.current = [];
+      editorDocHistories.current = {};
+      setTimeout(function () {
+        return setWebSocketReady(true);
+      }, 100);
     },
     onWriteNoti: handleWebsocketUsercodeWriteNoti,
-    onWriteSucceed: handleWebsocketUsercodeWriteSucceed
+    onWriteSucceed: handleWebsocketUsercodeWriteSucceed,
+    onWriteFailedAndReset: handleWebsocketUsercodeWriteFailedAndReset
   });
   /**
    *
@@ -312,7 +335,6 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   // Handle editor content change.
   //
   React__default.default.useEffect(function () {
-    var _a, _b;
     var _editorApis = editorApis.current;
     if (!_editorApis || !isReady) {
       return;
@@ -320,19 +342,24 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     _editorApis.setValue(wsUsercode.doc);
     pushEditorDocHistories();
     var subscription = undefined;
-    if (utils.FlutterApp.checkWebview()) {
-      subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(function (e) {
-        pushEditorDocHistories();
-        handleChange(e);
-        utils.FlutterApp.onDidChangeContent();
-      });
-    } else {
-      subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
-        pushEditorDocHistories();
-        handleChange(e);
-      });
-    }
+    var __subscribe = function __subscribe() {
+      var _a, _b;
+      if (utils.FlutterApp.checkWebview()) {
+        subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(function (e) {
+          pushEditorDocHistories();
+          handleChange(e);
+          utils.FlutterApp.onDidChangeContent();
+        });
+      } else {
+        subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
+          pushEditorDocHistories();
+          handleChange(e);
+        });
+      }
+    };
+    var timeout = window.setTimeout(__subscribe, 10); // need to wait for editor to be ready.
     return function () {
+      window.clearTimeout(timeout);
       if (subscription) {
         subscription.dispose();
       }
@@ -437,7 +464,14 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     column: true,
     width: "100%",
     height: "100%",
-    children: [jsxRuntime.jsx(ExerciseFileReadOnlyBanner.default, {}), jsxRuntime.jsx(MonacoEditorLazy.default, {
+    style: {
+      // When the user focuses out and in again,
+      // Monaco editor can't restore focus well in Safari when parent's user-select is none.
+      WebkitUserSelect: !readOnly ? 'text' : undefined
+    },
+    children: [jsxRuntime.jsx(ExerciseFileReadOnlyBanner.default, {
+      __intl: __intl
+    }), jsxRuntime.jsx(MonacoEditorLazy.default, {
       defaultValue: "",
       filename: editorFilename,
       markers: wsUsercode.markers,
@@ -455,5 +489,9 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     }, editorFilename)]
   });
 };
+//
+//
+//
+var ExerciseFileEditor$1 = new intl.IntlComponentBuilder(ExerciseFileEditor).add('ko', ko.default).add('en', en.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 
-exports.default = ExerciseFileEditor;
+exports.default = ExerciseFileEditor$1;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
-declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
-export default _default;
+/**
+ * Banner for readonly exercise file.
+ */
+declare const ExerciseFileReadOnlyBanner: React.FC<EliceIntlProps>;
+export default ExerciseFileReadOnlyBanner;

package/cjs/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.js

@@ -6,15 +6,12 @@ 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 styled = require('styled-components');
 require('../context/recoil.js');
 var context = require('../context/context.js');
 require('../context/recoilTypes.js');
 require('../context/subjects.js');
 require('../context/ExerciseProvider.js');
-var en = require('./locales/en.json.js');
-var ko = require('./locales/ko.json.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -44,9 +41,5 @@ var ExerciseFileReadOnlyBanner = function ExerciseFileReadOnlyBanner(_ref) {
     })
   });
 };
-//
-//
-//
-var ExerciseFileReadOnlyBanner$1 = new intl.IntlComponentBuilder(ExerciseFileReadOnlyBanner).add('ko', ko.default).add('en', en.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 
-exports.default = ExerciseFileReadOnlyBanner$1;
+exports.default = ExerciseFileReadOnlyBanner;

package/cjs/components/material-exercise/exercise-file-editor/locales/en.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageEn = {"materialExercise.text.readOnlyBanner":"[Read-Only] This file is read-only."};
+var messageEn = {"materialExercise.text.readOnlyBanner":"[Read-Only] This file is read-only.","materialExercise.websocket.writeFailedAndReset":"Failed to save the code and the content has been reset. Please try again shortly."};
 
 exports.default = messageEn;

package/cjs/components/material-exercise/exercise-file-editor/locales/ja.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ja = {"materialExercise.text.readOnlyBanner":"[読み取り専用] このファイルは読み取り専用です。"};
+var ja = {"materialExercise.text.readOnlyBanner":"[読み取り専用] このファイルは読み取り専用です。","materialExercise.websocket.writeFailedAndReset":"コードの保存に失敗し、内容が初期化されました。しばらくしてから再度お試しください。"};
 
 exports.default = ja;

package/cjs/components/material-exercise/exercise-file-editor/locales/ko.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var messageKo = {"materialExercise.text.readOnlyBanner":"[읽기전용] 이 파일은 읽기전용 입니다."};
+var messageKo = {"materialExercise.text.readOnlyBanner":"[읽기전용] 이 파일은 읽기전용 입니다.","materialExercise.websocket.writeFailedAndReset":"코드 저장에 실패하여 내용이 초기화되었습니다. 잠시 후 다시 시도해주세요."};
 
 exports.default = messageKo;

package/cjs/components/material-exercise/exercise-file-editor/locales/th.json.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var th = {"materialExercise.text.readOnlyBanner":"[อ่านเท่านั้น] ไฟล์นี้เป็นแบบอ่านเท่านั้น"};
+var th = {"materialExercise.text.readOnlyBanner":"[อ่านเท่านั้น] ไฟล์นี้เป็นแบบอ่านเท่านั้น","materialExercise.websocket.writeFailedAndReset":"ไม่สามารถบันทึกรหัสได้ เนื้อหาได้ถูกรีเซ็ต กรุณาลองใหม่อีกครั้งในภายหลัง"};
 
 exports.default = th;

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

@@ -8,6 +8,7 @@ var React = require('react');
 var blocks = require('@elice/blocks');
 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');
@@ -25,6 +26,7 @@ var StyledMessageWrapper = styled__default.default(blocks.Flex).withConfig({
   componentId: "sc-1yqi8o2-0"
 })(["height:1rem;"]);
 var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerStatusMessage() {
+  var theme = react.useTheme();
   var intl$1 = intl.useRawEliceIntl();
   var websocketStatus = recoil.useRecoilValue(recoil$1.exerciseWebSocketTotalStatusQuery(['usercodeEdit', 'runnerRoom', 'stdio']));
   var _useState = React.useState(false),
@@ -66,6 +68,9 @@ var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerSta
     title: intl$1.formatMessage({
       id: 'exerciseRunner.controller.tooltip.closed'
     }),
+    overlayStyle: {
+      zIndex: theme.zIndex.tooltip
+    },
     children: jsxRuntime.jsxs(StyledMessageWrapper, {
       align: "center",
       children: [jsxRuntime.jsx(ExerciseRunnerControllerStatusIndicator.default, {

package/cjs/hooks/useUsercodeEditWebSocket.d.ts

@@ -1,4 +1,4 @@
-import type { WebsocketUsercodeMessageWriteSucceed as WSUsercodeMessageWriteSucceed } from '@elice/types';
+import type { WebsocketUsercodeMessageWriteFailed as WSUsercodeMessageWriteFailed, WebsocketUsercodeMessageWriteSucceed as WSUsercodeMessageWriteSucceed } from '@elice/types';
 import type { TextOp } from 'ot-text-unicode';
 interface CursorRange {
     from: number;
@@ -22,6 +22,10 @@ export type UseUsercodeEditWebSocketPropOnWriteNoti = (ots: TextOp, isFromServer
  * Event handler for `WRITE_SUCCEED` event.
  */
 export type UseUsercodeEditWebSocketPropOnWriteSucceed = (msg: WSUsercodeMessageWriteSucceed, requestId: number) => void;
+/**
+ * Event handler for `WRITE_FAILED` event.
+ */
+export type UseUsercodeEditWebSocketPropOnWriteFailedAndReset = (msg: WSUsercodeMessageWriteFailed) => void;
 /**
  * Props of `useUsercodeEditWebSocket`.
  */
@@ -31,6 +35,7 @@ interface UseUsercodeEditWebSocketProps {
     onInit: UseUsercodeEditWebSocketPropOnInit;
     onWriteNoti: UseUsercodeEditWebSocketPropOnWriteNoti;
     onWriteSucceed: UseUsercodeEditWebSocketPropOnWriteSucceed;
+    onWriteFailedAndReset: UseUsercodeEditWebSocketPropOnWriteFailedAndReset;
 }
 /**
  *

package/cjs/hooks/useUsercodeEditWebSocket.js

@@ -20,7 +20,7 @@ var randomWords__default = /*#__PURE__*/_interopDefaultCompat(randomWords);
 //
 //
 //
-var MAX_WRITE_FAIL_COUNT = 5;
+var MAX_WRITE_FAIL_COUNT = 1; // FIXME: change retry count 5 -> 1 to avoid user confusion.
 /**
  *
  */
@@ -29,7 +29,8 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
     filename = _ref.filename,
     onInit = _ref.onInit,
     onWriteNoti = _ref.onWriteNoti,
-    onWriteSucceed = _ref.onWriteSucceed;
+    onWriteSucceed = _ref.onWriteSucceed,
+    onWriteFailedAndReset = _ref.onWriteFailedAndReset;
   var _return = React.useRef({});
   var _useMaterialConfig = materialSharedUtils.useMaterialConfig(),
     apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
@@ -342,7 +343,7 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
         wsMessageUpdate(msg);
         break;
       case 'WRITE_FAILED':
-        wsMessageWriteFailed();
+        wsMessageWriteFailed(msg);
         break;
       case 'WRITE_SUCCEED':
         wsMessageWriteSucceed(msg);
@@ -418,6 +419,7 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
     writeFailCount.current += 1;
     if (MAX_WRITE_FAIL_COUNT < writeFailCount.current) {
       sendReset();
+      onWriteFailedAndReset(msg);
     } else {
       sendFetch();
     }

package/es/components/material-exercise/exercise-file-editor/ExerciseFileEditor.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
-/**
- * Exercise file (code) editor for editable files
- */
-declare const ExerciseFileEditor: React.VFC;
-export default ExerciseFileEditor;
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
+export default _default;

package/es/components/material-exercise/exercise-file-editor/ExerciseFileEditor.js

@@ -3,7 +3,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useEffect } from 'react';
 import { useDebounce } from 'react-use';
 import { getOrgMaterialExerciseExerciseImageExerciseFileGet } from '@elice/api-client';
-import { Flex } from '@elice/blocks';
+import { Flex, Notification } from '@elice/blocks';
+import { IntlComponentBuilder } from '@elice/intl';
 import { enums } from '@elice/types';
 import { FlutterApp } from '@elice/utils';
 import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
@@ -31,6 +32,8 @@ import 'humps';
 import 'ot-text-unicode';
 import { useUsercodeEditWebSocket } from '../../../hooks/useUsercodeEditWebSocket.js';
 import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
 
 //
 //
@@ -38,7 +41,8 @@ import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
 /**
  * Exercise file (code) editor for editable files
  */
-var ExerciseFileEditor = function ExerciseFileEditor() {
+var ExerciseFileEditor = function ExerciseFileEditor(_ref) {
+  var __intl = _ref.__intl;
   var _React$useContext = React.useContext(ExerciseContext),
     materialExerciseId = _React$useContext.materialExerciseId,
     exerciseRoomId = _React$useContext.exerciseRoomId,
@@ -96,7 +100,7 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
    * Set value of current file.
    */
   var setValue = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(content) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(content) {
       var _a, readyExerciseImage;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -154,7 +158,7 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       }, _callee);
     }));
     return function setValue(_x) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }();
   /**
@@ -216,6 +220,9 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       _iterator.f();
     }
   };
+  /**
+   * Handle `WRITE_SUCCEED` event.
+   */
   var handleWebsocketUsercodeWriteSucceed = function handleWebsocketUsercodeWriteSucceed(msg, requestId) {
     var request = usercodeSyncRequestsRef.current.get(requestId);
     if (request) {
@@ -223,6 +230,16 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
       request.onSucceed(msg);
     }
   };
+  /**
+   * Handle `WRITE_FAILED` event.
+   */
+  var handleWebsocketUsercodeWriteFailedAndReset = function handleWebsocketUsercodeWriteFailedAndReset(msg) {
+    Notification.error(__intl.formatMessage({
+      id: 'materialExercise.websocket.writeFailedAndReset'
+    }), {
+      duration: 5000
+    });
+  };
   /**
    * Usercode edit web socket.
    */
@@ -230,10 +247,16 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     exerciseRoomId: exerciseRoomId,
     filename: activeFilename,
     onInit: function onInit() {
-      return setWebSocketReady(true);
+      setWebSocketReady(false);
+      serverInitiatedVersions.current = [];
+      editorDocHistories.current = {};
+      setTimeout(function () {
+        return setWebSocketReady(true);
+      }, 100);
     },
     onWriteNoti: handleWebsocketUsercodeWriteNoti,
-    onWriteSucceed: handleWebsocketUsercodeWriteSucceed
+    onWriteSucceed: handleWebsocketUsercodeWriteSucceed,
+    onWriteFailedAndReset: handleWebsocketUsercodeWriteFailedAndReset
   });
   /**
    *
@@ -304,7 +327,6 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
   // Handle editor content change.
   //
   React.useEffect(function () {
-    var _a, _b;
     var _editorApis = editorApis.current;
     if (!_editorApis || !isReady) {
       return;
@@ -312,19 +334,24 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     _editorApis.setValue(wsUsercode.doc);
     pushEditorDocHistories();
     var subscription = undefined;
-    if (FlutterApp.checkWebview()) {
-      subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(function (e) {
-        pushEditorDocHistories();
-        handleChange(e);
-        FlutterApp.onDidChangeContent();
-      });
-    } else {
-      subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
-        pushEditorDocHistories();
-        handleChange(e);
-      });
-    }
+    var __subscribe = function __subscribe() {
+      var _a, _b;
+      if (FlutterApp.checkWebview()) {
+        subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(function (e) {
+          pushEditorDocHistories();
+          handleChange(e);
+          FlutterApp.onDidChangeContent();
+        });
+      } else {
+        subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
+          pushEditorDocHistories();
+          handleChange(e);
+        });
+      }
+    };
+    var timeout = window.setTimeout(__subscribe, 10); // need to wait for editor to be ready.
     return function () {
+      window.clearTimeout(timeout);
       if (subscription) {
         subscription.dispose();
       }
@@ -429,7 +456,14 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     column: true,
     width: "100%",
     height: "100%",
-    children: [jsx(ExerciseFileReadOnlyBanner, {}), jsx(MonacoEditorLazy, {
+    style: {
+      // When the user focuses out and in again,
+      // Monaco editor can't restore focus well in Safari when parent's user-select is none.
+      WebkitUserSelect: !readOnly ? 'text' : undefined
+    },
+    children: [jsx(ExerciseFileReadOnlyBanner, {
+      __intl: __intl
+    }), jsx(MonacoEditorLazy, {
       defaultValue: "",
       filename: editorFilename,
       markers: wsUsercode.markers,
@@ -447,5 +481,9 @@ var ExerciseFileEditor = function ExerciseFileEditor() {
     }, editorFilename)]
   });
 };
+//
+//
+//
+var ExerciseFileEditor$1 = new IntlComponentBuilder(ExerciseFileEditor).add('ko', messageKo).add('en', messageEn).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { ExerciseFileEditor as default };
+export { ExerciseFileEditor$1 as default };

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { WithIntlComponentBuilderProps as EliceIntlProps } from '@elice/intl';
-declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<EliceIntlProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<any>>;
-export default _default;
+/**
+ * Banner for readonly exercise file.
+ */
+declare const ExerciseFileReadOnlyBanner: React.FC<EliceIntlProps>;
+export default ExerciseFileReadOnlyBanner;

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.js

@@ -2,15 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { Text } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import { IntlComponentBuilder } from '@elice/intl';
 import styled from 'styled-components';
 import '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
-import messageEn from './locales/en.json.js';
-import messageKo from './locales/ko.json.js';
 
 var StyledEditorReadOnlyBanner = styled.div.withConfig({
   componentId: "sc-kh9iw2-0"
@@ -35,9 +32,5 @@ var ExerciseFileReadOnlyBanner = function ExerciseFileReadOnlyBanner(_ref) {
     })
   });
 };
-//
-//
-//
-var ExerciseFileReadOnlyBanner$1 = new IntlComponentBuilder(ExerciseFileReadOnlyBanner).add('ko', messageKo).add('en', messageEn).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
-export { ExerciseFileReadOnlyBanner$1 as default };
+export { ExerciseFileReadOnlyBanner as default };

package/es/components/material-exercise/exercise-file-editor/locales/en.json.js

@@ -1,3 +1,3 @@
-var messageEn = {"materialExercise.text.readOnlyBanner":"[Read-Only] This file is read-only."};
+var messageEn = {"materialExercise.text.readOnlyBanner":"[Read-Only] This file is read-only.","materialExercise.websocket.writeFailedAndReset":"Failed to save the code and the content has been reset. Please try again shortly."};
 
 export { messageEn as default };

package/es/components/material-exercise/exercise-file-editor/locales/ja.json.js

@@ -1,3 +1,3 @@
-var ja = {"materialExercise.text.readOnlyBanner":"[読み取り専用] このファイルは読み取り専用です。"};
+var ja = {"materialExercise.text.readOnlyBanner":"[読み取り専用] このファイルは読み取り専用です。","materialExercise.websocket.writeFailedAndReset":"コードの保存に失敗し、内容が初期化されました。しばらくしてから再度お試しください。"};
 
 export { ja as default };

package/es/components/material-exercise/exercise-file-editor/locales/ko.json.js

@@ -1,3 +1,3 @@
-var messageKo = {"materialExercise.text.readOnlyBanner":"[읽기전용] 이 파일은 읽기전용 입니다."};
+var messageKo = {"materialExercise.text.readOnlyBanner":"[읽기전용] 이 파일은 읽기전용 입니다.","materialExercise.websocket.writeFailedAndReset":"코드 저장에 실패하여 내용이 초기화되었습니다. 잠시 후 다시 시도해주세요."};
 
 export { messageKo as default };

package/es/components/material-exercise/exercise-file-editor/locales/th.json.js

@@ -1,3 +1,3 @@
-var th = {"materialExercise.text.readOnlyBanner":"[อ่านเท่านั้น] ไฟล์นี้เป็นแบบอ่านเท่านั้น"};
+var th = {"materialExercise.text.readOnlyBanner":"[อ่านเท่านั้น] ไฟล์นี้เป็นแบบอ่านเท่านั้น","materialExercise.websocket.writeFailedAndReset":"ไม่สามารถบันทึกรหัสได้ เนื้อหาได้ถูกรีเซ็ต กรุณาลองใหม่อีกครั้งในภายหลัง"};
 
 export { th as default };

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

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { Flex, Tooltip, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { EliceWebSocket } from '@elice/websocket';
+import { useTheme } from '@emotion/react';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { exerciseWebSocketTotalStatusQuery } from '../context/recoil.js';
@@ -17,6 +18,7 @@ var StyledMessageWrapper = styled(Flex).withConfig({
   componentId: "sc-1yqi8o2-0"
 })(["height:1rem;"]);
 var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerStatusMessage() {
+  var theme = useTheme();
   var intl = useRawEliceIntl();
   var websocketStatus = useRecoilValue(exerciseWebSocketTotalStatusQuery(['usercodeEdit', 'runnerRoom', 'stdio']));
   var _useState = useState(false),
@@ -58,6 +60,9 @@ var ExerciseRunnerControllerStatusMessage = function ExerciseRunnerControllerSta
     title: intl.formatMessage({
       id: 'exerciseRunner.controller.tooltip.closed'
     }),
+    overlayStyle: {
+      zIndex: theme.zIndex.tooltip
+    },
     children: jsxs(StyledMessageWrapper, {
       align: "center",
       children: [jsx(ExerciseRunnerControllerStatusIndicator, {

package/es/hooks/useUsercodeEditWebSocket.d.ts

@@ -1,4 +1,4 @@
-import type { WebsocketUsercodeMessageWriteSucceed as WSUsercodeMessageWriteSucceed } from '@elice/types';
+import type { WebsocketUsercodeMessageWriteFailed as WSUsercodeMessageWriteFailed, WebsocketUsercodeMessageWriteSucceed as WSUsercodeMessageWriteSucceed } from '@elice/types';
 import type { TextOp } from 'ot-text-unicode';
 interface CursorRange {
     from: number;
@@ -22,6 +22,10 @@ export type UseUsercodeEditWebSocketPropOnWriteNoti = (ots: TextOp, isFromServer
  * Event handler for `WRITE_SUCCEED` event.
  */
 export type UseUsercodeEditWebSocketPropOnWriteSucceed = (msg: WSUsercodeMessageWriteSucceed, requestId: number) => void;
+/**
+ * Event handler for `WRITE_FAILED` event.
+ */
+export type UseUsercodeEditWebSocketPropOnWriteFailedAndReset = (msg: WSUsercodeMessageWriteFailed) => void;
 /**
  * Props of `useUsercodeEditWebSocket`.
  */
@@ -31,6 +35,7 @@ interface UseUsercodeEditWebSocketProps {
     onInit: UseUsercodeEditWebSocketPropOnInit;
     onWriteNoti: UseUsercodeEditWebSocketPropOnWriteNoti;
     onWriteSucceed: UseUsercodeEditWebSocketPropOnWriteSucceed;
+    onWriteFailedAndReset: UseUsercodeEditWebSocketPropOnWriteFailedAndReset;
 }
 /**
  *

package/es/hooks/useUsercodeEditWebSocket.js

@@ -13,7 +13,7 @@ import { uniCount, uniToStrPos } from 'unicount';
 //
 //
 //
-var MAX_WRITE_FAIL_COUNT = 5;
+var MAX_WRITE_FAIL_COUNT = 1; // FIXME: change retry count 5 -> 1 to avoid user confusion.
 /**
  *
  */
@@ -22,7 +22,8 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
     filename = _ref.filename,
     onInit = _ref.onInit,
     onWriteNoti = _ref.onWriteNoti,
-    onWriteSucceed = _ref.onWriteSucceed;
+    onWriteSucceed = _ref.onWriteSucceed,
+    onWriteFailedAndReset = _ref.onWriteFailedAndReset;
   var _return = useRef({});
   var _useMaterialConfig = useMaterialConfig(),
     apiWsOriginUrl = _useMaterialConfig.apiWsOriginUrl;
@@ -335,7 +336,7 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
         wsMessageUpdate(msg);
         break;
       case 'WRITE_FAILED':
-        wsMessageWriteFailed();
+        wsMessageWriteFailed(msg);
         break;
       case 'WRITE_SUCCEED':
         wsMessageWriteSucceed(msg);
@@ -411,6 +412,7 @@ var useUsercodeEditWebSocket = function useUsercodeEditWebSocket(_ref) {
     writeFailCount.current += 1;
     if (MAX_WRITE_FAIL_COUNT < writeFailCount.current) {
       sendReset();
+      onWriteFailedAndReset(msg);
     } else {
       sendFetch();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.250618.0",
+  "version": "1.250711.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -77,14 +77,14 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-    "@elice/api-client": "^1.241220.0",
+    "@elice/api-client": "^1.250702.0",
     "@elice/blocks": "1.241007.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.230814.0",
     "@elice/intl": "0.241127.0",
     "@elice/markdown": "1.241015.0",
-    "@elice/material-shared-types": "1.250618.0",
-    "@elice/material-shared-utils": "1.250618.0",
+    "@elice/material-shared-types": "1.250711.0",
+    "@elice/material-shared-utils": "1.250711.0",
     "@elice/mui-elements": "^5.250108.0-controllabel.0",
     "@elice/mui-system": "^5.250108.0-controllabel.0",
     "@elice/types": "^1.250612.0-teamleaderboard.1",