@elice/material-exercise 1.251120.1 → 1.260128.0-rc.0

package/es/components/shared/file-viewer/FileViewerNonViewable.js

@@ -1,27 +1,56 @@
+import _styled from '@emotion/styled/base';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Button, Vspace, Text, Icon } from '@elice/blocks';
 import { eilDownload } from '@elice/icons';
 import { IntlComponentBuilder } from '@elice/intl';
 import FileSaver from 'file-saver';
-import styled from 'styled-components';
-import FileIcon from '../file-icon/FileIcon.js';
 import nonViewableMessageEn from './locales/nonViewable.en.json.js';
 import nonViewableMessageKo from './locales/nonViewable.ko.json.js';
 import nonViewableMessageTh from './locales/nonViewable.th.json.js';
 import nonViewableMessageJa from './locales/nonViewable.ja.json.js';
+import FileIcon from '../file-icon/FileIcon.js';
 
-var StyledContainer = styled.div.withConfig({
-  componentId: "sc-l8149y-0"
-})(["display:flex;justify-content:center;align-items:center;width:100%;height:100%;"]);
-var StyledContainerContent = styled.div.withConfig({
-  componentId: "sc-l8149y-1"
-})(["display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center;"]);
-var StyledButton = styled(Button).withConfig({
-  componentId: "sc-l8149y-2"
-})(["display:block;margin:0 auto;"]);
-var StyledButtonsWrap = styled.div.withConfig({
-  componentId: "sc-l8149y-3"
-})(["text-align:center;> *{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"]);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledContainer = /*#__PURE__*/_styled("div", {
+  target: "e4g4oyf3"
+})("production" === "production" ? {
+  name: "e0j0on",
+  styles: "display:flex;justify-content:center;align-items:center;width:100%;height:100%"
+} : {
+  name: "e0j0on",
+  styles: "display:flex;justify-content:center;align-items:center;width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledContainerContent = /*#__PURE__*/_styled("div", {
+  target: "e4g4oyf2"
+})("production" === "production" ? {
+  name: "1b3vh03",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center"
+} : {
+  name: "1b3vh03",
+  styles: "display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1rem 1.5rem;width:100%;max-width:20rem;height:100%;text-align:center",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledButton = /*#__PURE__*/_styled(Button, {
+  target: "e4g4oyf1"
+})("production" === "production" ? {
+  name: "12byf7z",
+  styles: "display:block;margin:0 auto"
+} : {
+  name: "12byf7z",
+  styles: "display:block;margin:0 auto",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledButtonsWrap = /*#__PURE__*/_styled("div", {
+  target: "e4g4oyf0"
+})("production" === "production" ? {
+  name: "nfymje",
+  styles: "text-align:center;>*{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}"
+} : {
+  name: "nfymje",
+  styles: "text-align:center;>*{margin-bottom:0.5rem;&:last-child{margin-bottom:0;}}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
 var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
   var filename = _ref.filename,
     fileurl = _ref.fileurl,
@@ -38,7 +67,7 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
       return res.blob();
     }).then(function (blob) {
       return FileSaver.saveAs(blob, filename);
-    }).catch(function () {
+    })["catch"](function () {
       var win = window.open(fileurl, '_blank');
       if (win) {
         win.focus();
@@ -71,9 +100,9 @@ var FileViewerNonViewable = function FileViewerNonViewable(_ref) {
       return null;
     }
     return jsx(Text, {
+      hoverable: true,
       role: "gray5",
       size: "tiny",
-      hoverable: true,
       onClick: onTextViewerClick,
       children: __intl.formatMessage({
         id: 'fileViewer.nonViewable.openViaTextEditor'

package/es/components/shared/file-viewer/FileViewerText.js

@@ -2,19 +2,9 @@ import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPlugin
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
-import '../../material-exercise/context/context.js';
-import '../../material-exercise/context/recoilTypes.js';
-import '../../material-exercise/context/subjects.js';
-import '../../material-exercise/context/ExerciseProvider.js';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 import MonacoEditorLazy from '../monaco-editor/MonacoEditorLazy.js';
-import '../monaco-editor/MonacoEditorPerferenceForm.js';
-import 'monaco-editor/esm/vs/editor/editor.api';
+import { exerciseEditorPreferenceState } from '../../material-exercise/context/recoil.js';
 
 var FileViewerText = function FileViewerText(_ref) {
   var filename = _ref.filename,
@@ -31,7 +21,7 @@ var FileViewerText = function FileViewerText(_ref) {
     }
     fetch(fileurl).then(function (res) {
       return res.text();
-    }).then(setContent).catch(function (err) {
+    }).then(setContent)["catch"](function (err) {
       return console.error(err);
     });
   }, [fileurl]);
@@ -42,12 +32,12 @@ var FileViewerText = function FileViewerText(_ref) {
     return jsx(ExerciseFileShimmer, {});
   }
   return jsx(MonacoEditorLazy, {
+    noLanguageIntellisense: true,
     filename: filename,
     defaultValue: content,
     preference: Object.assign(Object.assign({}, preference), {
       readOnly: true
     }),
-    noLanguageIntellisense: true,
     locale: locale
   });
 };

package/es/components/shared/material-modal/MaterialModal.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 interface MaterialModalProps {
     title: string;
     footer?: React.ReactChild;

package/es/components/shared/material-modal/MaterialModal.styled.d.ts

@@ -1,7 +1,20 @@
-/// <reference types="react" />
 import { Text } from '@elice/blocks';
-export declare const StyledModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledModalHeader: import("styled-components").StyledComponent<typeof Text, any, {}, never>;
-export declare const StyledModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledModalFooter: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-export declare const StyledCloseButton: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>>, any, {}, never>;
+export declare const StyledModalWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledModalHeader: import("@emotion/styled").StyledComponent<Pick<import("@elice/blocks").TextProps, never> & Partial<Pick<import("@elice/blocks").TextProps, keyof import("@elice/blocks").TextProps>> & Partial<Pick<import("@elice/blocks").TextProps, never>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {
+    ref?: import("react").Ref<Text> | undefined;
+}>;
+export declare const StyledModalBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledModalFooter: import("@emotion/styled").StyledComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const StyledCloseButton: import("@emotion/styled").StyledComponent<import("@elice/blocks").IconButtonProps & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

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

@@ -1,21 +1,29 @@
+import _styled from '@emotion/styled/base';
 import { Text, Flex, IconButton } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
-import styled from 'styled-components';
 
-var StyledModalWrapper = styled.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;"], base.color.gray8);
-var StyledModalHeader = styled(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:", ";"], base.color.navy9, base.color.white);
-var StyledModalBody = styled.div.withConfig({
-  componentId: "sc-1ej7kso-2"
-})(["position:relative;flex:1 1 auto;width:100%;height:80%;"]);
-var StyledModalFooter = styled(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;"], base.color.navy9);
-var StyledCloseButton = styled(IconButton).withConfig({
-  componentId: "sc-1ej7kso-4"
-})(["position:absolute;top:0;right:0;color:", " !important;"], base.color.gray4);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledModalWrapper = /*#__PURE__*/_styled("div", {
+  target: "e1cl5wqs4"
+})("position:relative;display:flex;flex-flow:column nowrap;width:90vw;height:90vh;padding:0;background-color:", base.color.gray8, ";border-radius:0.375rem;");
+var StyledModalHeader = /*#__PURE__*/_styled(Text, {
+  target: "e1cl5wqs3"
+})("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 ", base.color.navy9, ";text-align:center;color:", base.color.white, ";");
+var StyledModalBody = /*#__PURE__*/_styled("div", {
+  target: "e1cl5wqs2"
+})("production" === "production" ? {
+  name: "1pb620b",
+  styles: "position:relative;flex:1 1 auto;width:100%;height:80%"
+} : {
+  name: "1pb620b",
+  styles: "position:relative;flex:1 1 auto;width:100%;height:80%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledModalFooter = /*#__PURE__*/_styled(Flex, {
+  target: "e1cl5wqs1"
+})("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 ", base.color.navy9, ";padding:0.5rem 1.5rem;overflow:hidden;text-align:right;align-items:center;justify-content:flex-end;");
+var StyledCloseButton = /*#__PURE__*/_styled(IconButton, {
+  target: "e1cl5wqs0"
+})("position:absolute;top:0;right:0;color:", base.color.gray4, "!important;");
 
 export { StyledCloseButton, StyledModalBody, StyledModalFooter, StyledModalHeader, StyledModalWrapper };

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

@@ -1,37 +1,45 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { base } from '@elice/design-tokens';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import styled from 'styled-components';
 import initMonacoGrammars from './utils/grammar/index.js';
+import initMonacoLanguages from './editor-languages/index.js';
+import { useEditorOptions } from './hooks/useEditorOptions.js';
+import { getLanguageFromFilename } from './utils/monacoLanguage.js';
 import { cssRemoteMarker } from './vendors/monaco-collab-ext/styles.js';
+import { useMonacoOptions } from './editor-hooks/useMonacoOptions.js';
+import { useMonacoTheme } from './editor-hooks/useMonacoTheme.js';
 import { DEFAULT_MONACO_EDITOR_PREFERENCE } from './constants/monaco/preferences.js';
 import { useMonacoEventChange } from './editor-hooks/useMonacoEventChange.js';
 import { useMonacoEventCursor } from './editor-hooks/useMonacoEventCursor.js';
 import { useMonacoEventScroll } from './editor-hooks/useMonacoEventScroll.js';
 import { useMonacoMarkers } from './editor-hooks/useMonacoMarkers.js';
-import { useMonacoOptions } from './editor-hooks/useMonacoOptions.js';
-import { useMonacoTheme } from './editor-hooks/useMonacoTheme.js';
-import initMonacoLanguages from './editor-languages/index.js';
-import { useEditorOptions } from './hooks/useEditorOptions.js';
-import { getLanguageFromFilename } from './utils/monacoLanguage.js';
 
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 //
 //
 //
 // pre-init monaco editor
 initMonacoLanguages();
-initMonacoGrammars().catch(console.warn);
+initMonacoGrammars()["catch"](console.warn);
 //
 //
 //
-var StyledMonacoEditorWrapper = styled.div.withConfig({
-  componentId: "sc-1j3uyex-0"
-})(["width:100%;height:100%;"]);
-var StyledMonacoEditor = styled.div.withConfig({
-  componentId: "sc-1j3uyex-1"
-})(["width:100%;height:100%;background-color:", ";", ""], base.color.navy9, cssRemoteMarker);
+var StyledMonacoEditorWrapper = /*#__PURE__*/_styled("div", {
+  target: "ejc2bj11"
+})("production" === "production" ? {
+  name: "w1atjl",
+  styles: "width:100%;height:100%"
+} : {
+  name: "w1atjl",
+  styles: "width:100%;height:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledMonacoEditor = /*#__PURE__*/_styled("div", {
+  target: "ejc2bj10"
+})("width:100%;height:100%;background-color:", base.color.navy9, ";", cssRemoteMarker, ";");
 /**
  *
  */

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

@@ -2,10 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import React, { forwardRef } from 'react';
 import { FlutterApp } from '@elice/utils';
 import ExerciseFileShimmer from '../exercise-shimmer/ExerciseFileShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabsShimmer.js';
-import '../exercise-shimmer/ExerciseFileTabShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListShimmer.js';
-import '../exercise-shimmer/ExerciseFileTreeListItemShimmer.js';
 
 //
 //

package/es/components/shared/monaco-editor/MonacoEditorMobile.js

@@ -122,8 +122,8 @@ var MonacoEditorMobile = forwardRef(function (props, ref) {
   return jsx(MonacoEditor, Object.assign({}, props, {
     noLanguageIntellisense: true,
     preference: preference,
-    onLoad: handleLoad,
-    ref: editorApiRef
+    ref: editorApiRef,
+    onLoad: handleLoad
   }));
 });
 

package/es/components/shared/monaco-editor/MonacoEditorPerferenceForm.js

@@ -1,24 +1,31 @@
 import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import _styled from '@emotion/styled/base';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { useDeepCompareEffect } from 'react-use';
 import { Select, Text, Vspace, AntSwitch } from '@elice/blocks';
 import { base } from '@elice/design-tokens';
 import { IntlComponentBuilder } from '@elice/intl';
-import styled from 'styled-components';
 import { VSCODE_THEMES } from './constants/themes/index.js';
-import { MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES } from './constants/monaco/preferences.js';
 import messageEn from './locales/en.json.js';
 import messageKo from './locales/ko.json.js';
-import 'monaco-editor/esm/vs/editor/editor.api';
 import { normalizeMonacoPreference } from './utils/monacoPreference.js';
+import { MONACO_EDITOR_PREFERENCE_OPTIONS_FONT_SIZES, MONACO_EDITOR_RENDER_WHITESPACE_OPTIONS, MONACO_EDITOR_PREFERENCE_OPTIONS_TAB_SIZES } from './constants/monaco/preferences.js';
 
-var StyledPreferenceBodyItem = styled.div.withConfig({
-  componentId: "sc-1bwf6gs-0"
-})(["display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"]);
-var StyledSelect = styled(Select).withConfig({
-  componentId: "sc-1bwf6gs-1"
-})(["> div{background:", " !important;border-color:", " !important;}select{padding:0 !important;height:2rem !important;color:#fff !important;> option{background:", " !important;}}"], base.color.navy8, base.color.navy7, base.color.navy8);
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var StyledPreferenceBodyItem = /*#__PURE__*/_styled("div", {
+  target: "e1p3ru5t1"
+})("production" === "production" ? {
+  name: "10vug81",
+  styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}"
+} : {
+  name: "10vug81",
+  styles: "display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;min-height:2rem;color:white;&:last-child{margin-bottom:0;}",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+var StyledSelect = /*#__PURE__*/_styled(Select, {
+  target: "e1p3ru5t0"
+})(">div{background:", base.color.navy8, "!important;border-color:", base.color.navy7, "!important;}select{padding:0!important;height:2rem!important;color:#fff!important;>option{background:", base.color.navy8, "!important;}}");
 var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -55,9 +62,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemTheme = function renderPreferenceItemTheme() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.theme.name'
         })
@@ -87,9 +94,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemFontSize = function renderPreferenceItemFontSize() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.fontSize.name'
         })
@@ -117,9 +124,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemWordWrap = function renderPreferenceItemWordWrap() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.wordWrap.name'
         })
@@ -139,9 +146,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemWhiteSpace = function renderPreferenceItemWhiteSpace() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.renderWhiteSpace.name'
         })
@@ -172,9 +179,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
     var _a;
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.minimap.name'
         })
@@ -196,9 +203,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemCursorSmoothCaretAnimation = function renderPreferenceItemCursorSmoothCaretAnimation() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.displaying.item.cursorSmoothCaretAnimation.name'
         })
@@ -218,9 +225,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemAutoClosingBrackets = function renderPreferenceItemAutoClosingBrackets() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.textEditing.item.autoClosingBrackets.name'
         })
