Merge branch 'u/juliaroldi/preserve-cursor-postion-yab' of https://github.com/microsoft/roosterjs into u/juliaroldi/preserve-cursor-postion-yab

Author: juliaroldi

karma.fast.conf.js

@@ -1,5 +1,7 @@
 const argv = require('minimist')(process.argv.slice(2));
 const components = argv.components !== true && argv.components;
+const testPathPattern = argv.testPathPattern !== true && argv.testPathPattern;
+const testNamePattern = argv.testNamePattern !== true && argv.testNamePattern;
 const runCoverage = typeof argv.coverage !== 'undefined';
 const runFirefox = typeof argv.firefox !== 'undefined';
 const runChrome = typeof argv.chrome !== 'undefined';
@@ -69,8 +71,13 @@ module.exports = function (config) {
         plugins,
         client: {
             components: components,
+            testPathPattern: testPathPattern,
+            testNamePattern: testNamePattern,
             clearContext: false,
             captureConsole: true,
+            jasmine: {
+                grep: testNamePattern || null,
+            },
         },
         browsers: launcher,
         files: ['tools/karma.test.all.js'],

package.json

@@ -83,7 +83,7 @@
         "typedoc-plugin-remove-references": "0.0.5",
         "typescript": "4.4.4",
         "url-loader": "4.1.0",
-        "webpack": "5.94.0",
+        "webpack": "5.104.1",
         "webpack-cli": "3.3.11",
         "webpack-dev-server": "3.10.3"
     },

packages/roosterjs-content-model-core/lib/editor/Editor.ts

@@ -310,7 +310,8 @@ export class Editor implements IEditor {
                 core.darkColorHandler,
                 {
                     tableBorders: this.isExperimentalFeatureEnabled('TransformTableBorderColors'),
-                }
+                },
+                core.format.defaultFormat.textColor
             );
 
             core.lifecycle.isDarkMode = !!isDarkMode;

packages/roosterjs-content-model-core/test/editor/EditorTest.ts

@@ -1016,7 +1016,8 @@ describe('Editor', () => {
             mockedColorHandler,
             {
                 tableBorders: false,
-            }
+            },
+            undefined
         );
         expect(mockedCore.lifecycle.isDarkMode).toEqual(true);
         expect(triggerEventSpy).toHaveBeenCalledTimes(1);
