@elice/material-exercise 1.220803.0

package/cjs/hooks/useUsercodeHistory.js

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var reactUse = require('react-use');
+var apiClient = require('@elice/api-client');
+var otTextUnicode = require('ot-text-unicode');
+
+const OP_FETCHING_COUNT = 100;
+const useUsercodeHistory = (exerciseRoomId, filename) => {
+  const latestDocRef = React.useRef('');
+  const [ops, setOps] = React.useState([]);
+  const [doc, setDoc] = React.useState('');
+  const [version, setVersion] = React.useState();
+  const [latestVersion, setLatestVersion] = React.useState();
+  const [hasMoreVersion, setHasMoreVersion] = React.useState(false);
+  /**
+   *
+   */
+
+  const inverseApplyOp = (doc, op) => {
+    if (typeof otTextUnicode.type.invert !== 'function') {
+      return doc;
+    }
+
+    return otTextUnicode.type.apply(doc, otTextUnicode.type.invert(op));
+  };
+  /**
+   *
+   */
+
+
+  const applyOps = selectedVersion => {
+    if (!latestVersion) {
+      return;
+    }
+
+    setDoc(ops.slice(0, latestVersion - selectedVersion).reduce((newDoc, op) => inverseApplyOp(newDoc, op.ots), latestDocRef.current));
+  };
+  /**
+   *
+   */
+
+
+  const loadMoreVersions = async () => {
+    if (!filename) {
+      return;
+    }
+
+    const {
+      ops: newOps
+    } = await apiClient.getOrgMaterialExerciseUsercodeOpList({
+      exerciseRoomId,
+      filename,
+      offset: ops.length,
+      count: OP_FETCHING_COUNT,
+      isOpComposed: false
+    });
+    setOps(prev => [...prev, ...newOps]);
+  };
+  /**
+   *
+   */
+
+
+  const changeVersion = selectedVersion => {
+    if (selectedVersion === version) {
+      return;
+    }
+
+    setVersion(selectedVersion);
+    applyOps(selectedVersion);
+  }; //
+  //
+  //
+
+
+  reactUse.useMount(() => {
+    if (!filename) {
+      return;
+    }
+
+    void (async () => {
+      try {
+        const [{
+          usercode
+        }, {
+          ops
+        }] = await Promise.all([apiClient.getOrgMaterialExerciseUsercodeGet({
+          exerciseRoomId,
+          filename
+        }), apiClient.getOrgMaterialExerciseUsercodeOpList({
+          exerciseRoomId,
+          filename,
+          offset: 0,
+          count: OP_FETCHING_COUNT,
+          isOpComposed: false
+        })]);
+        latestDocRef.current = usercode.content;
+        setDoc(usercode.content);
+        setOps(ops);
+        setVersion(ops[0].version);
+        setLatestVersion(ops[0].version);
+
+        if (ops.length < ops[0].version) {
+          setHasMoreVersion(true);
+        }
+      } catch (_) {//
+      }
+    })();
+  }); //
+  //
+  //
+
+  React.useEffect(() => {
+    setHasMoreVersion(latestVersion !== undefined && ops.length < latestVersion);
+  }, [latestVersion, ops]); //
+  //
+  //
+
+  return {
+    doc,
+    ops,
+    version,
+    latestVersion,
+    hasMoreVersion,
+    changeVersion,
+    loadMoreVersions
+  };
+};
+
+exports.useUsercodeHistory = useUsercodeHistory;

