@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,95 @@
+import type { enums, GetOrgLectureGetResponses, GetOrgMaterialExerciseExerciseRoomGetResponses } from '@elice/types';
+import type { GetOrgMaterialExerciseGetResponses, GetOrgUserGetResponses } from '@elice/types';
+import type { MonacoEditorPreference } from "../../shared/monaco-editor";
+import type { MaterialExerciseStdioFile, RunnerRoomConnectionInfo } from "../../../hooks";
+import type { MultilangEnvironmentJson, MultilangLanguagesJson } from '../exercise-multilang-dropdown/types';
+/**
+ * Lecture.
+ */
+export declare type AtomLectureState = GetOrgLectureGetResponses['lecture'] | null;
+/**
+ * Material exercise.
+ */
+export declare type AtomExerciseState = GetOrgMaterialExerciseGetResponses['materialExercise'] | null;
+/**
+ * Material exercise room.
+ */
+export declare type AtomExerciseRoomState = GetOrgMaterialExerciseExerciseRoomGetResponses['exerciseRoom'] | null;
+/**
+ * User.
+ */
+export declare type AtomUserState = GetOrgUserGetResponses['user'] | null;
+/**
+ * Editor preference.
+ */
+export declare type AtomEditorPreferenceState = Required<MonacoEditorPreference>;
+/**
+ *
+ */
+export declare enum ExercisePreviewType {
+    None = 0,
+    NoVnc = 1,
+    WebBrowser = 2
+}
+/**
+ *
+ */
+export declare enum ExercisePreviewDisplayMode {
+    Mini = 0,
+    SideBySide = 1
+}
+/**
+ *
+ */
+export declare type AtomRunnerRunTypeState = enums.ExerciseRunType | null;
+/**
+ *
+ */
+export declare type AtomRunnerRoomConnectionInfoState = RunnerRoomConnectionInfo | null;
+/**
+ *
+ */
+export declare type AtomRunnerStdioFilesState = MaterialExerciseStdioFile[];
+/**
+ *
+ */
+export declare type AtomVisibilityState = null | 'environment' | 'preference';
+/**
+ *
+ */
+export declare type AtomWebSocketStateKey = 'runnerRoom' | 'stdio' | 'usercodeEdit';
+/**
+ *
+ */
+export declare type AtomWebSocketStates = Record<AtomWebSocketStateKey, WebSocket['readyState']>;
+/**
+ *
+ */
+export declare type AtomMultilangEnvironmentJson = MultilangEnvironmentJson | null;
+/**
+ * - `undefined`: Not loaded.
+ * - `null`: Loaded, but languages list not found.
+ * - `MultilangLanguagesJson`: Ready.
+ */
+export declare type AtomMultilangEnvironmentState = MultilangLanguagesJson | undefined | null;
+/**
+ * Arduino preference.
+ */
+export declare type AtomArduinoPreferenceState = Required<{
+    baudRate: number;
+    port: string;
+}>;
+/**
+ *
+ */
+export interface AtomContainerSizeState {
+    width: number;
+    height: number;
+}
+/**
+ *
+ */
+export interface AtomFileEditorCursorState {
+    from: number;
+    to: number;
+}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+//
+// =============== preview ===============
+//
+
+/**
+ *
+ */
+exports.ExercisePreviewType = void 0;
+
+(function (ExercisePreviewType) {
+  ExercisePreviewType[ExercisePreviewType["None"] = 0] = "None";
+  ExercisePreviewType[ExercisePreviewType["NoVnc"] = 1] = "NoVnc";
+  ExercisePreviewType[ExercisePreviewType["WebBrowser"] = 2] = "WebBrowser";
+})(exports.ExercisePreviewType || (exports.ExercisePreviewType = {}));
+/**
+ *
+ */
+
+
+exports.ExercisePreviewDisplayMode = void 0;
+
+(function (ExercisePreviewDisplayMode) {
+  ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["Mini"] = 0] = "Mini";
+  ExercisePreviewDisplayMode[ExercisePreviewDisplayMode["SideBySide"] = 1] = "SideBySide";
+})(exports.ExercisePreviewDisplayMode || (exports.ExercisePreviewDisplayMode = {}));

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

