@elice/material-exercise 1.240619.0 → 1.240620.0-editorevent.0

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

@@ -59,6 +59,8 @@ export interface MaterialExerciseCommonProps extends MaterialCommponentCommonPro
     onMultiLangLanguageChange?: MaterialExerciseCommonPropOnMultiLangLanguageChange;
     onReferenceDocsToggle?: () => void;
     onCodeHelpRequest?: MaterialExerciseCommonPropOnCodeHelpRequest;
+    onCodeEditorChange?: MaterialExerciseCommonPropOnCodeEditorChange;
+    onStdioError?: MaterialExerciseCommonPropOnStdioError;
     onDefaultExerciseRoomIdSet?: MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet;
     onExerciseRoomIdChange?: MaterialExerciseCommonPropOnExerciseRoomIdChange;
     onExerciseRunningDone?: MaterialExerciseCommonPropOnRunningDone;
@@ -72,7 +74,7 @@ export type MaterialExerciseCommonPropExerciseImageEmptyOptions = ExerciseProvid
 /**
  * On code help button click.
  */
-export type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
+export type MaterialExerciseCommonPropOnCodeHelpRequest = (payload: {
     code: string;
     error?: CodeHelperError;
     payload?: any;
@@ -80,6 +82,18 @@ export type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
     instruction?: string;
     openFileContent?: string;
 }) => void;
+/**
+ * On code editor drag.
+ */
+export type MaterialExerciseCommonPropOnCodeEditorChange = (payload: {
+    filename: string;
+    content: string;
+    selectedContent: string;
+}) => void;
+/**
+ * On stdio error.
+ */
+export type MaterialExerciseCommonPropOnStdioError = (error: CodeHelperError) => void;
 /**
  * On multi language change.
  */

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var reactUse = require('react-use');
 var apiClient = require('@elice/api-client');
 var blocks = require('@elice/blocks');
 var types = require('@elice/types');
