@harmoniclabs/monaco-editor 0.52.0

package/website/src/website/components/Loader.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+export class Loader<T> extends React.Component<
+	{ children: (value: T) => React.ReactChild; loader: () => Promise<T> },
+	{ value: T | undefined; hasValue: boolean }
+> {
+	constructor(props: any) {
+		super(props);
+		this.state = { value: undefined, hasValue: false };
+		if (!this.state.value) {
+			this.props.loader().then((value) => {
+				this.setState({
+					hasValue: true,
+					value,
+				});
+			});
+		}
+	}
+
+	render() {
+		if (!this.state.hasValue) {
+			return null;
+		}
+		return this.props.children(this.state.value!);
+	}
+}
+
+/**
+ * Decorates a component so that it only gets mounted when monaco is loaded.
+ */
+export function withLoader(
+	loader: () => Promise<void>
+): <TProps>(
+	Component: React.FunctionComponent<TProps> | React.ComponentClass<TProps>
+) => any {
+	return (Component) => {
+		return (props: any) => (
+			<Loader loader={loader}>{() => <Component {...props} />}</Loader>
+		);
+	};
+}

package/website/src/website/components/Nav.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { home, playground, docs, monarch } from "../pages/routes";
+import { Container, Navbar, Nav, NavDropdown } from "./bootstrap";
+
+export class PageNav extends React.Component {
+	render() {
+		return (
+			<Navbar bg="dark" variant="dark" expand="lg">
+				<Container fluid>
+					<Navbar.Brand href="./">
+						<span className="code-oss-icon d-inline-block align-top" />
+						Monaco Editor
+					</Navbar.Brand>
+					<Navbar.Toggle aria-controls="basic-navbar-nav" />
+					<Navbar.Collapse id="basic-navbar-nav" role="">
+						<Nav className="me-auto">
+							<Nav.Link active={home.isActive} href={home.href}>
+								Home
+							</Nav.Link>
+							<Nav.Link
+								active={playground.isActive}
+								href={playground.href}
+							>
+								Playground
+							</Nav.Link>
+							<Nav.Link
+								active={monarch.isActive}
+								href={monarch.href}
+							>
+								Monarch
+							</Nav.Link>
+							<Nav.Link active={docs.isActive} href={docs.href}>
+								Documentation
+							</Nav.Link>
+						</Nav>
+
+						<Nav className="ms-auto">
+							<NavDropdown
+								title={
+									<>
+										<span className="nav-icon bi-download" />
+										<span className="hidden-text">
+											{" "}
+											Download{" "}
+										</span>
+									</>
+								}
+								className="download-dropdown"
+								align="end"
+							>
+								{/*<NavDropdown.Item href="#action/3.1">
+									Download 0.33.0
+							</NavDropdown.Item>*/}
+								<NavDropdown.Item
+									href="https://www.npmjs.com/package/monaco-editor"
+									target="_blank"
+								>
+									Get From NPM
+								</NavDropdown.Item>
+							</NavDropdown>
+
+							<Nav.Link
+								href="https://github.com/microsoft/monaco-editor"
+								target="_blank"
+							>
+								<span className="nav-icon bi-github" />
+								<span className="hidden-text"> GitHub </span>
+							</Nav.Link>
+						</Nav>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+		);
+	}
+}

package/website/src/website/components/Page.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { PageNav } from "./Nav";
+
+export function Page(props: { children: React.ReactNode }) {
+	return (
+		<div className="page">
+			<PageNav />
+			<main className="main">{props.children}</main>
+		</div>
+	);
+}

package/website/src/website/components/Radio.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Form } from "./bootstrap";
+import { IReference } from "../utils/ref";
+
+@observer
+export class Radio<T> extends React.Component<{
+	value: IReference<T>;
+	current: T;
+	id?: string;
+}> {
+	render() {
+		const { value, current } = this.props;
+		return (
+			<Form.Check
+				checked={value.get() === current}
+				onChange={() => value.set(current)}
+				type="radio"
+				id={this.props.id}
+			/>
+		);
+	}
+}

package/website/src/website/components/Select.tsx