@@ -0,0 +1,13 @@
+import { Subject } from 'rxjs';
+/**
+ * Content change request to code editor.
+ */
+export declare const exerciseFileEditorContentChange$: Subject<string | null>;
+/**
+ * Save action emitted by file editor.
+ */
+export declare const exerciseFileEditorSaveAction$: Subject<void>;
+/**
+ * Send text request to runner stdio.
+ */
+export declare const exerciseRunnerTextSend$: Subject<string>;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rxjs = require('rxjs');
+
+/**
+ * Content change request to code editor.
+ */
+
+const exerciseFileEditorContentChange$ = new rxjs.Subject();
+/**
+ * Save action emitted by file editor.
+ */
+
+const exerciseFileEditorSaveAction$ = new rxjs.Subject();
+/**
+ * Send text request to runner stdio.
+ */
+
+const exerciseRunnerTextSend$ = new rxjs.Subject();
+
+exports.exerciseFileEditorContentChange$ = exerciseFileEditorContentChange$;
+exports.exerciseFileEditorSaveAction$ = exerciseFileEditorSaveAction$;
+exports.exerciseRunnerTextSend$ = exerciseRunnerTextSend$;

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

@@ -0,0 +1,96 @@
+/// <reference types="react" />
+import type { MaterialCommponentCommonProps } from '@elice/material-shared-utils';
+import type { GetOrgMaterialExerciseExerciseRunningListResponses, PostOrgMaterialExerciseExerciseRunningSubmitResponses } from '@elice/types';
+import type { ExerciseProviderNoImageProps } from './ExerciseProviderNoImage';
+/**
+ * [External]
+ * Common component for material exercise.
+ */
+export declare type MaterialExerciseCommonComponent<EP extends Record<string, unknown> = {}, // additional props
+EA extends Record<string, unknown> = {}> = React.ForwardRefExoticComponent<EP & MaterialExerciseCommonProps & React.RefAttributes<EA & MaterialExerciseCommonApis>>;
+export declare type MECC<EP extends Record<string, unknown> = {}, // additional props
+EA extends Record<string, unknown> = {}> = MaterialExerciseCommonComponent<EP, EA>;
+/**
+ * [External]
+ * Common exposed api of `MaterialExercise*` component.
+ */
+export interface MaterialExerciseCommonApis {
+    sendTextToRunner: MaterialExerciseCommonApiSendTextToTerminal;
+}
+/**
+ * Send text to terminal.
+ */
+export declare type MaterialExerciseCommonApiSendTextToTerminal = (text: string) => void;
+/**
+ * [External]
+ * Common exposed props for `MaterialExercise*` components.
+ */
+export interface MaterialExerciseCommonProps extends MaterialCommponentCommonProps {
+    /**
+     * Material Exercise ID.
+     */
+    materialExerciseId: number;
+    /**
+     * material exercise room ID.
+     *
+     * If not specified, will be fetched from `org.material_exercise.default_room.get`.
+     * Then, it will pass the exerciseRoomId by onExerciseRoomIdChange.
+     */
+    exerciseRoomId?: number;
+    /**
+     * User ID of exercise room user.
+     * (room owner ID / tutee ID for tutoring mode)
+     *
+     * If not specified, will be used current user ID.
+     */
+    exerciseRoomUserId?: number;
+    /**
+     * Is editor in readonly mode?
+     */
+    readOnlyEditor?: boolean;
+    exerciseImageEmptyOptions?: MaterialExerciseCommonPropExerciseImageEmptyOptions;
+    onCodeHelpRequest?: MaterialExerciseCommonPropOnCodeHelpRequest;
+    onDefaultExerciseRoomIdSet?: MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet;
+    onExerciseRoomIdChange?: MaterialExerciseCommonPropOnExerciseRoomIdChange;
+    onExerciseRunningDone?: MaterialExerciseCommonPropOnRunningDone;
+    onSubmit?: MaterialExerciseCommonPropOnSubmit;
+    onError?: MaterialExerciseCommonPropOnError;
+}
+/**
+ * Empty options for exercise that `readyExerciseImage` is not set.
+ */
+export declare type MaterialExerciseCommonPropExerciseImageEmptyOptions = ExerciseProviderNoImageProps;
+/**
+ * On code help button click.
+ */
+export declare type MaterialExerciseCommonPropOnCodeHelpRequest = (code: string) => void;
+/**
+ * On default exercise room ID set.
+ */
+export declare type MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet = (exerciseRoomId: number) => void;
+/**
+ * On exercise room change.
+ */
+export declare type MaterialExerciseCommonPropOnExerciseRoomIdChange = (exerciseRoomId: number) => void;
+/**
+ * On running finish callback.
+ */
+export declare type MaterialExerciseCommonPropOnRunningDone = (res: GetOrgMaterialExerciseExerciseRunningListResponses['exerciseRunnings'][number]) => void;
+/**
+ * On submit callback.
+ */
+export declare type MaterialExerciseCommonPropOnSubmit = (res: Pick<PostOrgMaterialExerciseExerciseRunningSubmitResponses, 'exerciseRunningId' | 'runType'>) => void;
+/**
+ * On any error occurred. (to collect error to "Sentry")
+ */
+export declare type MaterialExerciseCommonPropOnError = (error: any) => void;
+/**
+ * [Internal]
+ * Dediacted internal props for `ExerciseProvider`.
+ */
+export interface ExerciseProviderDedicatedProps {
+    /**
+     * Is current active file readonly? (according to `readOnlyFilelist`)
+     */
+    readOnlyActiveFile: boolean;
+}

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ExerciseCodeHistoryProps {
+    onHide?: () => void;
+    onLoadVersionButtonClick?: (doc: string) => void;
+}
+declare const ExerciseCodeHistory: React.VFC<ExerciseCodeHistoryProps>;
+export default ExerciseCodeHistory;

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var dayjs = require('dayjs');
+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');
+require('../../shared/monaco-editor/constants/monaco/preferences.js');
+require('react-use');
+require('socket.io-client');
+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');
+require('../../../constants/arduino.js');
+require('@elice/api-client');
+require('@elice/material-shared-utils');
+require('@elice/websocket');
+require('humps');
+var useUsercodeHistory = require('../../../hooks/useUsercodeHistory.js');
+require('lodash/debounce');
+require('ot-text-unicode');
+require('random-words');
+require('unicount');
+var ExerciseCodeHistory_styled = require('./ExerciseCodeHistory.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+const ExerciseCodeHistory = ({
+  onHide,
+  onLoadVersionButtonClick
+}) => {
+  const {
+    exerciseRoomId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const preference = recoil.useRecoilValue(recoil$1.exerciseEditorPreferenceState);
+  const {
+    doc,
+    ops,
+    version,
+    latestVersion,
+    hasMoreVersion,
+    changeVersion,
+    loadMoreVersions
+  } = useUsercodeHistory.useUsercodeHistory(exerciseRoomId, activeFilename);
+  /**
+   *
+   */
+
+  const renderVersionList = () => React__default["default"].createElement(ExerciseVersionList, null, ops.map(op => React__default["default"].createElement(ExerciseVersionListItem, {
+    key: op.version,
+    selected: version === op.version,
+    onClick: () => {
+      changeVersion(op.version);
+    }
+  }, React__default["default"].createElement(blocks.Text, {
+    role: "gray3",
+    size: "small"
+  }, "\uBC84\uC804 ", op.version), "\u00A0", React__default["default"].createElement(blocks.Text, {
+    role: "gray3",
+    size: "small"
+  }, dayjs__default["default"](op.createdDatetime).format('YYYY.M.DD HH:mm')))), hasMoreVersion ? React__default["default"].createElement(ExerciseVersionListItem, {
+    onClick: loadMoreVersions,
+    style: {
+      justifyContent: 'center'
+    }
+  }, React__default["default"].createElement(blocks.Text, {
+    role: "white",
+    size: "small"
+  }, "\uB354 \uBD88\uB7EC\uC624\uAE30")) : null);
+  /**
+   *
+   */
+
+
+  const rednerVersionControlColumn = () => {
+    return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionsWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionRangeInputWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledVersionRangeInput, {
+      type: "range",
+      min: latestVersion ? latestVersion - ops.length + 1 : 0,
+      max: latestVersion !== null && latestVersion !== void 0 ? latestVersion : 0,
+      value: version !== null && version !== void 0 ? version : 0,
+      onChange: e => {
+        changeVersion(parseInt(e.target.value, 10));
+      }
+    })), renderVersionList());
+  };
+  /**
+   *
+   */
+
+
+  const renderEditorColumn = () => {
+    if (!activeFilename) {
+      return null;
+    }
+
+    const uniqueFilePath = `code-history/${exerciseRoomId}/v${version !== null && version !== void 0 ? version : 0}`;
+    const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+    return React__default["default"].createElement(ExerciseCodeHistory_styled.StyledEditorWrapper, null, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledFileNameBox, {
+      role: "white"
+    }, activeFilename), React__default["default"].createElement(MonacoEditorLazy, {
+      key: editorFilename,
+      defaultValue: doc,
+      filename: editorFilename,
+      preference: Object.assign(Object.assign({}, preference), {
+        readOnly: true,
+        scrollBeyondLastLine: false
+      })
+    }));
+  };
+  /**
+   *
+   */
+
+
+  const renderFooterButton = () => {
+    if (typeof onLoadVersionButtonClick !== 'function') {
+      return;
+    }
+
+    return React__default["default"].createElement(blocks.Button, {
+      size: "small",
+      role: "primary",
+      onClick: () => {
+        onLoadVersionButtonClick(doc);
+      }
+    }, "\uC120\uD0DD \uBC84\uC804 \uBD88\uB7EC\uC624\uAE30");
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(MaterialModal, {
+    title: "\uCF54\uB4DC \uC218\uC815 \uC774\uB825",
+    onHide: onHide,
+    footer: renderFooterButton()
+  }, React__default["default"].createElement(ExerciseCodeHistory_styled.StyledModalContent, null, rednerVersionControlColumn(), renderEditorColumn()));
+}; //
+
+module.exports = ExerciseCodeHistory;

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Text } from '@elice/blocks';
+export declare const cssInputRangeTrack: import("styled-components").FlattenSimpleInterpolation;
+export declare const cssInputRangeThumb: import("styled-components").FlattenSimpleInterpolation;
+export declare const StyledModalContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledVersionRangeInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const StyledVersionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledVersionRangeInputWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledEditorWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledFileNameBox: import("styled-components").StyledComponent<typeof Text, any, {}, never>;

