@elice/material-exercise 1.220803.0

package/README.md

@@ -0,0 +1,41 @@
+# elice-material-exercise
+
+User view and editing components of Elice material exercise.
+
+## Monaco
+
+A [Monaco Editor](https://microsoft.github.io/monaco-editor/) binding for an Elice material exercise.
+
+### Dependencies
+
+- `"monaco-editor"`: "0.33.0",
+- `"monaco-editor-webpack-plugin"`: "~7.0.1",
+
+### Properties
+
+- `apiBaseUrl`\*: `string`: An Elice API base URL. Must not end with the trailing slash `/`.
+- `wsBaseUrl`\*: `string`: An Elice web socket base URL. Must not end with the trailing slash `/`.
+- `orgNameShort`\*: `string`: `organization.nameShort`
+- `otp`?: `string`: OTP to resolve session of the user to be connected. Recommended. Either `otp` or `sessionkey` must be present.
+- `sessionkey`?: `string`: Session key of the user to be connected. For debugging prupose only. NOT RECOMMENDED due to security reasons.
+- `exerciseImageId`?: `number`: Exercise Image ID.
+- `exerciseRoomId`\*: `number`: Exercise Room ID.
+- `filename`\*: `string`: Filename.
+
+### Example
+
+```jsx
+<MonacoEditor
+  apiBaseUrl={'https://api-beta.elicer.io:6664'}
+  wsBaseUrl={'wss://api-beta.elicer.io:7664'}
+  orgNameShort={orgNameShort}
+  sessionkey={sessionkey}
+  otp={otp}
+  exerciseRoomId={parseInt(exerciseRoomId) || 0}
+  filename={filename}
+/>
+```
+
+### Runner
+
+* NoVNC@1.2.0 shouldn't be upgraded without consulting with JK / Suin.

package/cjs/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './material-exercise';
+export * from './shared/monaco-editor';

package/cjs/components/material-exercise/MaterialExercise.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { MaterialExerciseCommonApis, MaterialExerciseCommonProps } from './context';
+export declare type MaterialExerciseProps = MaterialExerciseCommonProps;
+export declare type MaterialExerciseApis = MaterialExerciseCommonApis;
+declare const _default: React.ForwardRefExoticComponent<Pick<MaterialExerciseCommonProps & React.RefAttributes<MaterialExerciseCommonApis> & import("@elice/material-shared-utils").MaterialCommponentCommonProps, "key" | keyof MaterialExerciseCommonProps> & React.RefAttributes<MaterialExerciseCommonApis>>;
+export default _default;

package/cjs/components/material-exercise/MaterialExercise.js

@@ -0,0 +1,170 @@
+'use strict';
+
+var React = require('react');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var recoil = require('recoil');
+var stylesheets = require('../../constants/stylesheets.js');
+var ExerciseFileTabsFileTreeButton = require('./exercise-file-tabs/ExerciseFileTabsFileTreeButton.js');
+var recoil$1 = require('./context/recoil.js');
+require('./context/context.js');
+var recoilTypes = require('./context/recoilTypes.js');
+var subjects = require('./context/subjects.js');
+var ExerciseProvider = require('./context/ExerciseProvider.js');
+var ExerciseFile = require('./exercise-file/ExerciseFile.js');
+require('./exercise-file-tabs/ExerciseFileTabs.js');
+var ExerciseFileTabsLazy = require('./exercise-file-tabs/ExerciseFileTabsLazy.js');
+require('./exercise-file-tree/ExerciseFileTree.js');
+var ExerciseFileTreeLazy = require('./exercise-file-tree/ExerciseFileTreeLazy.js');
+var ExerciseMenu = require('./exercise-menu/ExerciseMenu.js');
+var ExerciseMultilangDropdownLazy = require('./exercise-multilang-dropdown/ExerciseMultilangDropdownLazy.js');
+var ExercisePreview = require('./exercise-preview/ExercisePreview.js');
+var ExerciseRightpane = require('./exercise-rightpane/ExerciseRightpane.js');
+var ExerciseRunner = require('./exercise-runner/ExerciseRunner.js');
+var MaterialExercise_styled = require('./MaterialExercise.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+
+/**
+ * Material exercise.
+ */
+
+const MaterialExercise = React.forwardRef((props, ref) => {
+  const _api = React__default["default"].useRef({});
+
+  const {
+    width,
+    height
+  } = recoil.useRecoilValue(recoil$1.exerciseContainerSizeState);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(props.materialExerciseId));
+  const exerciseFileTreeOpened = recoil.useRecoilValue(recoil$1.exerciseFileTreeOpenedState);
+  const exercisePreviewType = recoil.useRecoilValue(recoil$1.exercisePreviewTypeState(props.materialExerciseId));
+  const exercisePreviewDisplayMode = recoil.useRecoilValue(recoil$1.exercisePreviewDisplayModeState);
+  /**
+   * File tree
+   */
+
+  const renderExerciseFileTree = () => {
+    return React__default["default"].createElement(MaterialExercise_styled.StyledxerciseFileTreeContaner, {
+      "aria-hidden": !exerciseFileTreeOpened
+    }, React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      initialWidth: Math.max(MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.FILETREE),
+      minConstraints: [MaterialExercise_styled.EXERCISE_FILE_TREE_MIN_WIDTH, Infinity],
+      resizeHandles: ['e']
+    }), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileTreeWrap, null, React__default["default"].createElement(ExerciseFileTreeLazy, null))));
+  };
+  /**
+   * File tree toggle button
+   */
+
+
+  const renderExerciseFileTreeButton = () => {
+    return React__default["default"].createElement(ExerciseFileTabsFileTreeButton, null);
+  };
+  /**
+   * File tabs
+   */
+
+
+  const renderExerciseFileTabs = () => {
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabsWrap, null, React__default["default"].createElement(ExerciseFileTabsLazy, null));
+  };
+  /**
+   * Menu
+   */
+
+
+  const renderExerciseMenu = () => {
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabMenuWrap, null, React__default["default"].createElement(ExerciseMultilangDropdownLazy, null), React__default["default"].createElement(ExerciseMenu, null));
+  };
+  /**
+   * Code editor and file viewer
+   */
+
+
+  const renderExerciseFile = () => {
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileWrap, null, React__default["default"].createElement(ExerciseFile, null));
+  };
+  /**
+   * Exercise preview (side by side)
+   */
+
+
+  const renderExercisePreviewSideBySide = () => {
+    if (exercisePreviewType === recoilTypes.ExercisePreviewType.None) {
+      return null;
+    }
+
+    if (exercisePreviewDisplayMode !== recoilTypes.ExercisePreviewDisplayMode.SideBySide) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      children: React__default["default"].createElement(ExercisePreview, null),
+      initialWidth: Math.max(MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, width * MaterialExercise_styled.EXERCISE_HORIZONTAL_RATIO.PREVIEW),
+      minConstraints: [MaterialExercise_styled.EXERCISE_PREVIEW_MIN_WIDTH, Infinity],
+      resizeHandles: ['w']
+    }));
+  };
+  /**
+   * Exercise main
+   */
+
+
+  const renderExerciseMain = () => {
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
+      return null;
+    }
+
+    return React__default["default"].createElement(MaterialExercise_styled.StyledExerciseMain, null, renderExerciseFileTree(), React__default["default"].createElement(MaterialExercise_styled.StyledExerciseFileAndTabWrap, null, React__default["default"].createElement(MaterialExercise_styled.StyledExerciseTabBar, null, renderExerciseFileTreeButton(), renderExerciseFileTabs(), renderExerciseMenu()), renderExerciseFile()), React__default["default"].createElement(ExerciseRightpane, null));
+  };
+  /**
+   * Exercise Runner
+   */
+
+
+  const renderExerciseRunner = () => {
+    const _runner = React__default["default"].createElement(MaterialExercise_styled.StyledExerciseRunnerWrap, null, React__default["default"].createElement(ExerciseRunner, {
+      exercisePreview: React__default["default"].createElement(ExercisePreview, null)
+    }));
+
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.isEditorDisabled) {
+      return _runner;
+    }
+
+    return React__default["default"].createElement(blocks.ResizableNext, Object.assign({}, stylesheets.MATERIAL_RESIZABLE_COMMON_PROPS, {
+      initialHeight: Math.max(MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT, height * 0.35),
+      minConstraints: [Infinity, MaterialExercise_styled.EXERCISE_RUNNER_MIN_HEIGHT],
+      resizeHandles: ['n']
+    }), _runner);
+  }; //
+  //
+  //
+
+
+  _api.current.sendTextToRunner = text => {
+    subjects.exerciseRunnerTextSend$.next(text);
+  };
+
+  React__default["default"].useImperativeHandle(ref, () => _api.current); //
+  //
+  //
+
+  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MaterialExercise_styled.StyledExerciseContainer, null, renderExerciseMain(), renderExerciseRunner()), renderExercisePreviewSideBySide());
+}); //
+//
+//
+
+var MaterialExercise$1 = materialSharedUtils.withForwardRefMaterial(React.forwardRef((props, ref) => React__default["default"].createElement(ExerciseProvider, Object.assign({}, props), React__default["default"].createElement(MaterialExercise, Object.assign({}, props, {
+  ref: ref
+})))), apiClient.config.init, {
+  overrideRecoilScope: true
+});
+
+module.exports = MaterialExercise$1;

