@elice/material-exercise 1.220803.0

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

@@ -0,0 +1,175 @@
+import { useRef } from 'react';
+import { useDeepCompareEffect } from 'react-use';
+import { RemoteCursorManager } from '../utils/remoteMarker/RemoteCursorManager.js';
+import { RemoteSelectionManager } from '../utils/remoteMarker/RemoteSelectionManager.js';
+import '../utils/remoteMarker/styles.js';
+
+/** Available colors for marker. */
+
+const MARKER_COLORS = Object.freeze(['purple', 'turquoise', 'red', 'yellow', 'lime', 'blue', 'pink']);
+const MARKER_DELAY_AFTER_INIT = 100;
+/**
+ * Hook for cursor activity event of monaco editor.
+ */
+
+const useMonacoMarkers = (monaco, markers) => {
+  const _returns = useRef({});
+  /** Cache storage of markers. */
+
+
+  const caches = useRef({});
+  /** Ref of remote cursor manager. */
+
+  const remoteCursor = useRef();
+  /** Ref of remote selection manager. */
+
+  const remoteSelection = useRef();
+  /**
+   * Get color of marker according to user ID.
+   * @param userId  ID of user.
+   */
+
+  const getMarkerColor = userId => {
+    const index = userId % MARKER_COLORS.length;
+    return MARKER_COLORS[index];
+  };
+  /**
+   * Set markers to code editor.
+   */
+
+
+  const setMarkers = () => {
+    const editor = monaco.current;
+    const model = editor === null || editor === void 0 ? void 0 : editor.getModel();
+
+    if (!editor || !model) {
+      return;
+    } // Update marker's cache.
+
+
+    markers // if marker type is `selection`,
+    // add cursor marker at end position of current selection.
+    .flatMap(marker => {
+      if (marker.from !== marker.to) {
+        const cursorForSelectionMarker = Object.assign(Object.assign({}, marker), {
+          from: marker.to,
+          to: marker.to
+        });
+        return [marker, cursorForSelectionMarker];
+      }
+
+      return marker;
+    }) // create or update cache for markers.
+    .forEach(marker => {
+      if (!remoteCursor.current || !remoteSelection.current) {
+        return;
+      }
+
+      const id = marker.id.toString();
+      const color = getMarkerColor(marker.id);
+      const markerType = marker.from === marker.to ? 'cursor' : 'selection';
+      const cacheId = `${id}-${marker.accesskey}-${marker.fullname}-${markerType}`;
+      const needToCreate = !caches.current[cacheId] || caches.current[cacheId].manager.isDisposed(); // cursor
+
+      if (markerType === 'cursor') {
+        // create new cursor marker
+        if (needToCreate) {
+          caches.current[cacheId] = {
+            type: 'cursor',
+            manager: remoteCursor.current.addCursor(id, color, marker.fullname)
+          };
+        } // update position of cursor marker
+
+
+        const markerPosition = model.getPositionAt(marker.from);
+        caches.current[cacheId].position = markerPosition;
+      } // selection
+      else {
+        // create new selection marker
+        if (needToCreate) {
+          caches.current[cacheId] = {
+            type: 'selection',
+            manager: remoteSelection.current.addSelection(id, color, marker.fullname)
+          };
+        } // update position of selection marker
+
+
+        const markerStartPosition = model.getPositionAt(marker.from);
+        const markerEndPosition = model.getPositionAt(marker.to);
+        caches.current[cacheId].position = {
+          start: markerStartPosition,
+          end: markerEndPosition
+        };
+      }
+    }); // Update marker postion from cache.
+
+    Object.keys(caches.current).forEach(id => {
+      const cache = caches.current[id];
+
+      if (!cache.position) {
+        // Dispose marker cache, if postion not exist.
+        cache.manager.dispose();
+        return;
+      }
+
+      switch (cache.type) {
+        case 'cursor':
+          cache.manager.setPosition(cache.position);
+          break;
+
+        case 'selection':
+          cache.manager.setPositions(cache.position.start, cache.position.end);
+          break;
+      } // Delete marker position at cache,
+      // because marker position is for once usage.
+
+
+      delete caches.current[id].position;
+    });
+  };
+  /**
+   * Initialize remoter marker manager.
+   */
+
+
+  const init = () => {
+    if (!monaco.current) {
+      return;
+    }
+
+    remoteCursor.current = new RemoteCursorManager({
+      editor: monaco.current,
+      tooltips: true,
+      tooltipDuration: 5
+    });
+    remoteSelection.current = new RemoteSelectionManager({
+      editor: monaco.current
+    });
+    setTimeout(() => setMarkers(), MARKER_DELAY_AFTER_INIT);
+  };
+  /**
+   * Dispose remoter marker manager.
+   */
+
+
+  const dispose = () => {
+    Object.keys(caches.current).forEach(cacheId => {
+      caches.current[cacheId].manager.dispose();
+    });
+    remoteCursor.current = undefined;
+    remoteSelection.current = undefined;
+  }; //
+  // Update markers.
+  //
+
+
+  useDeepCompareEffect(() => setMarkers(), [markers]); //
+  //
+  //
+
+  _returns.current.init = init;
+  _returns.current.dispose = dispose;
+  return _returns.current;
+};
+
+export { useMonacoMarkers };

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import type { EditorOptions } from '../hooks';
+declare type Monaco = React.MutableRefObject<editor.IStandaloneCodeEditor | null>;
+/**
+ * Hook for update options of monaco editor.
+ */
+export declare const useMonacoOptions: (monaco: Monaco, options: EditorOptions) => void;
+export {};

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

