@elice/material-exercise 1.220803.0

package/cjs/components/shared/material-modal/MaterialModal.styled.js

@@ -0,0 +1,33 @@
+'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 StyledModalWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-1ej7kso-0"
+})(["position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", ";border-radius:0.375rem;"], designTokens.base.color.gray8);
+const StyledModalHeader = styled__default["default"](blocks.Text).withConfig({
+  componentId: "sc-1ej7kso-1"
+})(["flex:0 1 auto;width:100%;height:3.25rem;min-height:3.25rem;line-height:3.25rem;border-top-left-radius:0.375rem;border-top-right-radius:0.375rem;border-bottom:1px solid ", ";text-align:center;color:", ";"], designTokens.base.color.navy9, designTokens.base.color.white);
+const StyledModalBody = styled__default["default"].div.withConfig({
+  componentId: "sc-1ej7kso-2"
+})(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
+const StyledModalFooter = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1ej7kso-3"
+})(["flex:0 1 auto;width:100%;height:3.75rem;min-height:3.75rem;border-bottom-left-radius:0.375rem;border-bottom-right-radius:0.375rem;border-top:1px solid ", ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;"], designTokens.base.color.navy9);
+const StyledCloseButton = styled__default["default"](blocks.IconButton).withConfig({
+  componentId: "sc-1ej7kso-4"
+})(["position:absolute;top:0;right:0;color:", " !important;"], designTokens.base.color.gray4);
+
+exports.StyledCloseButton = StyledCloseButton;
+exports.StyledModalBody = StyledModalBody;
+exports.StyledModalFooter = StyledModalFooter;
+exports.StyledModalHeader = StyledModalHeader;
+exports.StyledModalWrapper = StyledModalWrapper;

package/cjs/components/shared/material-modal/index.d.ts

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

package/cjs/components/shared/monaco-editor/MonacoEditor.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import type { MonacoEditorPreference } from './constants';
+import type { MonacoEditorMarker } from './editor-hooks';
+/** Has editor undo/redo history? */
+declare type MonacoEditorApiHasHistory = () => boolean;
+/** Get current monaco editor model. */
+declare type MonacoEditorApiGetMonacoModel = () => monaco.editor.ITextModel | null;
+/** Clear editor undo/redo history. */
+declare type MonacoEditorApiClearHistory = () => void;
+/** Get current value of editor. */
+declare type MonacoEditorApiGetValue = () => string;
+/** Get value in range of editor. */
+declare type MonacoEditorApiGetValueInRange = (from: number, to: number) => string;
+/** Set (overwrite) value to editor. */
+declare type MonacoEditorApiSetValue = (value: string) => void;
+/** Insert value at specific position. */
+declare type MonacoEditorApiInsertValue = (index: number, value: string) => void;
+/** Remove value at specific range. */
+declare type MonacoEditorApiRemoveValue = (from: number, to: number) => void;
+/** Set selection of editor with specific range. */
+declare type MonacoEditorApiSetSelection = (from: number, to: number) => void;
+/** Scroll editor to specific `scrollTop`. */
+declare type MonacoEditorApiScrollTo = (scrollTop: number) => void;
+/** API of CodeEditorNext. */
+export interface MonacoEditorApis {
+    editor: monaco.editor.IStandaloneCodeEditor | null;
+    getMonacoModel: MonacoEditorApiGetMonacoModel;
+    hasHistory: MonacoEditorApiHasHistory;
+    clearHistory: MonacoEditorApiClearHistory;
+    getValue: MonacoEditorApiGetValue;
+    getValueInRange: MonacoEditorApiGetValueInRange;
+    setValue: MonacoEditorApiSetValue;
+    insertValue: MonacoEditorApiInsertValue;
+    removeValue: MonacoEditorApiRemoveValue;
+    setSelection: MonacoEditorApiSetSelection;
+    scrollTo: MonacoEditorApiScrollTo;
+}
+/** Props of MonacoEditor. */
+export interface MonacoEditorProps {
+    /** Default value of editor. */
+    defaultValue: string;
+    /**
+     * File name.
+     *
+     * @note file should be managed independently
+     * by adding prefix (e.g. exerciseRoomId or version)
+     * not to share doc with other mounted MonacoEditors.
+     */
+    filename: string;
+    /** Preference of monaco editor. */
+    preference?: Partial<MonacoEditorPreference>;
+    /** Markers of editor. Used at code sharing feature. */
+    markers?: MonacoEditorMarker[];
+    /** Fixed width of editor. Default is `100%`. */
+    width?: React.CSSProperties['width'];
+    /** Fixed height of editor. Default is `100%`. */
+    height?: React.CSSProperties['height'];
+    /** Disable intellisense of editor. */
+    noLanguageIntellisense?: boolean;
+    /** Locale of editor. */
+    locale?: string;
+    /** On editor initialized. */
+    onLoad?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
+    /** On editor value has been changed. */
+    onChange?: (changes: string) => void;
+    /** On file saved event emitted. (Ctrl + S) */
+    onSave?: (content: string) => void;
+    /** On cursor of editor has been moved. */
+    onCursor?: (range: {
+        from: number;
+        to: number;
+    }) => void;
+    /** On editor scrolled. */
+    onScroll?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    /** On theme of editor has been changed. */
+    onThemeChange?: (theme: string) => void;
+}
+/**
+ *
+ */
+declare const MonacoEditor: React.ForwardRefExoticComponent<MonacoEditorProps & React.RefAttributes<MonacoEditorApis>>;
+export default MonacoEditor;

package/cjs/components/shared/monaco-editor/MonacoEditor.js

@@ -0,0 +1,381 @@
+'use strict';
+
+var React = require('react');
+var designTokens = require('@elice/design-tokens');
+var monaco = require('monaco-editor/esm/vs/editor/editor.api');
+var styled = require('styled-components');
+var index$1 = require('./utils/grammar/index.js');
+var styles = require('./utils/remoteMarker/styles.js');
+var preferences = require('./constants/monaco/preferences.js');
+var useMonacoEventChange = require('./editor-hooks/useMonacoEventChange.js');
+var useMonacoEventCursor = require('./editor-hooks/useMonacoEventCursor.js');
+var useMonacoEventScroll = require('./editor-hooks/useMonacoEventScroll.js');
+var useMonacoMarkers = require('./editor-hooks/useMonacoMarkers.js');
+var useMonacoOptions = require('./editor-hooks/useMonacoOptions.js');
+var useMonacoTheme = require('./editor-hooks/useMonacoTheme.js');
+var index = require('./editor-languages/index.js');
+var useEditorOptions = require('./hooks/useEditorOptions.js');
+var monacoLanguage = require('./utils/monacoLanguage.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+//
+//
+
+const StyledMonacoEditorWrapper = styled__default["default"].div.withConfig({
+  componentId: "sc-1j3uyex-0"
+})(["width:100%;height:100%;"]);
+const StyledMonacoEditor = styled__default["default"].div.withConfig({
+  componentId: "sc-1j3uyex-1"
+})(["width:100%;height:100%;background-color:", ";", ""], designTokens.base.color.navy9, styles.cssRemoteMarker); //
+//
+//
+
+/**
+ *
+ */
+
+const MonacoEditor = React.forwardRef(({
+  defaultValue = '',
+  filename = '/noname.txt',
+  preference = preferences.DEFAULT_MONACO_EDITOR_PREFERENCE,
+  markers = [],
+  width = '100%',
+  height = '100%',
+  noLanguageIntellisense = false,
+  onLoad,
+  onChange,
+  onSave,
+  onCursor,
+  onScroll,
+  onThemeChange
+}, ref) => {
+  /** Ref of element which wraps editor. */
+  const editorElRef = React__default["default"].useRef(null);
+  /** Ref of editor exposed APIs. */
+
+  const editorApis = React__default["default"].useRef({});
+  /** Ref of monaco editor. */
+
+  const editor = React__default["default"].useRef(null);
+  /** Editor options. */
+
+  const editorOptions = useEditorOptions.useEditorOptions({
+    width,
+    height,
+    preference,
+    noLanguageIntellisense
+  });
+  /** Ref for preventing change event. */
+
+  const suppress = React__default["default"].useRef(false);
+  /** Is editor ready? */
+
+  const [isReady, setReady] = React__default["default"].useState(false);
+  /**
+   * Get model of editor.
+   */
+
+  const getMonacoModel = () => {
+    const uri = monaco__namespace.Uri.file(filename || '/noname.txt');
+    return monaco__namespace.editor.getModel(uri);
+  };
+  /**
+   * Has editor undo/redo history?
+   * @public
+   */
+
+
+  const hasHistory = () => {
+    var _a;
+
+    return (((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getAlternativeVersionId()) || 0) > 1;
+  };
+  /**
+   * Clear editor undo/redo history.
+   * @public
+   */
+
+
+  const clearHistory = () => {
+    getMonacoModel();
+  };
+  /**
+   * Get current value of editor.
+   * @public
+   */
+
+
+  const getValue = () => {
+    var _a;
+
+    return ((_a = getMonacoModel()) === null || _a === void 0 ? void 0 : _a.getValue()) || '';
+  };
+  /**
+   * Get value in range of editor.
+   * @public
+   */
+
+
+  const getValueInRange = (from, to) => {
+    const model = getMonacoModel();
+
+    if (!model) {
+      return '';
+    }
+
+    if (from === to) {
+      return '';
+    }
+
+    const startPosition = model.getPositionAt(from);
+    const endPosition = model.getPositionAt(to);
+    return model.getValueInRange({
+      startLineNumber: startPosition.lineNumber,
+      startColumn: startPosition.column,
+      endLineNumber: endPosition.lineNumber,
+      endColumn: endPosition.column
+    });
+  };
+  /**
+   * Set (overwrite) value to editor.
+   * @public
+   */
+
+
+  const setValue = newValue => {
+    if (!editor.current) {
+      return;
+    } // Replace value EOL as LF.
+
+
+    newValue = newValue.replace(/\r\n/g, '\n');
+    const uri = monaco__namespace.Uri.file(filename || '/noname.txt');
+    const model = monaco__namespace.editor.getModel(uri);
+
+    if (model && !model.isDisposed()) {
+      // Override EOL as LF to prevent error at Windows env.
+      model.setEOL(monaco__namespace.editor.EndOfLineSequence.LF); // Overwirte current whole value with new one.
+
+      if (typeof newValue === 'string') {
+        suppress.current = true;
+        editor.current.pushUndoStop();
+        model.pushEditOperations([], [{
+          range: model.getFullModelRange(),
+          text: newValue,
+          forceMoveMarkers: true
+        }], () => null);
+        editor.current.pushUndoStop();
+        suppress.current = false;
+        editor.current.setModel(model);
+        editor.current.focus();
+      }
+    } // If model has not created yet for this file,
+    // create new model.
+    else {
+      const lang = monacoLanguage.getLanguageFromFilename(filename);
+      const newModel = monaco__namespace.editor.createModel(newValue, lang, uri);
+      newModel.setEOL(monaco__namespace.editor.EndOfLineSequence.LF);
+      editor.current.setModel(newModel);
+    }
+  };
+  /**
+   * Insert value at specific position.
+   * @public
+   */
+
+
+  const insertValue = (index, newValue) => {
+    if (!editor.current) {
+      return;
+    } // Replace value EOL as LF.
+
+
+    newValue = newValue.replace(/\r\n/g, '\n');
+    const model = getMonacoModel();
+
+    if (model) {
+      const position = model.getPositionAt(index);
+      suppress.current = true;
+      editor.current.pushUndoStop();
+      model.pushEditOperations([], [{
+        range: new monaco__namespace.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+        text: newValue,
+        forceMoveMarkers: true
+      }], () => null);
+      editor.current.pushUndoStop();
+      suppress.current = false;
+    }
+  };
+  /**
+   * Remove value at specific range.
+   * @public
+   */
+
+
+  const removeValue = (from, to) => {
+    if (!editor.current) {
+      return;
+    }
+
+    const model = getMonacoModel();
+
+    if (model) {
+      const startPosition = model.getPositionAt(from);
+      const endPosition = model.getPositionAt(to);
+      suppress.current = true;
+      editor.current.pushUndoStop();
+      model.pushEditOperations([], [{
+        range: new monaco__namespace.Range(startPosition.lineNumber, startPosition.column, endPosition.lineNumber, endPosition.column),
+        text: '',
+        forceMoveMarkers: true
+      }], () => null);
+      editor.current.pushUndoStop();
+      suppress.current = false;
+    }
+  };
+  /**
+   * Set selection of editor with specific range.
+   * @public
+   */
+
+
+  const setSelection = (from, to) => {
+    var _a;
+
+    const model = getMonacoModel();
+
+    if (model) {
+      const markerStartPosition = model.getPositionAt(from);
+      const markerEndPosition = model.getPositionAt(to);
+      (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setSelection(new monaco__namespace.Range(markerStartPosition.lineNumber, markerStartPosition.column, markerEndPosition.lineNumber, markerEndPosition.column));
+    }
+  };
+  /**
+   * Scroll editor to specific `scrollTop`.
+   * @public
+   */
+
+
+  const scrollTo = scrollTop => {
+    var _a;
+
+    (_a = editor.current) === null || _a === void 0 ? void 0 : _a.setScrollTop(scrollTop);
+  }; //
+  // Editor hooks.
+  //
+
+
+  useMonacoOptions.useMonacoOptions(editor, editorOptions);
+  useMonacoTheme.useMonacoTheme(preference.theme, onThemeChange);
+  useMonacoEventChange.useMonacoEventChange(editor, onChange, suppress, [isReady]);
+  useMonacoEventCursor.useMonacoEventCursor(editor, onCursor, [isReady]);
+  useMonacoEventScroll.useMonacoEventScroll(editor, onScroll, [isReady]);
+  const remoteMarker = useMonacoMarkers.useMonacoMarkers(editor, markers); //
+  // Init and dispose editor.
+  //
+
+  React__default["default"].useEffect(() => {
+    try {
+      if (!editorElRef.current) {
+        return;
+      } // pre-config monaco editor
+
+
+      index();
+      index$1().catch(console.warn); // create monaco editor instance and render it.
+
+      editor.current = monaco__namespace.editor.create(editorElRef.current, Object.assign(Object.assign({}, editorOptions), {
+        value: defaultValue,
+        language: monacoLanguage.getLanguageFromFilename(filename)
+      })); // add keyboard shortcut.
+
+      editor.current.addCommand(monaco__namespace.KeyMod.CtrlCmd | monaco__namespace.KeyCode.KeyS, () => {
+        var _a, _b, _c;
+
+        (_b = (_a = editor.current) === null || _a === void 0 ? void 0 : _a.getAction('editor.action.formatDocument')) === null || _b === void 0 ? void 0 : _b.run();
+
+        if (typeof onSave === 'function') {
+          const content = ((_c = getMonacoModel()) === null || _c === void 0 ? void 0 : _c.getValue()) || '';
+          onSave(content);
+        }
+      });
+      remoteMarker.init(); // emit on load event.
+
+      if (typeof onLoad === 'function') {
+        onLoad(editor.current);
+      }
+
+      setReady(true);
+    } catch (_) {
+      setReady(false);
+    }
+
+    return () => {
+      var _a;
+
+      setReady(false); // dispose remote marker
+
+      remoteMarker.dispose(); // dispose editor
+
+      if (typeof ((_a = editor.current) === null || _a === void 0 ? void 0 : _a.dispose) === 'function') {
+        editor.current.dispose();
+      }
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  // Set value whenevet filename or value changed.
+  //
+
+  React__default["default"].useEffect(() => setValue(defaultValue), // eslint-disable-next-line react-hooks/exhaustive-deps
+  [filename, defaultValue]); //
+  //
+  //
+
+  editorApis.current.editor = editor.current;
+  editorApis.current.getMonacoModel = getMonacoModel;
+  editorApis.current.hasHistory = hasHistory;
+  editorApis.current.clearHistory = clearHistory;
+  editorApis.current.getValue = getValue;
+  editorApis.current.getValueInRange = getValueInRange;
+  editorApis.current.setValue = setValue;
+  editorApis.current.insertValue = insertValue;
+  editorApis.current.removeValue = removeValue;
+  editorApis.current.setSelection = setSelection;
+  editorApis.current.scrollTo = scrollTo;
+  React__default["default"].useImperativeHandle(ref, () => editorApis.current, [editorApis]); //
+  //
+  //
+
+  return React__default["default"].createElement(StyledMonacoEditorWrapper, null, React__default["default"].createElement(StyledMonacoEditor, {
+    style: {
+      width,
+      height
+    },
+    ref: editorElRef
+  }));
+});
+
+module.exports = MonacoEditor;

package/cjs/components/shared/monaco-editor/MonacoEditorLazy.d.ts

@@ -0,0 +1,3 @@
+import type MonacoEditor from './MonacoEditor';
+declare const MonacoEditorLazy: typeof MonacoEditor;
+export default MonacoEditorLazy;

package/cjs/components/shared/monaco-editor/MonacoEditorLazy.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var ExerciseFileShimmer = require('../exercise-shimmer/ExerciseFileShimmer.js');
+require('../exercise-shimmer/ExerciseFileTabsShimmer.js');
+require('../exercise-shimmer/ExerciseFileTabShimmer.js');
+require('../exercise-shimmer/ExerciseFileTreeListShimmer.js');
+require('../exercise-shimmer/ExerciseFileTreeListItemShimmer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, 'default': e }); }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const AsyncMonacoEditor = React__default["default"].lazy(() => Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./MonacoEditor.js')); }));
+const MonacoEditorLazy = React.forwardRef((props, ref) => {
+  return React__default["default"].createElement(React__default["default"].Suspense, {
+    fallback: React__default["default"].createElement(ExerciseFileShimmer, null)
+  }, React__default["default"].createElement(AsyncMonacoEditor, Object.assign({}, props, {
+    ref: ref
+  })));
+});
+
+module.exports = MonacoEditorLazy;

package/cjs/components/shared/monaco-editor/MonacoEditorPerferenceForm.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { MonacoEditorPreference } from './constants';
+export interface PerferenceFormProps {
+    value: Partial<MonacoEditorPreference>;
+    locale?: string;
+    onChange?: (value: Required<MonacoEditorPreference>) => void;
+}
+declare const _default: (props: PerferenceFormProps) => JSX.Element;
+export default _default;