Fix 315302 (#2998)

JiuqingSong · web-flow · commit 52461464750a · 2025-04-17T11:38:58.000-07:00
diff --git a/packages/roosterjs-content-model-api/lib/publicApi/format/getFormatState.ts b/packages/roosterjs-content-model-api/lib/publicApi/format/getFormatState.ts
@@ -1,6 +1,10 @@
 import { reducedModelChildProcessor } from '../../modelApi/common/reducedModelChildProcessor';
 import { retrieveModelFormatState } from 'roosterjs-content-model-dom';
-import type { IEditor, ContentModelFormatState, ConflictFormatSolution } from 'roosterjs-content-model-types';
+import type {
+    IEditor,
+    ContentModelFormatState,
+    ConflictFormatSolution,
+} from 'roosterjs-content-model-types';
 
 /**
  * Get current format state
@@ -21,7 +25,13 @@ export function getFormatState(
 
     editor.formatContentModel(
         model => {
-            retrieveModelFormatState(model, pendingFormat, result, conflictSolution);
+            retrieveModelFormatState(
+                model,
+                pendingFormat,
+                result,
+                conflictSolution,
+                editor.getDOMHelper()
+            );
 
             return false;
         },
diff --git a/packages/roosterjs-content-model-api/test/publicApi/format/getFormatStateTest.ts b/packages/roosterjs-content-model-api/test/publicApi/format/getFormatStateTest.ts
@@ -1,9 +1,13 @@
 import * as retrieveModelFormatState from 'roosterjs-content-model-dom/lib/modelApi/editing/retrieveModelFormatState';
-import { ContentModelDocument, ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { ContentModelFormatState } from 'roosterjs-content-model-types';
 import { getFormatState } from '../../../lib/publicApi/format/getFormatState';
 import { IEditor } from 'roosterjs-content-model-types';
 import { reducedModelChildProcessor } from '../../../lib/modelApi/common/reducedModelChildProcessor';
+import {
+    ContentModelDocument,
+    ContentModelSegmentFormat,
+    DOMHelper,
+} from 'roosterjs-content-model-types';
 import {
     createContentModelDocument,
     createDomToModelContext,
@@ -23,6 +27,7 @@ describe('getFormatState', () => {
         expectedModel: ContentModelDocument,
         expectedFormat: ContentModelFormatState
     ) {
+        const mockedDOMHelper: DOMHelper = {} as any;
         const editor = ({
             getSnapshotsManager: () => ({
                 hasNewContent: false,
@@ -31,6 +36,7 @@ describe('getFormatState', () => {
             isDarkMode: () => false,
             getZoomScale: () => 1,
             getPendingFormat: () => pendingFormat,
+            getDOMHelper: () => mockedDOMHelper,
             formatContentModel: (callback: Function) => {
                 const model = createContentModelDocument();
                 const editorDiv = document.createElement('div');
@@ -73,7 +79,8 @@ describe('getFormatState', () => {
                 canRedo: false,
                 isDarkMode: false,
             },
-            'remove'
+            'remove',
+            mockedDOMHelper
         );
         expect(result).toEqual(expectedFormat);
     }
diff --git a/packages/roosterjs-content-model-core/lib/editor/core/DOMHelperImpl.ts b/packages/roosterjs-content-model-core/lib/editor/core/DOMHelperImpl.ts
@@ -1,5 +1,5 @@
 import { isNodeOfType, parseValueWithUnit, toArray } from 'roosterjs-content-model-dom';
-import type { DOMHelper } from 'roosterjs-content-model-types';
+import type { ContentModelSegmentFormat, DOMHelper } from 'roosterjs-content-model-types';
 
 class DOMHelperImpl implements DOMHelper {
     constructor(private contentDiv: HTMLElement) {}
@@ -88,6 +88,31 @@ class DOMHelperImpl implements DOMHelper {
     getClonedRoot(): HTMLElement {
         return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
     }
+
+    /**
+     * Get format of the container element
+     */
+    getContainerFormat(): ContentModelSegmentFormat {
+        const window = this.contentDiv.ownerDocument.defaultView;
+
+        const style = window?.getComputedStyle(this.contentDiv);
+
+        return style
+            ? {
+                  fontSize: style.fontSize,
+                  fontFamily: style.fontFamily,
+                  fontWeight: style.fontWeight,
+                  textColor: style.color,
+                  backgroundColor: style.backgroundColor,
+                  italic: style.fontStyle == 'italic',
+                  letterSpacing: style.letterSpacing,
+                  lineHeight: style.lineHeight,
+                  strikethrough: style.textDecoration?.includes('line-through'),
+                  superOrSubScriptSequence: style.verticalAlign,
+                  underline: style.textDecoration?.includes('underline'),
+              }
+            : {};
+    }
 }
 
 /**
diff --git a/packages/roosterjs-content-model-core/test/editor/core/DOMHelperImplTest.ts b/packages/roosterjs-content-model-core/test/editor/core/DOMHelperImplTest.ts
@@ -366,4 +366,44 @@ describe('DOMHelperImpl', () => {
             expect(cloneSpy).toHaveBeenCalledWith(true);
         });
     });
+
+    describe('getContainerFormat', () => {
+        it('getContainerFormat', () => {
+            const mockedDiv: HTMLDivElement = {
+                ownerDocument: {
+                    defaultView: {
+                        getComputedStyle: () => ({
+                            fontSize: '12px',
+                            fontFamily: 'Arial',
+                            fontWeight: 'bold',
+                            color: 'red',
+                            backgroundColor: 'blue',
+                            fontStyle: 'italic',
+                            letterSpacing: '1px',
+                            lineHeight: '1.5',
+                            textDecoration: 'line-through underline',
+                            verticalAlign: 'super',
+                        }),
+                    },
+                },
+            } as any;
+            const domHelper = createDOMHelper(mockedDiv);
+
+            const result = domHelper.getContainerFormat();
+
+            expect(result).toEqual({
+                fontSize: '12px',
+                fontFamily: 'Arial',
+                fontWeight: 'bold',
+                textColor: 'red',
+                backgroundColor: 'blue',
+                italic: true,
+                letterSpacing: '1px',
+                lineHeight: '1.5',
+                strikethrough: true,
+                superOrSubScriptSequence: 'super',
+                underline: true,
+            });
+        });
+    });
 });
diff --git a/packages/roosterjs-content-model-dom/lib/modelApi/editing/retrieveModelFormatState.ts b/packages/roosterjs-content-model-dom/lib/modelApi/editing/retrieveModelFormatState.ts
@@ -16,6 +16,7 @@ import type {
     ReadonlyContentModelFormatContainer,
     ReadonlyContentModelListItem,
     ReadonlyContentModelDocument,
+    DOMHelper,
 } from 'roosterjs-content-model-types';
 
 /**
@@ -29,13 +30,21 @@ export function retrieveModelFormatState(
     model: ReadonlyContentModelDocument,
     pendingFormat: ContentModelSegmentFormat | null,
     formatState: ContentModelFormatState,
-    conflictSolution: ConflictFormatSolution = 'remove'
+    conflictSolution: ConflictFormatSolution = 'remove',
+    domHelper?: DOMHelper
 ) {
     let firstTableContext: ReadonlyTableSelectionContext | undefined;
     let firstBlock: ReadonlyContentModelBlock | undefined;
     let isFirst = true;
     let isFirstImage = true;
     let isFirstSegment = true;
+    let containerFormat: ContentModelSegmentFormat | undefined = undefined;
+
+    const modelFormat = { ...model.format };
+
+    delete modelFormat.italic;
+    delete modelFormat.underline;
+    delete modelFormat.fontWeight;
 
     iterateSelections(
         model,
@@ -59,29 +68,41 @@ export function retrieveModelFormatState(
                 // Segment formats
                 segments?.forEach(segment => {
                     if (isFirstSegment || segment.segmentType != 'SelectionMarker') {
-                        const modelFormat = { ...model.format };
+                        let currentFormat = Object.assign(
+                            {},
+                            block.format,
+                            block.decorator?.format,
+                            segment.format,
+                            segment.code?.format,
+                            segment.link?.format,
+                            pendingFormat
+                        );
+
+                        // Sometimes the content may not specify all required format but just leverage the container format to do so.
+                        // In this case, we need to merge the container format into the current format
+                        // to make sure the current format contains all required format.
+                        if (!hasAllRequiredFormat(currentFormat)) {
+                            if (!containerFormat) {
+                                containerFormat = domHelper?.getContainerFormat() ?? modelFormat;
+                            }
 
-                        delete modelFormat.italic;
-                        delete modelFormat.underline;
-                        delete modelFormat.fontWeight;
+                            currentFormat = Object.assign({}, containerFormat, currentFormat);
+                        }
 
                         retrieveSegmentFormat(
                             formatState,
                             isFirst,
-                            Object.assign(
-                                {},
-                                modelFormat,
-                                block.format,
-                                block.decorator?.format,
-                                segment.format,
-                                segment.code?.format,
-                                segment.link?.format,
-                                pendingFormat
-                            ),
+                            currentFormat,
                             conflictSolution
                         );
 
-                        mergeValue(formatState, 'isCodeInline', !!segment?.code, isFirst, conflictSolution);
+                        mergeValue(
+                            formatState,
+                            'isCodeInline',
+                            !!segment?.code,
+                            isFirst,
+                            conflictSolution
+                        );
                     }
 
                     // We only care the format of selection marker when it is the first selected segment. This is because when selection marker
@@ -251,7 +272,7 @@ function mergeValue<K extends keyof ContentModelFormatState>(
     newValue: ContentModelFormatState[K] | undefined,
     isFirst: boolean,
     conflictSolution: ConflictFormatSolution = 'remove',
-    parseFn: (val: ContentModelFormatState[K]) => ContentModelFormatState[K] = val => val,
+    parseFn: (val: ContentModelFormatState[K]) => ContentModelFormatState[K] = val => val
 ) {
     if (isFirst) {
         if (newValue !== undefined) {
@@ -285,4 +306,8 @@ function px2Pt(px: string) {
         }
     }
     return px;
-}
+}
+
+function hasAllRequiredFormat(format: ContentModelSegmentFormat) {
+    return !!format.fontFamily && !!format.fontSize && !!format.textColor;
+}
diff --git a/packages/roosterjs-content-model-dom/test/modelApi/editing/retrieveModelFormatStateTest.ts b/packages/roosterjs-content-model-dom/test/modelApi/editing/retrieveModelFormatStateTest.ts
@@ -2,7 +2,6 @@ import * as iterateSelections from '../../../lib/modelApi/selection/iterateSelec
 import { addCode } from '../../../lib/modelApi/common/addDecorators';
 import { addSegment } from '../../../lib/modelApi/common/addSegment';
 import { applyTableFormat } from '../../../lib/modelApi/editing/applyTableFormat';
-import { ContentModelFormatState, ContentModelSegmentFormat } from 'roosterjs-content-model-types';
 import { createContentModelDocument } from '../../../lib/modelApi/creators/createContentModelDocument';
 import { createDivider } from '../../../lib/modelApi/creators/createDivider';
 import { createFormatContainer } from '../../../lib/modelApi/creators/createFormatContainer';
@@ -15,6 +14,11 @@ import { createTable } from '../../../lib/modelApi/creators/createTable';
 import { createTableCell } from '../../../lib/modelApi/creators/createTableCell';
 import { createText } from '../../../lib/modelApi/creators/createText';
 import { retrieveModelFormatState } from '../../../lib/modelApi/editing/retrieveModelFormatState';
+import {
+    ContentModelFormatState,
+    ContentModelSegmentFormat,
+    DOMHelper,
+} from 'roosterjs-content-model-types';
 
 describe('retrieveModelFormatState', () => {
     const segmentFormat: ContentModelSegmentFormat = {
@@ -840,4 +844,37 @@ describe('retrieveModelFormatState', () => {
             canAddImageAltText: false,
         });
     });
+
+    it('No format in model, with dom helper', () => {
+        const model = createContentModelDocument();
+        const result: ContentModelFormatState = {};
+        const para = createParagraph();
+        const text1 = createText('test1');
+
+        text1.isSelected = true;
+
+        spyOn(iterateSelections, 'iterateSelections').and.callFake((path: any, callback) => {
+            callback([path], undefined, para, [text1]);
+            return false;
+        });
+
+        const domHelper: DOMHelper = {
+            getContainerFormat: () => ({ fontFamily: 'a', fontSize: 'b', textColor: 'c' }),
+        } as any;
+
+        retrieveModelFormatState(model, null, result, 'returnMultiple', domHelper);
+
+        expect(result).toEqual({
+            isBlockQuote: false,
+            isBold: false,
+            isSuperscript: false,
+            isSubscript: false,
+            isCodeInline: false,
+            canUnlink: false,
+            canAddImageAltText: false,
+            fontName: 'a',
+            fontSize: 'b',
+            textColor: 'c',
+        });
+    });
 });
diff --git a/packages/roosterjs-content-model-types/lib/parameter/DOMHelper.ts b/packages/roosterjs-content-model-types/lib/parameter/DOMHelper.ts
@@ -1,3 +1,5 @@
+import type { ContentModelSegmentFormat } from '../contentModel/format/ContentModelSegmentFormat';
+
 /**
  * A helper class to provide DOM access APIs
  */
@@ -97,4 +99,9 @@ export interface DOMHelper {
      * Get a deep cloned root element
      */
     getClonedRoot(): HTMLElement;
+
+    /**
+     * Get format of the container element
+     */
+    getContainerFormat(): ContentModelSegmentFormat;
 }