@@ -240,9 +247,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemDetectIndentation = function renderPreferenceItemDetectIndentation() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
+        block: true,
         role: "navy",
         size: "tiny",
-        block: true,
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.textEditing.item.detectIndentation.name'
         })
@@ -262,8 +269,8 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   var renderPreferenceItemTabSize = function renderPreferenceItemTabSize() {
     return jsxs(StyledPreferenceBodyItem, {
       children: [jsx(Text, {
-        role: preference.detectIndentation ? 'grey6' : 'info',
         block: true,
+        role: preference.detectIndentation ? 'grey6' : 'info',
         size: "small",
         children: __intl.formatMessage({
           id: 'monacoEditorPerferenceForm.textEditing.item.tabSize.name'
@@ -292,9 +299,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
   //
   return jsxs(Fragment, {
     children: [jsx(Text, {
+      bold: true,
       role: "lightgrey",
       size: "small",
-      bold: true,
       children: __intl.formatMessage({
         id: 'monacoEditorPerferenceForm.displaying.title'
       })
@@ -303,9 +310,9 @@ var MonacoEditorPerferenceForm = function MonacoEditorPerferenceForm(_ref) {
     }), renderPreferenceItemTheme(), renderPreferenceItemFontSize(), renderPreferenceItemWordWrap(), renderPreferenceItemWhiteSpace(), renderPreferenceItemMinimap(), renderPreferenceItemCursorSmoothCaretAnimation(), jsx(Vspace, {
       height: 2
     }), jsx(Text, {
+      bold: true,
       role: "lightgrey",
       size: "small",
-      bold: true,
       children: __intl.formatMessage({
         id: 'monacoEditorPerferenceForm.textEditing.title'
       })

package/es/components/shared/monaco-editor/editor-hooks/useMonacoMarkers.js

@@ -2,7 +2,6 @@ import { useRef } from 'react';
 import { useDeepCompareEffect } from 'react-use';
 import { RemoteCursorManager } from '../vendors/monaco-collab-ext/RemoteCursorManager.js';
 import { RemoteSelectionManager } from '../vendors/monaco-collab-ext/RemoteSelectionManager.js';
-import '../vendors/monaco-collab-ext/styles.js';
 
 /** Available colors for marker. */
 var MARKER_COLORS = Object.freeze(['purple', 'turquoise', 'red', 'yellow', 'lime', 'blue', 'pink']);

package/es/components/shared/monaco-editor/editor-hooks/useMonacoOptions.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
 import type { EditorOptions } from '../hooks';
 type Monaco = React.MutableRefObject<editor.IStandaloneCodeEditor | null>;

package/es/components/shared/monaco-editor/editor-hooks/useMonacoOptions.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
-import { DEFAULT_MONACO_EDITOR_PREFERENCE } from '../constants/monaco/preferences.js';
 import { prettierConfigSource } from '../utils/prettier/config.js';
+import { DEFAULT_MONACO_EDITOR_PREFERENCE } from '../constants/monaco/preferences.js';
 
 var FONT_LOAD_TEXT = '각난닫ABCabc1230!@#\t !@#():{}[]-_\\|';
 /**
@@ -33,7 +33,7 @@ var useMonacoOptions = function useMonacoOptions(monaco, options) {
     var size = (_b = options.fontSize) !== null && _b !== void 0 ? _b : DEFAULT_MONACO_EDITOR_PREFERENCE.fontSize;
     document.fonts.load("".concat(size, "px Elice Digital Coding"), FONT_LOAD_TEXT).then(function () {
       return editor.remeasureFonts();
-    }).catch(function () {
+    })["catch"](function () {
       // do nothing.
     });
   }, [options.fontSize]);

package/es/components/shared/monaco-editor/editor-hooks/useMonacoTheme.d.ts

@@ -2,5 +2,5 @@ type SupportedTheme = string | null | undefined;
 /**
  * Import and set theme for monaco editor.
  */
-export declare const useMonacoTheme: <T extends SupportedTheme>(rawTheme?: T | undefined, cb?: ((theme: T) => void) | undefined) => void;
+export declare const useMonacoTheme: <T extends SupportedTheme>(rawTheme?: T, cb?: (theme: T) => void) => void;
 export {};

package/es/components/shared/monaco-editor/editor-hooks/useMonacoTheme.js

@@ -14,8 +14,7 @@ var useMonacoTheme = function useMonacoTheme(rawTheme, cb) {
       if (typeof cb === 'function') {
         cb(theme);
       }
-    }).catch(function (err) {
-      // eslint-disable-next-line no-console
+    })["catch"](function (err) {
       console.warn("fail to load theme (`".concat(theme, "`)"), err);
     });
   },

package/es/components/shared/monaco-editor/editor-languages/css/formatter.js

@@ -1,35 +1,31 @@
-import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import prettier from '../../utils/prettier/index.js';
 
 var CssDocumentFormattingEditProvider = {
   provideDocumentFormattingEdits: function provideDocumentFormattingEdits(model) {
-    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var text;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var text, _t, _t2, _t3, _t4;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
-            _context.t0 = prettier;
-            _context.t1 = model.getValue();
-            _context.next = 4;
+            _t = prettier;
+            _t2 = model.getValue();
+            _context.n = 1;
             return import('prettier/plugins/postcss');
-          case 4:
-            _context.t2 = _context.sent;
-            _context.t3 = [_context.t2];
-            _context.t4 = {
+          case 1:
+            _t3 = _context.v;
+            _t4 = [_t3];
+            _context.n = 2;
+            return _t(_t2, {
               parser: 'scss',
-              plugins: _context.t3
-            };
-            _context.next = 9;
-            return (0, _context.t0)(_context.t1, _context.t4);
-          case 9:
-            text = _context.sent;
-            return _context.abrupt("return", [{
+              plugins: _t4
+            });
+          case 2:
+            text = _context.v;
+            return _context.a(2, [{
               range: model.getFullModelRange(),
               text: text
             }]);
-          case 11:
-          case "end":
-            return _context.stop();
         }
       }, _callee);
     }))();

package/es/components/shared/monaco-editor/editor-languages/css/index.js

@@ -1,6 +1,6 @@
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import { emmetCSS } from '../../utils/emmet/emmet.js';
 import CssDocumentFormattingEditProvider from './formatter.js';
+import { emmetCSS } from '../../utils/emmet/emmet.js';
 
 /**
  * Set CSS document formatting provider.

package/es/components/shared/monaco-editor/editor-languages/html/formatter.js

@@ -1,35 +1,31 @@
-import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import prettier from '../../utils/prettier/index.js';
 
 var HtmlDocumentFormattingEditProvider = {
   provideDocumentFormattingEdits: function provideDocumentFormattingEdits(model) {
-    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var text;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    return _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var text, _t, _t2, _t3, _t4;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
           case 0:
-            _context.t0 = prettier;
-            _context.t1 = model.getValue();
-            _context.next = 4;
+            _t = prettier;
+            _t2 = model.getValue();
+            _context.n = 1;
             return import('prettier/plugins/html');
-          case 4:
-            _context.t2 = _context.sent;
-            _context.t3 = [_context.t2];
-            _context.t4 = {
+          case 1:
+            _t3 = _context.v;
+            _t4 = [_t3];
+            _context.n = 2;
+            return _t(_t2, {
               parser: 'html',
-              plugins: _context.t3
-            };
-            _context.next = 9;
-            return (0, _context.t0)(_context.t1, _context.t4);
-          case 9:
-            text = _context.sent;
-            return _context.abrupt("return", [{
+              plugins: _t4
+            });
+          case 2:
+            text = _context.v;
+            return _context.a(2, [{
               range: model.getFullModelRange(),
               text: text
             }]);
-          case 11:
-          case "end":
-            return _context.stop();
         }
       }, _callee);
     }))();