@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/pages/playground/SettingsDialog.tsx

@@ -0,0 +1,412 @@
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Button, ListGroup, Modal } from "../../components/bootstrap";
+import { Radio } from "../../components/Radio";
+import { Select } from "../../components/Select";
+import { TextBox } from "../../components/TextBox";
+import { ControlledMonacoEditor } from "../../components/monaco/MonacoEditor";
+import { ref } from "../../utils/ref";
+import { ObservablePromise } from "../../utils/ObservablePromise";
+import { getNpmVersionsSync } from "./getNpmVersionsSync";
+import { PlaygroundModel, SettingsDialogModel } from "./PlaygroundModel";
+import { Horizontal, Vertical } from "./PlaygroundPageContent";
+import { StabilityValues } from "./SettingsModel";
+
+@observer
+export class SettingsDialog extends React.Component<{
+	model: PlaygroundModel;
+}> {
+	private lastSettingsDialogModel: SettingsDialogModel | undefined;
+
+	private get settingsDialogModel() {
+		return (
+			this.props.model.settingsDialogModel || this.lastSettingsDialogModel
+		);
+	}
+
+	@computed
+	get npmVersions(): string[] {
+		return getNpmVersionsSync(
+			this.settingsDialogModel?.settings.npmVersion
+		);
+	}
+
+	render() {
+		const model = this.props.model;
+		const modelSettings = this.settingsDialogModel;
+		this.lastSettingsDialogModel = modelSettings;
+		if (!modelSettings) {
+			return null;
+		}
+		return (
+			<Modal
+				show={!!model.settingsDialogModel}
+				onHide={() => model.closeSettingsDialog(false)}
+				size="xl"
+			>
+				<Modal.Header closeButton>
+					<Modal.Title>Settings</Modal.Title>
+				</Modal.Header>
+				<Modal.Body>
+					<ListGroup>
+						<ListGroup.Item>
+							<div className="d-flex">
+								<label className="d-flex gap-2">
+									<Radio
+										value={ref(
+											modelSettings.settings,
+											"monacoSource"
+										)}
+										current="latest"
+									/>
+
+									<span>
+										Load Latest Monaco
+										<small className="d-block text-muted">
+											Loads the most recent version of
+											Monaco bundled with this website.
+										</small>
+									</span>
+								</label>
+								<fieldset
+									className="d-flex"
+									style={{ marginLeft: "auto" }}
+									disabled={
+										modelSettings.settings.monacoSource !==
+										"latest"
+									}
+								>
+									<Select
+										value={ref(
+											modelSettings.settings,
+											"latestStability"
+										)}
+										values={StabilityValues}
+										getLabel={(v) => v}
+										style={{ width: 100 }}
+									/>
+								</fieldset>
+							</div>
+						</ListGroup.Item>
+
+						<ListGroup.Item>
+							<div className="d-flex gap-2">
+								<label className="d-flex gap-2">
+									<Radio
+										value={ref(
+											modelSettings.settings,
+											"monacoSource"
+										)}
+										current="npm"
+									/>
+
+									<span>
+										Load Monaco From NPM
+										<small className="d-block text-muted">
+											Loads Monaco from{" "}
+											<a href="https://www.jsdelivr.com/">
+												jsdelivr.com
+											</a>
+											.
+										</small>
+									</span>
+								</label>
+								<fieldset
+									style={{ marginLeft: "auto" }}
+									disabled={
+										modelSettings.settings.monacoSource !==
+										"npm"
+									}
+									className="d-flex gap-2"
+								>
+									<Select
+										value={ref(
+											modelSettings.settings,
+											"npmVersion"
+										)}
+										values={this.npmVersions}
+										getLabel={(v) => v}
+										style={{
+											width: 150,
+										}}
+									/>
+									<Select
+										value={ref(
+											modelSettings.settings,
+											"npmStability"
+										)}
+										values={StabilityValues}
+										getLabel={(v) => v}
+										style={{
+											width: 100,
+										}}
+									/>
+								</fieldset>
+							</div>
+						</ListGroup.Item>
+
+						<ListGroup.Item>
+							<div className="d-flex gap-2">
+								<Vertical>
+									<Horizontal>
+										<label className="d-flex gap-2">
+											<Radio
+												value={ref(
+													modelSettings.settings,
+													"monacoSource"
+												)}
+												current="independent"
+											/>
+
+											<span style={{ marginLeft: 8 }}>
+												Load Monaco Core Independently
+												<small className="d-block text-muted">
+													Loads the Monaco editor core
+													and the language
+													contributions from different
+													sources.
+												</small>
+											</span>
+										</label>
+									</Horizontal>
+									<fieldset
+										disabled={
+											modelSettings.settings
+												.monacoSource !== "independent"
+										}
+									>
+										<ListGroup className="p-3">
+											<ListGroup.Item>
+												<div className="d-flex gap-2">
+													<label className="d-flex gap-2">
+														<Radio
+															value={ref(
+																modelSettings.settings,
+																"coreSource"
+															)}
+															current="latest"
+														/>
+														<span>
+															Load Latest Core
+															<small className="d-block text-muted">
+																Loads the
+																version of
+																Monaco editor
+																core that is
+																bundled with
+																this website.
+															</small>
+														</span>
+													</label>
+													<Select
+														value={ref(
+															modelSettings.settings,
+															"latestCoreStability"
+														)}
+														values={StabilityValues}
+														getLabel={(v) => v}
+														style={{
+															width: 100,
+															marginLeft: "auto",
+														}}
+													/>
+												</div>
+											</ListGroup.Item>
+
+											<ListGroup.Item>
+												<div className="d-flex gap-2">
+													<label className="d-flex gap-2">
+														<Radio
+															value={ref(
+																modelSettings.settings,
+																"coreSource"
+															)}
+															current="url"
+														/>
+														<span>
+															Load Core From URL
+															<small className="d-block text-muted">
+																Ideal to load
+																sources from a
+																local VS Code
+																repo.
+															</small>
+														</span>
+													</label>
+													<TextBox
+														value={ref(
+															modelSettings.settings,
+															"coreUrl"
+														)}
+														style={{
+															marginLeft: "auto",
+															width: "50%",
+														}}
+													/>
+												</div>
+											</ListGroup.Item>
+										</ListGroup>
+
+										<ListGroup className="p-3">
+											<ListGroup.Item>
+												<div className="d-flex gap-2">
+													<label className="d-flex gap-2">
+														<Radio
+															value={ref(
+																modelSettings.settings,
+																"languagesSource"
+															)}
+															current="latest"
+														/>
+
+														<span>
+															Load Latest
+															Languages
+															<small className="d-block text-muted">
+																Loads the most
+																recent version
+																of the Monaco
+																languages
+																bundled with
+																this website.
+															</small>
+														</span>
+													</label>
+													<Select
+														value={ref(
+															modelSettings.settings,
+															"latestLanguagesStability"
+														)}
+														values={StabilityValues}
+														getLabel={(v) => v}
+														style={{
+															width: 100,
+															marginLeft: "auto",
+														}}
+													/>
+												</div>
+											</ListGroup.Item>
+											<ListGroup.Item>
+												<div className="d-flex gap-2">
+													<label className="d-flex gap-2">
+														<Radio
+															value={ref(
+																modelSettings.settings,
+																"languagesSource"
+															)}
+															current="source"
+														/>
+
+														<span>
+															Load Languages From
+															Source
+															<small className="d-block text-muted">
+																Loads from the
+																typescript
+																compiler output.
+															</small>
+														</span>
+													</label>
+												</div>
+											</ListGroup.Item>
+											<ListGroup.Item>
+												<div className="d-flex gap-2">
+													<label className="d-flex gap-2">
+														<Radio
+															value={ref(
+																modelSettings.settings,
+																"languagesSource"
+															)}
+															current="url"
+														/>
+
+														<span>
+															Load Languages From
+															URL
+															<small className="d-block text-muted">
+																Ideal to load
+																sources from a
+																local repo.
+															</small>
+														</span>
+													</label>
+													<TextBox
+														value={ref(
+															modelSettings.settings,
+															"languagesUrl"
+														)}
+														style={{
+															marginLeft: "auto",
+															width: "50%",
+														}}
+													/>
+												</div>
+											</ListGroup.Item>
+										</ListGroup>
+									</fieldset>
+								</Vertical>
+							</div>
+						</ListGroup.Item>
+
+						<ListGroup.Item>
+							<div className="d-flex gap-2">
+								<Vertical>
+									<Horizontal>
+										<label className="d-flex gap-2">
+											<Radio
+												value={ref(
+													modelSettings.settings,
+													"monacoSource"
+												)}
+												current="custom"
+											/>
+
+											<span style={{ marginLeft: 8 }}>
+												Custom
+												<small className="d-block text-muted">
+													Provide a complete custom
+													configuration.
+												</small>
+											</span>
+										</label>
+									</Horizontal>
+									<div style={{ height: 200, padding: 10 }}>
+										<ControlledMonacoEditor
+											value={
+												modelSettings.monacoSetupJsonString
+											}
+											language="json"
+											onDidValueChange={
+												modelSettings.settings
+													.monacoSource === "custom"
+													? (value) =>
+															(modelSettings.settings.customConfig =
+																value)
+													: undefined
+											}
+										/>
+									</div>
+								</Vertical>
+							</div>
+						</ListGroup.Item>
+					</ListGroup>
+				</Modal.Body>
+				<Modal.Footer>
+					<Button
+						variant="secondary"
+						onClick={() => model.closeSettingsDialog(false)}
+					>
+						Close
+					</Button>
+					<Button
+						variant="primary"
+						onClick={() => model.closeSettingsDialog(true)}
+					>
+						Save Changes
+					</Button>
+				</Modal.Footer>
+			</Modal>
+		);
+	}
+}