@@ -0,0 +1,43 @@
+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';
+
+const FONT_LOAD_TEXT = '각난닫ABCabc1230!@#\t !@#():{}[]-_\\|';
+/**
+ * Hook for update options of monaco editor.
+ */
+
+const useMonacoOptions = (monaco, options) => {
+  //
+  // Update options from preference.
+  //
+  useEffect(() => {
+    var _a;
+
+    return (_a = monaco.current) === null || _a === void 0 ? void 0 : _a.updateOptions(options);
+  }, [monaco, options]); //
+  // Sync prettier config with monaco editor preference.
+  //
+
+  useEffect(() => {
+    prettierConfigSource.config.tabWidth = options.tabSize;
+    prettierConfigSource.config.useTabs = options.insertSpaces === false;
+  }, [options]); //
+  // Load font and remeasure font of editor.
+  //
+
+  useEffect(() => {
+    var _a, _b, _c;
+
+    if (typeof ((_b = (_a = document) === null || _a === void 0 ? void 0 : _a.fonts) === null || _b === void 0 ? void 0 : _b.load) !== 'function') {
+      return;
+    }
+
+    const size = (_c = options.fontSize) !== null && _c !== void 0 ? _c : DEFAULT_MONACO_EDITOR_PREFERENCE.fontSize;
+    document.fonts.load(`${size}px Elice Digital Coding`, FONT_LOAD_TEXT).then(() => editor.remeasureFonts()).catch(() => {// do nothing.
+    });
+  }, [options.fontSize]);
+};
+
+export { useMonacoOptions };

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

