Normalize default format

packages/roosterjs-content-model-core/lib/corePlugin/format/FormatPlugin.ts

@@ -6,6 +6,7 @@ import {
     isCharacterValue,
     isCursorMovingKey,
     isNodeOfType,
+    normalizeSegmentFormat,
 } from 'roosterjs-content-model-dom';
 import type {
     BackgroundColorFormat,
@@ -78,6 +79,11 @@ class FormatPlugin implements PluginWithState<FormatPluginState> {
      */
     initialize(editor: IEditor) {
         this.editor = editor;
+
+        this.state.defaultFormat = normalizeSegmentFormat(
+            this.state.defaultFormat,
+            editor.getEnvironment()
+        );
     }
 
     /**

packages/roosterjs-content-model-core/test/corePlugin/format/FormatPluginTest.ts

@@ -2,7 +2,11 @@ import * as applyDefaultFormat from '../../../lib/corePlugin/format/applyDefault
 import * as applyPendingFormat from '../../../lib/corePlugin/format/applyPendingFormat';
 import { createContentModelDocument } from 'roosterjs-content-model-dom';
 import { createFormatPlugin } from '../../../lib/corePlugin/format/FormatPlugin';
-import { IEditor } from 'roosterjs-content-model-types';
+import { EditorEnvironment, IEditor } from 'roosterjs-content-model-types';
+import {
+    createDomToModelSettings,
+    createModelToDomSettings,
+} from '../../../lib/editor/core/createEditorDefaultSettings';
 
 describe('FormatPlugin', () => {
     const mockedFormat = {
@@ -12,6 +16,10 @@ describe('FormatPlugin', () => {
         lineSpace: 2,
     };
     let applyPendingFormatSpy: jasmine.Spy;
+    const mockedEnvironment = {
+        domToModelSettings: createDomToModelSettings({}),
+        modelToDomSettings: createModelToDomSettings({}),
+    } as EditorEnvironment;
 
     beforeEach(() => {
         applyPendingFormatSpy = spyOn(applyPendingFormat, 'applyPendingFormat');
@@ -21,7 +29,7 @@ describe('FormatPlugin', () => {
         const editor = ({
             cacheContentModel: () => {},
             isDarkMode: () => false,
-            getEnvironment: () => ({}),
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
         const plugin = createFormatPlugin({});
         plugin.initialize(editor);
@@ -43,7 +51,7 @@ describe('FormatPlugin', () => {
             createContentModel: () => model,
             isInIME: () => false,
             cacheContentModel: () => {},
-            getEnvironment: () => ({}),
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
         const plugin = createFormatPlugin({});
         const model = createContentModelDocument();
@@ -86,6 +94,7 @@ describe('FormatPlugin', () => {
             isDarkMode: () => false,
             triggerEvent,
             getVisibleViewport,
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
         const plugin = createFormatPlugin({});
         const state = plugin.getState();
@@ -111,7 +120,7 @@ describe('FormatPlugin', () => {
         const editor = ({
             createContentModel: () => model,
             cacheContentModel: () => {},
-            getEnvironment: () => ({}),
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
 
         const plugin = createFormatPlugin({});
@@ -144,6 +153,7 @@ describe('FormatPlugin', () => {
                 callback();
             },
             cacheContentModel: () => {},
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
 
         const plugin = createFormatPlugin({});
@@ -173,6 +183,7 @@ describe('FormatPlugin', () => {
         const editor = ({
             createContentModel: () => model,
             cacheContentModel: () => {},
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
         const plugin = createFormatPlugin({});
 
@@ -202,7 +213,7 @@ describe('FormatPlugin', () => {
         const editor = ({
             createContentModel: () => model,
             cacheContentModel: () => {},
-            getEnvironment: () => ({}),
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
         const plugin = createFormatPlugin({});
         const state = plugin.getState();
@@ -236,6 +247,11 @@ describe('FormatPlugin for default format', () => {
     let cacheContentModelSpy: jasmine.Spy;
     let formatContentModelSpy: jasmine.Spy;
 
+    const mockedEnvironment = {
+        domToModelSettings: createDomToModelSettings({}),
+        modelToDomSettings: createModelToDomSettings({}),
+    } as EditorEnvironment;
+
     beforeEach(() => {
         getPendingFormatSpy = jasmine.createSpy('getPendingFormat');
         getDOMSelection = jasmine.createSpy('getDOMSelection');
@@ -251,7 +267,7 @@ describe('FormatPlugin for default format', () => {
             getPendingFormat: getPendingFormatSpy,
             cacheContentModel: cacheContentModelSpy,
             formatContentModel: formatContentModelSpy,
-            getEnvironment: () => ({}),
+            getEnvironment: () => mockedEnvironment,
         } as any) as IEditor;
     });
 

packages/roosterjs-content-model-dom/lib/index.ts

@@ -74,6 +74,7 @@ export { addSegment } from './modelApi/common/addSegment';
 export { isEmpty } from './modelApi/common/isEmpty';
 export { normalizeSingleSegment } from './modelApi/common/normalizeSegment';
 export { mergeTextSegments } from './modelApi/common/mergeTextSegments';
+export { normalizeSegmentFormat } from './modelApi/common/normalizeSegmentFormat';
 
 export { setParagraphNotImplicit } from './modelApi/block/setParagraphNotImplicit';
 export { getOrderedListNumberStr } from './modelApi/list/getOrderedListNumberStr';

packages/roosterjs-content-model-dom/lib/modelApi/common/normalizeSegmentFormat.ts

@@ -0,0 +1,47 @@
+import { createContentModelDocument } from '../creators/createContentModelDocument';
+import { createText } from '../creators/createText';
+import { ensureParagraph } from './ensureParagraph';
+import { createModelToDomContextWithConfig } from '../../modelToDom/context/createModelToDomContext';
+import { createDomToModelContextWithConfig } from '../../domToModel/context/createDomToModelContext';
+import type {
+    ContentModelSegmentFormat,
+    DomToModelContext,
+    EditorEnvironment,
+    ModelToDomContext,
+} from 'roosterjs-content-model-types';
+
+/**
+ * Some format values can be changed when apply to DOM, such as font family.
+ * This function will normalize the format and return the same string after DOM modification.
+ * @param format The format to be normalized
+ * @return Normalized format
+ */
+export function normalizeSegmentFormat(
+    format: ContentModelSegmentFormat,
+    environment: EditorEnvironment
+): ContentModelSegmentFormat {
+    const span = document.createElement('span');
+    const segment = createText('text', format);
+
+    const domToModelContext: DomToModelContext = createDomToModelContextWithConfig(
+        environment.domToModelSettings.calculated
+    );
+    const modelToDomContext: ModelToDomContext = createModelToDomContextWithConfig(
+        environment.modelToDomSettings.calculated
+    );
+    const model = createContentModelDocument();
+
+    modelToDomContext.modelHandlers.segment(
+        span.ownerDocument,
+        span,
+        segment,
+        modelToDomContext,
+        []
+    );
+
+    domToModelContext.elementProcessors.element(model, span, domToModelContext);
+
+    const paragraph = ensureParagraph(model);
+
+    return paragraph.segments[0]?.format ?? format;
+}

packages/roosterjs-content-model-dom/test/modelApi/common/normalizeSegmentFormatTest.ts

@@ -0,0 +1,79 @@
+import { ContentModelSegmentFormat, EditorEnvironment } from 'roosterjs-content-model-types';
+import { createDomToModelConfig } from '../../../lib/domToModel/context/createDomToModelContext';
+import { createModelToDomConfig } from '../../../lib/modelToDom/context/createModelToDomContext';
+import { normalizeSegmentFormat } from '../../../lib/modelApi/common/normalizeSegmentFormat';
+
+describe('normalizeSegmentFormat', () => {
+    let environment: EditorEnvironment;
+
+    beforeEach(() => {
+        environment = {
+            domToModelSettings: {
+                calculated: createDomToModelConfig([]),
+            },
+            modelToDomSettings: {
+                calculated: createModelToDomConfig([]),
+            },
+        } as EditorEnvironment;
+    });
+
+    it('empty format', () => {
+        const format: ContentModelSegmentFormat = {};
+
+        const result = normalizeSegmentFormat(format, environment);
+
+        expect(result).toEqual({});
+    });
+
+    it('Basic format', () => {
+        const format: ContentModelSegmentFormat = {
+            fontFamily: 'Font1',
+            fontSize: '20px',
+            textColor: 'red',
+        };
+
+        const result = normalizeSegmentFormat(format, environment);
+
+        expect(result).toEqual({
+            fontFamily: 'Font1',
+            fontSize: '20px',
+            textColor: 'red',
+        });
+    });
+
+    it('Format needs to be normalized', () => {
+        const format: ContentModelSegmentFormat = {
+            fontFamily: 'Font1,Font2,"Font 3"',
+            fontSize: '20pt',
+            textColor: '#123456',
+            backgroundColor: '#654321',
+        };
+
+        const result = normalizeSegmentFormat(format, environment);
+
+        expect(result).toEqual({
+            fontFamily: 'Font1, Font2, "Font 3"',
+            fontSize: '20pt',
+            textColor: 'rgb(18, 52, 86)',
+            backgroundColor: 'rgb(101, 67, 33)',
+        });
+    });
+
+    it('Structured format', () => {
+        const format: ContentModelSegmentFormat = {
+            fontWeight: 'bold',
+            italic: true,
+            underline: true,
+            letterSpacing: '2px',
+        };
+
+        const result = normalizeSegmentFormat(format, environment);
+
+        expect(result).toEqual({
+            letterSpacing: '2px',
+            fontWeight: 'bold',
+            italic: true,
+            underline: true,
+        });
+    });
+});