package/cjs/components/material-exercise/exercise-code-history/ExerciseCodeHistory.styled.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const cssInputRangeTrack = styled.css(["width:100%;height:0.375rem;cursor:pointer;transition:all 0.2s ease;"]);
+const cssInputRangeThumb = styled.css(["height:1rem;width:1rem;border-radius:50%;background:", ";cursor:pointer;"], designTokens.base.color.primary6);
+const StyledModalContent = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-0"
+})(["position:absolute;width:100%;height:100%;overflow:hidden;"]);
+const StyledVersionRangeInput = styled__default["default"].input.withConfig({
+  componentId: "sc-1auppml-1"
+})(["-webkit-appearance:none;margin:0.5rem 0;width:100%;cursor:pointer;&:focus{outline:none;}&::-webkit-slider-runnable-track{background:", ";", ";}&::-webkit-slider-thumb{-webkit-appearance:none;margin-top:calc((0.375rem - 1rem) / 2);", ";}&:focus::-webkit-slider-runnable-track{background:rgba(", ",0.05);}&::-moz-range-track{background:", ";", ";}&::-moz-range-thumb{", ";}"], designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb, designTokens.base.color.navy9, designTokens.base.color.navy9, cssInputRangeTrack, cssInputRangeThumb);
+const StyledVersionsWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-2"
+})(["flex-direction:column;flex:1 1.75 25rem;position:relative;height:100%;border-right:1px solid ", ";"], designTokens.base.color.navy9);
+const StyledVersionRangeInputWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-3"
+})(["height:3rem;padding:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
+const StyledEditorWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1auppml-4"
+})(["flex-direction:column;flex:1 1 auto;width:100%;height:100%;overflow:scroll;"]);
+const StyledFileNameBox = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1auppml-5"
+})(["min-height:3rem;height:3rem;line-height:3rem;padding-left:1rem;border-bottom:1px solid ", ";"], designTokens.base.color.navy9);
+
+exports.StyledEditorWrapper = StyledEditorWrapper;
+exports.StyledFileNameBox = StyledFileNameBox;
+exports.StyledModalContent = StyledModalContent;
+exports.StyledVersionRangeInput = StyledVersionRangeInput;
+exports.StyledVersionRangeInputWrapper = StyledVersionRangeInputWrapper;
+exports.StyledVersionsWrapper = StyledVersionsWrapper;
+exports.cssInputRangeThumb = cssInputRangeThumb;
+exports.cssInputRangeTrack = cssInputRangeTrack;

