Fix test

microsoft · Nov 21, 2024 · 0daeed9 · 0daeed9
1 parent 4797113
commit 0daeed9
Show file tree

Hide file tree

Showing 8 changed files with 360 additions and 77 deletions.
diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts b/packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts
@@ -17,6 +17,7 @@ import type {
     PluginWithState,
     EditorOptions,
     TextColorFormat,
+    DOMHelper,
 } from 'roosterjs-content-model-types';
 
 // During IME input, KeyDown event will have "Process" as key
@@ -125,7 +126,7 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
                     this.clearPendingFormat();
                     this.lastCheckedNode = null;
                 } else if (
-                    this.defaultFormatKeys.size > 0 &&
+                    (this.defaultFormatKeys.size > 0 || this.state.applyDefaultFormatChecker) &&
                     (isAndroidIME ||
                         isCharacterValue(event.rawEvent) ||
                         event.rawEvent.key == ProcessKey) &&
@@ -193,37 +194,42 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
             let element: HTMLElement | null = isNodeOfType(posContainer, 'ELEMENT_NODE')
                 ? posContainer
                 : posContainer.parentElement;
-            const foundFormatKeys = new Set<keyof CSSStyleDeclaration>();
 
-            if (element && this.state.applyDefaultFormatChecker?.(element, editor.getDOMHelper())) {
-                return true;
-            }
+            return (
+                (element && this.state.applyDefaultFormatChecker?.(element, domHelper)) ||
+                (this.defaultFormatKeys.size > 0 &&
+                    this.cssDefaultFormatChecker(element, domHelper))
+            );
+        } else {
+            return false;
+        }
+    }
+
+    private cssDefaultFormatChecker(element: HTMLElement | null, domHelper: DOMHelper): boolean {
+        const foundFormatKeys = new Set<keyof CSSStyleDeclaration>();
 
-            while (element?.parentElement && domHelper.isNodeInEditor(element.parentElement)) {
-                if (element.getAttribute?.('style')) {
-                    const style = element.style;
-                    this.defaultFormatKeys.forEach(key => {
-                        if (style[key]) {
-                            foundFormatKeys.add(key);
-                        }
-                    });
-
-                    if (foundFormatKeys.size == this.defaultFormatKeys.size) {
-                        return false;
+        while (element?.parentElement && domHelper.isNodeInEditor(element.parentElement)) {
+            if (element.getAttribute?.('style')) {
+                const style = element.style;
+                this.defaultFormatKeys.forEach(key => {
+                    if (style[key]) {
+                        foundFormatKeys.add(key);
                     }
-                }
+                });
 
-                if (isBlockElement(element)) {
-                    break;
+                if (foundFormatKeys.size == this.defaultFormatKeys.size) {
+                    return false;
                 }
+            }
 
-                element = element.parentElement;
+            if (isBlockElement(element)) {
+                break;
             }
 
-            return true;
-        } else {
-            return false;
+            element = element.parentElement;
         }
+
+        return true;
     }
 }
 

diff --git a/packages/roosterjs-content-model-core/lib/corePlugin/format/applyDefaultFormat.ts b/packages/roosterjs-content-model-core/lib/corePlugin/format/applyDefaultFormat.ts
@@ -10,9 +10,7 @@ import type { ContentModelSegmentFormat, IEditor } from 'roosterjs-content-model
 export function applyDefaultFormat(editor: IEditor, defaultFormat: ContentModelSegmentFormat) {
     const selection = editor.getDOMSelection();
 
-    if (!selection) {
-        // NO OP, should never happen
-    } else if (selection?.type == 'range' && selection.range.collapsed) {
+    if (selection?.type == 'range' && selection.range.collapsed) {
         editor.formatContentModel((model, context) => {
             iterateSelections(model, (path, _, paragraph, segments) => {
                 const marker = segments?.[0];
@@ -62,8 +60,6 @@ export function applyDefaultFormat(editor: IEditor, defaultFormat: ContentModelS
             // We didn't do any change but just apply default format to pending format, so no need to write back
             return false;
         });
-    } else {
-        editor.takeSnapshot();
     }
 }
 

diff --git a/...es/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts b/...es/roosterjs-content-model-core/test/coreApi/formatContentModel/formatContentModelTest.ts
@@ -622,6 +622,7 @@ describe('formatContentModel', () => {
             core.format = {
                 defaultFormat: {},
                 pendingFormat: null,
+                applyDefaultFormatChecker: null,
             };
 
             const mockedRange = {

diff --git a/packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts b/packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts
@@ -225,14 +225,12 @@ describe('FormatPlugin for default format', () => {
     let getDOMSelection: jasmine.Spy;
     let getPendingFormatSpy: jasmine.Spy;
     let cacheContentModelSpy: jasmine.Spy;
-    let takeSnapshotSpy: jasmine.Spy;
     let formatContentModelSpy: jasmine.Spy;
 
     beforeEach(() => {
         getPendingFormatSpy = jasmine.createSpy('getPendingFormat');
         getDOMSelection = jasmine.createSpy('getDOMSelection');
         cacheContentModelSpy = jasmine.createSpy('cacheContentModel');
-        takeSnapshotSpy = jasmine.createSpy('takeSnapshot');
         formatContentModelSpy = jasmine.createSpy('formatContentModelSpy');
         contentDiv = document.createElement('div');
 
@@ -243,7 +241,6 @@ describe('FormatPlugin for default format', () => {
             getDOMSelection,
             getPendingFormat: getPendingFormatSpy,
             cacheContentModel: cacheContentModelSpy,
-            takeSnapshot: takeSnapshotSpy,
             formatContentModel: formatContentModelSpy,
             getEnvironment: () => ({}),
         } as any) as IEditor;
@@ -355,7 +352,6 @@ describe('FormatPlugin for default format', () => {
         });
 
         expect(context).toEqual({});
-        expect(takeSnapshotSpy).toHaveBeenCalledTimes(1);
     });
 
     it('Collapsed range, IME input, under editor directly', () => {
@@ -685,3 +681,81 @@ describe('FormatPlugin for default format', () => {
         expect(applyDefaultFormatSpy).not.toHaveBeenCalled();
     });
 });
+
+describe('FormatPlugin with default style checker', () => {
+    it('style checker return false', () => {
+        const div = document.createElement('div');
+        const getDOMSelection = jasmine.createSpy('getDOMSelection').and.returnValue({
+            type: 'range',
+            range: {
+                startContainer: div,
+                startOffset: 0,
+                collapsed: true,
+            },
+        });
+        const domHelper = 'HELPER' as any;
+        const getDOMHelper = jasmine.createSpy('getDOMHelper').and.returnValue(domHelper);
+
+        const editor = ({
+            cacheContentModel: () => {},
+            isDarkMode: () => false,
+            getEnvironment: () => ({}),
+            getDOMSelection,
+            getDOMHelper,
+        } as any) as IEditor;
+        const applyDefaultFormatSpy = spyOn(applyDefaultFormat, 'applyDefaultFormat');
+        const styleChecker = jasmine.createSpy('styleCheker').and.returnValue(false);
+        const plugin = createFormatPlugin({ applyDefaultFormatChecker: styleChecker });
+
+        plugin.initialize(editor);
+
+        plugin.onPluginEvent({
+            eventType: 'keyDown',
+            rawEvent: ({ key: 'a' } as any) as KeyboardEvent,
+        });
+
+        plugin.dispose();
+
+        expect(styleChecker).toHaveBeenCalledWith(div, domHelper);
+        expect(plugin.getState().pendingFormat).toBeNull();
+        expect(applyDefaultFormatSpy).not.toHaveBeenCalled();
+    });
+
+    it('style checker return true', () => {
+        const div = document.createElement('div');
+        const getDOMSelection = jasmine.createSpy('getDOMSelection').and.returnValue({
+            type: 'range',
+            range: {
+                startContainer: div,
+                startOffset: 0,
+                collapsed: true,
+            },
+        });
+        const domHelper = 'HELPER' as any;
+        const getDOMHelper = jasmine.createSpy('getDOMHelper').and.returnValue(domHelper);
+
+        const editor = ({
+            cacheContentModel: () => {},
+            isDarkMode: () => false,
+            getEnvironment: () => ({}),
+            getDOMSelection,
+            getDOMHelper,
+        } as any) as IEditor;
+        const applyDefaultFormatSpy = spyOn(applyDefaultFormat, 'applyDefaultFormat');
+        const styleChecker = jasmine.createSpy('styleCheker').and.returnValue(true);
+        const plugin = createFormatPlugin({ applyDefaultFormatChecker: styleChecker });
+
+        plugin.initialize(editor);
+
+        plugin.onPluginEvent({
+            eventType: 'keyDown',
+            rawEvent: ({ key: 'a' } as any) as KeyboardEvent,
+        });
+
+        plugin.dispose();
+
+        expect(styleChecker).toHaveBeenCalledWith(div, domHelper);
+        expect(plugin.getState().pendingFormat).toBeNull();
+        expect(applyDefaultFormatSpy).toHaveBeenCalledWith(editor, {});
+    });
+});