@@ -17,7 +18,6 @@ var FileViewerNonViewable = require('../../shared/file-viewer/FileViewerNonViewa
 var MonacoEditorLazy = require('../../shared/monaco-editor/MonacoEditorLazy.js');
 require('../../shared/monaco-editor/MonacoEditorPerferenceForm.js');
 require('monaco-editor/esm/vs/editor/editor.api');
-require('react-use');
 require('socket.io-client');
 var recoil$1 = require('../context/recoil.js');
 var context = require('../context/context.js');
@@ -45,7 +45,8 @@ const ExerciseFileEditor = () => {
     exerciseRoomId,
     readOnlyEditor,
     readOnlyActiveFile,
-    locale
+    locale,
+    onCodeEditorChange
   } = React.useContext(context.ExerciseContext);
   const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
   const exerciseRoom = recoil.useRecoilValue(recoil$1.exerciseRoomState(exerciseRoomId));
@@ -54,8 +55,9 @@ const ExerciseFileEditor = () => {
   const activeFilename = recoil.useRecoilValue(recoil$1.exerciseActiveFilenameState);
   const readOnly = readOnlyEditor || readOnlyActiveFile;
   const setUsercodeWebSocketState = recoil.useSetRecoilState(recoil$1.exerciseWebsocketQuery('usercodeEdit'));
+  const [fileEditorContent, setFileEditorContent] = React.useState(null);
   const setFileEditorCursorState = recoil.useSetRecoilState(recoil$1.exerciseFileEditorCursorState);
-  const setFileEditorCursorSelectionValueState = recoil.useSetRecoilState(recoil$1.exerciseFileEditorCursorSelectionValueState);
+  const [fileEditorCursorSelectionValue, setFileEditorCursorSelectionValue] = recoil.useRecoilState(recoil$1.exerciseFileEditorCursorSelectionValueState);
   // editor
   const editorApis = React.useRef(null);
   const editorDocHistories = React.useRef({});
@@ -173,6 +175,9 @@ const ExerciseFileEditor = () => {
    *
    */
   const handleChange = e => {
+    var _a, _b;
+    setFileEditorContent((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : '');
+    // === server initiated ===
     const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
     if (index !== -1) {
       serverInitiatedVersions.current.splice(index, 1);
@@ -210,7 +215,7 @@ const ExerciseFileEditor = () => {
       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 : '');
+    setFileEditorCursorSelectionValue((_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.
@@ -270,6 +275,33 @@ const ExerciseFileEditor = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   //
+  // Emit editor change event to parent component.
+  //
+  reactUse.useDebounce(() => {
+    if (!isReady) {
+      return;
+    }
+    if (!activeFilename || fileEditorContent === null) {
+      return;
+    }
+    if (typeof onCodeEditorChange === 'function') {
+      onCodeEditorChange({
+        filename: activeFilename,
+        content: fileEditorContent,
+        selectedContent: fileEditorCursorSelectionValue !== null && fileEditorCursorSelectionValue !== void 0 ? fileEditorCursorSelectionValue : ''
+      });
+    }
+  }, 150, [isReady, activeFilename, fileEditorContent, fileEditorCursorSelectionValue]);
+  //
+  // Update file content on active file change.
+  //
+  React.useEffect(() => {
+    var _a, _b;
+    if (activeFilename && isReady) {
+      setFileEditorContent((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : '');
+    }
+  }, [activeFilename, isReady]);
+  //
   //
   //
   // empty file

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

@@ -51,7 +51,8 @@ const ExerciseRunner = ({
 }) => {
   var _a, _b, _c;
   const {
-    onCodeHelpRequest
+    onCodeHelpRequest,
+    onStdioError
   } = React.useContext(context.ExerciseContext);
   const {
     materialExerciseId,
@@ -81,6 +82,9 @@ const ExerciseRunner = ({
   const handleAiHelpibotError = text => {
     var _a, _b, _c;
     const error = runner.getProgrammingErrorResult(text);
+    if (!!error && typeof onStdioError === 'function') {
+      onStdioError(error);
+    }
     if (!!error && typeof onCodeHelpRequest === 'function') {
       onCodeHelpRequest({
         code: error.errorCode,

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

@@ -2,4 +2,4 @@ export { default as MaterialExercise } from './MaterialExercise';
 export type { MaterialExerciseProps, MaterialExerciseApis, } from './MaterialExercise';
 export { default as MaterialExerciseMobile } from './MaterialExerciseMobile';
 export type { MaterialExerciseMobileProps } from './MaterialExerciseMobile';
-export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';
+export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnCodeEditorChange, MaterialExerciseCommonPropOnStdioError, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';

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

@@ -59,6 +59,8 @@ export interface MaterialExerciseCommonProps extends MaterialCommponentCommonPro
     onMultiLangLanguageChange?: MaterialExerciseCommonPropOnMultiLangLanguageChange;
     onReferenceDocsToggle?: () => void;
     onCodeHelpRequest?: MaterialExerciseCommonPropOnCodeHelpRequest;
+    onCodeEditorChange?: MaterialExerciseCommonPropOnCodeEditorChange;
+    onStdioError?: MaterialExerciseCommonPropOnStdioError;
     onDefaultExerciseRoomIdSet?: MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet;
     onExerciseRoomIdChange?: MaterialExerciseCommonPropOnExerciseRoomIdChange;
     onExerciseRunningDone?: MaterialExerciseCommonPropOnRunningDone;
@@ -72,7 +74,7 @@ export type MaterialExerciseCommonPropExerciseImageEmptyOptions = ExerciseProvid
 /**
  * On code help button click.
  */
-export type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
+export type MaterialExerciseCommonPropOnCodeHelpRequest = (payload: {
     code: string;
     error?: CodeHelperError;
     payload?: any;
@@ -80,6 +82,18 @@ export type MaterialExerciseCommonPropOnCodeHelpRequest = (params: {
     instruction?: string;
     openFileContent?: string;
 }) => void;
+/**
+ * On code editor drag.
+ */
+export type MaterialExerciseCommonPropOnCodeEditorChange = (payload: {
+    filename: string;
+    content: string;
+    selectedContent: string;
+}) => void;
+/**
+ * On stdio error.
+ */
+export type MaterialExerciseCommonPropOnStdioError = (error: CodeHelperError) => void;
 /**
  * On multi language change.
  */

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useDebounce } from 'react-use';
 import { getOrgMaterialExerciseExerciseImageExerciseFileGet } from '@elice/api-client';
 import { Flex } from '@elice/blocks';
 import { enums } from '@elice/types';
 import { FlutterApp } from '@elice/utils';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue, useSetRecoilState, useRecoilState } from 'recoil';
 import ExerciseFileShimmer from '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
 import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
 import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
@@ -13,7 +14,6 @@ import FileViewerNonViewable from '../../shared/file-viewer/FileViewerNonViewabl
 import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
 import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
 import 'monaco-editor/esm/vs/editor/editor.api';
-import 'react-use';
 import 'socket.io-client';
 import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState, exerciseMonacoEditorApisState } from '../context/recoil.js';
 import { ExerciseContext } from '../context/context.js';
@@ -41,7 +41,8 @@ const ExerciseFileEditor = () => {
     exerciseRoomId,
     readOnlyEditor,
     readOnlyActiveFile,
-    locale
+    locale,
+    onCodeEditorChange
   } = React.useContext(ExerciseContext);
   const exercise = useRecoilValue(exerciseState(materialExerciseId));
   const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
@@ -50,8 +51,9 @@ const ExerciseFileEditor = () => {
   const activeFilename = useRecoilValue(exerciseActiveFilenameState);
   const readOnly = readOnlyEditor || readOnlyActiveFile;
   const setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
+  const [fileEditorContent, setFileEditorContent] = React.useState(null);
   const setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
-  const setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState);
+  const [fileEditorCursorSelectionValue, setFileEditorCursorSelectionValue] = useRecoilState(exerciseFileEditorCursorSelectionValueState);
   // editor
   const editorApis = React.useRef(null);
   const editorDocHistories = React.useRef({});
@@ -169,6 +171,9 @@ const ExerciseFileEditor = () => {
    *
    */
   const handleChange = e => {
+    var _a, _b;
+    setFileEditorContent((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : '');
+    // === server initiated ===
     const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
     if (index !== -1) {
       serverInitiatedVersions.current.splice(index, 1);
@@ -206,7 +211,7 @@ const ExerciseFileEditor = () => {
       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 : '');
+    setFileEditorCursorSelectionValue((_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.
@@ -266,6 +271,33 @@ const ExerciseFileEditor = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   //
+  // Emit editor change event to parent component.
+  //
+  useDebounce(() => {
+    if (!isReady) {
+      return;
+    }
+    if (!activeFilename || fileEditorContent === null) {
+      return;
+    }
+    if (typeof onCodeEditorChange === 'function') {
+      onCodeEditorChange({
+        filename: activeFilename,
+        content: fileEditorContent,
+        selectedContent: fileEditorCursorSelectionValue !== null && fileEditorCursorSelectionValue !== void 0 ? fileEditorCursorSelectionValue : ''
+      });
+    }
+  }, 150, [isReady, activeFilename, fileEditorContent, fileEditorCursorSelectionValue]);
+  //
+  // Update file content on active file change.
+  //
+  useEffect(() => {
+    var _a, _b;
+    if (activeFilename && isReady) {
+      setFileEditorContent((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValue()) !== null && _b !== void 0 ? _b : '');
+    }
+  }, [activeFilename, isReady]);
+  //
   //
   //
   // empty file

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

@@ -47,7 +47,8 @@ const ExerciseRunner = ({
 }) => {
   var _a, _b, _c;
   const {
-    onCodeHelpRequest
+    onCodeHelpRequest,
+    onStdioError
   } = React.useContext(ExerciseContext);
   const {
     materialExerciseId,
@@ -77,6 +78,9 @@ const ExerciseRunner = ({
   const handleAiHelpibotError = text => {
     var _a, _b, _c;
     const error = getProgrammingErrorResult(text);
+    if (!!error && typeof onStdioError === 'function') {
+      onStdioError(error);
+    }
     if (!!error && typeof onCodeHelpRequest === 'function') {
       onCodeHelpRequest({
         code: error.errorCode,

package/es/components/material-exercise/index.d.ts

@@ -2,4 +2,4 @@ export { default as MaterialExercise } from './MaterialExercise';
 export type { MaterialExerciseProps, MaterialExerciseApis, } from './MaterialExercise';
 export { default as MaterialExerciseMobile } from './MaterialExerciseMobile';
 export type { MaterialExerciseMobileProps } from './MaterialExerciseMobile';
-export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';
+export type { MaterialExerciseCommonApis, MaterialExerciseCommonApiSendTextToTerminal, MaterialExerciseCommonProps, MaterialExerciseCommonPropExerciseImageEmptyOptions, MaterialExerciseCommonPropOnCodeHelpRequest, MaterialExerciseCommonPropOnCodeEditorChange, MaterialExerciseCommonPropOnStdioError, MaterialExerciseCommonPropOnDefaultExerciseRoomIdSet, MaterialExerciseCommonPropOnExerciseRoomIdChange, MaterialExerciseCommonPropOnRunningDone, MaterialExerciseCommonPropOnSubmit, MaterialExerciseCommonPropOnError, } from './context/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-exercise",
-  "version": "1.240619.0",
+  "version": "1.240620.0-editorevent.0",
   "description": "User view and editing components of Elice material exercise",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -85,8 +85,8 @@
     "@elice/icons": "^1.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
     "@elice/markdown": "^1.220815.0",
-    "@elice/material-shared-types": "1.240619.0",
-    "@elice/material-shared-utils": "1.240619.0",
+    "@elice/material-shared-types": "1.240620.0-editorevent.0",
+    "@elice/material-shared-utils": "1.240620.0-editorevent.0",
     "@elice/mui-elements": "^5.230825.0",
     "@elice/mui-system": "^5.230825.0",
     "@elice/types": "^1.240619.0",
@@ -116,5 +116,5 @@
     "recoil": "^0.6.1",
     "styled-components": "^5.2.0"
   },
-  "gitHead": "38cf96eba78c95ce503ed36ebd3561c68f90ef8f"
+  "gitHead": "d0b5976de6ea3217fe8472427c005fa77ae247fc"
 }