fix: monaco caused by the failure of window.addEventListener('compositionstart', () => {}) (#4508)

* fix: monaco caused by the failure of window.addEventListener('compositionstart', () => {})

* fix: monaco caused by the failure of window.addEventListener('compositionstart', () => {})

* fix: monaco caused by the failure of window.addEventListener('compositionstart', () => {})

* fix: monaco caused by the failure of window.addEventListener('compositionstart', () => {})

Author: wangxiaojuan

packages/core-browser/src/bootstrap/app.ts

@@ -487,12 +487,12 @@ export class ClientApp implements IClientApp, IDisposable {
   protected registerEventListeners(): void {
     window.addEventListener('beforeunload', this._handleBeforeUpload);
     window.addEventListener('unload', this._handleUnload);
-
     window.addEventListener('resize', this._handleResize);
+
     // 处理中文输入回退时可能出现多个光标问题
     // https://github.com/eclipse-theia/theia/pull/6673
-    window.addEventListener('compositionstart', this._handleCompositionstart);
-    window.addEventListener('compositionend', this._handleCompositionend);
+    window.addEventListener('compositionstart', this.keybindingService?.handleCompositionStart);
+    window.addEventListener('compositionend', this.keybindingService?.handleCompositionEnd);
     window.addEventListener('keydown', this._handleKeydown, true);
     window.addEventListener('keyup', this._handleKeyup, true);
 
@@ -589,8 +589,8 @@ export class ClientApp implements IClientApp, IDisposable {
     window.removeEventListener('beforeunload', this._handleBeforeUpload);
     window.removeEventListener('unload', this._handleUnload);
     window.removeEventListener('resize', this._handleResize);
-    window.removeEventListener('compositionstart', this._handleCompositionstart);
-    window.removeEventListener('compositionend', this._handleCompositionend);
+    window.removeEventListener('compositionstart', this.keybindingService?.handleCompositionStart);
+    window.removeEventListener('compositionend', this.keybindingService?.handleCompositionEnd);
     window.removeEventListener('keydown', this._handleKeydown, true);
     if (isOSX) {
       document.body.removeEventListener('wheel', this._handleWheel);
@@ -660,7 +660,7 @@ export class ClientApp implements IClientApp, IDisposable {
   };
 
   private _handleKeydown = (event: any) => {
-    if (event && event.target!.name !== NO_KEYBINDING_NAME && !this._inComposition) {
+    if (event && event.target!.name !== NO_KEYBINDING_NAME) {
       this.keybindingService.run(event);
     }
   };
@@ -669,14 +669,6 @@ export class ClientApp implements IClientApp, IDisposable {
     this.keybindingService.resolveModifierKey(event);
   };
 
-  private _handleCompositionstart = () => {
-    this._inComposition = true;
-  };
-
-  private _handleCompositionend = () => {
-    this._inComposition = false;
-  };
-
   private _handleWheel = () => {
     // 屏蔽在OSX系统浏览器中由于滚动导致的前进后退事件
   };

packages/core-browser/src/keybinding/keybinding.ts

@@ -190,6 +190,8 @@ export interface KeybindingService {
    * @param when
    */
   convertMonacoWhen(when: any): string;
+  handleCompositionStart(): void;
+  handleCompositionEnd(): void;
 }
 
 @Injectable()
@@ -230,6 +232,8 @@ export class KeybindingRegistryImpl implements KeybindingRegistry, KeybindingSer
   @Autowired(IStatusBarService)
   protected readonly statusBar: IStatusBarService;
 
+  private _inComposition = false;
+
   public async initialize(): Promise<void> {
     await this.keyboardLayoutService.initialize();
     this.keyboardLayoutService.onKeyboardLayoutChanged(() => {
@@ -243,6 +247,14 @@ export class KeybindingRegistryImpl implements KeybindingRegistry, KeybindingSer
 
   protected keybindingsChanged = new Emitter<{ affectsCommands: string[] }>();
 
+  public handleCompositionStart = () => {
+    this._inComposition = true;
+  };
+
+  public handleCompositionEnd = () => {
+    this._inComposition = false;
+  };
+
   /**
    * 由于不同的键盘布局发生更改时触发的事件。
    */
@@ -807,6 +819,9 @@ export class KeybindingRegistryImpl implements KeybindingRegistry, KeybindingSer
    * @param event 键盘事件
    */
   public run(event: KeyboardEvent): void {
+    if (this._inComposition) {
+      return;
+    }
     if (event.defaultPrevented) {
       return;
     }

packages/monaco/src/browser/monaco.service.ts

@@ -3,6 +3,7 @@ import {
   Disposable,
   ILogger,
   KeybindingRegistry,
+  KeybindingService,
   MonacoOverrideServiceRegistry,
   ServiceNames,
 } from '@opensumi/ide-core-browser';
@@ -44,6 +45,9 @@ export default class MonacoServiceImpl extends Disposable implements MonacoServi
   @Autowired(KeybindingRegistry)
   private readonly keybindingRegistry: KeybindingRegistry;
 
+  @Autowired(KeybindingService)
+  protected readonly keybindingService: KeybindingService;
+
   @Autowired(ILogger)
   private readonly logger: ILogger;
 
@@ -105,6 +109,19 @@ export default class MonacoServiceImpl extends Disposable implements MonacoServi
     );
   }
 
+  private doAddCompositionEventListener(editor: ICodeEditor) {
+    this.addDispose(
+      editor.onDidCompositionStart((e) => {
+        this.keybindingService?.handleCompositionStart();
+      }),
+    );
+    this.addDispose(
+      editor.onDidCompositionEnd((e) => {
+        this.keybindingService?.handleCompositionEnd();
+      }),
+    );
+  }
+
   private addClickEventListener(editor: IEditorType) {
     if (isDiffEditor(editor)) {
       const originalEditor = editor.getOriginalEditor();
@@ -114,6 +131,7 @@ export default class MonacoServiceImpl extends Disposable implements MonacoServi
       this.doAddClickEventListener(modifiedEditor);
     } else {
       this.doAddClickEventListener(editor as ICodeEditor);
+      this.doAddCompositionEventListener(editor as ICodeEditor);
     }
   }