@elice/material-exercise 1.220803.0

package/es/components/shared/monaco-editor/utils/remoteMarker/RemoteSelection.d.ts

@@ -0,0 +1,112 @@
+import type { editor, IPosition } from 'monaco-editor/esm/vs/editor/editor.api';
+import type { OnDisposed } from './OnDisposed';
+export declare class RemoteSelection {
+    /**
+     * A helper method to add a style tag to the head of the document that will
+     * style the color of the selection. The Monaco Editor only allows setting
+     * the class name of decorations, so we can not set a style property directly.
+     * This method will create, add, and return the style tag for this element.
+     */
+    private static _addDynamicStyleElement;
+    /**
+     * A helper method to ensure the start position is before the end position.
+     */
+    private static _swapIfNeeded;
+    /**
+     * The userland id of the selection.
+     */
+    private readonly _id;
+    /**
+     * The css classname to apply to the Monaco decoration.
+     */
+    private readonly _className;
+    /**
+     * The HTML Style element added to the document to color the selection.
+     */
+    private readonly _styleElement;
+    /**
+     * The label to display on hover
+     */
+    private readonly _label;
+    /**
+     * The Monaco editor instance to render selection into.
+     */
+    private readonly _editor;
+    /**
+     * An internal callback used to dispose of the selection.
+     */
+    private readonly _onDisposed;
+    /**
+     * The current start position of the selection.
+     */
+    private _startPosition;
+    /**
+     * The current end position of the selection.
+     */
+    private _endPosition;
+    /**
+     * The id's of the current Monaco decorations rendering the selection.
+     */
+    private _decorations;
+    /**
+     * A flag determining if the selection has been disposed.
+     */
+    private _disposed;
+    /**
+     * Constructs a new remote selection.
+     *
+     */
+    constructor(codeEditor: editor.ICodeEditor, id: string, classId: number, color: string, label: string, onDisposed: OnDisposed);
+    /**
+     * Gets the userland id of this selection.
+     */
+    getId(): string;
+    /**
+     * Gets the start position of the selection.
+     *
+     * @returns
+     *   The start position of the selection.
+     */
+    getStartPosition(): IPosition;
+    /**
+     * Gets the start position of the selection.
+     *
+     * @returns
+     *   The start position of the selection.
+     */
+    getEndPosition(): IPosition;
+    /**
+     * Sets the selection using zero-based text indices.
+     */
+    setOffsets(start: number, end: number): void;
+    /**
+     * Sets the selection using Monaco's line-number / column coordinate system.
+     */
+    setPositions(start: IPosition, end: IPosition): void;
+    /**
+     * Makes the selection visible if it is hidden.
+     */
+    show(): void;
+    /**
+     * Makes the selection hidden if it is visible.
+     */
+    hide(): void;
+    /**
+     * Determines if the selection has been permanently removed from the editor.
+     *
+     * @returns
+     *   True if the selection has been disposed, false otherwise.
+     */
+    isDisposed(): boolean;
+    /**
+     * Permanently removes the selection from the editor.
+     */
+    dispose(): void;
+    /**
+     * A helper method that actually renders the selection as a decoration within
+     * the Monaco Editor.
+     *
+     * @private
+     */
+    private _render;
+}

package/es/components/shared/monaco-editor/utils/remoteMarker/RemoteSelection.js

