@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/pages/home/Home.tsx

@@ -0,0 +1,249 @@
+import { computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import { loadMonaco } from "../../../monaco-loader";
+import { Page } from "../../components/Page";
+import { Select } from "../../components/Select";
+import {
+	ControlledMonacoDiffEditor,
+	ControlledMonacoEditor,
+} from "../../components/monaco/MonacoEditor";
+import { ObservablePromise } from "../../utils/ObservablePromise";
+import * as React from "react";
+import { ref } from "../../utils/ref";
+import { monacoEditorVersion } from "../../monacoEditorVersion";
+
+export class Home extends React.Component {
+	render() {
+		return (
+			<Page>
+				<div className="container py-4">
+					<div className="p-5 mb-4 bg-light rounded-3">
+						<h1>Monaco - The Editor of the Web</h1>
+						<div className="row">
+							<div className="span12">
+								<br />
+								<p>
+									The Monaco Editor is the code editor that
+									powers{" "}
+									<a href="https://github.com/microsoft/vscode">
+										VS Code
+									</a>
+									. A good page describing the code editor's
+									features is{" "}
+									<a href="https://code.visualstudio.com/docs/editor/editingevolved">
+										here
+									</a>
+									. It is licensed under the MIT License and
+									supports Edge, Chrome, Firefox, Safari and
+									Opera. The Monaco editor is not supported in
+									mobile browsers or mobile web frameworks.
+									Find more information at the{" "}
+									<a href="https://github.com/microsoft/monaco-editor">
+										Monaco Editor repo
+									</a>
+									.
+								</p>
+							</div>
+						</div>
+					</div>
+
+					<div className="px-5 mb-0">
+						<h3>Download v{monacoEditorVersion}</h3>
+						<div className="row">
+							<div className="span12">
+								<br />
+								<p>
+									The latest released version is{" "}
+									<strong>{monacoEditorVersion}</strong>.
+								</p>
+								<p>
+									Download with this direct{" "}
+									<a
+										target="_blank"
+										href={`https://registry.npmjs.org/monaco-editor/-/monaco-editor-${monacoEditorVersion}.tgz`}
+									>
+										download link
+									</a>{" "}
+									or{" "}
+									<a href="https://www.npmjs.com/package/monaco-editor">
+										from npm
+									</a>
+									:
+								</p>
+								<pre>
+									<code>
+										npm install monaco-editor@
+										{monacoEditorVersion}
+									</code>
+								</pre>
+							</div>
+						</div>
+					</div>
+
+					<EditorDemo />
+
+					<DiffEditorDemo />
+				</div>
+
+				<footer className="container">
+					<hr />
+					<p className="text-center">
+						<a href="https://microsoft.com" title="Microsoft">
+							<img
+								src="https://opensource.microsoft.com/assets/images/Microsoft_logo.svg"
+								alt="Microsoft"
+								style={{
+									maxHeight: "23px",
+									marginBottom: "12px",
+								}}
+							/>
+						</a>
+						<br />
+						<small>&copy; {process.env.YEAR} Microsoft</small>
+					</p>
+				</footer>
+			</Page>
+		);
+	}
+}
+
+interface Theme {
+	id: string;
+	name: string;
+}
+
+const themes: Theme[] = [
+	{
+		name: "Visual Studio",
+		id: "vs",
+	},
+	{
+		name: "Visual Studio Dark",
+		id: "vs-dark",
+	},
+	{
+		name: "High Contrast Dark",
+		id: "hc-black",
+	},
+];
+
+@observer
+class EditorDemo extends React.Component {
+	languages = new ObservablePromise(
+		loadMonaco().then((m) => {
+			const languages = m.languages.getLanguages();
+			this.currentLanguage = languages.find(
+				(l) => l.id === "typescript"
+			)!;
+			return languages;
+		})
+	);
+
+	@observable.ref
+	currentLanguage: monaco.languages.ILanguageExtensionPoint | undefined =
+		undefined;
+
+	@observable.ref
+	currentTheme: Theme = themes[0];
+
+	@computed get currentSample(): ObservablePromise<string | undefined> {
+		return new ObservablePromise(
+			this.currentLanguage
+				? this.loadSample(this.currentLanguage.id)
+				: Promise.resolve(undefined)
+		);
+	}
+
+	async loadSample(name: string): Promise<string> {
+		const result = (
+			await import(`../../data/home-samples/sample.${name}.txt`)
+		).default;
+		return result;
+	}
+
+	render() {
+		return (
+			<div className="p-5 mb-4">
+				<h2>Editor</h2>
+
+				<div className="row g-4 py-5 row-cols-1 row-cols-lg-2">
+					<div className="col d-flex align-items-start">
+						<div className="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"></div>
+						<div>
+							<h2>IntelliSense, Validation</h2>
+							<p>
+								Get completions and errors directly in the
+								browser for supported languages. Or write your
+								own completion providers in JavaScript.
+							</p>
+						</div>
+					</div>
+					<div className="col d-flex align-items-start">
+						<div className="icon-square text-bg-light d-inline-flex align-items-center justify-content-center fs-4 flex-shrink-0 me-3"></div>
+						<div>
+							<h2>Basic Syntax Colorization</h2>
+							<p>
+								Colorize code using our pre-built syntax
+								highlighting, or configure your own custom
+								colorization.
+							</p>
+						</div>
+					</div>
+				</div>
+
+				<div className="mt-4 row row-cols-2">
+					<div className="col">
+						<label className="control-label">Language</label>
+						<Select<monaco.languages.ILanguageExtensionPoint>
+							values={this.languages.value || []}
+							getLabel={(l) => l.id}
+							value={ref(this, "currentLanguage")}
+						/>
+					</div>
+					<div className="col">
+						<label className="control-label">Theme</label>
+						<Select<Theme>
+							values={themes}
+							getLabel={(l) => l.name}
+							value={ref(this, "currentTheme")}
+						/>
+					</div>
+				</div>
+
+				<div className="mt-2 editor-container" style={{ height: 500 }}>
+					<ControlledMonacoEditor
+						value={this.currentSample.value || "loading..."}
+						language={this.currentLanguage?.id}
+						theme={this.currentTheme.id}
+						onDidValueChange={() => {}}
+					/>
+				</div>
+			</div>
+		);
+	}
+}
+
+class DiffEditorDemo extends React.Component {
+	render() {
+		return (
+			<div className="p-5 mb-4">
+				<h2>Diff Editor</h2>
+				Side by side live comparison. Supports all languages out of the
+				box.
+				<div className="mt-2 editor-container" style={{ height: 500 }}>
+					<ControlledMonacoDiffEditor
+						originalValue={
+							require("../../data/diff-sample/original.txt")
+								.default
+						}
+						modifiedValue={
+							require("../../data/diff-sample/modified.txt")
+								.default
+						}
+						language="typescript"
+					/>
+				</div>
+			</div>
+		);
+	}
+}

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

@@ -0,0 +1,161 @@
+import { action, ObservableMap } from "mobx";
+import {
+	getNpmVersions,
+	getNpmVersionsSync,
+	getVsCodeCommitId,
+} from "./getNpmVersionsSync";
+import { PlaygroundModel } from "./PlaygroundModel";
+import { findLastIndex } from "./utils";
+
+export class BisectModel {
+	private readonly map = new ObservableMap<string, boolean>();
+
+	constructor(private readonly model: PlaygroundModel) {}
+
+	public getState(version: string): boolean | undefined {
+		return this.map.get(version);
+	}
+
+	public get isActive() {
+		return [...this.map.values()].some((e) => e !== undefined);
+	}
+
+	public reset(): void {
+		this.map.clear();
+	}
+
+	public async toggleState(version: string, state: boolean): Promise<void> {
+		const currentState = this.getState(version);
+		await this.setState(
+			version,
+			currentState === state ? undefined : state
+		);
+	}
+
+	@action
+	public async setState(
+		version: string,
+		state: boolean | undefined
+	): Promise<void> {
+		if (state === undefined) {
+			this.map.delete(version);
+		} else {
+			this.map.set(version, state);
+		}
+
+		const nextVersion = await this.getNextVersion();
+		if (!nextVersion) {
+			return;
+		}
+		this.model.settings.setSettings({
+			...this.model.settings.settings,
+			npmVersion: nextVersion,
+		});
+	}
+
+	private get versions() {
+		return getNpmVersionsSync(undefined);
+	}
+
+	private get indexOfLastBadVersion() {
+		return findLastIndex(this.versions, (v) => this.map.get(v) === false);
+	}
+	private get indexOfFirstGoodVersion() {
+		return this.versions.findIndex((v) => this.map.get(v) === true);
+	}
+
+	public get steps() {
+		const indexOfFirstGoodVersion = this.indexOfFirstGoodVersion;
+		const indexOfLastBadVersion = this.indexOfLastBadVersion;
+
+		if (indexOfFirstGoodVersion === -1 && indexOfLastBadVersion === -1) {
+			return -1;
+		}
+		if (indexOfFirstGoodVersion === -1) {
+			return Math.ceil(
+				Math.log2(this.versions.length - indexOfLastBadVersion)
+			);
+		} else if (indexOfLastBadVersion === -1) {
+			return Math.ceil(Math.log2(indexOfFirstGoodVersion + 1));
+		} else {
+			return Math.ceil(
+				Math.log2(indexOfFirstGoodVersion - indexOfLastBadVersion)
+			);
+		}
+	}
+
+	public get isFinished() {
+		if (
+			this.indexOfFirstGoodVersion !== -1 &&
+			this.indexOfLastBadVersion + 1 === this.indexOfFirstGoodVersion
+		) {
+			return true;
+		}
+		return false;
+	}
+
+	public async openGithub() {
+		const versions = await getNpmVersions();
+		const indexOfFirstGoodVersion =
+			this.indexOfFirstGoodVersion === -1
+				? versions.length - 1
+				: this.indexOfFirstGoodVersion;
+		const indexOfLastBadVersion =
+			this.indexOfLastBadVersion === -1 ? 0 : this.indexOfLastBadVersion;
+		const goodCommitId = await getVsCodeCommitId(
+			versions[indexOfFirstGoodVersion]
+		);
+		const badCommitId = await getVsCodeCommitId(
+			versions[indexOfLastBadVersion]
+		);
+		window.open(
+			`https://github.com/microsoft/vscode/compare/${goodCommitId}...${badCommitId}`,
+			"_blank"
+		);
+	}
+
+	private async getNextVersion(): Promise<string | undefined> {
+		const versions = await getNpmVersions();
+
+		const indexOfFirstGoodVersion = this.indexOfFirstGoodVersion;
+		const indexOfLastBadVersion = this.indexOfLastBadVersion;
+
+		if (
+			indexOfFirstGoodVersion !== -1 &&
+			indexOfLastBadVersion + 1 === indexOfFirstGoodVersion
+		) {
+			// Finished
+			return;
+		}
+
+		if (indexOfLastBadVersion === -1 && indexOfFirstGoodVersion === -1) {
+			return versions[0];
+		}
+		if (indexOfLastBadVersion === -1) {
+			// try first (newest) version that hasn't been tested
+			const indexOfFirstUntestedVersion = versions.findIndex(
+				(v) => this.map.get(v) === undefined
+			);
+			if (indexOfFirstUntestedVersion === -1) {
+				return undefined;
+			}
+			return versions[indexOfFirstUntestedVersion];
+		}
+
+		if (indexOfFirstGoodVersion === -1) {
+			/*// exponential back off, might be good for recent regressions, but ruins step counter
+			const candidate = Math.min(
+				indexOfLastBadVersion * 2 + 1,
+				versions.length - 1
+			);*/
+			const candidate = Math.floor(
+				(indexOfLastBadVersion + versions.length) / 2
+			);
+			return versions[candidate];
+		}
+
+		return versions[
+			Math.floor((indexOfLastBadVersion + indexOfFirstGoodVersion) / 2)
+		];
+	}
+}

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

@@ -0,0 +1,216 @@
+import { action, observable } from "mobx";
+import { IPlaygroundProject } from "../../../shared";
+import { monacoEditorVersion } from "../../monacoEditorVersion";
+import { LzmaCompressor } from "../../utils/lzmaCompressor";
+import {
+	HistoryController,
+	IHistoryModel,
+	ILocation,
+} from "../../utils/ObservableHistory";
+import { debouncedComputed, Disposable } from "../../utils/utils";
+import { getPlaygroundExamples, PlaygroundExample } from "./playgroundExamples";
+import { Source } from "./Source";
+import { PlaygroundModel } from "./PlaygroundModel";
+import { projectEquals } from "./utils";
+
+export class LocationModel implements IHistoryModel {
+	public readonly dispose = Disposable.fn();
+
+	private readonly compressor = new LzmaCompressor<IPlaygroundProject>();
+
+	private cachedState:
+		| { state: IPlaygroundProject; hash: string }
+		| undefined = undefined;
+
+	@observable private _sourceOverride: Source | undefined;
+	get sourceOverride(): Source | undefined {
+		return this._sourceOverride;
+	}
+
+	@observable private _compareWith: Source | undefined;
+	get compareWith(): Source | undefined {
+		return this._compareWith;
+	}
+
+	/**
+	 * This is used to control replace/push state.
+	 * Replace is used if the history id does not change.
+	 */
+	@observable historyId: number = 0;
+
+	constructor(
+		private readonly model: PlaygroundModel,
+		createHistoryController = true
+	) {
+		if (createHistoryController) {
+			this.dispose.track(
+				new HistoryController((initialLocation) => {
+					this.updateLocation(initialLocation);
+					return this;
+				})
+			);
+		}
+	}
+
+	get location(): ILocation {
+		const source = this._sourceOverride || this.sourceFromSettings;
+		return {
+			hashValue: this.computedHashValue.value || this.cachedState?.hash,
+			searchParams: {
+				source: source?.sourceToString(),
+				sourceLanguages: source?.sourceLanguagesToString(),
+				compareWith: this._compareWith?.sourceToString(),
+			},
+		};
+	}
+
+	@action
+	updateLocation(currentLocation: ILocation): void {
+		const hashValue = currentLocation.hashValue;
+		const sourceStr = currentLocation.searchParams.source;
+		const sourceLanguages = currentLocation.searchParams.sourceLanguages;
+		const source =
+			sourceStr || sourceLanguages
+				? Source.parse(sourceStr, sourceLanguages)
+				: undefined;
+
+		if (this.sourceFromSettings?.equals(source)) {
+			this._sourceOverride = undefined;
+		} else {
+			this._sourceOverride = source;
+		}
+
+		const compareWithStr = currentLocation.searchParams.compareWith;
+		const compareWith = compareWithStr
+			? Source.parse(compareWithStr, undefined)
+			: undefined;
+		this._compareWith = compareWith;
+
+		function findExample(hashValue: string): PlaygroundExample | undefined {
+			if (hashValue.startsWith("example-")) {
+				hashValue = hashValue.substring("example-".length);
+			}
+			return getPlaygroundExamples()
+				.flatMap((e) => e.examples)
+				.find((e) => e.id === hashValue);
+		}
+
+		let example: PlaygroundExample | undefined;
+
+		if (!hashValue) {
+			this.model.selectedExample = getPlaygroundExamples()[0].examples[0];
+		} else if ((example = findExample(hashValue))) {
+			this.model.selectedExample = example;
+		} else {
+			let p: IPlaygroundProject | undefined = undefined;
+			if (this.cachedState?.hash === hashValue) {
+				p = this.cachedState.state;
+			}
+			if (!p) {
+				try {
+					p =
+						this.compressor.decodeData<IPlaygroundProject>(
+							hashValue
+						);
+				} catch (e) {
+					console.log("Could not deserialize from hash value", e);
+				}
+			}
+			if (p) {
+				this.cachedState = { state: p, hash: hashValue };
+				this.model.setState(p);
+			}
+		}
+	}
+
+	private readonly computedHashValue = debouncedComputed(
+		500,
+		() => ({
+			state: this.model.playgroundProject,
+			selectedExampleProject: this.model.selectedExampleProject,
+		}),
+		({ state, selectedExampleProject }) => {
+			if (
+				selectedExampleProject &&
+				projectEquals(state, selectedExampleProject.project)
+			) {
+				return "example-" + selectedExampleProject.example.id;
+			}
+			if (
+				this.cachedState &&
+				projectEquals(this.cachedState.state, state)
+			) {
+				return this.cachedState.hash;
+			}
+			return this.compressor.encodeData(state);
+		}
+	);
+
+	private get sourceFromSettings(): Source | undefined {
+		const settings = this.model.settings.settings;
+		if (settings.monacoSource === "npm") {
+			return new Source(settings.npmVersion, undefined, undefined);
+		} else if (
+			settings.monacoSource === "independent" &&
+			((settings.coreSource === "url" &&
+				(settings.languagesSource === "latest" ||
+					settings.languagesSource === "url")) ||
+				(settings.coreSource === "latest" &&
+					settings.languagesSource === "url"))
+		) {
+			return new Source(
+				undefined,
+				settings.coreSource === "url" ? settings.coreUrl : undefined,
+				settings.languagesSource === "latest"
+					? undefined
+					: settings.languagesUrl
+			);
+		} else if (settings.monacoSource === "latest") {
+			return new Source(monacoEditorVersion, undefined, undefined);
+		}
+		return undefined;
+	}
+
+	@action
+	exitCompare(): void {
+		this._compareWith = undefined;
+		this.historyId++;
+	}
+
+	@action
+	disableSourceOverride(): void {
+		this._sourceOverride = undefined;
+		this.historyId++;
+	}
+
+	@action
+	compareWithLatestDev(): void {
+		this._compareWith = Source.useLatestDev();
+		this.historyId++;
+	}
+
+	@action
+	saveCompareWith(): void {
+		if (this._compareWith) {
+			this.model.settings.setSettings({
+				...this.model.settings.settings,
+				...this._compareWith.toPartialSettings(),
+			});
+			this.historyId++;
+			this._compareWith = undefined;
+			this._sourceOverride = undefined;
+		}
+	}
+
+	@action
+	saveSourceOverride(): void {
+		if (this._sourceOverride) {
+			this.model.settings.setSettings({
+				...this.model.settings.settings,
+				...this._sourceOverride.toPartialSettings(),
+			});
+			this.historyId++;
+			this._sourceOverride = undefined;
+		}
+	}
+}