package/cjs/components/material-exercise/MaterialExercise.styled.d.ts

@@ -0,0 +1,36 @@
+export declare const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+export declare const EXERCISE_PREVIEW_MIN_WIDTH = 128;
+export declare const EXERCISE_RUNNER_MIN_HEIGHT = 128;
+export declare const EXERCISE_HORIZONTAL_RATIO: {
+    FILETREE: number;
+    EDITOR: number;
+    PREVIEW: number;
+};
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+export declare const StyledExerciseContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+export declare const StyledExerciseMain: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+export declare const StyledExerciseFileAndTabWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseTabBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseTabsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseTabMenuWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseFileTreeWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledxerciseFileTreeContaner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledExerciseRunnerWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/cjs/components/material-exercise/MaterialExercise.styled.js

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+var stylesheets = require('../../constants/stylesheets.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const EXERCISE_FILE_TREE_MIN_WIDTH = 128;
+const EXERCISE_PREVIEW_MIN_WIDTH = 128;
+const EXERCISE_RUNNER_MIN_HEIGHT = 128;
+const EXERCISE_HORIZONTAL_RATIO = {
+  FILETREE: 0.15,
+  EDITOR: 0.45,
+  PREVIEW: 0.4
+};
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ * - Runner
+ */
+
+const StyledExerciseContainer = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-0"
+})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;overflow:hidden;"]);
+/**
+ * Wrapper contains:
+ * - FileTree
+ * - FileTabs
+ * - File (Editor)
+ */
+
+const StyledExerciseMain = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-1"
+})(["flex:1;display:flex;width:100%;min-width:0;min-height:0;"]);
+/**
+ * Wrapper contains:
+ * - FileTabs
+ * - File (Editor)
+ */
+
+const StyledExerciseFileAndTabWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-2"
+})(["flex:1;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;background-color:", ";"], designTokens.base.color.navy9);
+const StyledExerciseFileWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-3"
+})(["flex:1;min-height:0;"]); // ========== Exercise FileTab ==========
+
+const StyledExerciseTabBar = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-4"
+})(["display:flex;border-bottom:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
+const StyledExerciseTabsWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-5"
+})(["flex:1;min-width:0;"]);
+const StyledExerciseTabMenuWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-6"
+})(["display:flex;justify-content:center;align-items:center;padding:0 0.5rem 0 1rem;background-color:", ";"], designTokens.base.color.navy8); // ========== Exercise FileTree ==========
+
+const StyledExerciseFileTreeWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-7"
+})(["flex:1;display:flex;flex-direction:column;min-width:0;height:100%;border-right:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
+const StyledxerciseFileTreeContaner = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-8"
+})(["display:flex;height:100%;max-width:auto;&[aria-hidden='true']{max-width:0;overflow:hidden;}"]); // ========== Exercise Runner ==========
+
+const StyledExerciseRunnerWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-9joi7g-9"
+})(["width:100%;height:100%;border-top:", ";"], stylesheets.MATERIAL_DIVIDER_BORDER_VALUE);
+
+exports.EXERCISE_FILE_TREE_MIN_WIDTH = EXERCISE_FILE_TREE_MIN_WIDTH;
+exports.EXERCISE_HORIZONTAL_RATIO = EXERCISE_HORIZONTAL_RATIO;
+exports.EXERCISE_PREVIEW_MIN_WIDTH = EXERCISE_PREVIEW_MIN_WIDTH;
+exports.EXERCISE_RUNNER_MIN_HEIGHT = EXERCISE_RUNNER_MIN_HEIGHT;
+exports.StyledExerciseContainer = StyledExerciseContainer;
+exports.StyledExerciseFileAndTabWrap = StyledExerciseFileAndTabWrap;
+exports.StyledExerciseFileTreeWrap = StyledExerciseFileTreeWrap;
+exports.StyledExerciseFileWrap = StyledExerciseFileWrap;
+exports.StyledExerciseMain = StyledExerciseMain;
+exports.StyledExerciseRunnerWrap = StyledExerciseRunnerWrap;
+exports.StyledExerciseTabBar = StyledExerciseTabBar;
+exports.StyledExerciseTabMenuWrap = StyledExerciseTabMenuWrap;
+exports.StyledExerciseTabsWrap = StyledExerciseTabsWrap;
+exports.StyledxerciseFileTreeContaner = StyledxerciseFileTreeContaner;