@@ -0,0 +1,198 @@
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import { REMOTE_MARKER_CLASS_NAME } from './styles.js';
+
+/* ====================================================================================================
+ * These codes forked and modified from `convergencelabs/monaco-collab-ext`
+ * under the terms of the MIT license.
+ * Make sure to check the original project if any issue exists.
+ * - project: https://github.com/convergencelabs/monaco-collab-ext
+ * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
+ * ==================================================================================================== */
+class RemoteSelection {
+  /**
+   * Constructs a new remote selection.
+   *
+   */
+  constructor(codeEditor, id, classId, color, label, onDisposed) {
+    /**
+     * The current start position of the selection.
+     */
+    this._startPosition = {};
+    /**
+     * The current end position of the selection.
+     */
+
+    this._endPosition = {};
+    /**
+     * A flag determining if the selection has been disposed.
+     */
+
+    this._disposed = false;
+    this._editor = codeEditor;
+    this._id = id;
+    const uniqueClassId = `${REMOTE_MARKER_CLASS_NAME}-selection-${classId}`;
+    this._className = `${REMOTE_MARKER_CLASS_NAME}-selection ${uniqueClassId}`;
+    this._styleElement = RemoteSelection._addDynamicStyleElement(uniqueClassId, color);
+    this._label = label;
+    this._decorations = [];
+    this._onDisposed = onDisposed;
+  }
+  /**
+   * A helper method to add a style tag to the head of the document that will
+   * style the color of the selection. The Monaco Editor only allows setting
+   * the class name of decorations, so we can not set a style property directly.
+   * This method will create, add, and return the style tag for this element.
+   */
+
+
+  static _addDynamicStyleElement(className, color) {
+    const css = `.${className} { background-color: ${color}; }`.trim();
+    const styleElement = document.createElement('style');
+    styleElement.innerText = css;
+    document.head.appendChild(styleElement);
+    return styleElement;
+  }
+  /**
+   * A helper method to ensure the start position is before the end position.
+   */
+
+
+  static _swapIfNeeded(start, end) {
+    if (start.lineNumber < end.lineNumber || start.lineNumber === end.lineNumber && start.column <= end.column) {
+      return {
+        start,
+        end
+      };
+    } else {
+      return {
+        start: end,
+        end: start
+      };
+    }
+  }
+  /**
+   * Gets the userland id of this selection.
+   */
+
+
+  getId() {
+    return this._id;
+  }
+  /**
+   * Gets the start position of the selection.
+   *
+   * @returns
+   *   The start position of the selection.
+   */
+
+
+  getStartPosition() {
+    return Object.assign({}, this._startPosition);
+  }
+  /**
+   * Gets the start position of the selection.
+   *
+   * @returns
+   *   The start position of the selection.
+   */
+
+
+  getEndPosition() {
+    return Object.assign({}, this._endPosition);
+  }
+  /**
+   * Sets the selection using zero-based text indices.
+   */
+
+
+  setOffsets(start, end) {
+    var _a, _b;
+
+    const startPosition = (_a = this._editor.getModel()) === null || _a === void 0 ? void 0 : _a.getPositionAt(start);
+    const endPosition = (_b = this._editor.getModel()) === null || _b === void 0 ? void 0 : _b.getPositionAt(end);
+
+    if (startPosition && endPosition) {
+      this.setPositions(startPosition, endPosition);
+    }
+  }
+  /**
+   * Sets the selection using Monaco's line-number / column coordinate system.
+   */
+
+
+  setPositions(start, end) {
+    this._decorations = this._editor.deltaDecorations(this._decorations, []);
+
+    const ordered = RemoteSelection._swapIfNeeded(start, end);
+
+    this._startPosition = ordered.start;
+    this._endPosition = ordered.end;
+
+    this._render();
+  }
+  /**
+   * Makes the selection visible if it is hidden.
+   */
+
+
+  show() {
+    this._render();
+  }
+  /**
+   * Makes the selection hidden if it is visible.
+   */
+
+
+  hide() {
+    this._decorations = this._editor.deltaDecorations(this._decorations, []);
+  }
+  /**
+   * Determines if the selection has been permanently removed from the editor.
+   *
+   * @returns
+   *   True if the selection has been disposed, false otherwise.
+   */
+
+
+  isDisposed() {
+    return this._disposed;
+  }
+  /**
+   * Permanently removes the selection from the editor.
+   */
+
+
+  dispose() {
+    var _a;
+
+    if (!this._disposed) {
+      (_a = this._styleElement.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(this._styleElement);
+      this.hide();
+      this._disposed = true;
+
+      this._onDisposed();
+    }
+  }
+  /**
+   * A helper method that actually renders the selection as a decoration within
+   * the Monaco Editor.
+   *
+   * @private
+   */
+
+
+  _render() {
+    this._decorations = this._editor.deltaDecorations(this._decorations, [{
+      range: new monaco.Range(this._startPosition.lineNumber, this._startPosition.column, this._endPosition.lineNumber, this._endPosition.column),
+      options: {
+        className: this._className,
+        hoverMessage: this._label != null ? {
+          value: this._label
+        } : null
+      }
+    }]);
+  }
+
+}
+
+export { RemoteSelection };

package/es/components/shared/monaco-editor/utils/remoteMarker/RemoteSelectionManager.d.ts

@@ -0,0 +1,102 @@
+import { RemoteSelection } from './RemoteSelection';
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import type { IPosition } from 'monaco-editor/esm/vs/editor/editor.api';
+/**
+ * The IRemoteSelectionManagerOptions represents the options that
+ * configure the behavior a the RemoteSelectionManager.
+ */
+export interface IRemoteSelectionManagerOptions {
+    /**
+     * The Monaco Editor instance to render the remote selections into.
+     */
+    editor: monaco.editor.ICodeEditor;
+}
+/**
+ * The RemoteSelectionManager renders remote users selections into the Monaco
+ * editor using the editor's built-in decorators mechanism.
+ */
+export declare class RemoteSelectionManager {
+    /**
+     * A internal unique identifier for each selection.
+     *
+     * @internal
+     */
+    private _nextClassId;
+    /**
+     * Tracks the current remote selections.
+     *
+     * @internal
+     */
+    private readonly _remoteSelections;
+    /**
+     * The options configuring this instance.
+     *
+     * @internal
+     */
+    private readonly _options;
+    /**
+     * Creates a new RemoteSelectionManager with the specified options.
+     *
+     * @param options
+     *   Ths options that configure the RemoteSelectionManager.
+     */
+    constructor(options: IRemoteSelectionManagerOptions);
+    /**
+     * Adds a new remote selection with a unique id and the specified color.
+     *
+     * @param id
+     *   The unique id of the selection.
+     * @param color
+     *   The color to render the selection with.
+     */
+    addSelection(id: string, color: string, label?: string): RemoteSelection;
+    /**
+     * Removes an existing remote selection from the editor.
+     *
+     * @param id
+     *   The unique id of the selection.
+     */
+    removeSelection(id: string): void;
+    /**
+     * Sets the selection using zero-based text offset locations.
+     *
+     * @param id
+     *   The unique id of the selection.
+     * @param start
+     *   The starting offset of the selection.
+     * @param end
+     *   The ending offset of the selection.
+     */
+    setSelectionOffsets(id: string, start: number, end: number): void;
+    /**
+     * Sets the selection using the Monaco Editor's IPosition (line numbers and columns)
+     * location concept.
+     *
+     * @param id
+     *   The unique id of the selection.
+     * @param start
+     *   The starting position of the selection.
+     * @param end
+     *   The ending position of the selection.
+     */
+    setSelectionPositions(id: string, start: IPosition, end: IPosition): void;
+    /**
+     * Shows the specified selection, if it is currently hidden.
+     *
+     * @param id
+     *   The unique id of the selection.
+     */
+    showSelection(id: string): void;
+    /**
+     * Hides the specified selection, if it is currently shown.
+     *
+     * @param id
+     *   The unique id of the selection.
+     */
+    hideSelection(id: string): void;
+    /**
+     * A helper method that gets a cursor by id, or throws an exception.
+     * @internal
+     */
+    private _getSelection;
+}

package/es/components/shared/monaco-editor/utils/remoteMarker/RemoteSelectionManager.js

@@ -0,0 +1,150 @@
+import { RemoteSelection } from './RemoteSelection.js';
+
+/* ====================================================================================================
+ * These codes forked and modified from `convergencelabs/monaco-collab-ext`
+ * under the terms of the MIT license.
+ * Make sure to check the original project if any issue exists.
+ * - project: https://github.com/convergencelabs/monaco-collab-ext
+ * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
+ * ==================================================================================================== */
+/**
+ * The RemoteSelectionManager renders remote users selections into the Monaco
+ * editor using the editor's built-in decorators mechanism.
+ */
+
+class RemoteSelectionManager {
+  /**
+   * Creates a new RemoteSelectionManager with the specified options.
+   *
+   * @param options
+   *   Ths options that configure the RemoteSelectionManager.
+   */
+  constructor(options) {
+    this._remoteSelections = new Map();
+    this._options = options;
+    this._nextClassId = 0;
+  }
+  /**
+   * Adds a new remote selection with a unique id and the specified color.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param color
+   *   The color to render the selection with.
+   */
+
+
+  addSelection(id, color, label) {
+    const onDisposed = () => {
+      this.removeSelection(id);
+    };
+
+    const selection = new RemoteSelection(this._options.editor, id, this._nextClassId++, color, label !== null && label !== void 0 ? label : '', onDisposed);
+
+    this._remoteSelections.set(id, selection);
+
+    return selection;
+  }
+  /**
+   * Removes an existing remote selection from the editor.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  removeSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection && !remoteSelection.isDisposed()) {
+      remoteSelection.dispose();
+    }
+  }
+  /**
+   * Sets the selection using zero-based text offset locations.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param start
+   *   The starting offset of the selection.
+   * @param end
+   *   The ending offset of the selection.
+   */
+
+
+  setSelectionOffsets(id, start, end) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.setOffsets(start, end);
+    }
+  }
+  /**
+   * Sets the selection using the Monaco Editor's IPosition (line numbers and columns)
+   * location concept.
+   *
+   * @param id
+   *   The unique id of the selection.
+   * @param start
+   *   The starting position of the selection.
+   * @param end
+   *   The ending position of the selection.
+   */
+
+
+  setSelectionPositions(id, start, end) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.setPositions(start, end);
+    }
+  }
+  /**
+   * Shows the specified selection, if it is currently hidden.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  showSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.show();
+    }
+  }
+  /**
+   * Hides the specified selection, if it is currently shown.
+   *
+   * @param id
+   *   The unique id of the selection.
+   */
+
+
+  hideSelection(id) {
+    const remoteSelection = this._getSelection(id);
+
+    if (remoteSelection) {
+      remoteSelection.hide();
+    }
+  }
+  /**
+   * A helper method that gets a cursor by id, or throws an exception.
+   * @internal
+   */
+
+
+  _getSelection(id) {
+    var _a;
+
+    if (!this._remoteSelections.has(id)) {
+      throw new Error('No such selection: ' + id);
+    }
+
+    return (_a = this._remoteSelections.get(id)) !== null && _a !== void 0 ? _a : null;
+  }
+
+}
+
+export { RemoteSelectionManager };

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

