Patch version to "packages-content-model": "0.26.4" to release Set …

…RootFontSize to SanitizingContext (#2448) * Set RootFontSize to SanitizingContext (#2445) * init * fix Build * Check once if it is Rem Unit * update version
microsoft · Feb 27, 2024 · 0ff89a5 · 0ff89a5
1 parent f12cf2f
commit 0ff89a5
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 27 deletions.
diff --git a/packages-content-model/roosterjs-content-model-core/lib/coreApi/createEditorContext.ts b/packages-content-model/roosterjs-content-model-core/lib/coreApi/createEditorContext.ts
@@ -1,11 +1,5 @@
-import { parseValueWithUnit } from 'roosterjs-content-model-dom';
-import type {
-    EditorContext,
-    CreateEditorContext,
-    StandaloneEditorCore,
-} from 'roosterjs-content-model-types';
-
-const DefaultRootFontSize = 16;
+import { getRootComputedStyleForContext } from '../utils/getRootComputedStyleForContext';
+import type { EditorContext, CreateEditorContext } from 'roosterjs-content-model-types';
 
 /**
  * @internal
@@ -23,8 +17,7 @@ export const createEditorContext: CreateEditorContext = (core, saveIndex) => {
         allowCacheElement: true,
         domIndexer: saveIndex ? cache.domIndexer : undefined,
         zoomScale: domHelper.calculateZoomScale(),
-        rootFontSize:
-            parseValueWithUnit(getRootComputedStyle(core)?.fontSize) || DefaultRootFontSize,
+        ...getRootComputedStyleForContext(contentDiv.ownerDocument),
     };
 
     checkRootRtl(contentDiv, context);
@@ -39,9 +32,3 @@ function checkRootRtl(element: HTMLElement, context: EditorContext) {
         context.isRootRtl = true;
     }
 }
-
-function getRootComputedStyle(core: StandaloneEditorCore) {
-    const document = core.contentDiv.ownerDocument;
-    const rootComputedStyle = document.defaultView?.getComputedStyle(document.documentElement);
-    return rootComputedStyle;
-}
diff --git a/...ges-content-model/roosterjs-content-model-core/lib/publicApi/model/createModelFromHtml.ts b/...ges-content-model/roosterjs-content-model-core/lib/publicApi/model/createModelFromHtml.ts
@@ -26,7 +26,7 @@ export function createModelFromHtml(
         : null;
 
     if (doc?.body) {
-        const context = createDomToModelContextForSanitizing(defaultSegmentFormat, options);
+        const context = createDomToModelContextForSanitizing(doc, defaultSegmentFormat, options);
         const cssRules = doc ? retrieveCssRules(doc) : [];
 
         convertInlineCss(doc, cssRules);

diff --git a/...tent-model/roosterjs-content-model-core/lib/utils/createDomToModelContextForSanitizing.ts b/...tent-model/roosterjs-content-model-core/lib/utils/createDomToModelContextForSanitizing.ts
@@ -2,6 +2,7 @@ import { containerSizeFormatParser } from '../override/containerSizeFormatParser
 import { createDomToModelContext } from 'roosterjs-content-model-dom';
 import { createPasteEntityProcessor } from '../override/pasteEntityProcessor';
 import { createPasteGeneralProcessor } from '../override/pasteGeneralProcessor';
+import { getRootComputedStyleForContext } from './getRootComputedStyleForContext';
 import { pasteBlockEntityParser } from '../override/pasteCopyBlockEntityParser';
 import { pasteDisplayFormatParser } from '../override/pasteDisplayFormatParser';
 import { pasteTextProcessor } from '../override/pasteTextProcessor';
@@ -26,6 +27,7 @@ const DefaultSanitizingOption: DomToModelOptionForSanitizing = {
  * @internal
  */
 export function createDomToModelContextForSanitizing(
+    document: Document,
     defaultFormat?: ContentModelSegmentFormat,
     defaultOption?: DomToModelOption,
     additionalSanitizingOption?: DomToModelOptionForSanitizing
@@ -38,6 +40,7 @@ export function createDomToModelContextForSanitizing(
     return createDomToModelContext(
         {
             defaultFormat,
+            ...getRootComputedStyleForContext(document),
         },
         defaultOption,
         {

diff --git a/...es-content-model/roosterjs-content-model-core/lib/utils/getRootComputedStyleForContext.ts b/...es-content-model/roosterjs-content-model-core/lib/utils/getRootComputedStyleForContext.ts
@@ -0,0 +1,14 @@
+import { parseValueWithUnit } from 'roosterjs-content-model-dom';
+import type { EditorContext } from 'roosterjs-content-model-types';
+
+const DefaultRootFontSize = 16;
+
+/**
+ * @internal
+ */
+export function getRootComputedStyleForContext(
+    document: Document
+): Pick<EditorContext, 'rootFontSize'> {
+    const rootComputedStyle = document.defaultView?.getComputedStyle(document.documentElement);
+    return { rootFontSize: parseValueWithUnit(rootComputedStyle?.fontSize) || DefaultRootFontSize };
+}
diff --git a/packages-content-model/roosterjs-content-model-core/lib/utils/paste/mergePasteContent.ts b/packages-content-model/roosterjs-content-model-core/lib/utils/paste/mergePasteContent.ts
@@ -43,6 +43,7 @@ export function mergePasteContent(
         (model, context) => {
             const selectedSegment = getSelectedSegments(model, true /*includeFormatHolder*/)[0];
             const domToModelContext = createDomToModelContextForSanitizing(
+                core.contentDiv.ownerDocument,
                 undefined /*defaultFormat*/,
                 core.domToModelSettings.customized,
                 domToModelOption

diff --git a/...ontent-model/roosterjs-content-model-core/test/publicApi/model/createModelFromHtmlTest.ts b/...ontent-model/roosterjs-content-model-core/test/publicApi/model/createModelFromHtmlTest.ts
@@ -131,7 +131,11 @@ describe('createModelFromHtml', () => {
             mockedContext
         );
         expect(createContextSpy).toHaveBeenCalledTimes(1);
-        expect(createContextSpy).toHaveBeenCalledWith(mockedDefaultSegmentFormat, mockedOptions);
+        expect(createContextSpy).toHaveBeenCalledWith(
+            mockedDoc,
+            mockedDefaultSegmentFormat,
+            mockedOptions
+        );
         expect(domToContentModelSpy).toHaveBeenCalledWith('BODY' as any, mockedContext);
         expect(retrieveCssRulesSpy).toHaveBeenCalledWith(mockedDoc);
         expect(convertInlineCssSpy).toHaveBeenCalledWith(mockedDoc, mockedRules);

diff --git a/...model/roosterjs-content-model-core/test/utils/createDomToModelContextForSanitizingTest.ts b/...model/roosterjs-content-model-core/test/utils/createDomToModelContextForSanitizingTest.ts
@@ -43,12 +43,13 @@ describe('createDomToModelContextForSanitizing', () => {
     });
 
     it('no options', () => {
-        const context = createDomToModelContextForSanitizing();
+        const context = createDomToModelContextForSanitizing(document);
 
         expect(context).toBe(mockedResult);
         expect(createDomToModelContextSpy).toHaveBeenCalledWith(
             {
                 defaultFormat: undefined,
+                rootFontSize: 16,
             },
             undefined,
             {
@@ -77,6 +78,7 @@ describe('createDomToModelContextForSanitizing', () => {
         const mockedAdditionalOption = { a: 'b' } as any;
 
         const context = createDomToModelContextForSanitizing(
+            document,
             mockedDefaultFormat,
             mockedOption,
             mockedAdditionalOption
@@ -91,6 +93,7 @@ describe('createDomToModelContextForSanitizing', () => {
         expect(createDomToModelContextSpy).toHaveBeenCalledWith(
             {
                 defaultFormat: mockedDefaultFormat,
+                rootFontSize: 16,
             },
             mockedOption,
             {

diff --git a/...ages-content-model/roosterjs-content-model-core/test/utils/paste/mergePasteContentTest.ts b/...ages-content-model/roosterjs-content-model-core/test/utils/paste/mergePasteContentTest.ts
@@ -51,6 +51,9 @@ describe('mergePasteContent', () => {
                 formatContentModel,
             },
             domToModelSettings: {},
+            contentDiv: <any>{
+                ownerDocument: document,
+            },
         } as any;
     });
 
@@ -399,6 +402,7 @@ describe('mergePasteContent', () => {
             mergeTable: false,
         });
         expect(createDomToModelContextSpy).toHaveBeenCalledWith(
+            document,
             undefined,
             mockedDomToModelOptions,
             mockedDefaultDomToModelOptions

diff --git a/...ent-model/roosterjs-content-model-dom/lib/formatHandlers/segment/fontSizeFormatHandler.ts b/...ent-model/roosterjs-content-model-dom/lib/formatHandlers/segment/fontSizeFormatHandler.ts
@@ -50,6 +50,7 @@ function normalizeFontSize(
     context: EditorContext
 ): string | undefined {
     const knownFontSize = KnownFontSizes[fontSize];
+    const isRemUnit = fontSize.endsWith('rem');
 
     if (knownFontSize) {
         return knownFontSize;
@@ -58,16 +59,14 @@ function normalizeFontSize(
         fontSize == 'larger' ||
         fontSize.endsWith('em') ||
         fontSize.endsWith('%') ||
-        fontSize.endsWith('rem')
+        isRemUnit
     ) {
-        if (!contextFont) {
+        if (!contextFont && !isRemUnit) {
             return undefined;
         } else {
-            const existingFontSize = parseValueWithUnit(
-                contextFont,
-                fontSize.endsWith('rem') ? context.rootFontSize : undefined /*element*/,
-                'px'
-            );
+            const existingFontSize = isRemUnit
+                ? context.rootFontSize
+                : parseValueWithUnit(contextFont);
 
             if (existingFontSize) {
                 switch (fontSize) {

diff --git a/...odel/roosterjs-content-model-dom/test/formatHandlers/segment/fontSizeFormatHandlerTest.ts b/...odel/roosterjs-content-model-dom/test/formatHandlers/segment/fontSizeFormatHandlerTest.ts
@@ -167,6 +167,25 @@ describe('fontSizeFormatHandler.parse', () => {
 
         expect(format.fontSize).toBe('8px');
     });
+
+    it('rem handling', () => {
+        div.style.fontSize = '0.75rem';
+        context.rootFontSize = 16;
+        context.segmentFormat.fontSize = '12pt';
+
+        fontSizeFormatHandler.parse(format, div, context, {});
+
+        expect(format.fontSize).toBe('12px');
+    });
+
+    it('rem handling without segment format', () => {
+        div.style.fontSize = '0.75rem';
+        context.rootFontSize = 16;
+
+        fontSizeFormatHandler.parse(format, div, context, {});
+
+        expect(format.fontSize).toBe('12px');
+    });
 });
 
 describe('fontSizeFormatHandler.apply', () => {

diff --git a/versions.json b/versions.json
@@ -1,7 +1,7 @@
 {
     "packages": "8.60.0",
     "packages-ui": "8.55.0",
-    "packages-content-model": "0.26.3",
+    "packages-content-model": "0.26.4",
     "overrides": {
         "roosterjs-editor-plugins": "8.60.2",
         "roosterjs-editor-adapter": "0.26.2"