Fix #2061, apply pending format on Android (#2172)

* Fix #2061 * Fix for Android
microsoft · Oct 31, 2023 · 8f6365f · 8f6365f
1 parent 66e6d95
commit 8f6365f
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 6 deletions.
diff --git a/...t-model/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelFormatPlugin.ts b/...t-model/roosterjs-content-model-editor/lib/editor/corePlugins/ContentModelFormatPlugin.ts
@@ -90,8 +90,12 @@ export default class ContentModelFormatPlugin
 
         switch (event.eventType) {
             case PluginEventType.Input:
+                const env = this.editor.getEnvironment();
+
                 // In Safari, isComposing will be undefined but isInIME() works
-                if (!event.rawEvent.isComposing && !this.editor.isInIME()) {
+                // For Android, we can skip checking isComposing since this property is not always reliable in all IME,
+                // and we have tested without this check it can still work correctly
+                if (env.isAndroid || (!event.rawEvent.isComposing && !this.editor.isInIME())) {
                     this.checkAndApplyPendingFormat(event.rawEvent.data);
                 }
 

diff --git a/...s-content-model/roosterjs-content-model-editor/lib/editor/createContentModelEditorCore.ts b/...s-content-model/roosterjs-content-model-editor/lib/editor/createContentModelEditorCore.ts
@@ -119,7 +119,9 @@ function promoteCoreApi(cmCore: ContentModelEditorCore) {
 }
 
 function promoteEnvironment(cmCore: ContentModelEditorCore) {
+    // It is ok to use global window here since the environment should always be the same for all windows in one session
     cmCore.environment.isMac = window.navigator.appVersion.indexOf('Mac') != -1;
+    cmCore.environment.isAndroid = /android/i.test(window.navigator.userAgent);
 }
 
 function getPluginState(options: ContentModelEditorOptions): ContentModelPluginState {

diff --git a/packages-content-model/roosterjs-content-model-editor/lib/publicTypes/IContentModelEditor.ts b/packages-content-model/roosterjs-content-model-editor/lib/publicTypes/IContentModelEditor.ts
@@ -15,6 +15,11 @@ export interface EditorEnvironment {
      * Whether editor is running on Mac
      */
     isMac?: boolean;
+
+    /**
+     * Whether editor is running on Android
+     */
+    isAndroid?: boolean;
 }
 
 /**

diff --git a/...el/roosterjs-content-model-editor/test/editor/corePlugins/ContentModelFormatPluginTest.ts b/...el/roosterjs-content-model-editor/test/editor/corePlugins/ContentModelFormatPluginTest.ts
@@ -51,6 +51,7 @@ describe('ContentModelFormatPlugin', () => {
             setContentModel,
             isInIME: () => false,
             cacheContentModel: () => {},
+            getEnvironment: () => ({}),
         } as any) as IContentModelEditor;
         const state = {
             defaultFormat: {},
@@ -87,6 +88,7 @@ describe('ContentModelFormatPlugin', () => {
             createContentModel: () => model,
             setContentModel,
             cacheContentModel: () => {},
+            getEnvironment: () => ({}),
         } as any) as IContentModelEditor;
         const state = {
             defaultFormat: {},
@@ -121,6 +123,7 @@ describe('ContentModelFormatPlugin', () => {
             setContentModel,
             isInIME: () => false,
             cacheContentModel: () => {},
+            getEnvironment: () => ({}),
         } as any) as IContentModelEditor;
         const state = {
             defaultFormat: {},
@@ -165,6 +168,7 @@ describe('ContentModelFormatPlugin', () => {
             isDarkMode: () => false,
             triggerPluginEvent: jasmine.createSpy('triggerPluginEvent'),
             getVisibleViewport: jasmine.createSpy('getVisibleViewport'),
+            getEnvironment: () => ({}),
         } as any) as IContentModelEditor;
         const state = {
             defaultFormat: {},
@@ -405,6 +409,7 @@ describe('ContentModelFormatPlugin', () => {
             createContentModel: () => model,
             setContentModel,
             cacheContentModel: () => {},
+            getEnvironment: () => ({}),
         } as any) as IContentModelEditor;
         const state = {
             defaultFormat: {},

diff --git a/...tent-model/roosterjs-content-model-editor/test/editor/createContentModelEditorCoreTest.ts b/...tent-model/roosterjs-content-model-editor/test/editor/createContentModelEditorCoreTest.ts
@@ -143,7 +143,7 @@ describe('createContentModelEditorCore', () => {
             },
             cache: { domIndexer: undefined },
             copyPaste: { allowedCustomPasteType: [] },
-            environment: { isMac: false },
+            environment: { isMac: false, isAndroid: false },
         } as any);
     });
 
@@ -223,7 +223,7 @@ describe('createContentModelEditorCore', () => {
                 domIndexer: undefined,
             },
             copyPaste: { allowedCustomPasteType: [] },
-            environment: { isMac: false },
+            environment: { isMac: false, isAndroid: false },
         } as any);
     });
 
@@ -312,7 +312,7 @@ describe('createContentModelEditorCore', () => {
             },
             cache: { domIndexer: undefined },
             copyPaste: { allowedCustomPasteType: [] },
-            environment: { isMac: false },
+            environment: { isMac: false, isAndroid: false },
         } as any);
     });
 
@@ -384,7 +384,7 @@ describe('createContentModelEditorCore', () => {
             },
             cache: { domIndexer: undefined },
             copyPaste: { allowedCustomPasteType: [] },
-            environment: { isMac: false },
+            environment: { isMac: false, isAndroid: false },
         } as any);
     });
 
@@ -457,7 +457,7 @@ describe('createContentModelEditorCore', () => {
             },
             cache: { domIndexer: contentModelDomIndexer },
             copyPaste: { allowedCustomPasteType: [] },
-            environment: { isMac: false },
+            environment: { isMac: false, isAndroid: false },
         } as any);
     });
 });