@@ -0,0 +1,3 @@
+export * from './RemoteCursorManager';
+export * from './RemoteSelectionManager';
+export * from './styles';

package/es/components/shared/monaco-editor/utils/remoteMarker/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const REMOTE_MARKER_CLASS_NAME = "exercise-editor-marker";
+export declare const cssRemoteMarker: import("styled-components").FlattenSimpleInterpolation;

package/es/components/shared/monaco-editor/utils/remoteMarker/styles.js

@@ -0,0 +1,14 @@
+import { base } from '@elice/design-tokens';
+import { css } from 'styled-components';
+
+/* ====================================================================================================
+ * These codes forked and modified from `convergencelabs/monaco-collab-ext`
+ * under the terms of the MIT license.
+ * Make sure to check the original project if any issue exists.
+ * - project: https://github.com/convergencelabs/monaco-collab-ext
+ * - codes: https://github.com/convergencelabs/monaco-collab-ext/tree/6ece72028e4b8fb35e9928a304fbdfe28a4e7be9/src/ts
+ * ==================================================================================================== */
+const REMOTE_MARKER_CLASS_NAME = 'exercise-editor-marker';
+const cssRemoteMarker = css([".", "{&-cursor{position:absolute;pointer-events:none;z-index:4000;width:2px;&:before{content:'';width:6px;height:5px;display:block;margin-left:-2px;margin-top:0;z-index:4000;background:inherit;}&-tooltip{position:absolute;white-space:nowrap;color:", ";text-shadow:0 0 1px ", ";opacity:1;font-size:12px;padding:2px;font-family:'Pretendard','Malgun Gothic','Helvetica','Myriad Pro','Arial',sans-serif;z-index:4000;transition:opacity 0.5s ease-out;}}&-selection{position:absolute;pointer-events:auto;opacity:0.3;}}"], REMOTE_MARKER_CLASS_NAME, base.color.white, base.color.gray9);
+
+export { REMOTE_MARKER_CLASS_NAME, cssRemoteMarker };

