Merge branch 'main' into mdx

website/src/monaco-loader.ts

@@ -84,7 +84,7 @@ function loadScript(path: string): Promise<void> {
 		script.onload = () => res();
 		script.async = true;
 		script.type = "text/javascript";
-		script.src = path;
+		script.src = path; // CodeQL [SM01507] This is safe because the runner (that allows for dynamic paths) runs in an isolated iframe. The hosting website uses a static path configuration. // CodeQL [SM03712] This is safe because the runner (that allows for dynamic paths) runs in an isolated iframe. The hosting website uses a static path configuration.
 		document.head.appendChild(script);
 	});
 }

website/src/runner/index.ts

@@ -21,7 +21,7 @@ window.addEventListener("message", (event) => {
 		const style = document.getElementById(
 			"custom-style"
 		) as HTMLStyleElement;
-		style.innerHTML = e.css;
+		style.innerHTML = e.css; // CodeQL [SM03712] This is safe because the runner runs in an isolated iframe.
 	}
 });
 
@@ -54,7 +54,7 @@ async function initialize(state: IPreviewState) {
 	const js = massageJs(state.js);
 
 	try {
-		eval(js);
+		eval(js); // CodeQL [SM01632] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground. // CodeQL [SM02688] This is safe because the runner runs in an isolated iframe. This feature is essential to the functionality of the playground.
 	} catch (err) {
 		const pre = document.createElement("pre");
 		pre.appendChild(

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

@@ -172,10 +172,9 @@ class EditorDemo extends React.Component {
 						<div>
 							<h2>IntelliSense, Validation</h2>
 							<p>
-								Paragraph of text beneath the heading to explain
-								the heading. We'll add onto it with another
-								sentence and probably just keep going until we
-								run out of words.
+								Get completions and errors directly in the
+								browser for supported languages. Or write your
+								own completion providers in JavaScript.
 							</p>
 						</div>
 					</div>
@@ -184,10 +183,9 @@ class EditorDemo extends React.Component {
 						<div>
 							<h2>Basic Syntax Colorization</h2>
 							<p>
-								Paragraph of text beneath the heading to explain
-								the heading. We'll add onto it with another
-								sentence and probably just keep going until we
-								run out of words.
+								Colorize code using our pre-built syntax
+								highlighting, or configure your own custom
+								colorization.
 							</p>
 						</div>
 					</div>

website/src/website/pages/playground/PlaygroundPageContent.tsx

@@ -1,24 +1,24 @@
 import { autorun } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
+import { ButtonGroup, FormCheck } from "react-bootstrap";
 import { getLoadedMonaco } from "../../../monaco-loader";
-import { IPlaygroundProject, IPreviewState } from "../../../shared";
 import { Page } from "../../components/Page";
 import { Select } from "../../components/Select";
+import { Button, Col, Row, Stack } from "../../components/bootstrap";
 import {
 	MonacoEditor,
 	MonacoEditorHeight,
 } from "../../components/monaco/MonacoEditor";
 import { withLoadedMonaco } from "../../components/monaco/MonacoLoader";
+import { monacoEditorVersion } from "../../monacoEditorVersion";
 import { hotComponent } from "../../utils/hotComponent";
 import { IReference, ref } from "../../utils/ref";
-import { getNpmVersionsSync } from "./getNpmVersionsSync";
-import { getPlaygroundExamples, PlaygroundExample } from "./playgroundExamples";
 import { PlaygroundModel } from "./PlaygroundModel";
 import { Preview } from "./Preview";
 import { SettingsDialog } from "./SettingsDialog";
-import { Button, Col, Row, Stack } from "../../components/bootstrap";
-import { ButtonGroup, FormCheck } from "react-bootstrap";
+import { getNpmVersionsSync } from "./getNpmVersionsSync";
+import { PlaygroundExample, getPlaygroundExamples } from "./playgroundExamples";
 
 @hotComponent(module)
 @observer
@@ -258,13 +258,15 @@ export class VersionSelector extends React.Component<{
 				<Select
 					values={versions}
 					getLabel={(i) =>
-						`${i}${
-							{
-								["undefined"]: "",
-								["true"]: " ✓",
-								["false"]: " ✗",
-							}["" + model.bisectModel.getState(i)]
-						}`
+						i === latestValue
+							? `latest stable (${monacoEditorVersion})`
+							: `${i}${
+									{
+										["undefined"]: "",
+										["true"]: " ✓",
+										["false"]: " ✗",
+									}["" + model.bisectModel.getState(i)]
+							  }`
 					}
 					value={{
 						get() {

website/static/monarch/monarch.js

@@ -58,7 +58,7 @@ function createLangModel(languageId, text) {
 	var update = function () {
 		var def = null;
 		try {
-			def = eval("(function(){ " + langModel.getValue() + "; })()");
+			def = eval("(function(){ " + langModel.getValue() + "; })()"); // CodeQL [SM01632] langModel.getValue() is a default value with volatile user modifications. This is an essential functionality for the monarch playground and safe, as no injection is possible.
 		} catch (err) {
 			setInnerText(outputPane, err + "\n");
 			return;