package/website/src/website/pages/playground/SettingsModel.ts

@@ -0,0 +1,198 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { action, computed, observable, toJS } from "mobx";
+import {
+	getMonacoSetup,
+	IMonacoSetup,
+	prodMonacoSetup,
+} from "../../../monaco-loader";
+
+export class SettingsModel {
+	private readonly settingsKey = "settings";
+
+	@observable
+	private _settings: Readonly<Settings>;
+
+	get settings(): Readonly<Settings> {
+		return this._settings;
+	}
+
+	@computed.struct
+	get monacoSetup(): IMonacoSetup {
+		return toLoaderConfig(this.settings);
+	}
+
+	get previewFullScreen() {
+		return this._settings.previewFullScreen;
+	}
+
+	set previewFullScreen(value: boolean) {
+		this.setSettings({ ...this._settings, previewFullScreen: value });
+	}
+
+	get autoReload() {
+		return this._settings.autoReload ?? true;
+	}
+
+	set autoReload(value: boolean) {
+		this.setSettings({ ...this._settings, autoReload: value });
+	}
+
+	constructor() {
+		const settingsStr = "";
+		try {
+			localStorage.getItem(this.settingsKey);
+		} catch (e) {
+			console.error("Failed to load settings from localStorage", e);
+		}
+		if (settingsStr) {
+			this._settings = JSON.parse(settingsStr);
+		} else {
+			this._settings = getDefaultSettings();
+		}
+	}
+
+	@action
+	setSettings(settings: Settings): void {
+		const settingsJson = JSON.stringify(toJS(settings));
+		this._settings = JSON.parse(settingsJson);
+		try {
+			localStorage.setItem(this.settingsKey, settingsJson);
+		} catch (e) {
+			console.error("Failed to save settings to localStorage", e);
+		}
+	}
+}
+
+export type Stability = "dev" | "min";
+export const StabilityValues: Stability[] = ["dev", "min"];
+
+export interface Settings {
+	monacoSource: "latest" | "npm" | "independent" | "custom";
+	latestStability: Stability;
+	npmStability: Stability;
+	npmVersion: string;
+
+	coreSource: "latest" | "url";
+	latestCoreStability: Stability;
+	coreUrl: string;
+
+	languagesSource: "latest" | "source" | "url";
+	latestLanguagesStability: Stability;
+	languagesUrl: string;
+
+	customConfig: JsonString<IMonacoSetup>;
+
+	previewFullScreen: boolean;
+	autoReload: boolean | undefined;
+}
+
+export type JsonString<T> = string;
+
+export function toLoaderConfig(settings: Settings): IMonacoSetup {
+	switch (settings.monacoSource) {
+		case "latest":
+			return {
+				...getMonacoSetup(
+					`node_modules/monaco-editor/${settings.latestStability}/vs`
+				),
+				monacoTypesUrl: "node_modules/monaco-editor/monaco.d.ts",
+			};
+		case "npm":
+			const url = `https://cdn.jsdelivr.net/npm/monaco-editor@${settings.npmVersion}`;
+			return {
+				...getMonacoSetup(`${url}/${settings.npmStability}/vs`),
+				monacoTypesUrl: `${url}/monaco.d.ts`,
+			};
+		case "custom":
+			try {
+				return JSON.parse(settings.customConfig);
+			} catch (e) {
+				console.error(e);
+				return prodMonacoSetup;
+			}
+		case "independent":
+			const root = trimEnd(
+				new URL(".", window.location.href).toString(),
+				"/"
+			);
+			let coreUrl: string;
+
+			switch (settings.coreSource) {
+				case "latest":
+					coreUrl = `${root}/node_modules/monaco-editor-core/${settings.latestCoreStability}/vs`;
+					break;
+				case "url":
+					coreUrl = settings.coreUrl;
+					break;
+			}
+
+			let languagesUrl: string;
+			switch (settings.languagesSource) {
+				case "latest":
+					languagesUrl = `${root}/out/languages/bundled/amd-${settings.latestLanguagesStability}/vs`;
+					break;
+				case "source":
+					languagesUrl = `${root}/out/languages/amd-tsc`;
+					break;
+				case "url":
+					languagesUrl = settings.languagesUrl;
+					break;
+			}
+
+			const setup = { ...getMonacoSetup(coreUrl) };
+			if (
+				!setup.monacoTypesUrl &&
+				setup.loaderConfigPaths["vs"] &&
+				setup.loaderConfigPaths["vs"].endsWith("/out/vs")
+			) {
+				setup.monacoTypesUrl = setup.loaderConfigPaths["vs"].replace(
+					"/out/vs",
+					() => "/src/vs/monaco.d.ts"
+				);
+			}
+
+			Object.assign(setup.loaderConfigPaths, {
+				"vs/fillers/monaco-editor-core": `${root}/out/languages/amd-tsc/fillers/monaco-editor-core-amd`,
+				"vs/language": `${languagesUrl}/language`,
+				"vs/basic-language": `${languagesUrl}/basic-language`,
+			});
+
+			return setup;
+	}
+}
+
+export function getDefaultSettings(): Settings {
+	const defaultSettings: Settings = {
+		monacoSource: "latest",
+		latestStability: "dev",
+		npmStability: "dev",
+		npmVersion: "0.33.0",
+
+		coreSource: "latest",
+		latestCoreStability: "dev",
+		coreUrl: "http://localhost:5001/out/vs",
+
+		languagesSource: "latest",
+		latestLanguagesStability: "dev",
+		languagesUrl: "http://localhost:5002/out/languages/amd-tsc",
+		customConfig: JSON.stringify({
+			loaderUrl: "",
+			codiconUrl: "",
+			loaderPathsConfig: "",
+		}),
+		previewFullScreen: false,
+		autoReload: true,
+	};
+	return defaultSettings;
+}
+
+function trimEnd(str: string, end: string): string {
+	if (str.endsWith(end)) {
+		return str.slice(0, str.length - end.length);
+	}
+	return str;
+}