package/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/cjs/index.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialExercise = require('./components/material-exercise/MaterialExercise.js');
+var MonacoEditorLazy = require('./components/shared/monaco-editor/MonacoEditorLazy.js');
+var MonacoEditorPerferenceForm = require('./components/shared/monaco-editor/MonacoEditorPerferenceForm.js');
+var monacoLanguage = require('./components/shared/monaco-editor/utils/monacoLanguage.js');
+var monacoPreference = require('./components/shared/monaco-editor/utils/monacoPreference.js');
+var index = require('./components/shared/monaco-editor/constants/grammars/index.js');
+var preferences = require('./components/shared/monaco-editor/constants/monaco/preferences.js');
+
+
+
+exports.MaterialExercise = MaterialExercise;
+exports.MonacoEditorLazy = MonacoEditorLazy;
+exports.MonacoEditorPerference = MonacoEditorPerferenceForm;
+exports.getLanguageFromFilename = monacoLanguage.getLanguageFromFilename;
+exports.normalizeMonacoPreference = monacoPreference.normalizeMonacoPreference;
+exports.TM_LANGUAGES = index.TM_LANGUAGES;
+exports.DEFAULT_MONACO_EDITOR_PREFERENCE = preferences.DEFAULT_MONACO_EDITOR_PREFERENCE;
+exports.MONACO_EDITOR_FONT_FAMILY = preferences.MONACO_EDITOR_FONT_FAMILY;
+exports.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES = preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES;
+exports.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES = preferences.MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES;
+exports.MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS = preferences.MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS;

package/cjs/typings/arduino.d.ts

@@ -0,0 +1,77 @@
+/**
+ * - `list`
+ * - `open [portName] [baud] [bufferAlgorithm (optional)]`
+ * - `send [portName] [cmd]`
+ * - `sendnobuf [portName] [cmd]`
+ * - `close [portName]`
+ * - `bufferalgorithms`
+ * - `baudrates`
+ * - `restart`
+ * - `exit`
+ * - `program [portName] [board:name] [$path/to/filename/without/extension]`
+ * - `programfromurl [portName] [board:name] [urlToHexFile]`
+ */
+export declare type ArduinoAgentCommand = 'list' | 'open' | 'send' | 'sendnobuf' | 'close' | 'bufferalgorithms' | 'baudrates' | 'restart' | 'exit' | 'program' | 'programfromurl';
+export declare type ArduinoAgentMessage = ArduinoAgentMessageVersion | ArduinoAgentMessageCommands | ArduinoAgentMessageHostname | ArduinoAgentMessageOs | ArduinoAgentMessagePorts | ArduinoAgentMessageDownloadStatus | ArduinoAgentMessageCmd | ArduinoAgentMessageProgrammerStatus | ArduinoAgentMessageD;
+export interface ArduinoAgentMessageVersion {
+    Version: string;
+}
+export interface ArduinoAgentMessageCommands {
+    Commands: string[];
+}
+export interface ArduinoAgentMessageHostname {
+    Hostname: string;
+}
+export interface ArduinoAgentMessageOs {
+    OS: string;
+}
+export interface ArduinoAgentMessagePorts {
+    Ports: {
+        Name: string;
+        SerialNumber: string;
+        DeviceClass: string;
+        IsOpen: boolean;
+        IsPrimary: boolean;
+        Baud: number;
+        BufferAlgorithm: string;
+        Ver: string;
+        NetworkPort: boolean;
+        VendorID: string;
+        ProductID: string;
+    }[];
+    Network: boolean;
+}
+export interface ArduinoAgentMessageDownloadStatus {
+    DownloadStatus: 'Pending' | 'Downloading' | 'Done' | 'Error';
+    Msg: string;
+}
+export interface ArduinoAgentMessageCmd {
+    Cmd: 'Open' | 'OpenFail' | 'Close' | 'Queued' | 'Write' | 'CompleteFake';
+    Desc: string;
+    Port: string;
+    Baud: number;
+    BufferType: string;
+}
+export declare type ArduinoAgentMessageProgrammerStatus = ArduinoAgentMessageProgrammerStatusStarting | ArduinoAgentMessageProgrammerStatusBusy | ArduinoAgentMessageProgrammerStatusDone | ArduinoAgentMessageProgrammerStatusError;
+export interface ArduinoAgentMessageProgrammerStatusStarting {
+    ProgrammerStatus: 'Starting';
+    Cmd: string;
+}
+export interface ArduinoAgentMessageProgrammerStatusBusy {
+    ProgrammerStatus: 'Busy';
+    Msg: string;
+}
+export interface ArduinoAgentMessageProgrammerStatusDone {
+    ProgrammerStatus: 'Done';
+    Flash: 'Ok';
+}
+export interface ArduinoAgentMessageProgrammerStatusError {
+    ProgrammerStatus: 'Error';
+    Msg: string;
+}
+export interface ArduinoAgentMessageD {
+    D: string;
+}
+export declare type ArduinoPort = ArduinoAgentMessagePorts['Ports'][number];
+export declare type ArduinoUploadProgressStatus = 'ready' | 'receivedHex' | 'starting' | 'busy' | 'error' | 'done';
+export declare type ArduinoAgentConnectionStatus = 'disconnected' | 'connecting' | 'reconnecting' | 'connected';