@@ -0,0 +1,75 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { IReference } from "../utils/ref";
+import { Form } from "./bootstrap";
+
+interface Group<T> {
+	groupTitle: string;
+	items: (T | Group<T>)[];
+}
+
+@observer
+export class Select<T> extends React.Component<{
+	value: IReference<T | undefined, T>;
+	values: (T | Group<T>)[];
+	getLabel: (val: T) => string;
+	style?: React.CSSProperties;
+}> {
+	private readonly map: Map<T, string> = new Map();
+
+	render() {
+		const { value, values } = this.props;
+		this.map.clear();
+		const groups = this.renderGroups(values);
+		const currentValue = value.get();
+
+		return (
+			<Form.Select
+				value={currentValue && this.map.get(currentValue)}
+				defaultValue={currentValue ? undefined : ""}
+				onChange={(e) => {
+					const newValue = e.currentTarget.value;
+					const selected = [...this.map.entries()].find(
+						([k, v]) => v === newValue
+					);
+					if (selected) {
+						value.set(selected[0]);
+					}
+				}}
+				style={this.props.style}
+				size="sm"
+			>
+				<option value="" disabled hidden>
+					Select an example...
+				</option>
+				{groups}
+			</Form.Select>
+		);
+	}
+
+	private renderGroups(groups: (T | Group<T>)[]): React.ReactNode {
+		const { getLabel } = this.props;
+
+		return groups.map((g, idx) => {
+			if (typeof g === "object" && g && "groupTitle" in g) {
+				return (
+					<optgroup label={g.groupTitle} key={idx}>
+						{this.renderGroups(g.items)}
+					</optgroup>
+				);
+			} else {
+				let id = this.map.get(g);
+				if (!id) {
+					id = `${this.map.size + 1}`;
+					this.map.set(g, id);
+				}
+
+				return (
+					<option key={idx} value={id}>
+						{getLabel(g)}
+					</option>
+				);
+			}
+		});
+	}
+}

package/website/src/website/components/TextBox.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { observer } from "mobx-react";
+import { Form } from "./bootstrap";
+import { IReference } from "../utils/ref";
+
+@observer
+export class TextBox extends React.Component<{
+	value: IReference<string>;
+	style?: React.CSSProperties;
+}> {
+	render() {
+		const { value } = this.props;
+		return (
+			<Form.Control
+				value={value.get()}
+				onChange={(v) => value.set(v.currentTarget.value)}
+				style={this.props.style}
+			/>
+		);
+	}
+}

package/website/src/website/components/bootstrap.tsx

@@ -0,0 +1,32 @@
+import Nav from "react-bootstrap/Nav";
+export { Nav };
+
+import Navbar from "react-bootstrap/Navbar";
+export { Navbar };
+
+import Form from "react-bootstrap/Form";
+export { Form };
+
+import Stack from "react-bootstrap/Stack";
+export { Stack };
+
+import Container from "react-bootstrap/Container";
+export { Container };
+
+import NavDropdown from "react-bootstrap/NavDropdown";
+export { NavDropdown };
+
+import Modal from "react-bootstrap/Modal";
+export { Modal };
+
+import Button from "react-bootstrap/Button";
+export { Button };
+
+import ListGroup from "react-bootstrap/ListGroup";
+export { ListGroup };
+
+import Row from "react-bootstrap/Row";
+export { Row };
+
+import Col from "react-bootstrap/Col";
+export { Col };