@@ -1041,7 +1042,8 @@ describe('Editor', () => {
             mockedColorHandler,
             {
                 tableBorders: false,
-            }
+            },
+            undefined
         );
         expect(triggerEventSpy).toHaveBeenCalledTimes(2);
         expect(triggerEventSpy).toHaveBeenCalledWith(

packages/roosterjs-content-model-dom/lib/domUtils/style/transformColor.ts

@@ -30,23 +30,34 @@ export function transformColor(
     includeSelf: boolean,
     direction: 'lightToDark' | 'darkToLight',
     darkColorHandler?: DarkColorHandler,
-    transformColorOptions?: TransformColorOptions
+    transformColorOptions?: TransformColorOptions,
+    defaultTextColor?: string
 ) {
     const toDarkMode = direction == 'lightToDark';
     const tableBorders = transformColorOptions?.tableBorders || false;
-    const transformer = (element: HTMLElement) => {
+    const transformer = (element: HTMLElement, parentTextColor?: string) => {
         const textColor = getColor(element, false /*isBackground*/, !toDarkMode, darkColorHandler);
         const backColor = getColor(element, true /*isBackground*/, !toDarkMode, darkColorHandler);
+        const comparingColor = textColor || parentTextColor;
 
         setColor(element, textColor, false /*isBackground*/, toDarkMode, darkColorHandler);
-        setColor(element, backColor, true /*isBackground*/, toDarkMode, darkColorHandler);
+        setColor(
+            element,
+            backColor,
+            true /*isBackground*/,
+            toDarkMode,
+            darkColorHandler,
+            comparingColor
+        );
 
         if (tableBorders) {
             transformBorderColor(element, toDarkMode, darkColorHandler);
         }
+
+        return comparingColor;
     };
 
-    iterateElements(rootNode, transformer, includeSelf);
+    iterateElements(rootNode, transformer, includeSelf, defaultTextColor);
 }
 
 function transformBorderColor(
@@ -79,19 +90,22 @@ function transformBorderColor(
 
 function iterateElements(
     root: Node,
-    transformer: (element: HTMLElement) => void,
-    includeSelf?: boolean
+    transformer: (element: HTMLElement, parentTextColor?: string) => string | undefined,
+    includeSelf?: boolean,
+    parentTextColor?: string
 ) {
     if (includeSelf && isHTMLElement(root)) {
-        transformer(root);
+        parentTextColor = transformer(root, parentTextColor);
     }
 
     for (let child = root.firstChild; child; child = child.nextSibling) {
+        let textColor = parentTextColor;
+
         if (isHTMLElement(child)) {
-            transformer(child);
+            textColor = transformer(child, parentTextColor);
         }
 
-        iterateElements(child, transformer);
+        iterateElements(child, transformer, false, textColor);
     }
 }
 

packages/roosterjs-content-model-dom/lib/formatHandlers/common/backgroundColorFormatHandler.ts

@@ -1,12 +1,14 @@
 import { getColor, setColor } from '../utils/color';
 import { shouldSetValue } from '../utils/shouldSetValue';
-import type { BackgroundColorFormat } from 'roosterjs-content-model-types';
+import type { BackgroundColorFormat, TextColorFormat } from 'roosterjs-content-model-types';
 import type { FormatHandler } from '../FormatHandler';
 
 /**
  * @internal
  */
-export const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat> = {
+export const backgroundColorFormatHandler: FormatHandler<
+    BackgroundColorFormat & TextColorFormat
+> = {
     parse: (format, element, context, defaultStyle) => {
         const backgroundColor =
             getColor(
@@ -34,7 +36,8 @@ export const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat>
                 format.backgroundColor,
                 true /*isBackground*/,
                 !!context.isDarkMode,
-                context.darkColorHandler
+                context.darkColorHandler,
+                format.textColor
             );
         }
     },

packages/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts

@@ -84,12 +84,12 @@ export function getLightModeColor(
 ) {
     if (DeprecatedColors.indexOf(color) > -1) {
         return fallback;
-    } else if (darkColorHandler) {
+    } else {
         const match = color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
 
         if (match) {
             color = match[2] || '';
-        } else if (isDarkMode) {
+        } else if (isDarkMode && darkColorHandler) {
             // If editor is in dark mode but the color is not in dark color format, it is possible the color was inserted from external code
             // without any light color info. So we first try to see if there is a known dark color can match this color, and use its related
             // light color as light mode color. Otherwise we need to drop this color to avoid show "white on white" content.
@@ -126,20 +126,23 @@ export function retrieveElementColor(
  * @param isBackground True to set background color, false to set text color
  * @param isDarkMode Whether element is in dark mode now
  * @param darkColorHandler @optional The dark color handler object to help manager dark mode color
+ * @param comparingColor @optional When generating dark color for background color, we can provide text color as comparingColor to make sure the generated dark border color has enough contrast with text color in dark mode
  */
 export function setColor(
     element: HTMLElement,
     color: string | null | undefined,
     isBackground: boolean,
     isDarkMode: boolean,
-    darkColorHandler?: DarkColorHandler
+    darkColorHandler?: DarkColorHandler,
+    comparingColor?: string
 ) {
     const newColor = adaptColor(
         element,
         color,
         isBackground ? 'background' : 'text',
         isDarkMode,
-        darkColorHandler
+        darkColorHandler,
+        comparingColor
     );
 
     element.removeAttribute(isBackground ? 'bgcolor' : 'color');
@@ -154,7 +157,8 @@ export function adaptColor(
     color: string | null | undefined,
     colorType: 'text' | 'background' | 'border',
     isDarkMode: boolean,
-    darkColorHandler?: DarkColorHandler
+    darkColorHandler?: DarkColorHandler,
+    comparingColor?: string
 ) {
     const match = color && color.startsWith(VARIABLE_PREFIX) ? VARIABLE_REGEX.exec(color) : null;
     const [_, existingKey, fallbackColor] = match ?? [];
@@ -164,10 +168,22 @@ export function adaptColor(
     if (darkColorHandler && color) {
         const key =
             existingKey ||
-            darkColorHandler.generateColorKey(color, undefined /*baseLValue*/, colorType, element);
+            darkColorHandler.generateColorKey(
+                color,
+                undefined /*baseLValue*/,
+                colorType,
+                element,
+                comparingColor
+            );
         const darkModeColor =
             darkColorHandler.knownColors?.[key]?.darkModeColor ||
-            darkColorHandler.getDarkColor(color, undefined /*baseLValue*/, colorType, element);
+            darkColorHandler.getDarkColor(
+                color,
+                undefined /*baseLValue*/,
+                colorType,
+                element,
+                comparingColor
+            );
 
         darkColorHandler.updateKnownColor(isDarkMode, key, {
             lightModeColor: color,
@@ -185,8 +201,15 @@ export function adaptColor(
  * @param lightColor The input light color
  * @returns Key of the color
  */
-export const defaultGenerateColorKey: ColorTransformFunction = lightColor => {
-    return `${COLOR_VAR_PREFIX}_${lightColor.replace(/[^\d\w]/g, '_')}`;
+export const defaultGenerateColorKey: ColorTransformFunction = (
+    lightColor,
+    _1,
+    _2,
+    _3,
+    comparingColor
+) => {
+    const comparingColorKey = comparingColor ? `_${comparingColor.replace(/[^\d\w]/g, '_')}` : '';
+    return `${COLOR_VAR_PREFIX}_${lightColor.replace(/[^\d\w]/g, '_')}${comparingColorKey}`;
 };
 
 /**