package/cjs/components/material-exercise/exercise-code-history/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ExerciseCodeHistory } from './ExerciseCodeHistory';
+export type { ExerciseCodeHistoryProps } from './ExerciseCodeHistory';

package/cjs/components/material-exercise/exercise-file/ExerciseFile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Exercise file view, which contains:
+ * - `exercise-file-editor` : code editor for editable files
+ * - `exercise-file-viewer` : file viewer for non-editable files
+ */
+declare const ExerciseFile: React.VFC;
+export default ExerciseFile;

package/cjs/components/material-exercise/exercise-file/ExerciseFile.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var recoil = require('recoil');
+var styled = require('styled-components');
+require('react-use');
+require('socket.io-client');
+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');
+require('../../../constants/arduino.js');
+var useExerciseFile = require('../../../hooks/useExerciseFile.js');
+require('@elice/api-client');
+require('@elice/material-shared-utils');
+require('@elice/websocket');
+require('humps');
+require('ot-text-unicode');
+require('lodash/debounce');
+require('random-words');
+require('unicount');
+var ExerciseFileEditor = require('../exercise-file-editor/ExerciseFileEditor.js');
+var ExerciseFileViewer = require('../exercise-file-viewer/ExerciseFileViewer.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 StyledExerciseFile = styled__default["default"].div.withConfig({
+  componentId: "sc-16zd16z-0"
+})(["width:100%;height:100%;background-color:", ";"], designTokens.base.color.navy9);
+/**
+ * Exercise file view, which contains:
+ * - `exercise-file-editor` : code editor for editable files
+ * - `exercise-file-viewer` : file viewer for non-editable files
+ */
+
+const ExerciseFile = () => {
+  const {
+    exerciseRoomId
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
+  const isFileEditable = useExerciseFile.useExerciseFileEditable(activeFilename); //
+  //
+  //
+
+  return React__default["default"].createElement(StyledExerciseFile, {
+    children: (() => {
+      if (!exerciseRoomId) {
+        return null;
+      } // empty
+
+
+      if (!activeFilename) {
+        return React__default["default"].createElement(blocks.Flex, {
+          column: true,
+          width: "100%",
+          height: "100%",
+          align: "center",
+          justify: "center"
+        }, React__default["default"].createElement(blocks.Icon, {
+          icon: icons.eilMaterialTypeExercise,
+          color: designTokens.base.color.primary4,
+          size: "jumbo"
+        }), React__default["default"].createElement(blocks.Vspace, {
+          height: 1
+        }), React__default["default"].createElement(blocks.Text, {
+          role: "white"
+        }, "\uC5F4\uB9B0 \uD30C\uC77C\uC774 \uC5C6\uC2B5\uB2C8\uB2E4."));
+      } // static (non-editable / e.g. image, jupyter notebook, csv, ...) file
+
+
+      if (!isFileEditable) {
+        return React__default["default"].createElement(ExerciseFileViewer, {
+          key: activeFilename
+        });
+      } // code (editable) file
+      else {
+        return React__default["default"].createElement(ExerciseFileEditor, {
+          key: activeFilename
+        });
+      }
+    })()
+  });
+};
+
+module.exports = ExerciseFile;

package/cjs/components/material-exercise/exercise-file/index.d.ts

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Exercise file (code) editor for editable files
+ */
+declare const ExerciseFileEditor: React.VFC;
+export default ExerciseFileEditor;