@@ -0,0 +1,6 @@
+declare 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 {};

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

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
+import { importTheme } from '../utils/theme/index.js';
+
+/**
+ * Import and set theme for monaco editor.
+ */
+
+const useMonacoTheme = (rawTheme, cb) => {
+  const theme = rawTheme !== null && rawTheme !== void 0 ? rawTheme : 'elice';
+  useEffect(() => {
+    importTheme(theme).then(themeData => {
+      editor.defineTheme(theme, themeData);
+      editor.setTheme(theme);
+
+      if (typeof cb === 'function') {
+        cb(theme);
+      }
+    }).catch(err => {
+      // eslint-disable-next-line no-console
+      console.warn(`fail to load theme (\`${theme}\`)`, err);
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [theme]);
+};
+
+export { useMonacoTheme };

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

@@ -0,0 +1,3 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+declare const CssDocumentFormattingEditProvider: monaco.languages.DocumentFormattingEditProvider;
+export default CssDocumentFormattingEditProvider;

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

@@ -0,0 +1,17 @@
+import prettier from '../../utils/prettier/index.js';
+
+const CssDocumentFormattingEditProvider = {
+  async provideDocumentFormattingEdits(model) {
+    const text = await prettier(model.getValue(), {
+      parser: 'scss',
+      plugins: [await import('prettier/parser-postcss')]
+    });
+    return [{
+      range: model.getFullModelRange(),
+      text
+    }];
+  }
+
+};
+
+export { CssDocumentFormattingEditProvider as default };

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

@@ -0,0 +1,9 @@
+/**
+ * Set CSS document formatting provider.
+ */
+export declare function setDocumentFormattingEditProvider(): void;
+/**
+ * Set CSS options.
+ */
+export declare function setOptions(): void;
+export default function (): void;

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

@@ -0,0 +1,28 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import CssDocumentFormattingEditProvider from './formatter.js';
+
+/**
+ * Set CSS document formatting provider.
+ */
+
+function setDocumentFormattingEditProvider() {
+  monaco.languages.registerDocumentFormattingEditProvider('css', CssDocumentFormattingEditProvider);
+}
+/**
+ * Set CSS options.
+ */
+
+function setOptions() {
+  monaco.languages.css.cssDefaults.setOptions({
+    validate: false
+  });
+} //
+//
+//
+
+function css () {
+  setDocumentFormattingEditProvider();
+  setOptions();
+}
+
+export { css as default, setDocumentFormattingEditProvider, setOptions };

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

@@ -0,0 +1,3 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+declare const HtmlDocumentFormattingEditProvider: monaco.languages.DocumentFormattingEditProvider;
+export default HtmlDocumentFormattingEditProvider;

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

@@ -0,0 +1,17 @@
+import prettier from '../../utils/prettier/index.js';
+
+const HtmlDocumentFormattingEditProvider = {
+  async provideDocumentFormattingEdits(model) {
+    const text = await prettier(model.getValue(), {
+      parser: 'html',
+      plugins: [await import('prettier/parser-html')]
+    });
+    return [{
+      range: model.getFullModelRange(),
+      text
+    }];
+  }
+
+};
+
+export { HtmlDocumentFormattingEditProvider as default };

package/es/components/shared/monaco-editor/editor-languages/html/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Set HTML document formatting provider.
+ */
+export declare function setDocumentFormattingEditProvider(): void;
+/**
+ * Set HTML options.
+ */
+export declare function setOptions(): void;
+export default function (): void;

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

@@ -0,0 +1,26 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import HtmlDocumentFormattingEditProvider from './formatter.js';
+
+/**
+ * Set HTML document formatting provider.
+ */
+
+function setDocumentFormattingEditProvider() {
+  monaco.languages.registerDocumentFormattingEditProvider('html', HtmlDocumentFormattingEditProvider);
+}
+/**
+ * Set HTML options.
+ */
+
+function setOptions() {
+  monaco.languages.html.htmlDefaults.setOptions({});
+} //
+//
+//
+
+function html () {
+  setDocumentFormattingEditProvider();
+  setOptions();
+}
+
+export { html as default, setDocumentFormattingEditProvider, setOptions };

package/es/components/shared/monaco-editor/editor-languages/index.d.ts

@@ -0,0 +1 @@
+export default function (): void;

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

@@ -0,0 +1,11 @@
+import css from './css/index.js';
+import html from './html/index.js';
+import typescript from './typescript/index.js';
+
+function configEditorLanguages () {
+  css();
+  html();
+  typescript();
+}
+
+export { configEditorLanguages as default };

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/_helper.d.ts

@@ -0,0 +1,7 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+export declare type DtsParams = Parameters<typeof monaco.languages.typescript.typescriptDefaults['addExtraLib']>;
+export interface DtsOptions {
+    path: DtsParams[1];
+    content: DtsParams[0];
+}
+export declare function dts(options: DtsOptions): DtsOptions;

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/_helper.js

@@ -0,0 +1,8 @@
+function dts(options) {
+  return {
+    path: options.path ? `file:///node_modules/${options.path}` : '',
+    content: options.content
+  };
+}
+
+export { dts };

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/express.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("./_helper").DtsOptions;
+/**
+ * @types/express@4.17.13
+ */
+export default _default;

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/express.js

@@ -0,0 +1,12 @@
+import { dts } from './_helper.js';
+
+/**
+ * @types/express@4.17.13
+ */
+
+var express = dts({
+  path: '@types/express/index.d.ts',
+  content: "/// <reference types=\"express-serve-static-core\" />\n/// <reference types=\"serve-static\" />\nimport*as bodyParser from'body-parser';import*as serveStatic from'serve-static';import*as core from'express-serve-static-core';import*as qs from'qs';declare function e():core.Express;declare namespace e{var json:typeof bodyParser.json;var raw:typeof bodyParser.raw;var text:typeof bodyParser.text;var application:Application;var request:Request;var response:Response;var static:serveStatic.RequestHandlerConstructor<Response>;var urlencoded:typeof bodyParser.urlencoded;export function query(options:qs.IParseOptions|typeof qs.parse):Handler;export function Router(options?:RouterOptions):core.Router;interface RouterOptions{caseSensitive?:boolean|undefined;mergeParams?:boolean|undefined;strict?:boolean|undefined;}interface Application extends core.Application{}interface CookieOptions extends core.CookieOptions{}interface Errback extends core.Errback{}interface ErrorRequestHandler<\nP=core.ParamsDictionary,ResBody=any,ReqBody=any,ReqQuery=core.Query,Locals extends Record<string,any>=Record<string,any>>extends core.ErrorRequestHandler<P,ResBody,ReqBody,ReqQuery,Locals>{}interface Express extends core.Express{}interface Handler extends core.Handler{}interface IRoute extends core.IRoute{}interface IRouter extends core.IRouter{}interfaceIRouterHandler<T>extends core.IRouterHandler<T>{}interface IRouterMatcher<T>extends core.IRouterMatcher<T>{}interface MediaType extends core.MediaType{}interface NextFunction extends core.NextFunction{}interface Request<\nP=core.ParamsDictionary,ResBody=any,ReqBody=any,ReqQuery=core.Query,Locals extends Record<string,any>=Record<string,any>>extends core.Request<P,ResBody,ReqBody,ReqQuery,Locals>{}interface RequestHandler<\nP=core.ParamsDictionary,ResBody=any,ReqBody=any,ReqQuery=core.Query,Locals extends Record<string,any>=Record<string,any>>extends core.RequestHandler<P,ResBody,ReqBody,ReqQuery,Locals>{}interface RequestParamHandler extends core.RequestParamHandler{}export interface Response<ResBody=any,Locals extends Record<string,any>=Record<string,any>>extends core.Response<ResBody,Locals>{}interface Router extends core.Router{}interface Send extends core.Send{}}export=e;"
+});
+
+export { express as default };

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as express } from './express';
+export { default as propTypes } from './propTypes';
+export { default as react } from './react';

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/propTypes.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("./_helper").DtsOptions;
+/**
+ * @types/prop-types@15.7.5
+ */
+export default _default;

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/propTypes.js

@@ -0,0 +1,12 @@
+import { dts } from './_helper.js';
+
+/**
+ * @types/prop-types@15.7.5
+ */
+
+var propTypes = dts({
+  path: '@types/prop-types/index.d.ts',
+  content: 'export type ReactComponentLike=|string|((props:any,context?:any)=>any)|(new(props:any,context?:any)=>any);export interface ReactElementLike{type:ReactComponentLike;props:any;key:string|number|null;}export interface ReactNodeArray extends Iterable<ReactNodeLike>{}export type ReactNodeLike=|ReactElementLike|ReactNodeArray|string|number|boolean|null|undefined;export const nominalTypeHack:unique symbol;export type IsOptional<T>=undefined extends T?true:false;export type RequiredKeys<V>={[K in keyof V]-?:Exclude<V[K],undefined>extends Validator<infer T>?IsOptional<T>extends true?never:K:never}[keyof V];export type OptionalKeys<V>=Exclude<keyof V,RequiredKeys<V>>;export type InferPropsInner<V>={[K in keyof V]-?:InferType<V[K]>;};export interface Validator<T>{(props:{[key:string]:any},propName:string,componentName:string,location:string,propFullName:string):Error|null;[nominalTypeHack]?:{type:T;}|undefined;}export interface Requireable<T>extends Validator<T|undefined|null>{isRequired:Validator<NonNullable<T>>;}export type ValidationMap<T>={[K inkeyof T]?:Validator<T[K]>};export type InferType<V>=V extends Validator<infer T>?T:any;export type InferProps<V>=&InferPropsInner<Pick<V,RequiredKeys<V>>>&Partial<InferPropsInner<Pick<V,OptionalKeys<V>>>>;export const any:Requireable<any>;export const array:Requireable<any[]>;export const bool:Requireable<boolean>;export const func:Requireable<(...args:any[])=>any>;export const number:Requireable<number>;export const object:Requireable<object>;export const string:Requireable<string>;export const node:Requireable<ReactNodeLike>;export const element:Requireable<ReactElementLike>;export const symbol:Requireable<symbol>;export const elementType:Requireable<ReactComponentLike>;export function instanceOf<T>(expectedClass:new(...args:any[])=>T):Requireable<T>;export function oneOf<T>(types:ReadonlyArray<T>):Requireable<T>;export function oneOfType<T extends Validator<any>>(types:T[]):Requireable<NonNullable<InferType<T>>>;export function arrayOf<T>(type:Validator<T>):Requireable<T[]>;export function objectOf<T>(type:Validator<T>):Requireable<{[K in keyof any]:T;}>;export function shape<P extends ValidationMap<any>>(type:P):Requireable<InferProps<P>>;export function exact<P extends ValidationMap<any>>(type:P):Requireable<Required<InferProps<P>>>;export function checkPropTypes(typeSpecs:any,values:any,location:string,componentName:string,getStack?:()=>any):void;export function resetWarningCache():void;'
+});
+
+export { propTypes as default };

package/es/components/shared/monaco-editor/editor-languages/typescript/dts/react.d.ts

@@ -0,0 +1,5 @@
+declare const _default: import("./_helper").DtsOptions;
+/**
+ * @types/react@17.0.3
+ */
+export default _default;