@elice/material-exercise 1.220803.0

package/cjs/components/shared/monaco-editor/utils/remoteMarker/RemoteCursorWidget.js

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var monaco = require('monaco-editor/esm/vs/editor/editor.api');
+var styles = require('./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
+ * ==================================================================================================== */
+
+function getConfiguration(editorInstance) {
+  // Support for Monaco < 0.19.0
+  if (typeof editorInstance.getConfiguration === 'function') {
+    return editorInstance.getConfiguration();
+  }
+
+  return {
+    lineHeight: editorInstance.getOption(monaco.editor.EditorOption.lineHeight)
+  };
+}
+
+class RemoteCursorWidget {
+  constructor(codeEditor, widgetId, color, label, tooltipEnabled, tooltipDuration, onDisposed) {
+    this._position = null;
+    this._editor = codeEditor;
+    this._tooltipDuration = tooltipDuration;
+    this._id = `${styles.REMOTE_MARKER_CLASS_NAME}-cursor-${widgetId}`;
+    this._onDisposed = onDisposed; // Create the main node for the cursor element.
+
+    const {
+      lineHeight
+    } = getConfiguration(this._editor);
+    this._domNode = document.createElement('div');
+    this._domNode.className = `${styles.REMOTE_MARKER_CLASS_NAME}-cursor`;
+    this._domNode.style.background = color;
+    this._domNode.style.height = `${lineHeight}px`; // Create the tooltip element if the tooltip is enabled.
+
+    if (tooltipEnabled) {
+      this._tooltipNode = document.createElement('div');
+      this._tooltipNode.className = `${styles.REMOTE_MARKER_CLASS_NAME}-cursor-tooltip`;
+      this._tooltipNode.style.background = color;
+      this._tooltipNode.innerHTML = label;
+
+      this._domNode.appendChild(this._tooltipNode); // we only need to listen to scroll positions to update the
+      // tooltip location on scrolling.
+
+
+      this._scrollListener = this._editor.onDidScrollChange(() => {
+        this._updateTooltipPosition();
+      });
+    } else {
+      this._tooltipNode = null;
+      this._scrollListener = null;
+    }
+
+    this._hideTimer = null;
+
+    this._editor.addContentWidget(this);
+
+    this._disposed = false;
+  }
+
+  hide() {
+    this._domNode.style.display = 'none';
+  }
+
+  show() {
+    this._domNode.style.display = 'inherit';
+  }
+
+  setOffset(offset) {
+    var _a;
+
+    const position = (_a = this._editor.getModel()) === null || _a === void 0 ? void 0 : _a.getPositionAt(offset);
+
+    if (position) {
+      this.setPosition(position);
+    }
+  }
+
+  setPosition(position) {
+    this._updatePosition(position);
+
+    if (this._tooltipNode !== null) {
+      setTimeout(() => this._showTooltip(), 0);
+    }
+  }
+
+  isDisposed() {
+    return this._disposed;
+  }
+
+  dispose() {
+    if (this._disposed) {
+      return;
+    }
+
+    this._editor.removeContentWidget(this);
+
+    if (this._scrollListener !== null) {
+      this._scrollListener.dispose();
+    }
+
+    this._disposed = true;
+
+    this._onDisposed();
+  }
+
+  getId() {
+    return this._id;
+  }
+
+  getDomNode() {
+    return this._domNode;
+  }
+
+  getPosition() {
+    return this._position;
+  }
+
+  _updatePosition(position) {
+    this._position = {
+      position: Object.assign({}, position),
+      preference: [monaco.editor.ContentWidgetPositionPreference.EXACT]
+    };
+
+    this._editor.layoutContentWidget(this);
+  }
+
+  _showTooltip() {
+    this._updateTooltipPosition();
+
+    if (this._hideTimer !== null) {
+      clearTimeout(this._hideTimer);
+    } else {
+      this._setTooltipVisible(true);
+    }
+
+    this._hideTimer = setTimeout(() => {
+      this._setTooltipVisible(false);
+
+      this._hideTimer = null;
+    }, this._tooltipDuration);
+  }
+
+  _updateTooltipPosition() {
+    if (!this._tooltipNode) {
+      return;
+    }
+
+    const distanceFromTop = this._domNode.offsetTop - this._editor.getScrollTop();
+
+    if (distanceFromTop - this._tooltipNode.offsetHeight < 5) {
+      this._tooltipNode.style.top = `${this._tooltipNode.offsetHeight + 2}px`;
+    } else {
+      this._tooltipNode.style.top = `-${this._tooltipNode.offsetHeight}px`;
+    }
+
+    this._tooltipNode.style.left = '0';
+  }
+
+  _setTooltipVisible(visible) {
+    if (!this._tooltipNode) {
+      return;
+    }
+
+    if (visible) {
+      this._tooltipNode.style.opacity = '1.0';
+    } else {
+      this._tooltipNode.style.opacity = '0';
+    }
+  }
+
+}
+
+exports.RemoteCursorWidget = RemoteCursorWidget;

package/cjs/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/cjs/components/shared/monaco-editor/utils/remoteMarker/RemoteSelection.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var monaco = require('monaco-editor/esm/vs/editor/editor.api');
+var styles = require('./styles.js');
+
+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 monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+
+/* ====================================================================================================
+ * 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 = `${styles.REMOTE_MARKER_CLASS_NAME}-selection-${classId}`;
+    this._className = `${styles.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__namespace.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
+      }
+    }]);
+  }
+
+}
+
+exports.RemoteSelection = RemoteSelection;

package/cjs/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;
+}