Merge branch 'main' into model-markers-example

.github/ISSUE_TEMPLATE/1_bug_report.yaml

@@ -27,11 +27,16 @@ body:
       label: Monaco Editor Playground Code
       description: Please provide the code to reproduce in the [monaco editor playground](https://microsoft.github.io/monaco-editor/playground.html)
       render: typescript
+  - type: textarea
+    id: steps
+    attributes:
+      label: Reproduction Steps
+      description: Please describe the steps (in the playground) that lead to the problematic behavior
   - type: textarea
     id: actual-behavior
     attributes:
-      label: Actual Behavior
+      label: Actual (Problematic) Behavior
-      description: Please describe the actual behavior, as observed in the playground.
+      description: Please describe the actual (problematic) behavior, as observed in the playground.
 
   - type: textarea
     id: expected-behavior

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Cache node modules
         id: cacheNodeModules

.github/workflows/pr-chat.yml

@@ -0,0 +1,25 @@
+name: PR Chat
+on:
+  pull_request_target:
+    types: [opened, ready_for_review, closed]
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    if: ${{ !github.event.pull_request.draft }}
+    steps:
+      - name: Checkout Actions
+        uses: actions/checkout@v2
+        with:
+          repository: 'microsoft/vscode-github-triage-actions'
+          ref: stable
+          path: ./actions
+      - name: Install Actions
+        run: npm install --production --prefix ./actions
+      - name: Run Code Review Chat
+        uses: ./actions/code-review-chat
+        with:
+          token: ${{secrets.GITHUB_TOKEN}}
+          slack_token: ${{ secrets.SLACK_TOKEN }}
+          slack_bot_name: 'VSCodeBot'
+          notification_channel: codereview

.github/workflows/publish.yml

@@ -18,7 +18,7 @@ jobs:
     steps:
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: (monaco-editor) checkout
         uses: actions/checkout@v2

.github/workflows/website.yml

@@ -16,7 +16,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Cache node modules
         id: cacheNodeModules

CHANGELOG.md

@@ -1,5 +1,47 @@
 # Monaco Editor Changelog
 
+## [0.34.0] (Unreleased)
+
+- Introduction of `IEditor.createDecorationsCollection` API
+- New function `removeAllMarkers` to remove all markers
+- Support for light high contrast theme
+- Introduction of `BracketPairColorizationOptions.independentColorPoolPerBracketType`
+- Introduction of `PositionAffinity.LeftOfInjectedText` and `PositionAffinity.RightOfInjectedText`
+- Introduction of `IEditorOptions.showFoldingControls: 'never'`
+- Introduction of `IDiffEditorBaseOptions.renderMarginRevertIcon: boolean`
+- Inline Quick Suggestions
+- Introduction of `IContentWidgetPosition.positionAffinity`
+- Provider can now be registered for a `LanguageSelector`
+
+### Breaking Changes
+
+- `IEditorInlayHintsOptions` tweaks
+- Iteration on `InlineCompletion` API
+- `WorkspaceFileEdit` -> `IWorkspaceFileEdit`
+  - `oldUri` -> `oldResource`
+  - `newUri` -> `newResource`
+- `WorkspaceTextEdit` -> `IWorkspaceTextEdit`
+  - `edit` -> `textEdit` (now supports `insertAsSnippet`)
+  - `modelVersionId?: number` -> `versionId: number | undefined`
+- `InlayHint` API tweaks
+- Soft deprecation of `ICodeEditor.deltaDecorations`, no adoption required. `IEditor.createDecorationsCollection` API should be used instead.
+
+## [0.33.0]
+
+- The first parameter of all `monaco.languages.register*Provider` functions has changed to take a `DocumentSelector` instead of a single `languageId`
+- The `Environment.getWorker` function can now return a `Promise`
+
+### Breaking Changes
+
+- `InlayHintKind.Other` is removed.
+
+### Thank you
+
+Contributions to `monaco-editor`:
+
+- [@Dan1ve (Daniel Veihelmann)](https://github.com/Dan1ve): Make Vite sample code Firefox compatible [PR #2991](https://github.com/microsoft/monaco-editor/pull/2991)
+- [@philipturner (Philip Turner)](https://github.com/philipturner): Add `@noDerivative` modifier to Swift [PR #2957](https://github.com/microsoft/monaco-editor/pull/2957)
+
 ## [0.32.1] (04.02.2022)
 
 - fixes [an issue with service initialization](https://github.com/microsoft/monaco-editor/issues/2941).

docs/integrate-esm.md

@@ -192,27 +192,33 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built
 
 ```js
 import * as monaco from 'monaco-editor';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
 self.MonacoEnvironment = {
-	getWorker(_, label) {
+	getWorker: function (workerId, label) {
-		if (label === 'json') {
+		const getWorkerModule = (moduleUrl, label) => {
-			return new jsonWorker();
+			return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
+				name: label,
+				type: 'module'
+			});
+		};
+
+		switch (label) {
+			case 'json':
+				return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
+			case 'css':
+			case 'scss':
+			case 'less':
+				return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
+			case 'html':
+			case 'handlebars':
+			case 'razor':
+				return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
+			case 'typescript':
+			case 'javascript':
+				return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
+			default:
+				return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
 		}
-		if (label === 'css' || label === 'scss' || label === 'less') {
-			return new cssWorker();
-		}
-		if (label === 'html' || label === 'handlebars' || label === 'razor') {
-			return new htmlWorker();
-		}
-		if (label === 'typescript' || label === 'javascript') {
-			return new tsWorker();
-		}
-		return new editorWorker();
 	}
 };
 

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "monaco-editor",
-	"version": "0.32.1",
+	"version": "0.33.0",
-	"vscode": "8ad5e3bceab16a4d0856c43a374b511dffb1e795",
+	"vscode": "6a4e5cc26b29359472378c2a8951c33f4ea73244",
 	"private": true,
 	"description": "A browser based code editor",
 	"author": "Microsoft Corporation",
@@ -21,6 +21,8 @@
 		"smoketest-debug": "node ./test/smoke/runner.js --debug-tests",
 		"smoketest": "node ./test/smoke/runner.js",
 		"test": "mocha test/unit/all.js",
+		"deps-all-remove": "ts-node ./build/npm/removeAll",
+		"deps-all-install": "ts-node ./build/npm/installAll",
 		"typedoc": "cd website/typedoc && \"../../node_modules/.bin/typedoc\" --options ./typedoc.json",
 		"watch": "tsc -w -p ./src"
 	},
@@ -35,28 +37,28 @@
 		"@typescript/vfs": "^1.3.5",
 		"chai": "^4.3.6",
 		"clean-css": "^5.2.4",
-		"esbuild": "^0.14.18",
+		"esbuild": "^0.14.49",
 		"esbuild-plugin-alias": "^0.2.1",
 		"glob": "^7.2.0",
 		"husky": "^7.0.4",
 		"jsdom": "^19.0.0",
 		"jsonc-parser": "^3.0.0",
 		"mocha": "^9.2.0",
-		"monaco-editor-core": "0.32.1",
+		"monaco-editor-core": "0.34.0-dev.20220720",
 		"playwright": "^1.18.1",
 		"prettier": "^2.5.1",
 		"pretty-quick": "^3.1.3",
 		"requirejs": "^2.3.6",
-		"terser": "^5.10.0",
+		"terser": "^5.14.2",
+		"ts-node": "^10.6.0",
 		"typedoc": "^0.22.11",
 		"typescript": "4.5.5",
-		"vscode-css-languageservice": "^5.1.12",
+		"vscode-css-languageservice": "5.4.1",
-		"vscode-html-languageservice": "^4.2.1",
+		"vscode-html-languageservice": "4.2.4",
-		"vscode-json-languageservice": "4.2.0",
+		"vscode-json-languageservice": "4.2.1",
 		"vscode-languageserver-textdocument": "^1.0.4",
 		"vscode-languageserver-types": "3.16.0",
 		"vscode-uri": "3.0.3",
-		"yaserver": "^0.4.0",
+		"yaserver": "^0.4.0"
-		"ts-node": "^10.4.0"
 	}
 }

samples/package.json

@@ -11,7 +11,7 @@
 	"license": "MIT",
 	"devDependencies": {
 		"css-loader": "^6.6.0",
-		"electron": "^17.0.0",
+		"electron": "^17.2.0",
 		"file-loader": "^6.2.0",
 		"glob": "^7.2.0",
 		"html-webpack-plugin": "^5.5.0",

src/basic-languages/css/css.ts

@@ -165,7 +165,7 @@ export const language = <languages.IMonarchLanguage>{
 
 		units: [
 			[
-				'(em|ex|ch|rem|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
+				'(em|ex|ch|rem|fr|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
 				'attribute.value.unit',
 				'@pop'
 			]

src/basic-languages/less/less.ts

@@ -164,7 +164,7 @@ export const language = <languages.IMonarchLanguage>{
 
 		units: [
 			[
-				'(em|ex|ch|rem|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
+				'(em|ex|ch|rem|fr|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
 				'attribute.value.unit',
 				'@pop'
 			]

src/basic-languages/scss/scss.ts

@@ -187,7 +187,7 @@ export const language = <languages.IMonarchLanguage>{
 
 		units: [
 			[
-				'(em|ex|ch|rem|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
+				'(em|ex|ch|rem|fr|vmin|vmax|vw|vh|vm|cm|mm|in|px|pt|pc|deg|grad|rad|turn|s|ms|Hz|kHz|%)?',
 				'number',
 				'@pop'
 			]

src/basic-languages/typescript/typescript.ts

@@ -127,6 +127,7 @@ export const language = {
 		'null',
 		'number',
 		'object',
+		'out',
 		'package',
 		'private',
 		'protected',

src/basic-languages/yaml/yaml.ts

@@ -1,4 +1,4 @@
-import type { languages } from '../../fillers/monaco-editor-core';
+import { languages } from '../../fillers/monaco-editor-core';
 
 export const conf: languages.LanguageConfiguration = {
 	comments: {
@@ -25,7 +25,15 @@ export const conf: languages.LanguageConfiguration = {
 	],
 	folding: {
 		offSide: true
-	}
+	},
+	onEnterRules: [
+		{
+			beforeText: /:\s*$/,
+			action: {
+				indentAction: languages.IndentAction.Indent
+			}
+		}
+	]
 };
 
 export const language = <languages.IMonarchLanguage>{

src/language/common/lspLanguageFeatures.ts

@@ -627,13 +627,14 @@ function toWorkspaceEdit(edit: lsTypes.WorkspaceEdit | null): languages.Workspac
 	if (!edit || !edit.changes) {
 		return void 0;
 	}
-	let resourceEdits: languages.WorkspaceTextEdit[] = [];
+	let resourceEdits: languages.IWorkspaceTextEdit[] = [];
 	for (let uri in edit.changes) {
 		const _uri = Uri.parse(uri);
 		for (let e of edit.changes[uri]) {
 			resourceEdits.push({
 				resource: _uri,
-				edit: {
+				versionId: undefined,
+				textEdit: {
 					range: toRange(e.range),
 					text: e.newText
 				}

src/language/css/cssMode.ts

@@ -106,6 +106,22 @@ export function setupMode(defaults: LanguageServiceDefaults): IDisposable {
 				)
 			);
 		}
+		if (modeConfiguration.documentFormattingEdits) {
+			providers.push(
+				languages.registerDocumentFormattingEditProvider(
+					languageId,
+					new languageFeatures.DocumentFormattingEditProvider(worker)
+				)
+			);
+		}
+		if (modeConfiguration.documentRangeFormattingEdits) {
+			providers.push(
+				languages.registerDocumentRangeFormattingEditProvider(
+					languageId,
+					new languageFeatures.DocumentRangeFormattingEditProvider(worker)
+				)
+			);
+		}
 	}
 
 	registerProviders();

src/language/css/cssWorker.ts

@@ -12,7 +12,7 @@ export class CSSWorker {
 
 	private _ctx: worker.IWorkerContext;
 	private _languageService: cssService.LanguageService;
-	private _languageSettings: cssService.LanguageSettings;
+	private _languageSettings: Options;
 	private _languageId: string;
 
 	constructor(ctx: worker.IWorkerContext, createData: ICreateData) {
@@ -53,10 +53,10 @@ export class CSSWorker {
 	// --- language service host ---------------
 
 	async doValidation(uri: string): Promise<cssService.Diagnostic[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (document) {
-			let stylesheet = this._languageService.parseStylesheet(document);
+			const stylesheet = this._languageService.parseStylesheet(document);
-			let diagnostics = this._languageService.doValidation(document, stylesheet);
+			const diagnostics = this._languageService.doValidation(document, stylesheet);
 			return Promise.resolve(diagnostics);
 		}
 		return Promise.resolve([]);
@@ -65,63 +65,63 @@ export class CSSWorker {
 		uri: string,
 		position: cssService.Position
 	): Promise<cssService.CompletionList | null> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return null;
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let completions = this._languageService.doComplete(document, position, stylesheet);
+		const completions = this._languageService.doComplete(document, position, stylesheet);
 		return Promise.resolve(completions);
 	}
 	async doHover(uri: string, position: cssService.Position): Promise<cssService.Hover | null> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return null;
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let hover = this._languageService.doHover(document, position, stylesheet);
+		const hover = this._languageService.doHover(document, position, stylesheet);
 		return Promise.resolve(hover);
 	}
 	async findDefinition(
 		uri: string,
 		position: cssService.Position
 	): Promise<cssService.Location | null> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return null;
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let definition = this._languageService.findDefinition(document, position, stylesheet);
+		const definition = this._languageService.findDefinition(document, position, stylesheet);
 		return Promise.resolve(definition);
 	}
 	async findReferences(uri: string, position: cssService.Position): Promise<cssService.Location[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let references = this._languageService.findReferences(document, position, stylesheet);
+		const references = this._languageService.findReferences(document, position, stylesheet);
 		return Promise.resolve(references);
 	}
 	async findDocumentHighlights(
 		uri: string,
 		position: cssService.Position
 	): Promise<cssService.DocumentHighlight[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let highlights = this._languageService.findDocumentHighlights(document, position, stylesheet);
+		const highlights = this._languageService.findDocumentHighlights(document, position, stylesheet);
 		return Promise.resolve(highlights);
 	}
 	async findDocumentSymbols(uri: string): Promise<cssService.SymbolInformation[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let symbols = this._languageService.findDocumentSymbols(document, stylesheet);
+		const symbols = this._languageService.findDocumentSymbols(document, stylesheet);
 		return Promise.resolve(symbols);
 	}
 	async doCodeActions(
@@ -129,21 +129,21 @@ export class CSSWorker {
 		range: cssService.Range,
 		context: cssService.CodeActionContext
 	): Promise<cssService.Command[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let actions = this._languageService.doCodeActions(document, range, context, stylesheet);
+		const actions = this._languageService.doCodeActions(document, range, context, stylesheet);
 		return Promise.resolve(actions);
 	}
 	async findDocumentColors(uri: string): Promise<cssService.ColorInformation[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let colorSymbols = this._languageService.findDocumentColors(document, stylesheet);
+		const colorSymbols = this._languageService.findDocumentColors(document, stylesheet);
 		return Promise.resolve(colorSymbols);
 	}
 	async getColorPresentations(
@@ -151,12 +151,12 @@ export class CSSWorker {
 		color: cssService.Color,
 		range: cssService.Range
 	): Promise<cssService.ColorPresentation[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let colorPresentations = this._languageService.getColorPresentations(
+		const colorPresentations = this._languageService.getColorPresentations(
 			document,
 			stylesheet,
 			color,
@@ -168,23 +168,23 @@ export class CSSWorker {
 		uri: string,
 		context?: { rangeLimit?: number }
 	): Promise<cssService.FoldingRange[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let ranges = this._languageService.getFoldingRanges(document, context);
+		const ranges = this._languageService.getFoldingRanges(document, context);
 		return Promise.resolve(ranges);
 	}
 	async getSelectionRanges(
 		uri: string,
 		positions: cssService.Position[]
 	): Promise<cssService.SelectionRange[]> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return [];
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let ranges = this._languageService.getSelectionRanges(document, positions, stylesheet);
+		const ranges = this._languageService.getSelectionRanges(document, positions, stylesheet);
 		return Promise.resolve(ranges);
 	}
 	async doRename(
@@ -192,17 +192,30 @@ export class CSSWorker {
 		position: cssService.Position,
 		newName: string
 	): Promise<cssService.WorkspaceEdit | null> {
-		let document = this._getTextDocument(uri);
+		const document = this._getTextDocument(uri);
 		if (!document) {
 			return null;
 		}
-		let stylesheet = this._languageService.parseStylesheet(document);
+		const stylesheet = this._languageService.parseStylesheet(document);
-		let renames = this._languageService.doRename(document, position, newName, stylesheet);
+		const renames = this._languageService.doRename(document, position, newName, stylesheet);
 		return Promise.resolve(renames);
 	}
+	async format(
+		uri: string,
+		range: cssService.Range | null,
+		options: cssService.CSSFormatConfiguration
+	): Promise<cssService.TextEdit[]> {
+		const document = this._getTextDocument(uri);
+		if (!document) {
+			return [];
+		}
+		const settings = { ...this._languageSettings.format, ...options };
+		const textEdits = this._languageService.format(document, range! /* TODO */, settings);
+		return Promise.resolve(textEdits);
+	}
 	private _getTextDocument(uri: string): cssService.TextDocument | null {
-		let models = this._ctx.getMirrorModels();
+		const models = this._ctx.getMirrorModels();
-		for (let model of models) {
+		for (const model of models) {
 			if (model.uri.toString() === uri) {
 				return cssService.TextDocument.create(
 					uri,

src/language/css/monaco.contribution.ts

@@ -6,6 +6,21 @@
 import * as mode from './cssMode';
 import { languages, Emitter, IEvent } from '../../fillers/monaco-editor-core';
 
+export interface CSSFormatConfiguration {
+	/** separate selectors with newline (e.g. "a,\nbr" or "a, br"): Default: true */
+	newlineBetweenSelectors?: boolean;
+	/** add a new line after every css rule: Default: true */
+	newlineBetweenRules?: boolean;
+	/** ensure space around selector separators:  '>', '+', '~' (e.g. "a>b" -> "a > b"): Default: false */
+	spaceAroundSelectorSeparator?: boolean;
+	/** put braces on the same line as rules (`collapse`), or put braces on own line, Allman / ANSI style (`expand`). Default `collapse` */
+	braceStyle?: 'collapse' | 'expand';
+	/** whether existing line breaks before elements should be preserved. Default: true */
+	preserveNewLines?: boolean;
+	/** maximum number of line breaks to be preserved in one chunk. Default: unlimited */
+	maxPreserveNewLines?: number;
+}
+
 export interface Options {
 	readonly validate?: boolean;
 	readonly lint?: {
@@ -32,6 +47,11 @@ export interface Options {
 	 * Configures the CSS data types known by the langauge service.
 	 */
 	readonly data?: CSSDataConfiguration;
+
+	/**
+	 * Settings for the CSS formatter.
+	 */
+	readonly format?: CSSFormatConfiguration;
 }
 
 export interface ModeConfiguration {
@@ -89,6 +109,16 @@ export interface ModeConfiguration {
 	 * Defines whether the built-in selection range provider is enabled.
 	 */
 	readonly selectionRanges?: boolean;
+
+	/**
+	 * Defines whether the built-in document formatting edit provider is enabled.
+	 */
+	readonly documentFormattingEdits?: boolean;
+
+	/**
+	 * Defines whether the built-in document formatting range edit provider is enabled.
+	 */
+	readonly documentRangeFormattingEdits?: boolean;
 }
 
 export interface LanguageServiceDefaults {
@@ -180,7 +210,15 @@ const optionsDefault: Required<Options> = {
 		float: 'ignore',
 		idSelector: 'ignore'
 	},
-	data: { useDefaultDataProvider: true }
+	data: { useDefaultDataProvider: true },
+	format: {
+		newlineBetweenSelectors: true,
+		newlineBetweenRules: true,
+		spaceAroundSelectorSeparator: false,
+		braceStyle: 'collapse',
+		maxPreserveNewLines: undefined,
+		preserveNewLines: true
+	}
 };
 
 const modeConfigurationDefault: Required<ModeConfiguration> = {
@@ -194,7 +232,9 @@ const modeConfigurationDefault: Required<ModeConfiguration> = {
 	colors: true,
 	foldingRanges: true,
 	diagnostics: true,
-	selectionRanges: true
+	selectionRanges: true,
+	documentFormattingEdits: true,
+	documentRangeFormattingEdits: true
 };
 
 export const cssDefaults: LanguageServiceDefaults = new LanguageServiceDefaultsImpl(

src/language/html/monaco.contribution.ts

@@ -27,11 +27,11 @@ export interface CompletionConfiguration {
 
 export interface Options {
 	/**
-	 * If set, comments are tolerated. If set to false, syntax errors will be emitted for comments.
+	 * Settings for the HTML formatter.
 	 */
 	readonly format?: HTMLFormatConfiguration;
 	/**
-	 * A list of known schemas and/or associations of schemas to file names.
+	 * Code completion settings.
 	 */
 	readonly suggest?: CompletionConfiguration;
 	/**

src/language/typescript/languageFeatures.ts

@@ -1124,12 +1124,13 @@ export class CodeActionAdaptor extends FormatHelper implements languages.CodeAct
 		context: languages.CodeActionContext,
 		codeFix: ts.CodeFixAction
 	): languages.CodeAction {
-		const edits: languages.WorkspaceTextEdit[] = [];
+		const edits: languages.IWorkspaceTextEdit[] = [];
 		for (const change of codeFix.changes) {
 			for (const textChange of change.textChanges) {
 				edits.push({
 					resource: model.uri,
-					edit: {
+					versionId: undefined,
+					textEdit: {
 						range: this._textSpanToRange(model, textChange.span),
 						text: textChange.newText
 					}
@@ -1197,13 +1198,14 @@ export class RenameAdapter extends Adapter implements languages.RenameProvider {
 			return;
 		}
 
-		const edits: languages.WorkspaceTextEdit[] = [];
+		const edits: languages.IWorkspaceTextEdit[] = [];
 		for (const renameLocation of renameLocations) {
 			const model = this._libFiles.getOrCreateModel(renameLocation.fileName);
 			if (model) {
 				edits.push({
 					resource: model.uri,
-					edit: {
+					versionId: undefined,
+					textEdit: {
 						range: this._textSpanToRange(model, renameLocation.textSpan),
 						text: newName
 					}
@@ -1259,7 +1261,7 @@ export class InlayHintsAdapter extends Adapter implements languages.InlayHintsPr
 			case 'Type':
 				return languages.InlayHintKind.Type;
 			default:
-				return languages.InlayHintKind.Other;
+				return languages.InlayHintKind.Type;
 		}
 	}
 }

src/language/typescript/tsWorker.ts

@@ -181,6 +181,14 @@ export class TypeScriptWorker implements ts.LanguageServiceHost, ITypeScriptWork
 		return fileName === this.getDefaultLibFileName(this._compilerOptions);
 	}
 
+	readFile(path: string): string | undefined {
+		return this._getScriptText(path);
+	}
+
+	fileExists(path: string): boolean {
+		return this._getScriptText(path) !== undefined;
+	}
+
 	async getLibFiles(): Promise<Record<string, string>> {
 		return libFileMap;
 	}

test/manual/iframe-inner.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body style="height: 100%">
+		<div
+			style="
+				position: absolute;
+				left: 10px;
+				top: 10px;
+				width: 400px;
+				height: 200px;
+				border: 1px solid silver;
+			"
+			id="editor"
+		></div>
+
+		<script src="dev-setup.js"></script>
+		<script>
+			loadEditor(function () {
+				monaco.editor.create(document.getElementById('editor'), {
+					value: `function hello()\n{\treturn 5;\n}`,
+					language: 'javascript'
+				});
+			});
+		</script>
+	</body>
+</html>

test/manual/iframe.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+	</head>
+	<body>
+		<h2>Monaco Editor in iframe</h2>
+
+		<input type="text" style="position: absolute; top: 60px; left: 20px" />
+
+		<iframe
+			src="./iframe-inner.html"
+			style="
+				position: absolute;
+				left: 20px;
+				top: 100px;
+				width: calc(100% - 40px);
+				height: 300px;
+				border: 1px solid silver;
+			"
+		></iframe>
+	</body>
+</html>

test/manual/index.html

@@ -11,6 +11,8 @@
 		<a class="loading-opts" href="./diff.html">[Diff]</a> &#160;|&#160;
 		<a class="loading-opts" href="./typescript/index.html">[TypeScript]</a> &#160;|&#160;
 		<a class="loading-opts" href="./typescript/custom-worker.html">[TS Worker]</a>
+		&#160;|&#160;
+		<a class="loading-opts" href="./iframe.html">[iframe]</a>
 		<br />&#160;|&#160;
 		<a class="loading-opts" href="./cross-origin.html">[cross origin]</a> &#160;|&#160;
 		<a class="loading-opts" href="./mouse-fixed.html">[fixed element]</a> &#160;|&#160;

test/manual/index.js

@@ -1,8 +1,8 @@
 /// <reference path="../../release/monaco.d.ts" />
 define(['require', './samples'], function (require, SAMPLES) {
-	var domutils = require('vs/base/browser/dom');
+	const domutils = require('vs/base/browser/dom');
 
-	var model = monaco.editor.createModel('', 'plaintext');
+	let model = monaco.editor.createModel('', 'plaintext');
 
 	monaco.languages.typescript.typescriptDefaults.setInlayHintsOptions({
 		includeInlayParameterNameHints: 'all',

webpack-plugin/README.md

@@ -30,7 +30,7 @@ module.exports = {
 			},
 			{
 				test: /\.ttf$/,
-				use: ['file-loader']
+				type: 'asset/resource'
 			}
 		]
 	},
@@ -38,6 +38,15 @@ module.exports = {
 };
 ```
 
+If using Webpack 4 or lower, it is necessary to use the file-loader instead of Asset Modules like the code below:
+
+```js
+{
+	test: /\.ttf$/,
+	use: ['file-loader']
+}
+```
+
 - `index.js`:
 
 ```js