package/cjs/utils/arduino.d.ts

@@ -0,0 +1,46 @@
+import type { ArduinoPort } from "../typings/arduino";
+interface ArduinoUrlOptions {
+    protocol: 'http' | 'ws';
+    pathname?: string;
+    port?: number;
+}
+/**
+ * Create url to communicate with arduino.
+ */
+export declare function createArduinoUrl(options: ArduinoUrlOptions): string;
+/**
+ *
+ */
+export declare function getArduinoBoardType(port: ArduinoPort): "mega" | "uno" | null;
+/**
+ *
+ */
+export declare function getDisplayName(port: ArduinoPort): string;
+/**
+ *
+ */
+export declare function getPortFromName(ports: ArduinoPort[], name: null | string): {
+    Name: string;
+    SerialNumber: string;
+    DeviceClass: string;
+    IsOpen: boolean;
+    IsPrimary: boolean;
+    Baud: number;
+    /**
+     *
+     */
+    BufferAlgorithm: string;
+    Ver: string;
+    NetworkPort: boolean;
+    VendorID: string;
+    ProductID: string;
+};
+/**
+ *
+ */
+export declare function getFileContent(encoded: string): string;
+/**
+ *
+ */
+export declare function getFQBN(device: ArduinoPort): string;
+export {};

package/cjs/utils/arduino.js

@@ -0,0 +1,86 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var arduino = require('../constants/arduino.js');
+
+/**
+ * Create url to communicate with arduino.
+ */
+
+function createArduinoUrl(options) {
+  const url = new URL(`${options.protocol}://127.0.0.1`);
+
+  if (options.pathname) {
+    url.pathname = options.pathname;
+  }
+
+  if (options.port) {
+    url.port = options.port.toString();
+  }
+
+  return url.href;
+}
+/**
+ *
+ */
+
+function getArduinoBoardType(port) {
+  const boards = arduino.ARDUINO_VENDOR_PRODUCT_IDS;
+
+  for (const board in boards) {
+    for (const pair of boards[board]) {
+      if (pair.vendorId === port.VendorID && pair.productId === port.ProductID) {
+        return board;
+      }
+    }
+  }
+
+  return null;
+}
+/**
+ *
+ */
+
+function getDisplayName(port) {
+  const type = getArduinoBoardType(port);
+  const displayName = type !== null && Object.keys(arduino.ARDUINO_BOARD_NAMES).includes(type) ? `${arduino.ARDUINO_BOARD_NAMES[type]}` : `Unsupported Device`;
+  return displayName;
+}
+/**
+ *
+ */
+
+function getPortFromName(ports, name) {
+  var _a;
+
+  return (_a = ports.filter(port => port.Name === name)[0]) !== null && _a !== void 0 ? _a : null;
+}
+/**
+ *
+ */
+
+function getFileContent(encoded) {
+  const file = encoded.split(',');
+  return file[1];
+}
+/**
+ *
+ */
+
+function getFQBN(device) {
+  const type = getArduinoBoardType(device);
+
+  if (type) {
+    return arduino.ARDUINO_BOARD_FQBN[type];
+  }
+
+  return 'arduino:avr:uno';
+}
+
+exports.createArduinoUrl = createArduinoUrl;
+exports.getArduinoBoardType = getArduinoBoardType;
+exports.getDisplayName = getDisplayName;
+exports.getFQBN = getFQBN;
+exports.getFileContent = getFileContent;
+exports.getPortFromName = getPortFromName;

