@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,331 @@
+import React from 'react';
+import { getOrgMaterialExerciseExerciseImageExerciseFileGet } from '@elice/api-client';
+import { Flex } from '@elice/blocks';
+import { enums } from '@elice/types';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+import ExerciseFileShimmer from '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import FileViewerNonViewable from '../../shared/file-viewer/FileViewerNonViewable.js';
+import MonacoEditorLazy from '../../shared/monaco-editor/MonacoEditorLazy.js';
+import '../../shared/monaco-editor/MonacoEditorPerferenceForm.js';
+import 'monaco-editor/esm/vs/editor/editor.api';
+import '../../shared/monaco-editor/constants/monaco/preferences.js';
+import 'react-use';
+import 'socket.io-client';
+import { exerciseState, exerciseRoomState, exerciseLectureState, exerciseEditorPreferenceState, exerciseActiveFilenameState, exerciseWebsocketQuery, exerciseFileEditorCursorState, exerciseFileEditorCursorSelectionValueState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import { exerciseFileEditorContentChange$, exerciseFileEditorSaveAction$ } from '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import '../../../constants/arduino.js';
+import { checkExerciseFileResettable } from '../../../utils/exerciseFile.js';
+import '@elice/material-shared-utils';
+import '@elice/websocket';
+import 'humps';
+import 'ot-text-unicode';
+import { useUsercodeEditWebSocket } from '../../../hooks/useUsercodeEditWebSocket.js';
+import ExerciseFileReadOnlyBanner from './ExerciseFileReadOnlyBanner.js';
+
+//
+//
+
+/**
+ * Exercise file (code) editor for editable files
+ */
+
+const ExerciseFileEditor = () => {
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    readOnlyEditor,
+    readOnlyActiveFile,
+    locale
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const exerciseRoom = useRecoilValue(exerciseRoomState(exerciseRoomId));
+  const lecture = useRecoilValue(exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const preference = useRecoilValue(exerciseEditorPreferenceState);
+  const activeFilename = useRecoilValue(exerciseActiveFilenameState);
+  const readOnly = readOnlyEditor || readOnlyActiveFile;
+  const setUsercodeWebSocketState = useSetRecoilState(exerciseWebsocketQuery('usercodeEdit'));
+  const setFileEditorCursorState = useSetRecoilState(exerciseFileEditorCursorState);
+  const setFileEditorCursorSelectionValueState = useSetRecoilState(exerciseFileEditorCursorSelectionValueState); // editor
+
+  const editorApis = React.useRef(null);
+  const editorDocHistories = React.useRef({});
+  const serverInitiatedVersions = React.useRef([]); // ready state
+
+  const [isEditorReady, setEditorReady] = React.useState(false);
+  const [isWebSocketReady, setWebSocketReady] = React.useState(false);
+  const isReady = isEditorReady && isWebSocketReady;
+  const [isFileResettable, setFileResettable] = React.useState(checkExerciseFileResettable(activeFilename, {
+    exercise,
+    exerciseRoom
+  }));
+  /**
+   * Set value of current file.
+   */
+
+  const setValue = async content => {
+    var _a;
+
+    if (!isFileResettable) {
+      console.warn('Cannot reset file since not resettable.');
+      return;
+    }
+
+    if (!activeFilename) {
+      console.warn('Cannot reset file since no file selected.');
+      return;
+    }
+
+    if (content) {
+      (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+    } // reset as initial value on `null` received.
+    else if (content === null) {
+      const readyExerciseImage = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage;
+
+      if (!editorApis.current || !readyExerciseImage) {
+        return;
+      }
+
+      return getOrgMaterialExerciseExerciseImageExerciseFileGet({
+        exerciseImageId: readyExerciseImage.id,
+        filename: activeFilename
+      }).then(res => res.exerciseFile.content).then(content => {
+        var _a;
+
+        if (typeof content === 'string') {
+          (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.setValue(content);
+        } else {
+          setFileResettable(false);
+        }
+      });
+    }
+  };
+  /**
+   * Update editor document history.
+   */
+
+
+  const pushEditorDocHistories = () => {
+    const _editorApis = editorApis.current;
+
+    if (!_editorApis) {
+      return;
+    }
+
+    if (typeof _editorApis.getMonacoModel === 'function') {
+      const model = _editorApis.getMonacoModel();
+
+      if (model) {
+        editorDocHistories.current[model.getVersionId()] = model.getValue();
+      }
+    }
+  };
+  /**
+   * Handle usercode edit websocket received `WRITE_NOTI` message,
+   * move cursor or insert / delete content.
+   */
+
+
+  const handleWebsocketUsercodeWriteNoti = ots => {
+    var _a, _b, _c;
+
+    let cursor = 0;
+
+    for (const ot of ots) {
+      const model = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getMonacoModel();
+
+      if (!model) {
+        continue;
+      } // remove previous versions.
+
+
+      if (serverInitiatedVersions.current.length > 100) {
+        serverInitiatedVersions.current.splice(0, 50);
+      }
+
+      switch (typeof ot) {
+        // cursor changed...
+        case 'number':
+          cursor += ot;
+          break;
+        // insertion
+
+        case 'string':
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_b = editorApis.current) === null || _b === void 0 ? void 0 : _b.insertValue(cursor, ot);
+          cursor += ot.length;
+          break;
+        // deletion
+
+        default:
+          serverInitiatedVersions.current.push(model.getVersionId());
+          (_c = editorApis.current) === null || _c === void 0 ? void 0 : _c.removeValue(cursor, cursor + (typeof ot.d === 'number' ? ot.d : ot.d.length));
+          break;
+      }
+    }
+  };
+  /**
+   * Usercode edit web socket.
+   */
+
+
+  const wsUsercode = useUsercodeEditWebSocket({
+    exerciseRoomId,
+    filename: activeFilename,
+    onInit: () => setWebSocketReady(true),
+    onWriteNoti: handleWebsocketUsercodeWriteNoti
+  });
+  /**
+   *
+   */
+
+  const handleChange = e => {
+    const index = serverInitiatedVersions.current.indexOf(e.versionId - 1);
+
+    if (index !== -1) {
+      serverInitiatedVersions.current.splice(index, 1);
+      return;
+    } // get previous model doc
+
+
+    const prevDoc = editorDocHistories.current[e.versionId - 1]; // send OTs to server
+
+    for (const change of e.changes) {
+      // insertion
+      if (change.rangeLength === 0 && !readOnly) {
+        wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+      } // deletion
+      else {
+        if (prevDoc && !readOnly) {
+          wsUsercode.sendOTs([change.rangeOffset || null, {
+            d: prevDoc.slice(change.rangeOffset, change.rangeOffset + change.rangeLength)
+          }].filter(Boolean));
+        } // replace
+
+
+        if (change.text.length > 0 && !readOnly) {
+          wsUsercode.sendOTs(change.rangeOffset > 0 ? [change.rangeOffset, change.text] : [change.text]);
+        }
+      }
+    }
+
+    delete editorDocHistories.current[e.versionId - 1];
+  };
+  /**
+   * Handle editor cursor change.
+   */
+
+
+  const handleEditorCursor = range => {
+    var _a, _b;
+
+    if (!readOnly) {
+      wsUsercode.sendCursor(range);
+    }
+
+    setFileEditorCursorState(range);
+    setFileEditorCursorSelectionValueState((_b = (_a = editorApis.current) === null || _a === void 0 ? void 0 : _a.getValueInRange(range.from, range.to)) !== null && _b !== void 0 ? _b : '');
+  };
+  /**
+   * Handle editor save shortcut emitted.
+   */
+
+
+  const handleSave = () => {
+    exerciseFileEditorSaveAction$.next();
+  }; //
+  // Handle editor content change.
+  //
+
+
+  React.useEffect(() => {
+    var _a;
+
+    const _editorApis = editorApis.current;
+
+    if (!_editorApis || !isReady) {
+      return;
+    }
+
+    _editorApis.setValue(wsUsercode.doc);
+
+    pushEditorDocHistories();
+    const subscription = (_a = _editorApis.editor) === null || _a === void 0 ? void 0 : _a.onDidChangeModelContent(e => {
+      pushEditorDocHistories();
+      handleChange(e);
+    });
+    return () => {
+      if (subscription) {
+        subscription.dispose();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isReady, readOnly]); //
+  // Handle websocket status change.
+  //
+
+  React.useEffect(() => setUsercodeWebSocketState(wsUsercode.readyState), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [wsUsercode.readyState]); //
+  // handle content change request to code editor.
+  //
+
+  React.useEffect(() => {
+    const contentChangeSub = exerciseFileEditorContentChange$.subscribe(v => {
+      setValue(v).catch(() => void 0);
+    });
+    return () => {
+      contentChangeSub.unsubscribe();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  //
+  //
+  // empty file
+
+  if (!activeFilename) {
+    return React.createElement(ExerciseFileShimmer, null);
+  } // non-editable file
+
+
+  if (!wsUsercode.docEditable) {
+    return React.createElement(FileViewerNonViewable, {
+      filename: activeFilename,
+      locale: locale
+    });
+  } // websocket not ready
+
+
+  if (!isWebSocketReady) {
+    return React.createElement(ExerciseFileShimmer, null);
+  }
+
+  const uniqueFilePath = `code/${exerciseRoomId}`;
+  const editorFilename = `${uniqueFilePath}/${activeFilename}`;
+  return React.createElement(Flex, {
+    column: true,
+    width: "100%",
+    height: "100%"
+  }, React.createElement(ExerciseFileReadOnlyBanner, null), React.createElement(MonacoEditorLazy, {
+    key: editorFilename,
+    defaultValue: "",
+    filename: editorFilename,
+    markers: wsUsercode.markers,
+    preference: Object.assign(Object.assign({}, preference), {
+      readOnly
+    }),
+    noLanguageIntellisense: (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === enums.LectureType.Test,
+    locale: locale,
+    onLoad: () => setEditorReady(true),
+    onCursor: handleEditorCursor,
+    onSave: handleSave,
+    ref: editorApis
+  }));
+}; //
+
+export { ExerciseFileEditor as default };

package/es/components/material-exercise/exercise-file-editor/ExerciseFileReadOnlyBanner.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Banner for readonly exercise file.
+ */
+declare const ExerciseFileReadOnlyBanner: React.FC;
+export default ExerciseFileReadOnlyBanner;

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

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

package/es/components/material-exercise/exercise-file-editor/ExerciseMobileFileEditor.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ExerciseMobileFileEditorProps {
+    exerciseImageId: number;
+    exerciseRoomId: number;
+    filename: string;
+}
+declare const ExerciseMobileFileEditor: React.FC<ExerciseMobileFileEditorProps>;
+export default ExerciseMobileFileEditor;

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

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

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseFileTabs: React.FC;
+export default ExerciseFileTabs;

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabs.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import { exerciseActiveFilenameState, exerciseFileTabsOpenedState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+
+const AsyncFileTabs = React.lazy(() => import('../../shared/file-tabs/FileTabs.js'));
+const StyledFileTabsWrapper = styled.div.withConfig({
+  componentId: "sc-11fdoyl-0"
+})(["flex:0 0 3rem;"]);
+
+const ExerciseFileTabs = () => {
+  const {
+    exerciseRoomId,
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const [activeFilename, setActiveFilename] = useRecoilState(exerciseActiveFilenameState);
+  const [openedTabs, setOpenedTabs] = useRecoilState(exerciseFileTabsOpenedState({
+    materialExerciseId,
+    exerciseRoomId
+  }));
+
+  const handleCloseTab = path => {
+    const updatedTabs = openedTabs.filter(tab => tab !== path);
+    setOpenedTabs(updatedTabs);
+
+    if (activeFilename === path) {
+      setActiveFilename(updatedTabs.length > 0 ? updatedTabs[0] : '');
+    }
+  };
+
+  const handleTabOrderChange = (currentIndex, movedIndex) => {
+    const newOpenedTabs = [...openedTabs];
+    const movingTab = newOpenedTabs.splice(currentIndex, 1);
+    newOpenedTabs.splice(movedIndex, 0, ...movingTab);
+    setOpenedTabs(newOpenedTabs);
+  };
+
+  const handleActivePathChange = (path, isDirectory = false) => {
+    if (isDirectory) {
+      return;
+    }
+
+    if (!openedTabs.includes(path)) {
+      setOpenedTabs([...openedTabs, path]);
+    }
+
+    setActiveFilename(path);
+  };
+
+  return React.createElement(StyledFileTabsWrapper, null, React.createElement(React.Suspense, {
+    fallback: React.createElement(ExerciseFileTabsShimmer, null)
+  }, React.createElement(AsyncFileTabs, {
+    openedTabs: openedTabs,
+    activeTab: activeFilename || undefined,
+    onCloseTab: handleCloseTab,
+    onSelectTab: handleActivePathChange,
+    onTabOrderChange: handleTabOrderChange
+  })));
+};
+
+export { ExerciseFileTabs as default };

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<React.RefAttributes<HTMLButtonElement>, "key"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsFileTreeButton.js

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+import { useIntl } from 'react-intl';
+import { useHover } from 'react-use';
+import { IconButton, Tooltip } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilArrowRightwardsDouble, eilFolder } from '@elice/icons';
+import { enums } from '@elice/types';
+import { eliceApiUiConfigNormalizeHelper } from '@elice/utils';
+import { useRecoilValue, useRecoilState } from 'recoil';
+import styled from 'styled-components';
+import { exerciseState, exerciseFileTreeOpenedState } from '../context/recoil.js';
+import { ExerciseContext } from '../context/context.js';
+import '../context/recoilTypes.js';
+import '../context/subjects.js';
+import '../context/ExerciseProvider.js';
+import { withForwardRefExerciseIntlProvider } from '../context/ExerciseIntlProvider.js';
+import phrasesEn from './locales/fileTreeButton.en.json.js';
+import phrasesKo from './locales/fileTreeButton.ko.json.js';
+
+const ICON_BUTTON_SIZE = '2.25rem';
+const StyledFileTreeButton = styled(IconButton).withConfig({
+  componentId: "sc-ohtsjn-0"
+})(["width:", " !important;height:", " !important;border-right:1px solid ", " !important;background-color:", " !important;&:hover{background-color:", " !important;}"], ICON_BUTTON_SIZE, ICON_BUTTON_SIZE, base.color.navy7, props => props.active ? base.color.navy8 : base.color.navy8, base.color.navy9);
+const ExerciseFileTabsFileTreeButton = forwardRef((_, ref) => {
+  const intl = useIntl();
+  const {
+    materialExerciseId
+  } = React.useContext(ExerciseContext);
+  const exercise = useRecoilValue(exerciseState(materialExerciseId));
+  const [exerciseFileTreeOpened, setExerciseFileTreeOpened] = useRecoilState(exerciseFileTreeOpenedState);
+  /**
+   * Handle click.
+   */
+
+  const handleClick = () => {
+    setExerciseFileTreeOpened(prev => !prev);
+  }; //
+  // apply default file tree opened state.
+  //
+
+
+  React.useEffect(() => {
+    var _a;
+
+    const exerciseUiConfig = eliceApiUiConfigNormalizeHelper('materialExercise', (_a = exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig) !== null && _a !== void 0 ? _a : {});
+    setExerciseFileTreeOpened(exerciseUiConfig.editorFileTreeDefaultStatus === enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Open);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [exercise]); //
+  //
+  //
+
+  const [el] = useHover(isHovering => {
+    return React.createElement("div", null, React.createElement(Tooltip, {
+      title: exerciseFileTreeOpened ? intl.formatMessage({
+        id: 'exerciseFileTab.fileTreeButton.tooltip.close'
+      }) : intl.formatMessage({
+        id: 'exerciseFileTab.fileTreeButton.tooltip.open'
+      }),
+      placement: "bottom-start"
+    }, React.createElement(StyledFileTreeButton, {
+      icon: isHovering ? eilArrowRightwardsDouble : eilFolder,
+      iconRotate: !isHovering ? 0 : exerciseFileTreeOpened ? 180 : 0,
+      role: "gray3",
+      size: "tiny",
+      transparent: true,
+      border: false,
+      hasBorderRadius: false,
+      active: exerciseFileTreeOpened,
+      onClick: handleClick,
+      ref: ref
+    })));
+  });
+  return (exercise === null || exercise === void 0 ? void 0 : exercise.uiConfig.editorFileTreeDefaultStatus) === enums.ExerciseUiConfigEditorFileTreeDefaultStatus.Hide ? null : el;
+}); //
+//
+//
+
+var ExerciseFileTabsFileTreeButton$1 = withForwardRefExerciseIntlProvider(ExerciseFileTabsFileTreeButton, {
+  en: phrasesEn,
+  ko: phrasesKo
+});
+
+export { ExerciseFileTabsFileTreeButton$1 as default };

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ExerciseFileTabsLazy: () => JSX.Element;
+export default ExerciseFileTabsLazy;

package/es/components/material-exercise/exercise-file-tabs/ExerciseFileTabsLazy.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import '../../shared/exercise-shimmer/ExerciseFileShimmer.js';
+import ExerciseFileTabsShimmer from '../../shared/exercise-shimmer/ExerciseFileTabsShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTabShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListShimmer.js';
+import '../../shared/exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
+import ExerciseFileTabs from './ExerciseFileTabs.js';
+
+const ExerciseFileTabsLazy = () => {
+  return React.createElement(React.Suspense, {
+    fallback: React.createElement(ExerciseFileTabsShimmer, null)
+  }, React.createElement(ExerciseFileTabs, null));
+};
+
+export { ExerciseFileTabsLazy as default };

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

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

package/es/components/material-exercise/exercise-file-tabs/locales/fileTreeButton.en.json.js

@@ -0,0 +1,3 @@
+var phrasesEn = {"exerciseFileTab.fileTreeButton.tooltip.close":"Close Filetree","exerciseFileTab.fileTreeButton.tooltip.open":"Open Filetree"};
+
+export { phrasesEn as default };

package/es/components/material-exercise/exercise-file-tabs/locales/fileTreeButton.ko.json.js

@@ -0,0 +1,3 @@
+var phrasesKo = {"exerciseFileTab.fileTreeButton.tooltip.close":"파일 트리 닫기","exerciseFileTab.fileTreeButton.tooltip.open":"파일 트리 열기"};
+
+export { phrasesKo as default };

package/es/components/material-exercise/exercise-file-tree/ExerciseFileTree.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const _default: React.VFC<{
+    children?: React.ReactNode;
+}>;
+export default _default;