package/cjs/components/material-exercise/context/ExerciseIntlProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MaterialIntlProviderPhrases } from '@elice/material-shared-utils';
+declare type AnyObject = Record<string, any>;
+/**
+ *
+ */
+export declare const withExerciseIntlProvider: <P extends AnyObject>(Component: React.VFC<P>, phrases: MaterialIntlProviderPhrases) => React.VFC<P>;
+/**
+ *
+ */
+export declare const withForwardRefExerciseIntlProvider: <T, P extends AnyObject>(Component: React.ForwardRefExoticComponent<P & React.RefAttributes<T>>, phrases: MaterialIntlProviderPhrases) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export {};

package/cjs/components/material-exercise/context/ExerciseIntlProvider.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var context = require('./context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+//
+//
+
+/**
+ *
+ */
+
+const withExerciseIntlProvider = (Component, phrases) => {
+  return props => {
+    const {
+      locale
+    } = React.useContext(context.ExerciseContext);
+    return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+      children: React__default["default"].createElement(Component, Object.assign({}, props)),
+      locale: locale,
+      phrases: phrases
+    });
+  };
+};
+/**
+ *
+ */
+
+const withForwardRefExerciseIntlProvider = (Component, phrases) => {
+  return React.forwardRef((props, ref) => {
+    const {
+      locale
+    } = React.useContext(context.ExerciseContext);
+    return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+      children: React__default["default"].createElement(Component, Object.assign({}, props, {
+        ref: ref
+      })),
+      locale: locale,
+      phrases: phrases
+    });
+  });
+};
+
+exports.withExerciseIntlProvider = withExerciseIntlProvider;
+exports.withForwardRefExerciseIntlProvider = withForwardRefExerciseIntlProvider;