package/cjs/utils/exerciseFile.d.ts

@@ -0,0 +1,14 @@
+import type { GetOrgMaterialExerciseExerciseRoomGetResponses, GetOrgMaterialExerciseGetResponses } from '@elice/types';
+declare type ExerciseFileCheckFn = (filename: string | null, deps: {
+    exercise: null | GetOrgMaterialExerciseGetResponses['materialExercise'];
+    exerciseRoom: null | GetOrgMaterialExerciseExerciseRoomGetResponses['exerciseRoom'];
+}) => boolean;
+/**
+ * Check whether the exercise file is editable.
+ */
+export declare const checkExerciseFileEditable: ExerciseFileCheckFn;
+/**
+ * Check whether the exercise file is resettable.
+ */
+export declare const checkExerciseFileResettable: ExerciseFileCheckFn;
+export {};

package/cjs/utils/exerciseFile.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+//
+//
+//
+// ============================================================
+// [exercise image]
+// - `filelist` : exercise image 에 업로드한 project_file zipfile 의 파일 목록 (.elice 폴더 제외)
+// - `task_filelist` : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+// - `hidden_filelist` : exercise_image.edit API 에 hidden_filelist 로 설정한 파일 목록. exercise_image.exercise_file.get API 에서 student 이하의 권한을 가진 유저에게 "access_denied" 에러를 보냄.
+// - `read_only_filelist` : exercise_image.edit API 에 read_only_filelist 로 설정한 파일 목록
+// - `initial_open_filelist` : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록.
+// - `main_task_filelist` : exercise_image.edit  API 에 initial_open_filelist 로 설정한 파일 목록. backward compatibility 를 위해 남아 있음
+//
+// [exercise room]
+// - filelist : exercise room 에 user_file.add 를 통해 업로드된 파일 목록
+// - task_filelist : filelist 의 파일 중 editable 한 파일 목록. editable 한 파일만 usercode.edit API 를 호출할 수 있음.
+//
+// > editable 의 기준 : 파일 크기가 1MB 이하이고, https://github.com/codemirror/CodeMirror/blob/master/mode/meta.js 에 정의된 확장자(2020년 6월 기준 => 5.56.0 tag 정도)를 가지는 파일
+//
+// > ref: https://elice.slack.com/archives/C04BACPKW/p1650949625169019?thread_ts=1650948898.201199&cid=C04BACPKW
+// ============================================================
+//
+//
+//
+
+/**
+ * Check whether the exercise file is editable.
+ */
+const checkExerciseFileEditable = (filename, {
+  exercise,
+  exerciseRoom
+}) => {
+  var _a;
+
+  if (!filename) {
+    return false;
+  }
+
+  return [(_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.taskFilelist.includes(filename), exerciseRoom === null || exerciseRoom === void 0 ? void 0 : exerciseRoom.taskFilelist.includes(filename)].some(Boolean);
+};
+/**
+ * Check whether the exercise file is resettable.
+ */
+
+const checkExerciseFileResettable = (filename, {
+  exercise,
+  exerciseRoom
+}) => {
+  var _a, _b, _c;
+
+  if (!filename) {
+    return false;
+  }
+
+  return [checkExerciseFileEditable(filename, {
+    exercise,
+    exerciseRoom
+  }), (_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.taskFilelist.includes(filename), !((_b = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _b === void 0 ? void 0 : _b.readOnlyFilelist.includes(filename)), !((_c = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _c === void 0 ? void 0 : _c.hiddenFilelist.includes(filename))].every(Boolean);
+};
+
+exports.checkExerciseFileEditable = checkExerciseFileEditable;
+exports.checkExerciseFileResettable = checkExerciseFileResettable;

package/cjs/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './exerciseFile';

package/es/components/index.d.ts

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

package/es/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/es/components/material-exercise/MaterialExercise.js

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

package/es/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>;