package/website/src/website/components/monaco/MonacoEditor.tsx

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { getLoadedMonaco } from "../../../monaco-loader";
+import { withLoadedMonaco } from "./MonacoLoader";
+
+@withLoadedMonaco
+export class ControlledMonacoEditor extends React.Component<{
+	value: string;
+	onDidValueChange?: (newValue: string) => void;
+
+	language?: string;
+	theme?: string;
+}> {
+	private readonly model = getLoadedMonaco().editor.createModel(
+		this.props.value,
+		this.props.language
+	);
+
+	private lastSubscription: monaco.IDisposable | undefined;
+
+	componentDidMount(): void {
+		this.componentDidUpdate({ value: "" });
+	}
+
+	componentDidUpdate(lastProps: this["props"]) {
+		const newOnDidValueChange = this.props.onDidValueChange;
+		if (newOnDidValueChange !== lastProps.onDidValueChange) {
+			if (this.lastSubscription) {
+				this.lastSubscription.dispose();
+				this.lastSubscription = undefined;
+			}
+			if (newOnDidValueChange) {
+				this.lastSubscription = this.model.onDidChangeContent((e) => {
+					newOnDidValueChange(this.model.getValue());
+				});
+			}
+		}
+
+		if (this.props.value !== this.model.getValue()) {
+			this.model.setValue(this.props.value);
+		}
+		if (this.model.getLanguageId() !== this.props.language) {
+			getLoadedMonaco().editor.setModelLanguage(
+				this.model,
+				this.props.language || "plaintext"
+			);
+		}
+
+		if (this.props.onDidValueChange) {
+			this.model.setValue(this.props.value);
+		}
+	}
+
+	render() {
+		return (
+			<MonacoEditor
+				readOnly={!this.props.onDidValueChange}
+				model={this.model}
+				theme={this.props.theme}
+			/>
+		);
+	}
+}
+
+@withLoadedMonaco
+export class ControlledMonacoDiffEditor extends React.Component<{
+	originalValue: string;
+	modifiedValue: string;
+	language?: string;
+}> {
+	private readonly originalModel = getLoadedMonaco().editor.createModel(
+		this.props.originalValue,
+		this.props.language
+	);
+	private readonly modifiedModel = getLoadedMonaco().editor.createModel(
+		this.props.modifiedValue,
+		this.props.language
+	);
+
+	componentDidUpdate() {
+		if (this.props.originalValue !== this.originalModel.getValue()) {
+			this.originalModel.setValue(this.props.originalValue);
+		}
+		if (this.originalModel.getLanguageId() !== this.props.language) {
+			getLoadedMonaco().editor.setModelLanguage(
+				this.originalModel,
+				this.props.language || "plaintext"
+			);
+		}
+
+		if (this.props.modifiedValue !== this.modifiedModel.getValue()) {
+			this.modifiedModel.setValue(this.props.modifiedValue);
+		}
+		if (this.modifiedModel.getLanguageId() !== this.props.language) {
+			getLoadedMonaco().editor.setModelLanguage(
+				this.modifiedModel,
+				this.props.language || "plaintext"
+			);
+		}
+	}
+
+	render() {
+		return (
+			<MonacoDiffEditor
+				originalModel={this.originalModel}
+				modifiedModel={this.modifiedModel}
+			/>
+		);
+	}
+}
+
+export type MonacoEditorHeight =
+	| { /* Fills the entire space. */ kind: "fill" }
+	| {
+			/* Use the content as height. */ kind: "dynamic";
+			maxHeight?: number;
+	  };
+
+@withLoadedMonaco
+export class MonacoEditor extends React.Component<
+	{
+		model: monaco.editor.ITextModel;
+		onEditorLoaded?: (editor: monaco.editor.IStandaloneCodeEditor) => void;
+		height?: MonacoEditorHeight;
+		theme?: string;
+		readOnly?: boolean;
+		className?: string;
+	},
+	{ contentHeight: number | undefined }
+> {
+	public editor: monaco.editor.IStandaloneCodeEditor | undefined;
+	private get height() {
+		if (this.state.contentHeight === undefined) {
+			return undefined;
+		}
+		return Math.min(200, this.state.contentHeight);
+	}
+	private readonly divRef = React.createRef<HTMLDivElement>();
+	private readonly resizeObserver = new ResizeObserver(() => {
+		if (this.editor) {
+			this.editor.layout();
+		}
+	});
+	constructor(props: any) {
+		super(props);
+		this.state = { contentHeight: undefined };
+	}
+	render() {
+		const heightInfo = this.props.height || { kind: "fill" };
+		const height = heightInfo.kind === "fill" ? "100%" : this.height;
+		return (
+			<div
+				style={{
+					height,
+					minHeight: 0,
+					minWidth: 0,
+				}}
+				className={"monaco-editor-react " + this.props.className}
+				ref={this.divRef}
+			/>
+		);
+	}
+	componentDidMount() {
+		const div = this.divRef.current;
+		if (!div) {
+			throw new Error("unexpected");
+		}
+		this.resizeObserver.observe(div);
+		this.editor = getLoadedMonaco().editor.create(div, {
+			model: this.props.model,
+			scrollBeyondLastLine: false,
+			minimap: { enabled: false },
+			automaticLayout: false,
+			theme: this.props.theme,
+			readOnly: this.props.readOnly,
+		});
+		this.editor.onDidContentSizeChange((e) => {
+			this.setState({ contentHeight: e.contentHeight });
+		});
+		if (this.props.onEditorLoaded) {
+			this.props.onEditorLoaded(this.editor);
+		}
+	}
+	componentDidUpdate(oldProps: this["props"]) {
+		if (oldProps.model !== this.props.model) {
+			this.editor!.setModel(this.props.model);
+		}
+		if (oldProps.theme !== this.props.theme && this.props.theme) {
+			getLoadedMonaco().editor.setTheme(this.props.theme);
+		}
+		if (oldProps.readOnly !== this.props.readOnly) {
+			this.editor!.updateOptions({ readOnly: this.props.readOnly });
+		}
+	}
+	componentWillUnmount() {
+		if (!this.editor) {
+			console.error("unexpected state");
+		} else {
+			this.editor.dispose();
+		}
+	}
+}
+
+@withLoadedMonaco
+export class MonacoDiffEditor extends React.Component<
+	{
+		originalModel: monaco.editor.ITextModel;
+		modifiedModel: monaco.editor.ITextModel;
+		onEditorLoaded?: (editor: monaco.editor.IStandaloneDiffEditor) => void;
+		/**
+		 * Initial theme to be used for rendering.
+		 * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'.
+		 * You can create custom themes via `monaco.editor.defineTheme`.
+		 * To switch a theme, use `monaco.editor.setTheme`
+		 */
+		theme?: string;
+	},
+	{ contentHeight: number | undefined }
+> {
+	public editor: monaco.editor.IStandaloneDiffEditor | undefined;
+
+	private readonly divRef = React.createRef<HTMLDivElement>();
+	private readonly resizeObserver = new ResizeObserver(() => {
+		if (this.editor) {
+			this.editor.layout();
+		}
+	});
+	constructor(props: any) {
+		super(props);
+		this.state = { contentHeight: undefined };
+	}
+	render() {
+		const height = "100%";
+		return (
+			<div
+				style={{
+					height,
+					minHeight: 0,
+					minWidth: 0,
+				}}
+				className="monaco-editor-react"
+				ref={this.divRef}
+			/>
+		);
+	}
+	componentDidMount() {
+		const div = this.divRef.current;
+		if (!div) {
+			throw new Error("unexpected");
+		}
+		this.resizeObserver.observe(div);
+		this.editor = getLoadedMonaco().editor.createDiffEditor(div, {
+			scrollBeyondLastLine: false,
+			minimap: { enabled: false },
+			automaticLayout: false,
+			theme: this.props.theme,
+			originalEditable: true,
+		});
+		this.editor.setModel({
+			original: this.props.originalModel,
+			modified: this.props.modifiedModel,
+		});
+
+		if (this.props.onEditorLoaded) {
+			this.props.onEditorLoaded(this.editor);
+		}
+	}
+
+	componentWillUnmount() {
+		if (!this.editor) {
+			console.error("unexpected state");
+		} else {
+			this.editor.dispose();
+		}
+	}
+}

package/website/src/website/components/monaco/MonacoLoader.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { getMonaco, loadMonaco } from "../../../monaco-loader";
+
+/**
+ * Can be used to render content only when monaco is loaded.
+ */
+export class MonacoLoader extends React.Component<
+	{ children: (m: typeof monaco) => React.ReactChild },
+	{ monaco?: typeof monaco }
+> {
+	constructor(props: any) {
+		super(props);
+		this.state = { monaco: getMonaco() };
+		if (!this.state.monaco) {
+			loadMonaco().then((monaco) => {
+				this.setState({
+					monaco,
+				});
+			});
+		}
+	}
+	render() {
+		if (!this.state.monaco) {
+			return null;
+		}
+		return this.props.children(this.state.monaco);
+	}
+}
+
+/**
+ * Decorates a component so that it only gets mounted when monaco is loaded.
+ */
+export function withLoadedMonaco<TProps>(
+	Component: React.FunctionComponent<TProps> | React.ComponentClass<TProps>
+): any {
+	return (props: TProps) => (
+		<MonacoLoader>{() => <Component {...props} />}</MonacoLoader>
+	);
+}