package/es/components/shared/monaco-editor/utils/theme/convert.d.ts

@@ -0,0 +1,22 @@
+import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+interface VSCodeTheme {
+    $schema: string;
+    type: 'dark' | 'light';
+    colors: Record<string, string>;
+    tokenColors: VSCodeThemeTokenColor[];
+}
+interface VSCodeThemeTokenColor {
+    name?: string;
+    scope: string[] | string;
+    settings: VSCodeThemeTokenColorSettings;
+}
+interface VSCodeThemeTokenColorSettings {
+    foreground?: string;
+    background?: string;
+    fontStyle?: string;
+}
+/**
+ *
+ */
+export declare function convertToMonacoTheme(theme: VSCodeTheme): monaco.editor.IStandaloneThemeData;
+export {};

package/es/components/shared/monaco-editor/utils/theme/convert.js

@@ -0,0 +1,81 @@
+import Color from 'color';
+
+//
+//
+
+/**
+ *
+ */
+
+function sanitizeColor(color) {
+  if (/^#[0-9a-f]{6,8}$/i.test(color)) {
+    return color;
+  }
+
+  try {
+    return new Color(color).hex();
+  } catch (e) {
+    return '#FF0000';
+  }
+}
+/**
+ *
+ */
+
+
+function getBase(type) {
+  if (type === 'light') {
+    return 'vs';
+  }
+
+  if (type === 'hc') {
+    return 'hc-black';
+  }
+
+  return 'vs-dark';
+}
+/**
+ *
+ */
+
+
+function convertToMonacoTheme(theme) {
+  const {
+    tokenColors = [],
+    colors = {}
+  } = theme;
+  Object.keys(colors).forEach(c => {
+    if (!colors[c]) {
+      delete colors[c];
+    }
+  });
+  const rules = tokenColors.filter(t => t.scope && t.settings && t.settings.foreground !== 'inherit' && t.settings.background !== 'inherit').reduce((acc, token) => {
+    const settings = {};
+
+    if (token.settings.foreground) {
+      settings.foreground = sanitizeColor(token.settings.foreground);
+    }
+
+    if (token.settings.background) {
+      settings.background = sanitizeColor(token.settings.background);
+    }
+
+    if (token.settings.fontStyle) {
+      settings.fontStyle = token.settings.fontStyle;
+    }
+
+    const scope = typeof token.scope === 'string' ? token.scope.split(',').map(a => a.trim()) : token.scope;
+    scope.forEach(s => acc.push(Object.assign({
+      token: s
+    }, settings)));
+    return acc;
+  }, []);
+  return {
+    base: getBase(theme.type),
+    inherit: true,
+    colors,
+    rules
+  };
+}
+
+export { convertToMonacoTheme };

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

@@ -0,0 +1,4 @@
+/**
+ * Import theme of vscode.
+ */
+export declare function importTheme(theme: string): Promise<import("monaco-editor").editor.IStandaloneThemeData>;