Add `_debugComposition` flag

src/vs/editor/browser/controller/textAreaInput.ts

@@ -13,7 +13,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import * as platform from 'vs/base/common/platform';
 import * as strings from 'vs/base/common/strings';
-import { ITextAreaWrapper, ITypeData, TextAreaState } from 'vs/editor/browser/controller/textAreaState';
+import { ITextAreaWrapper, ITypeData, TextAreaState, _debugComposition } from 'vs/editor/browser/controller/textAreaState';
 import { Position } from 'vs/editor/common/core/position';
 import { Selection } from 'vs/editor/common/core/selection';
 import { BrowserFeatures } from 'vs/base/browser/canIUse';
@@ -193,6 +193,10 @@ export class TextAreaInput extends Disposable {
 		}));
 
 		this._register(dom.addDisposableListener(textArea.domNode, 'compositionstart', (e: CompositionEvent) => {
+			if (_debugComposition) {
+				console.log(`[compositionstart]`, e);
+			}
+
 			if (this._isDoingComposition) {
 				return;
 			}
@@ -209,6 +213,9 @@ export class TextAreaInput extends Disposable {
 			) {
 				// Handling long press case on macOS + arrow key => pretend the character was selected
 				if (lastKeyDown.code === 'ArrowRight' || lastKeyDown.code === 'ArrowLeft') {
+					if (_debugComposition) {
+						console.log(`[compositionstart] Handling long press case on macOS + arrow key`, e);
+					}
 					moveOneCharacterLeft = true;
 				}
 			}
@@ -251,6 +258,9 @@ export class TextAreaInput extends Disposable {
 		};
 
 		this._register(dom.addDisposableListener(textArea.domNode, 'compositionupdate', (e: CompositionEvent) => {
+			if (_debugComposition) {
+				console.log(`[compositionupdate]`, e);
+			}
 			const [newState, typeInput] = deduceComposition(e.data || '');
 			this._textAreaState = newState;
 			this._onType.fire(typeInput);
@@ -258,6 +268,9 @@ export class TextAreaInput extends Disposable {
 		}));
 
 		this._register(dom.addDisposableListener(textArea.domNode, 'compositionend', (e: CompositionEvent) => {
+			if (_debugComposition) {
+				console.log(`[compositionend]`, e);
+			}
 			// https://github.com/microsoft/monaco-editor/issues/1663
 			// On iOS 13.2, Chinese system IME randomly trigger an additional compositionend event with empty data
 			if (!this._isDoingComposition) {

src/vs/editor/browser/controller/textAreaState.ts

@@ -8,6 +8,8 @@ import { Position } from 'vs/editor/common/core/position';
 import { Range } from 'vs/editor/common/core/range';
 import { EndOfLinePreference } from 'vs/editor/common/model';
 
+export const _debugComposition = false;
+
 export interface ITextAreaWrapper {
 	getValue(): string;
 	setValue(reason: string, value: string): void;
@@ -59,7 +61,9 @@ export class TextAreaState {
 	}
 
 	public writeToTextArea(reason: string, textArea: ITextAreaWrapper, select: boolean): void {
-		// console.log(Date.now() + ': writeToTextArea ' + reason + ': ' + this.toString());
+		if (_debugComposition) {
+			console.log('writeToTextArea ' + reason + ': ' + this.toString());
+		}
 		textArea.setValue(reason, this.value);
 		if (select) {
 			textArea.setSelectionRange(reason, this.selectionStart, this.selectionEnd);
@@ -105,9 +109,11 @@ export class TextAreaState {
 			};
 		}
 
-		// console.log('------------------------deduceInput');
-		// console.log('PREVIOUS STATE: ' + previousState.toString());
-		// console.log('CURRENT STATE: ' + currentState.toString());
+		if (_debugComposition) {
+			console.log('------------------------deduceInput');
+			console.log('PREVIOUS STATE: ' + previousState.toString());
+			console.log('CURRENT STATE: ' + currentState.toString());
+		}
 
 		let previousValue = previousState.value;
 		let previousSelectionStart = previousState.selectionStart;
@@ -133,8 +139,10 @@ export class TextAreaState {
 		currentSelectionEnd -= prefixLength;
 		previousSelectionEnd -= prefixLength;
 
-		// console.log('AFTER DIFFING PREVIOUS STATE: <' + previousValue + '>, selectionStart: ' + previousSelectionStart + ', selectionEnd: ' + previousSelectionEnd);
-		// console.log('AFTER DIFFING CURRENT STATE: <' + currentValue + '>, selectionStart: ' + currentSelectionStart + ', selectionEnd: ' + currentSelectionEnd);
+		if (_debugComposition) {
+			console.log('AFTER DIFFING PREVIOUS STATE: <' + previousValue + '>, selectionStart: ' + previousSelectionStart + ', selectionEnd: ' + previousSelectionEnd);
+			console.log('AFTER DIFFING CURRENT STATE: <' + currentValue + '>, selectionStart: ' + currentSelectionStart + ', selectionEnd: ' + currentSelectionEnd);
+		}
 
 		if (couldBeEmojiInput && currentSelectionStart === currentSelectionEnd && previousValue.length > 0) {
 			// on OSX, emojis from the emoji picker are inserted at random locations
@@ -196,7 +204,9 @@ export class TextAreaState {
 
 			// no current selection
 			const replacePreviousCharacters = (previousPrefix.length - prefixLength);
-			// console.log('REMOVE PREVIOUS: ' + (previousPrefix.length - prefixLength) + ' chars');
+			if (_debugComposition) {
+				console.log('REMOVE PREVIOUS: ' + (previousPrefix.length - prefixLength) + ' chars');
+			}
 
 			return {
 				text: currentValue,