@elice/material-exercise 1.230325.0 → 1.230418.0

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

@@ -1,3 +1,4 @@
+import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, createForOfIteratorHelper as _createForOfIteratorHelper, typeof as _typeof } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { getOrgMaterialExerciseExerciseImageExerciseFileGet } from '@elice/api-client';
 import { Flex } from '@elice/blocks';
@@ -16,7 +17,7 @@ import 'monaco-editor/esm/vs/editor/editor.api';
 import '../../shared/monaco-editor/constants/monaco/preferences.js';
 import 'react-use';
 import 'socket.io-client';
-import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorValueState } from '../context/recoil.js';
+import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
 import '../context/recoilTypes.js';
 import { exerciseFileEditorContentChange$, exerciseFileEditorSaveAction$ } from '../context/subjects.js';
@@ -32,99 +33,129 @@ import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
 
 //
 //
-
+//
 /**
  * Exercise file (code) editor for editable files
  */
-
-const ExerciseFileEditor = () => {
-  const {
-    materialExerciseId,
-    exerciseRoomId,
-    readOnlyEditor,
-    readOnlyActiveFile,
-    locale
-  } = React.useContext(ExerciseContext);
-  const exercise = useRecoilValue(exerciseState(materialExerciseId));
-  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
-  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
-  const preference = useRecoilValue(exerciseEditorPreferenceState);
-  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
-  const readOnly = readOnlyEditor || readOnlyActiveFile;
-  const setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
-  const setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
-  const setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState);
-  const setExerciseMonacoEditorValueState = useSetRecoilState(exerciseMonacoEditorValueState); // editor
-
-  const editorApis = React.useRef(null);
-  const editorDocHistories = React.useRef({});
-  const serverInitiatedVersions = React.useRef([]); // ready state
-
-  const [isEditorReady, setEditorReady] = React.useState(false);
-  const [isWebSocketReady, setWebSocketReady] = React.useState(false);
-  const isReady = isEditorReady && isWebSocketReady;
-  const [isFileResettable, setFileResettable] = React.useState(checkExerciseFileResettable(activeFilename, {
-    exercise,
-    exerciseRoom
-  }));
+var ExerciseFileEditor = function ExerciseFileEditor() {
+  var _React$useContext = React.useContext(ExerciseContext),
+    materialExerciseId = _React$useContext.materialExerciseId,
+    exerciseRoomId = _React$useContext.exerciseRoomId,
+    readOnlyEditor = _React$useContext.readOnlyEditor,
+    readOnlyActiveFile = _React$useContext.readOnlyActiveFile,
+    locale = _React$useContext.locale;
+  var exercise = useRecoilValue(exerciseState(materialExerciseId));
+  var exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  var lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise._lectureId));
+  var preference = useRecoilValue(exerciseEditorPreferenceState);
+  var activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  var readOnly = readOnlyEditor || readOnlyActiveFile;
+  var setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
+  var setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
+  var setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState);
+  // editor
+  var editorApis = React.useRef(null);
+  var editorDocHistories = React.useRef({});
+  var serverInitiatedVersions = React.useRef([]);
+  // ready state
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isEditorReady = _React$useState2[0],
+    setEditorReady = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isWebSocketReady = _React$useState4[0],
+    setWebSocketReady = _React$useState4[1];
+  var isReady = isEditorReady && isWebSocketReady;
+  var _React$useState5 = React.useState(checkExerciseFileResettable(activeFilename, {
+      exercise: exercise,
+      exerciseRoom: exerciseRoom
+    })),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isFileResettable = _React$useState6[0],
+    setFileResettable = _React$useState6[1];
+  var setExerciseMonacoEditorApisState = useSetRecoilState(exerciseMonacoEditorApisState);
+  React.useEffect(function () {
+    if (editorApis.current) {
+      setExerciseMonacoEditorApisState(editorApis.current);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorApis.current]);
   /**
    * Set value of current file.
    */
-
-  const setValue = async content => {
-    var _a;
-
-    if (!isFileResettable) {
-      console.warn('Cannot reset file since not resettable.');
-      return;
-    }
-
-    if (!activeFilename) {
-      console.warn('Cannot reset file since no file selected.');
-      return;
-    }
-
-    if (content) {
-      setExerciseMonacoEditorValueState(content);
-      (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
-    } // reset as initial value on `null` received.
-    else if (content === null) {
-      const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
-
-      if (!editorApis.current || !readyExerciseImage) {
-        return;
-      }
-
-      return getOrgMaterialExerciseExerciseImageExerciseFileGet({
-        exerciseImageId: readyExerciseImage.id,
-        filename: activeFilename
-      }).then(res => res.exerciseFile.content).then(content => {
-        var _a;
-
-        if (typeof content === 'string') {
-          setExerciseMonacoEditorValueState(content);
-          (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
-        } else {
-          setFileResettable(false);
+  var setValue = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(content) {
+      var _a, readyExerciseImage;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (isFileResettable) {
+              _context.next = 3;
+              break;
+            }
+            console.warn('Cannot reset file since not resettable.');
+            return _context.abrupt("return");
+          case 3:
+            if (activeFilename) {
+              _context.next = 6;
+              break;
+            }
+            console.warn('Cannot reset file since no file selected.');
+            return _context.abrupt("return");
+          case 6:
+            if (!content) {
+              _context.next = 10;
+              break;
+            }
+            (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+            _context.next = 15;
+            break;
+          case 10:
+            if (!(content === null)) {
+              _context.next = 15;
+              break;
+            }
+            readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+            if (!(!editorApis.current || !readyExerciseImage)) {
+              _context.next = 14;
+              break;
+            }
+            return _context.abrupt("return");
+          case 14:
+            return _context.abrupt("return", getOrgMaterialExerciseExerciseImageExerciseFileGet({
+              exerciseImageId: readyExerciseImage.id,
+              filename: activeFilename
+            }).then(function (res) {
+              return res.exerciseFile.content;
+            }).then(function (content) {
+              var _a;
+              if (typeof content === 'string') {
+                (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+              } else {
+                setFileResettable(false);
+              }
+            }));
+          case 15:
+          case "end":
+            return _context.stop();
         }
-      });
-    }
-  };
+      }, _callee);
+    }));
+    return function setValue(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
   /**
    * Update editor document history.
    */
-
-
-  const pushEditorDocHistories = () => {
-    const _editorApis = editorApis.current;
-
+  var pushEditorDocHistories = function pushEditorDocHistories() {
+    var _editorApis = editorApis.current;
     if (!_editorApis) {
       return;
     }
-
     if (typeof _editorApis.getMonacoModel === 'function') {
-      const model = _editorApis.getMonacoModel();
-
+      var model = _editorApis.getMonacoModel();
       if (model) {
         editorDocHistories.current[model.getVersionId()] = model.getValue();
       }
@@ -134,196 +165,190 @@ const ExerciseFileEditor = () => {
    * Handle usercode edit websocket received `WRITE_NOTI` message,
    * move cursor or insert / delete content.
    */
-
-
-  const handleWebsocketUsercodeWriteNoti = ots => {
+  var handleWebsocketUsercodeWriteNoti = function handleWebsocketUsercodeWriteNoti(ots) {
     var _a, _b, _c;
-
-    let cursor = 0;
-
-    for (const ot of ots) {
-      const model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
-
-      if (!model) {
-        continue;
-      } // remove previous versions.
-
-
-      if (serverInitiatedVersions.current.length > 100) {
-        serverInitiatedVersions.current.splice(0, 50);
-      }
-
-      switch (typeof ot) {
-        // cursor changed...
-        case 'number':
-          cursor += ot;
-          break;
-        // insertion
-
-        case 'string':
-          serverInitiatedVersions.current.push(model.getVersionId());
-          (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
-          cursor += ot.length;
-          break;
-        // deletion
-
-        default:
-          serverInitiatedVersions.current.push(model.getVersionId());
-          (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
-          break;
+    var cursor = 0;
+    var _iterator = _createForOfIteratorHelper(ots),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var ot = _step.value;
+        var model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
+        if (!model) {
+          continue;
+        }
+        // remove previous versions.
+        if (serverInitiatedVersions.current.length > 100) {
+          serverInitiatedVersions.current.splice(0, 50);
+        }
+        switch (_typeof(ot)) {
+          // cursor changed...
+          case 'number':
+            cursor += ot;
+            break;
+          // insertion
+          case 'string':
+            serverInitiatedVersions.current.push(model.getVersionId());
+            (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
+            cursor += ot.length;
+            break;
+          // deletion
+          default:
+            serverInitiatedVersions.current.push(model.getVersionId());
+            (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
+            break;
+        }
       }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
   };
   /**
    * Usercode edit web socket.
    */
-
-
-  const wsUsercode = useUsercodeEditWebSocket({
-    exerciseRoomId,
+  var wsUsercode = useUsercodeEditWebSocket({
+    exerciseRoomId: exerciseRoomId,
     filename: activeFilename,
-    onInit: () => setWebSocketReady(true),
+    onInit: function onInit() {
+      return setWebSocketReady(true);
+    },
     onWriteNoti: handleWebsocketUsercodeWriteNoti
   });
   /**
    *
    */
-
-  const handleChange = e => {
-    const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
-
+  var handleChange = function handleChange(e) {
+    var index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
     if (index !== -1) {
       serverInitiatedVersions.current.splice(index, 1);
       return;
-    } // get previous model doc
-
-
-    const prevDoc = editorDocHistories.current[e.versionId - 1]; // send OTs to server
-
-    for (const change of e.changes) {
-      // insertion
-      if (change.rangeLength === 0 && !readOnly) {
-        wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
-      } // deletion
-      else {
-        if (prevDoc && !readOnly) {
-          wsUsercode.sendOTs([change.rangeOffset || null, {
-            d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
-          }].filter(Boolean));
-        } // replace
-
-
-        if (change.text.length > 0 && !readOnly) {
+    }
+    // get previous model doc
+    var prevDoc = editorDocHistories.current[e.versionId - 1];
+    // send OTs to server
+    var _iterator2 = _createForOfIteratorHelper(e.changes),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var change = _step2.value;
+        // insertion
+        if (change.rangeLength === 0 && !readOnly) {
           wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
         }
+        // deletion
+        else {
+          if (prevDoc && !readOnly) {
+            wsUsercode.sendOTs([change.rangeOffset || null, {
+              d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
+            }].filter(Boolean));
+          }
+          // replace
+          if (change.text.length > 0 && !readOnly) {
+            wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+          }
+        }
       }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
     }
-
     delete editorDocHistories.current[e.versionId - 1];
   };
   /**
    * Handle editor cursor change.
    */
-
-
-  const handleEditorCursor = range => {
+  var handleEditorCursor = function handleEditorCursor(range) {
     var _a, _b;
-
     if (!readOnly) {
       wsUsercode.sendCursor(range);
     }
-
     setFileEditorCursorState(range);
     setFileEditorCursorSelectionValueState((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValueInRange(range.from, range.to)) !== null && _b !== void 0 ? _b : '');
   };
   /**
    * Handle editor save shortcut emitted.
    */
-
-
-  const handleSave = () => {
+  var handleSave = function handleSave() {
     exerciseFileEditorSaveAction$.next();
-  }; //
+  };
+  //
   // Handle editor content change.
   //
-
-
-  React.useEffect(() => {
+  React.useEffect(function () {
     var _a, _b;
-
-    const _editorApis = editorApis.current;
-
+    var _editorApis = editorApis.current;
     if (!_editorApis || !isReady) {
       return;
     }
-
-    setExerciseMonacoEditorValueState(wsUsercode.doc);
-
     _editorApis.setValue(wsUsercode.doc);
-
     pushEditorDocHistories();
-    let subscription = undefined;
-
+    var subscription = undefined;
     if (FlutterApp.checkWebview()) {
-      subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(e => {
+      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(e => {
+      subscription = (_b = _editorApis.editor) === null || _b === void 0 ? void 0 : _b.onDidChangeModelContent(function (e) {
         pushEditorDocHistories();
         handleChange(e);
       });
     }
-
-    return () => {
+    return function () {
       if (subscription) {
         subscription.dispose();
       }
     };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isReady, readOnly]); //
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isReady, readOnly]);
+  //
   // Handle websocket status change.
   //
-
-  React.useEffect(() => setUsercodeWebSocketState(wsUsercode.readyState), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [wsUsercode.readyState]); //
+  React.useEffect(function () {
+    return setUsercodeWebSocketState(wsUsercode.readyState);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUsercode.readyState]);
+  //
   // handle content change request to code editor.
   //
-
-  React.useEffect(() => {
-    const contentChangeSub = exerciseFileEditorContentChange$.subscribe(v => {
-      setValue(v).catch(() => void 0);
+  React.useEffect(function () {
+    var contentChangeSub = exerciseFileEditorContentChange$.subscribe(function (v) {
+      setValue(v).catch(function () {
+        return void 0;
+      });
     });
-    return () => {
+    return function () {
       contentChangeSub.unsubscribe();
     };
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  []); //
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  //
   //
   //
   // empty file
-
   if (!activeFilename) {
     return React.createElement(ExerciseFileShimmer, null);
-  } // non-editable file
-
-
+  }
+  // non-editable file
   if (!wsUsercode.docEditable) {
     return React.createElement(FileViewerNonViewable, {
       filename: activeFilename,
       locale: locale
     });
-  } // websocket not ready
-
-
+  }
+  // websocket not ready
   if (!isWebSocketReady) {
     return React.createElement(ExerciseFileShimmer, null);
   }
-
-  const uniqueFilePath = `code/${exerciseRoomId}`;
-  const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+  var uniqueFilePath = "code/".concat(exerciseRoomId);
+  var editorFilename = "".concat(uniqueFilePath, "/").concat(activeFilename);
   return React.createElement(Flex, {
     column: true,
     width: "100%",
@@ -334,15 +359,17 @@ const ExerciseFileEditor = () => {
     filename: editorFilename,
     markers: wsUsercode.markers,
     preference: Object.assign(Object.assign({}, preference), {
-      readOnly
+      readOnly: readOnly
     }),
     noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test,
     locale: locale,
-    onLoad: () => setEditorReady(true),
+    onLoad: function onLoad() {
+      return setEditorReady(true);
+    },
     onCursor: handleEditorCursor,
     onSave: handleSave,
     ref: editorApis
   }));
-}; //
+};
 
 export { ExerciseFileEditor as default };

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

@@ -9,28 +9,24 @@ import '../context/recoilTypes.js';
 import '../context/subjects.js';
 import '../context/ExerciseProvider.js';
 
-const StyledEditorReadOnlyBanner = styled.div.withConfig({
+var StyledEditorReadOnlyBanner = styled.div.withConfig({
   componentId: "sc-kh9iw2-0"
 })(["flex:0 0 auto;display:flex;align-items:center;margin:0.75rem;padding:0 1rem;height:2rem;border:1px solid ", ";border-radius:2px;"], base.color.navy5);
 /**
  * Banner for readonly exercise file.
  */
-
-const ExerciseFileReadOnlyBanner = () => {
-  const {
-    readOnlyActiveFile
-  } = React.useContext(ExerciseContext);
-
+var ExerciseFileReadOnlyBanner = function ExerciseFileReadOnlyBanner() {
+  var _React$useContext = React.useContext(ExerciseContext),
+    readOnlyActiveFile = _React$useContext.readOnlyActiveFile;
   if (!readOnlyActiveFile) {
     return null;
   }
-
   return React.createElement(StyledEditorReadOnlyBanner, null, React.createElement(Text, {
     size: "tiny",
     role: "gray3"
   }, React.createElement(FormattedMessage, {
     id: "[\uC77D\uAE30\uC804\uC6A9] \uC774 \uD30C\uC77C\uC740 \uC77D\uAE30\uC804\uC6A9 \uC785\uB2C8\uB2E4."
   })));
-}; //
+};
 
 export { ExerciseFileReadOnlyBanner as default };