package/cjs/components/material-exercise/context/ExerciseProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExerciseProviderDedicatedProps, MaterialExerciseCommonProps } from './types';
+export declare type ExerciseProviderProps = MaterialExerciseCommonProps & Omit<ExerciseProviderDedicatedProps, 'readOnlyActiveFile'>;
+/**
+ * Provider for exercise, which...
+ * - wrapping with `ExerciseContext`
+ * - fetching exercise room
+ * - fetching exercise room id
+ */
+declare const ExerciseProvider: React.FC<ExerciseProviderProps>;
+export default ExerciseProvider;

package/cjs/components/material-exercise/context/ExerciseProvider.js

@@ -0,0 +1,166 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactUse = require('react-use');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var context = require('./context.js');
+var ExerciseProviderNoImage = require('./ExerciseProviderNoImage.js');
+var recoil$1 = require('./recoil.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const RECOIL_RESET_DELAY = 10;
+const StyledMaterialExercise = styled__default["default"].div.withConfig({
+  componentId: "sc-pj5yv2-0"
+})(["display:flex;width:100%;height:100%;.eb-resizable{height:inherit;}"]);
+/**
+ * Provider for exercise, which...
+ * - wrapping with `ExerciseContext`
+ * - fetching exercise room
+ * - fetching exercise room id
+ */
+
+const ExerciseProvider = _a => {
+  var {
+    children,
+    materialExerciseId,
+    exerciseRoomId,
+    exerciseRoomUserId,
+    onDefaultExerciseRoomIdSet,
+    exerciseImageEmptyOptions
+  } = _a,
+      contextProps = tslib.__rest(_a, ["children", "materialExerciseId", "exerciseRoomId", "exerciseRoomUserId", "onDefaultExerciseRoomIdSet", "exerciseImageEmptyOptions"]); // user
+
+
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState); // exercise
+
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId)); // lecture
+
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const resetLecture = recoil.useResetRecoilState(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)); // multilang languages
+
+  const exerciseMultilangLanguages = recoil.useRecoilValue(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id));
+  const resetExerciseMultilangLanguages = recoil.useResetRecoilState(recoil$1.exerciseMultilangLanguagesState(exercise === null || exercise === void 0 ? void 0 : exercise.id)); // etc
+
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const setConatinerSize = recoil.useSetRecoilState(recoil$1.exerciseContainerSizeState); // wrap container size
+
+  const [wrapElRef, {
+    width,
+    height
+  }] = reactUse.useMeasure(); //
+  // if exercise room id is not specified, fetch it from server
+  // NOTICE: should not use `exercise.defaultRoom.id`, since will be removed (confrimed by backend-team)
+  //
+
+  React__default["default"].useEffect(() => {
+    if (exerciseRoomId) {
+      return;
+    }
+
+    apiClient.getOrgMaterialExerciseDefaultRoomGet({
+      materialExerciseId
+    }).then(res => {
+      if (typeof onDefaultExerciseRoomIdSet === 'function') {
+        onDefaultExerciseRoomIdSet(res.exerciseRoomId);
+      }
+    }).catch(err => {
+      if (typeof contextProps.onError === 'function') {
+        contextProps.onError(err);
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exerciseRoomId, materialExerciseId]); //
+  // reset lecture, after `exercise.lectureId` changed
+  //
+
+  React__default["default"].useEffect(() => {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId)) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => resetLecture(), RECOIL_RESET_DELAY);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  // reset exercise multilang languages, after `exercise.id` changed
+  //
+
+  React__default["default"].useEffect(() => {
+    if (!(exercise === null || exercise === void 0 ? void 0 : exercise.id)) {
+      return;
+    }
+
+    const timeout = window.setTimeout(() => resetExerciseMultilangLanguages(), RECOIL_RESET_DELAY);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  // update Provider size
+  //
+
+  React__default["default"].useEffect(() => {
+    if (width && height) {
+      setConatinerSize({
+        width,
+        height
+      });
+    }
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [width, height]); //
+  //
+  //
+
+  return React__default["default"].createElement(StyledMaterialExercise, {
+    ref: wrapElRef,
+    children: (() => {
+      var _a; // render after measure Provider size
+
+
+      if (!width || !height) {
+        return null;
+      } // show spinner before exercise ready
+
+
+      if (!user || !lecture || !exercise || !exerciseRoomId || !exerciseRoom || typeof exerciseMultilangLanguages === 'undefined') {
+        return React__default["default"].createElement(blocks.Flex, {
+          align: "center",
+          justify: "center",
+          width: "100%",
+          height: "100%"
+        }, React__default["default"].createElement(blocks.Spinner, null));
+      } // when exerciseImage is not ready yet
+
+
+      if (exercise.readyExerciseImage === null) {
+        return React__default["default"].createElement(ExerciseProviderNoImage, Object.assign({}, exerciseImageEmptyOptions, {
+          locale: contextProps.locale
+        }));
+      } // render
+
+
+      return React__default["default"].createElement(context.ExerciseContext.Provider, {
+        children: children,
+        value: Object.assign(Object.assign({}, contextProps), {
+          materialExerciseId,
+          exerciseRoomId,
+          exerciseRoomUserId: exerciseRoomUserId !== null && exerciseRoomUserId !== void 0 ? exerciseRoomUserId : user.id,
+          readOnlyActiveFile: !!((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.readOnlyFilelist.includes(activeFilename || ''))
+        })
+      });
+    })()
+  });
+}; //
+
+module.exports = ExerciseProvider;

package/cjs/components/material-exercise/context/ExerciseProviderNoImage.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface ExerciseProviderNoImageProps {
+    /**  */
+    text?: React.ReactChild;
+    /**  */
+    imageSrc?: string;
+    /**  */
+    buttonText?: React.ReactChild;
+    /**  */
+    onButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**  */
+    locale?: string;
+}
+declare const _default: (props: ExerciseProviderNoImageProps) => JSX.Element;
+export default _default;

package/cjs/components/material-exercise/context/ExerciseProviderNoImage.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var styled = require('styled-components');
+var noImage_en = require('./locales/noImage.en.json.js');
+var noImage_ko = require('./locales/noImage.ko.json.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledProviderNoImage = styled__default["default"].div.withConfig({
+  componentId: "sc-oaauqc-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
+
+const ExerciseProviderNoImage = ({
+  text,
+  imageSrc = '',
+  buttonText,
+  onButtonClick
+}) => {
+  const intl = reactIntl.useIntl();
+  return React__default["default"].createElement(StyledProviderNoImage, null, React__default["default"].createElement(blocks.SafeImage, {
+    src: imageSrc,
+    defaultSrc: "https://static.elice.io/elice-material/exercise/empty-code-purple.png",
+    alt: "empty-exercise-image",
+    tag: "div",
+    height: "4rem",
+    width: "4rem"
+  }), React__default["default"].createElement(blocks.Box, {
+    paddingtop: "2rem",
+    paddingbottom: "2rem"
+  }, React__default["default"].createElement(blocks.Text, {
+    role: "white"
+  }, text || intl.formatMessage({
+    id: 'exerciseContext.provider.noImage.title'
+  }))), React__default["default"].createElement(blocks.Button, {
+    onClick: onButtonClick
+  }, buttonText || intl.formatMessage({
+    id: 'exerciseContext.provider.noImage.button'
+  })));
+}; //
+//
+//
+
+
+var MaterialExerciseNoImage = (props => {
+  return React__default["default"].createElement(materialSharedUtils.MaterialIntlProvider, {
+    locale: props.locale,
+    phrases: {
+      en: noImage_en,
+      ko: noImage_ko
+    }
+  }, React__default["default"].createElement(ExerciseProviderNoImage, Object.assign({}, props)));
+});
+
+module.exports = MaterialExerciseNoImage;