package/website/src/website/pages/playground/Source.ts

@@ -0,0 +1,107 @@
+import { monacoEditorVersion } from "../../monacoEditorVersion";
+import { getNpmVersionsSync } from "./getNpmVersionsSync";
+import { Settings } from "./SettingsModel";
+
+export class Source {
+	public static useLatestDev(sourceLanguagesStr?: string): Source {
+		// Assume the versions are already loaded
+		const versions = getNpmVersionsSync(undefined);
+		const version = versions.find((v) => v.indexOf("-dev-") !== -1);
+		return new Source(version, undefined, sourceLanguagesStr);
+	}
+
+	public static useLatest(sourceLanguagesStr?: string): Source {
+		return new Source(monacoEditorVersion, undefined, sourceLanguagesStr);
+	}
+
+	public static parse(
+		sourceStr: string | undefined,
+		sourceLanguagesStr: string | undefined
+	): Source {
+		if (sourceStr === "latest-dev") {
+			return Source.useLatestDev(sourceLanguagesStr);
+		}
+		if (sourceStr === "latest") {
+			return Source.useLatest(sourceLanguagesStr);
+		}
+
+		if (sourceStr && sourceStr.startsWith("v")) {
+			return new Source(
+				sourceStr.substring(1),
+				undefined,
+				sourceLanguagesStr
+			);
+		}
+		return new Source(undefined, sourceStr, sourceLanguagesStr);
+	}
+
+	public equals(other: Source | undefined): boolean {
+		if (!other) {
+			return false;
+		}
+		return other.toString() === this.toString();
+	}
+
+	constructor(
+		public readonly version: string | undefined,
+		public readonly url: string | undefined,
+		public readonly sourceLanguagesStr: string | undefined
+	) {
+		if (
+			version === undefined &&
+			url === undefined &&
+			sourceLanguagesStr === undefined
+		) {
+			throw new Error("one parameter must be defined");
+		}
+	}
+
+	sourceToString(): string | undefined {
+		if (this.url) {
+			return this.url;
+		}
+		if (this.version) {
+			return `v${this.version}`;
+		}
+		return undefined;
+	}
+
+	sourceLanguagesToString(): string | undefined {
+		return this.sourceLanguagesStr;
+	}
+
+	toString() {
+		const sourceLangToStr = this.sourceLanguagesToString();
+		return `${this.sourceToString()}${
+			sourceLangToStr ? `;${sourceLangToStr}` : ""
+		}`;
+	}
+
+	public toPartialSettings(): Partial<Settings> {
+		const languagesSettings: Partial<Settings> = {
+			languagesSource:
+				this.sourceLanguagesStr === undefined ? "latest" : "url",
+			languagesUrl: this.sourceLanguagesStr,
+		};
+
+		if (this.version) {
+			return {
+				monacoSource: "npm",
+				npmVersion: this.version,
+			};
+		} else if (this.url) {
+			return {
+				monacoSource: "independent",
+				coreSource: "url",
+				coreUrl: this.url,
+				...languagesSettings,
+			};
+		} else {
+			return {
+				monacoSource: "independent",
+				coreSource: "latest",
+				...languagesSettings,
+			};
+		}
+	}
+}