roosterjs-content-model-dom 9.44.0 → 9.45.1

package/lib/domToModel/processors/formatContainerProcessor.d.ts

@@ -4,6 +4,11 @@ import type { ElementProcessor, MarginFormat, PaddingFormat } from 'roosterjs-co
  */
 export declare const ContextStyles: (keyof (MarginFormat & PaddingFormat))[];
 /**
- * @internal
+ * Content Model Element Processor for format container elements (e.g., blockquote, div)
+ * Processes elements that create FormatContainer blocks in the content model.
+ * This processor can be used in processorOverride to customize how specific elements are processed.
+ * @param group The parent block group
+ * @param element The DOM element to process
+ * @param context DOM to Content Model context
  */
 export declare const formatContainerProcessor: ElementProcessor<HTMLElement>;

package/lib/domToModel/processors/formatContainerProcessor.js

@@ -19,7 +19,12 @@ exports.ContextStyles = [
     'paddingRight',
 ];
 /**
- * @internal
+ * Content Model Element Processor for format container elements (e.g., blockquote, div)
+ * Processes elements that create FormatContainer blocks in the content model.
+ * This processor can be used in processorOverride to customize how specific elements are processed.
+ * @param group The parent block group
+ * @param element The DOM element to process
+ * @param context DOM to Content Model context
  */
 var formatContainerProcessor = function (group, element, context) {
     (0, stackFormat_1.stackFormat)(context, { segment: 'shallowCloneForBlock', paragraph: 'shallowClone' }, function () {

package/lib/domToModel/processors/formatContainerProcessor.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatContainerProcessor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/domToModel/processors/formatContainerProcessor.ts"],"names":[],"mappings":"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","sourcesContent":["import { addBlock } from '../../modelApi/common/addBlock';\nimport { createFormatContainer } from '../../modelApi/creators/createFormatContainer';\nimport { createParagraph } from '../../modelApi/creators/createParagraph';\nimport { getDefaultStyle } from '../utils/getDefaultStyle';\nimport { parseFormat } from '../utils/parseFormat';\nimport { setParagraphNotImplicit } from '../../modelApi/block/setParagraphNotImplicit';\nimport { stackFormat } from '../utils/stackFormat';\nimport type {\n    ContentModelFormatContainer,\n    ContentModelFormatContainerFormat,\n    ContentModelParagraph,\n    ElementProcessor,\n    MarginFormat,\n    PaddingFormat,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const ContextStyles: (keyof (MarginFormat & PaddingFormat))[] = [\n    'marginLeft',\n    'marginRight',\n    'paddingLeft',\n    'paddingRight',\n];\n\n/**\n * @internal\n */\nexport const formatContainerProcessor: ElementProcessor<HTMLElement> = (\n    group,\n    element,\n    context\n) => {\n    stackFormat(context, { segment: 'shallowCloneForBlock', paragraph: 'shallowClone' }, () => {\n        parseFormat(element, context.formatParsers.block, context.blockFormat, context);\n        parseFormat(element, context.formatParsers.segmentOnBlock, context.segmentFormat, context);\n\n        const format: ContentModelFormatContainerFormat = {\n            ...context.blockFormat,\n        };\n\n        parseFormat(element, context.formatParsers.container, format, context);\n\n        const tagName =\n            getDefaultStyle(element).display == 'block' ? element.tagName.toLowerCase() : 'div';\n        const formatContainer = createFormatContainer(tagName, format);\n\n        // It is possible to inherit margin left/right styles from parent DIV or other containers,\n        // since we are going into a deeper level of format container now,\n        // the container will render these styles so no need to keep them in context format\n        ContextStyles.forEach(style => {\n            delete context.blockFormat[style];\n        });\n\n        context.elementProcessors.child(formatContainer, element, context);\n\n        if (element.style.fontSize && parseInt(element.style.fontSize) == 0) {\n            formatContainer.zeroFontSize = true;\n        }\n\n        if (shouldFallbackToParagraph(formatContainer)) {\n            // For DIV container that only has one paragraph child, container style can be merged into paragraph\n            // and no need to have this container\n            const paragraph = formatContainer.blocks[0] as ContentModelParagraph;\n\n            if (formatContainer.zeroFontSize) {\n                paragraph.segmentFormat = Object.assign({}, paragraph.segmentFormat, {\n                    fontSize: '0',\n                });\n            }\n\n            Object.assign(paragraph.format, formatContainer.format);\n            setParagraphNotImplicit(paragraph);\n            addBlock(group, paragraph);\n        } else {\n            addBlock(group, formatContainer);\n        }\n    });\n\n    addBlock(group, createParagraph(true /*isImplicit*/, context.blockFormat));\n};\n\nfunction shouldFallbackToParagraph(formatContainer: ContentModelFormatContainer) {\n    const firstChild = formatContainer.blocks[0];\n\n    return (\n        formatContainer.tagName == 'div' &&\n        formatContainer.blocks.length == 1 &&\n        firstChild.blockType == 'Paragraph' &&\n        firstChild.isImplicit\n    );\n}\n"]}
+{"version":3,"file":"formatContainerProcessor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/domToModel/processors/formatContainerProcessor.ts"],"names":[],"mappings":"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","sourcesContent":["import { addBlock } from '../../modelApi/common/addBlock';\nimport { createFormatContainer } from '../../modelApi/creators/createFormatContainer';\nimport { createParagraph } from '../../modelApi/creators/createParagraph';\nimport { getDefaultStyle } from '../utils/getDefaultStyle';\nimport { parseFormat } from '../utils/parseFormat';\nimport { setParagraphNotImplicit } from '../../modelApi/block/setParagraphNotImplicit';\nimport { stackFormat } from '../utils/stackFormat';\nimport type {\n    ContentModelFormatContainer,\n    ContentModelFormatContainerFormat,\n    ContentModelParagraph,\n    ElementProcessor,\n    MarginFormat,\n    PaddingFormat,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const ContextStyles: (keyof (MarginFormat & PaddingFormat))[] = [\n    'marginLeft',\n    'marginRight',\n    'paddingLeft',\n    'paddingRight',\n];\n\n/**\n * Content Model Element Processor for format container elements (e.g., blockquote, div)\n * Processes elements that create FormatContainer blocks in the content model.\n * This processor can be used in processorOverride to customize how specific elements are processed.\n * @param group The parent block group\n * @param element The DOM element to process\n * @param context DOM to Content Model context\n */\nexport const formatContainerProcessor: ElementProcessor<HTMLElement> = (\n    group,\n    element,\n    context\n) => {\n    stackFormat(context, { segment: 'shallowCloneForBlock', paragraph: 'shallowClone' }, () => {\n        parseFormat(element, context.formatParsers.block, context.blockFormat, context);\n        parseFormat(element, context.formatParsers.segmentOnBlock, context.segmentFormat, context);\n\n        const format: ContentModelFormatContainerFormat = {\n            ...context.blockFormat,\n        };\n\n        parseFormat(element, context.formatParsers.container, format, context);\n\n        const tagName =\n            getDefaultStyle(element).display == 'block' ? element.tagName.toLowerCase() : 'div';\n        const formatContainer = createFormatContainer(tagName, format);\n\n        // It is possible to inherit margin left/right styles from parent DIV or other containers,\n        // since we are going into a deeper level of format container now,\n        // the container will render these styles so no need to keep them in context format\n        ContextStyles.forEach(style => {\n            delete context.blockFormat[style];\n        });\n\n        context.elementProcessors.child(formatContainer, element, context);\n\n        if (element.style.fontSize && parseInt(element.style.fontSize) == 0) {\n            formatContainer.zeroFontSize = true;\n        }\n\n        if (shouldFallbackToParagraph(formatContainer)) {\n            // For DIV container that only has one paragraph child, container style can be merged into paragraph\n            // and no need to have this container\n            const paragraph = formatContainer.blocks[0] as ContentModelParagraph;\n\n            if (formatContainer.zeroFontSize) {\n                paragraph.segmentFormat = Object.assign({}, paragraph.segmentFormat, {\n                    fontSize: '0',\n                });\n            }\n\n            Object.assign(paragraph.format, formatContainer.format);\n            setParagraphNotImplicit(paragraph);\n            addBlock(group, paragraph);\n        } else {\n            addBlock(group, formatContainer);\n        }\n    });\n\n    addBlock(group, createParagraph(true /*isImplicit*/, context.blockFormat));\n};\n\nfunction shouldFallbackToParagraph(formatContainer: ContentModelFormatContainer) {\n    const firstChild = formatContainer.blocks[0];\n\n    return (\n        formatContainer.tagName == 'div' &&\n        formatContainer.blocks.length == 1 &&\n        firstChild.blockType == 'Paragraph' &&\n        firstChild.isImplicit\n    );\n}\n"]}

package/lib/domUtils/style/transformColor.d.ts

@@ -1,9 +1,18 @@
 import type { DarkColorHandler } from 'roosterjs-content-model-types';
+/**
+ * Configuration options for controlling which elements and styles undergo color transformation.
+ * By default, text and background colors are transformed for all elements.
+ */
+export interface TransformColorOptions {
+    tableBorders: boolean;
+}
 /**
  * Edit and transform color of elements between light mode and dark mode
+ * By default, text and background colors are transformed for all elements.
  * @param rootNode The root DOM node to transform
  * @param includeSelf True to transform the root node as well, otherwise false
  * @param direction To specify the transform direction, light to dark, or dark to light
  * @param darkColorHandler The dark color handler object to help do color transformation
+ * @param transformColorOptions Configuration options for controlling which elements and styles undergo color transformation.
  */
-export declare function transformColor(rootNode: Node, includeSelf: boolean, direction: 'lightToDark' | 'darkToLight', darkColorHandler?: DarkColorHandler): void;
+export declare function transformColor(rootNode: Node, includeSelf: boolean, direction: 'lightToDark' | 'darkToLight', darkColorHandler?: DarkColorHandler, transformColorOptions?: TransformColorOptions): void;

package/lib/domUtils/style/transformColor.js

@@ -1,25 +1,50 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformColor = void 0;
+var borderKeys_1 = require("../../formatHandlers/utils/borderKeys");
+var isElementOfType_1 = require("../isElementOfType");
 var color_1 = require("../../formatHandlers/utils/color");
 /**
  * Edit and transform color of elements between light mode and dark mode
+ * By default, text and background colors are transformed for all elements.
  * @param rootNode The root DOM node to transform
  * @param includeSelf True to transform the root node as well, otherwise false
  * @param direction To specify the transform direction, light to dark, or dark to light
  * @param darkColorHandler The dark color handler object to help do color transformation
+ * @param transformColorOptions Configuration options for controlling which elements and styles undergo color transformation.
  */
-function transformColor(rootNode, includeSelf, direction, darkColorHandler) {
+function transformColor(rootNode, includeSelf, direction, darkColorHandler, transformColorOptions) {
     var toDarkMode = direction == 'lightToDark';
+    var tableBorders = (transformColorOptions === null || transformColorOptions === void 0 ? void 0 : transformColorOptions.tableBorders) || false;
     var transformer = function (element) {
         var textColor = (0, color_1.getColor)(element, false /*isBackground*/, !toDarkMode, darkColorHandler);
         var backColor = (0, color_1.getColor)(element, true /*isBackground*/, !toDarkMode, darkColorHandler);
         (0, color_1.setColor)(element, textColor, false /*isBackground*/, toDarkMode, darkColorHandler);
         (0, color_1.setColor)(element, backColor, true /*isBackground*/, toDarkMode, darkColorHandler);
+        if (tableBorders) {
+            transformBorderColor(element, toDarkMode, darkColorHandler);
+        }
     };
     iterateElements(rootNode, transformer, includeSelf);
 }
 exports.transformColor = transformColor;
+function transformBorderColor(element, toDarkMode, darkColorHandler) {
+    if ((0, isElementOfType_1.isElementOfType)(element, 'td') || (0, isElementOfType_1.isElementOfType)(element, 'th')) {
+        borderKeys_1.BorderKeys.forEach(function (key) {
+            var borderColorProperty = borderKeys_1.BorderColorKeyMap[key];
+            var style = element.style.getPropertyValue(borderColorProperty);
+            if (style) {
+                var lightColor = (0, color_1.getLightModeColor)(style, !toDarkMode, darkColorHandler);
+                if (lightColor) {
+                    var transformedColor = (0, color_1.adaptColor)(element, lightColor, 'border', toDarkMode, darkColorHandler);
+                    if (transformedColor) {
+                        element.style.setProperty(borderColorProperty, transformedColor);
+                    }
+                }
+            }
+        });
+    }
+}
 function iterateElements(root, transformer, includeSelf) {
     if (includeSelf && isHTMLElement(root)) {
         transformer(root);

package/lib/domUtils/style/transformColor.js.map

@@ -1 +1 @@
-{"version":3,"file":"transformColor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/domUtils/style/transformColor.ts"],"names":[],"mappings":";;;AAAA,0DAAsE;AAGtE;;;;;;GAMG;AACH,SAAgB,cAAc,CAC1B,QAAc,EACd,WAAoB,EACpB,SAAwC,EACxC,gBAAmC;IAEnC,IAAM,UAAU,GAAG,SAAS,IAAI,aAAa,CAAC;IAC9C,IAAM,WAAW,GAAG,UAAC,OAAoB;QACrC,IAAM,SAAS,GAAG,IAAA,gBAAQ,EAAC,OAAO,EAAE,KAAK,CAAC,gBAAgB,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;QAC3F,IAAM,SAAS,GAAG,IAAA,gBAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC;QAE1F,IAAA,gBAAQ,EAAC,OAAO,EAAE,SAAS,EAAE,KAAK,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;QACnF,IAAA,gBAAQ,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,CAAC,CAAC;IACtF,CAAC,CAAC;IAEF,eAAe,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AACxD,CAAC;AAhBD,wCAgBC;AAED,SAAS,eAAe,CACpB,IAAU,EACV,WAA2C,EAC3C,WAAqB;IAErB,IAAI,WAAW,IAAI,aAAa,CAAC,IAAI,CAAC,EAAE;QACpC,WAAW,CAAC,IAAI,CAAC,CAAC;KACrB;IAED,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE;QAChE,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE;YACtB,WAAW,CAAC,KAAK,CAAC,CAAC;SACtB;QAED,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;KACvC;AACL,CAAC;AAED,8GAA8G;AAC9G,kHAAkH;AAClH,kEAAkE;AAClE,SAAS,aAAa,CAAC,IAAU;IAC7B,IAAM,WAAW,GAAgB,IAAI,CAAC;IACtC,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC;AACrE,CAAC","sourcesContent":["import { getColor, setColor } from '../../formatHandlers/utils/color';\nimport type { DarkColorHandler } from 'roosterjs-content-model-types';\n\n/**\n * Edit and transform color of elements between light mode and dark mode\n * @param rootNode The root DOM node to transform\n * @param includeSelf True to transform the root node as well, otherwise false\n * @param direction To specify the transform direction, light to dark, or dark to light\n * @param darkColorHandler The dark color handler object to help do color transformation\n */\nexport function transformColor(\n    rootNode: Node,\n    includeSelf: boolean,\n    direction: 'lightToDark' | 'darkToLight',\n    darkColorHandler?: DarkColorHandler\n) {\n    const toDarkMode = direction == 'lightToDark';\n    const transformer = (element: HTMLElement) => {\n        const textColor = getColor(element, false /*isBackground*/, !toDarkMode, darkColorHandler);\n        const backColor = getColor(element, true /*isBackground*/, !toDarkMode, darkColorHandler);\n\n        setColor(element, textColor, false /*isBackground*/, toDarkMode, darkColorHandler);\n        setColor(element, backColor, true /*isBackground*/, toDarkMode, darkColorHandler);\n    };\n\n    iterateElements(rootNode, transformer, includeSelf);\n}\n\nfunction iterateElements(\n    root: Node,\n    transformer: (element: HTMLElement) => void,\n    includeSelf?: boolean\n) {\n    if (includeSelf && isHTMLElement(root)) {\n        transformer(root);\n    }\n\n    for (let child = root.firstChild; child; child = child.nextSibling) {\n        if (isHTMLElement(child)) {\n            transformer(child);\n        }\n\n        iterateElements(child, transformer);\n    }\n}\n\n// This is not a strict check, we just need to make sure this element has style so that we can set style to it\n// We don't use safeInstanceOf() here since this function will be called very frequently when extract html content\n// in dark mode, so we need to make sure this check is fast enough\nfunction isHTMLElement(node: Node): node is HTMLElement {\n    const htmlElement = <HTMLElement>node;\n    return node.nodeType == Node.ELEMENT_NODE && !!htmlElement.style;\n}\n"]}
+{"version":3,"file":"transformColor.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/domUtils/style/transformColor.ts"],"names":[],"mappings":"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","sourcesContent":["import { BorderColorKeyMap, BorderKeys } from '../../formatHandlers/utils/borderKeys';\nimport { isElementOfType } from '../isElementOfType';\nimport {\n    adaptColor,\n    getColor,\n    getLightModeColor,\n    setColor,\n} from '../../formatHandlers/utils/color';\nimport type { DarkColorHandler } from 'roosterjs-content-model-types';\n\n/**\n * Configuration options for controlling which elements and styles undergo color transformation.\n * By default, text and background colors are transformed for all elements.\n */\nexport interface TransformColorOptions {\n    tableBorders: boolean;\n}\n\n/**\n * Edit and transform color of elements between light mode and dark mode\n * By default, text and background colors are transformed for all elements.\n * @param rootNode The root DOM node to transform\n * @param includeSelf True to transform the root node as well, otherwise false\n * @param direction To specify the transform direction, light to dark, or dark to light\n * @param darkColorHandler The dark color handler object to help do color transformation\n * @param transformColorOptions Configuration options for controlling which elements and styles undergo color transformation.\n */\nexport function transformColor(\n    rootNode: Node,\n    includeSelf: boolean,\n    direction: 'lightToDark' | 'darkToLight',\n    darkColorHandler?: DarkColorHandler,\n    transformColorOptions?: TransformColorOptions\n) {\n    const toDarkMode = direction == 'lightToDark';\n    const tableBorders = transformColorOptions?.tableBorders || false;\n    const transformer = (element: HTMLElement) => {\n        const textColor = getColor(element, false /*isBackground*/, !toDarkMode, darkColorHandler);\n        const backColor = getColor(element, true /*isBackground*/, !toDarkMode, darkColorHandler);\n\n        setColor(element, textColor, false /*isBackground*/, toDarkMode, darkColorHandler);\n        setColor(element, backColor, true /*isBackground*/, toDarkMode, darkColorHandler);\n\n        if (tableBorders) {\n            transformBorderColor(element, toDarkMode, darkColorHandler);\n        }\n    };\n\n    iterateElements(rootNode, transformer, includeSelf);\n}\n\nfunction transformBorderColor(\n    element: HTMLElement,\n    toDarkMode: boolean,\n    darkColorHandler?: DarkColorHandler\n) {\n    if (isElementOfType(element, 'td') || isElementOfType(element, 'th')) {\n        BorderKeys.forEach(key => {\n            const borderColorProperty = BorderColorKeyMap[key];\n            const style = element.style.getPropertyValue(borderColorProperty);\n            if (style) {\n                const lightColor = getLightModeColor(style, !toDarkMode, darkColorHandler);\n                if (lightColor) {\n                    const transformedColor = adaptColor(\n                        element,\n                        lightColor,\n                        'border',\n                        toDarkMode,\n                        darkColorHandler\n                    );\n                    if (transformedColor) {\n                        element.style.setProperty(borderColorProperty, transformedColor);\n                    }\n                }\n            }\n        });\n    }\n}\n\nfunction iterateElements(\n    root: Node,\n    transformer: (element: HTMLElement) => void,\n    includeSelf?: boolean\n) {\n    if (includeSelf && isHTMLElement(root)) {\n        transformer(root);\n    }\n\n    for (let child = root.firstChild; child; child = child.nextSibling) {\n        if (isHTMLElement(child)) {\n            transformer(child);\n        }\n\n        iterateElements(child, transformer);\n    }\n}\n\n// This is not a strict check, we just need to make sure this element has style so that we can set style to it\n// We don't use safeInstanceOf() here since this function will be called very frequently when extract html content\n// in dark mode, so we need to make sure this check is fast enough\nfunction isHTMLElement(node: Node): node is HTMLElement {\n    const htmlElement = <HTMLElement>node;\n    return node.nodeType == Node.ELEMENT_NODE && !!htmlElement.style;\n}\n"]}

package/lib/formatHandlers/block/textAlignFormatHandler.js

@@ -11,30 +11,14 @@ exports.textAlignFormatHandler = {
         var _a;
         directionFormatHandler_1.directionFormatHandler.parse(format, element, context, defaultStyle);
         var textAlign = element.style.textAlign || defaultStyle.textAlign;
-        if (element.tagName == 'LI' &&
-            ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) === 'flex' &&
-            element.parentElement.style.flexDirection === 'column' &&
-            element.style.alignSelf) {
-            // For LI element with flex style applied, we use its "align-self" style value instead since LI has a different implementation for align
-            textAlign = element.style.alignSelf;
-        }
-        if (textAlign) {
+        if (textAlign && ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) !== 'flex') {
             format.textAlign = (0, dir_1.calcAlign)(textAlign, format.direction);
         }
     },
     apply: function (format, element) {
         var dir = format.direction == 'rtl' ? 'rtl' : 'ltr';
         if (format.textAlign) {
-            var parent_1 = element.parentElement;
-            var parentTag = parent_1 === null || parent_1 === void 0 ? void 0 : parent_1.tagName;
-            if (element.tagName == 'LI' && parent_1 && (parentTag == 'OL' || parentTag == 'UL')) {
-                element.style.alignSelf = format.textAlign;
-                element.parentElement.style.flexDirection = 'column';
-                element.parentElement.style.display = 'flex';
-            }
-            else {
-                element.style.textAlign = dir_1.ResultMap[format.textAlign][dir];
-            }
+            element.style.textAlign = dir_1.ResultMap[format.textAlign][dir];
         }
     },
 };

package/lib/formatHandlers/block/textAlignFormatHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"textAlignFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/block/textAlignFormatHandler.ts"],"names":[],"mappings":";;;AAAA,oCAAoD;AACpD,mEAAkE;AAIlE;;GAEG;AACU,QAAA,sBAAsB,GAAqD;IACpF,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;;QAC1C,+CAAsB,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;QAErE,IAAI,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC;QAElE,IACI,OAAO,CAAC,OAAO,IAAI,IAAI;YACvB,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAE,KAAK,CAAC,OAAO,MAAK,MAAM;YAC/C,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,aAAa,KAAK,QAAQ;YACtD,OAAO,CAAC,KAAK,CAAC,SAAS,EACzB;YACE,wIAAwI;YACxI,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;SACvC;QAED,IAAI,SAAS,EAAE;YACX,MAAM,CAAC,SAAS,GAAG,IAAA,eAAS,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;SAC7D;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAM,GAAG,GAAkB,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAErE,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,IAAM,QAAM,GAAG,OAAO,CAAC,aAAa,CAAC;YACrC,IAAM,SAAS,GAAG,QAAM,aAAN,QAAM,uBAAN,QAAM,CAAE,OAAO,CAAC;YAElC,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,IAAI,QAAM,IAAI,CAAC,SAAS,IAAI,IAAI,IAAI,SAAS,IAAI,IAAI,CAAC,EAAE;gBAC/E,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;gBAC3C,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;gBACrD,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aAChD;iBAAM;gBACH,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,eAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;aAC9D;SACJ;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { calcAlign, ResultMap } from '../utils/dir';\nimport { directionFormatHandler } from './directionFormatHandler';\nimport type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const textAlignFormatHandler: FormatHandler<DirectionFormat & TextAlignFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        directionFormatHandler.parse(format, element, context, defaultStyle);\n\n        let textAlign = element.style.textAlign || defaultStyle.textAlign;\n\n        if (\n            element.tagName == 'LI' &&\n            element.parentElement?.style.display === 'flex' &&\n            element.parentElement.style.flexDirection === 'column' &&\n            element.style.alignSelf\n        ) {\n            // For LI element with flex style applied, we use its \"align-self\" style value instead since LI has a different implementation for align\n            textAlign = element.style.alignSelf;\n        }\n\n        if (textAlign) {\n            format.textAlign = calcAlign(textAlign, format.direction);\n        }\n    },\n    apply: (format, element) => {\n        const dir: 'ltr' | 'rtl' = format.direction == 'rtl' ? 'rtl' : 'ltr';\n\n        if (format.textAlign) {\n            const parent = element.parentElement;\n            const parentTag = parent?.tagName;\n\n            if (element.tagName == 'LI' && parent && (parentTag == 'OL' || parentTag == 'UL')) {\n                element.style.alignSelf = format.textAlign;\n                element.parentElement.style.flexDirection = 'column';\n                element.parentElement.style.display = 'flex';\n            } else {\n                element.style.textAlign = ResultMap[format.textAlign][dir];\n            }\n        }\n    },\n};\n"]}
+{"version":3,"file":"textAlignFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/block/textAlignFormatHandler.ts"],"names":[],"mappings":";;;AAAA,oCAAoD;AACpD,mEAAkE;AAIlE;;GAEG;AACU,QAAA,sBAAsB,GAAqD;IACpF,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;;QAC1C,+CAAsB,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;QAErE,IAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,YAAY,CAAC,SAAS,CAAC;QAEpE,IAAI,SAAS,IAAI,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAE,KAAK,CAAC,OAAO,MAAK,MAAM,EAAE;YAC9D,MAAM,CAAC,SAAS,GAAG,IAAA,eAAS,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC;SAC7D;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAM,GAAG,GAAkB,MAAM,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;QAErE,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,eAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;SAC9D;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { calcAlign, ResultMap } from '../utils/dir';\nimport { directionFormatHandler } from './directionFormatHandler';\nimport type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const textAlignFormatHandler: FormatHandler<DirectionFormat & TextAlignFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        directionFormatHandler.parse(format, element, context, defaultStyle);\n\n        const textAlign = element.style.textAlign || defaultStyle.textAlign;\n\n        if (textAlign && element.parentElement?.style.display !== 'flex') {\n            format.textAlign = calcAlign(textAlign, format.direction);\n        }\n    },\n    apply: (format, element) => {\n        const dir: 'ltr' | 'rtl' = format.direction == 'rtl' ? 'rtl' : 'ltr';\n\n        if (format.textAlign) {\n            element.style.textAlign = ResultMap[format.textAlign][dir];\n        }\n    },\n};\n"]}

package/lib/formatHandlers/common/borderColorFormatHandler.d.ts

@@ -0,0 +1,6 @@
+import type { BorderFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+/**
+ * @internal
+ */
+export declare const borderColorFormatHandler: FormatHandler<BorderFormat>;

package/lib/formatHandlers/common/borderColorFormatHandler.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderColorFormatHandler = void 0;
+var color_1 = require("../utils/color");
+var borderKeys_1 = require("../utils/borderKeys");
+var borderValues_1 = require("../../domUtils/style/borderValues");
+/**
+ * Keys of border width
+ */
+var BorderWidthKeyMap = {
+    borderTop: 'border-top-width',
+    borderRight: 'border-right-width',
+    borderBottom: 'border-bottom-width',
+    borderLeft: 'border-left-width',
+};
+/**
+ * Keys of border styles
+ */
+var BorderStyleKeyMap = {
+    borderTop: 'border-top-style',
+    borderRight: 'border-right-style',
+    borderBottom: 'border-bottom-style',
+    borderLeft: 'border-left-style',
+};
+/**
+ * @internal
+ */
+exports.borderColorFormatHandler = {
+    parse: function (format, element, context) {
+        if (context.experimentalFeatures &&
+            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1) {
+            borderKeys_1.BorderKeys.forEach(function (key) {
+                var width = element.style.getPropertyValue(BorderWidthKeyMap[key]);
+                var style = element.style.getPropertyValue(BorderStyleKeyMap[key]);
+                var borderColor = (0, color_1.retrieveElementColor)(element, key);
+                if (borderColor) {
+                    var lightModeColor = (0, color_1.getLightModeColor)(borderColor, !!context.isDarkMode, context.darkColorHandler);
+                    format[key] = (0, borderValues_1.combineBorderValue)({
+                        width: width,
+                        style: style,
+                        color: lightModeColor,
+                    });
+                }
+            });
+        }
+    },
+    apply: function (format, element, context) {
+        if (context.experimentalFeatures &&
+            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1) {
+            borderKeys_1.BorderKeys.forEach(function (key) {
+                var value = format[key];
+                if (value) {
+                    var borderValues = (0, borderValues_1.extractBorderValues)(value);
+                    if (borderValues.color) {
+                        var transformedColor = (0, color_1.adaptColor)(element, borderValues.color, 'border', !!context.isDarkMode, context.darkColorHandler);
+                        if (transformedColor) {
+                            var borderColorProperty = borderKeys_1.BorderColorKeyMap[key];
+                            element.style.setProperty(borderColorProperty, transformedColor);
+                        }
+                    }
+                }
+            });
+        }
+    },
+};
+//# sourceMappingURL=borderColorFormatHandler.js.map

package/lib/formatHandlers/common/borderColorFormatHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"borderColorFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderColorFormatHandler.ts"],"names":[],"mappings":";;;AAAA,wCAAqF;AACrF,kDAAoE;AACpE,kEAA4F;AAI5F;;GAEG;AACH,IAAM,iBAAiB,GAEnB;IACA,SAAS,EAAE,kBAAkB;IAC7B,WAAW,EAAE,oBAAoB;IACjC,YAAY,EAAE,qBAAqB;IACnC,UAAU,EAAE,mBAAmB;CAClC,CAAC;AAEF;;GAEG;AACH,IAAM,iBAAiB,GAEnB;IACA,SAAS,EAAE,kBAAkB;IAC7B,WAAW,EAAE,oBAAoB;IACjC,YAAY,EAAE,qBAAqB;IACnC,UAAU,EAAE,mBAAmB;CAClC,CAAC;AAEF;;GAEG;AACU,QAAA,wBAAwB,GAAgC;IACjE,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IACI,OAAO,CAAC,oBAAoB;YAC5B,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,4BAA4B,CAAC,GAAG,CAAC,CAAC,EACzE;YACE,uBAAU,CAAC,OAAO,CAAC,UAAA,GAAG;gBAClB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;gBACrE,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;gBACrE,IAAM,WAAW,GAAG,IAAA,4BAAoB,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC;gBAEvD,IAAI,WAAW,EAAE;oBACb,IAAM,cAAc,GAAG,IAAA,yBAAiB,EACpC,WAAW,EACX,CAAC,CAAC,OAAO,CAAC,UAAU,EACpB,OAAO,CAAC,gBAAgB,CAC3B,CAAC;oBAEF,MAAM,CAAC,GAAG,CAAC,GAAG,IAAA,iCAAkB,EAAC;wBAC7B,KAAK,OAAA;wBACL,KAAK,OAAA;wBACL,KAAK,EAAE,cAAc;qBACxB,CAAC,CAAC;iBACN;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IACI,OAAO,CAAC,oBAAoB;YAC5B,OAAO,CAAC,oBAAoB,CAAC,OAAO,CAAC,4BAA4B,CAAC,GAAG,CAAC,CAAC,EACzE;YACE,uBAAU,CAAC,OAAO,CAAC,UAAA,GAAG;gBAClB,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBAC1B,IAAI,KAAK,EAAE;oBACP,IAAM,YAAY,GAAG,IAAA,kCAAmB,EAAC,KAAK,CAAC,CAAC;oBAChD,IAAI,YAAY,CAAC,KAAK,EAAE;wBACpB,IAAM,gBAAgB,GAAG,IAAA,kBAAU,EAC/B,OAAO,EACP,YAAY,CAAC,KAAK,EAClB,QAAQ,EACR,CAAC,CAAC,OAAO,CAAC,UAAU,EACpB,OAAO,CAAC,gBAAgB,CAC3B,CAAC;wBACF,IAAI,gBAAgB,EAAE;4BAClB,IAAM,mBAAmB,GAAG,8BAAiB,CAAC,GAAG,CAAC,CAAC;4BACnD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;yBACpE;qBACJ;iBACJ;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { adaptColor, getLightModeColor, retrieveElementColor } from '../utils/color';\nimport { BorderColorKeyMap, BorderKeys } from '../utils/borderKeys';\nimport { combineBorderValue, extractBorderValues } from '../../domUtils/style/borderValues';\nimport type { BorderFormat, BorderKey } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * Keys of border width\n */\nconst BorderWidthKeyMap: {\n    [key in BorderKey]: string;\n} = {\n    borderTop: 'border-top-width',\n    borderRight: 'border-right-width',\n    borderBottom: 'border-bottom-width',\n    borderLeft: 'border-left-width',\n};\n\n/**\n * Keys of border styles\n */\nconst BorderStyleKeyMap: {\n    [key in BorderKey]: string;\n} = {\n    borderTop: 'border-top-style',\n    borderRight: 'border-right-style',\n    borderBottom: 'border-bottom-style',\n    borderLeft: 'border-left-style',\n};\n\n/**\n * @internal\n */\nexport const borderColorFormatHandler: FormatHandler<BorderFormat> = {\n    parse: (format, element, context) => {\n        if (\n            context.experimentalFeatures &&\n            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1\n        ) {\n            BorderKeys.forEach(key => {\n                const width = element.style.getPropertyValue(BorderWidthKeyMap[key]);\n                const style = element.style.getPropertyValue(BorderStyleKeyMap[key]);\n                const borderColor = retrieveElementColor(element, key);\n\n                if (borderColor) {\n                    const lightModeColor = getLightModeColor(\n                        borderColor,\n                        !!context.isDarkMode,\n                        context.darkColorHandler\n                    );\n\n                    format[key] = combineBorderValue({\n                        width,\n                        style,\n                        color: lightModeColor,\n                    });\n                }\n            });\n        }\n    },\n    apply: (format, element, context) => {\n        if (\n            context.experimentalFeatures &&\n            context.experimentalFeatures.indexOf('TransformTableBorderColors') > -1\n        ) {\n            BorderKeys.forEach(key => {\n                const value = format[key];\n                if (value) {\n                    const borderValues = extractBorderValues(value);\n                    if (borderValues.color) {\n                        const transformedColor = adaptColor(\n                            element,\n                            borderValues.color,\n                            'border',\n                            !!context.isDarkMode,\n                            context.darkColorHandler\n                        );\n                        if (transformedColor) {\n                            const borderColorProperty = BorderColorKeyMap[key];\n                            element.style.setProperty(borderColorProperty, transformedColor);\n                        }\n                    }\n                }\n            });\n        }\n    },\n};\n"]}

package/lib/formatHandlers/common/borderFormatHandler.d.ts

@@ -1,9 +1,5 @@
 import type { BorderFormat } from 'roosterjs-content-model-types';
 import type { FormatHandler } from '../FormatHandler';
-/**
- * Keys of border items
- */
-export declare const BorderKeys: (keyof BorderFormat & keyof CSSStyleDeclaration)[];
 /**
  * @internal
  */

package/lib/formatHandlers/common/borderFormatHandler.js

@@ -1,15 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.borderFormatHandler = exports.BorderKeys = void 0;
-/**
- * Keys of border items
- */
-exports.BorderKeys = [
-    'borderTop',
-    'borderRight',
-    'borderBottom',
-    'borderLeft',
-];
+exports.borderFormatHandler = void 0;
+var tslib_1 = require("tslib");
+var borderKeys_1 = require("../utils/borderKeys");
 // This array needs to match BorderKeys array
 var BorderWidthKeys = [
     'borderTopWidth',
@@ -23,13 +16,13 @@ var BorderRadiusKeys = [
     'borderBottomLeftRadius',
     'borderBottomRightRadius',
 ];
-var AllKeys = exports.BorderKeys.concat(BorderRadiusKeys);
+var AllKeys = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(borderKeys_1.BorderKeys), false), (0, tslib_1.__read)(BorderRadiusKeys), false);
 /**
  * @internal
  */
 exports.borderFormatHandler = {
     parse: function (format, element, _, defaultStyle) {
-        exports.BorderKeys.forEach(function (key, i) {
+        borderKeys_1.BorderKeys.forEach(function (key, i) {
             var _a;
             var value = element.style[key];
             var defaultWidth = (_a = defaultStyle[BorderWidthKeys[i]]) !== null && _a !== void 0 ? _a : '0px';

package/lib/formatHandlers/common/borderFormatHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"borderFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts"],"names":[],"mappings":";;;AAGA;;GAEG;AACU,QAAA,UAAU,GAAuD;IAC1E,WAAW;IACX,aAAa;IACb,cAAc;IACd,YAAY;CACf,CAAC;AAEF,6CAA6C;AAC7C,IAAM,eAAe,GAAkC;IACnD,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;CACpB,CAAC;AAEF,IAAM,gBAAgB,GAAuD;IACzE,qBAAqB;IACrB,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;CAC5B,CAAC;AAEF,IAAM,OAAO,GAAG,kBAAU,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAEpD;;GAEG;AACU,QAAA,mBAAmB,GAAgC;IAC5D,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,kBAAU,CAAC,OAAO,CAAC,UAAC,GAAG,EAAE,CAAC;;YACtB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACjC,IAAM,YAAY,GAAG,MAAA,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,mCAAI,KAAK,CAAC;YAC/D,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,GAAG,EAAE;gBACd,KAAK,GAAG,KAAK,CAAC;aACjB;YAED,IAAI,KAAK,IAAI,KAAK,IAAI,YAAY,EAAE;gBAChC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aAC9C;QACL,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC;QAEhD,IAAI,YAAY,EAAE;YACd,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;SACtC;aAAM;YACH,gBAAgB,CAAC,OAAO,CAAC,UAAA,GAAG;gBACxB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAEjC,IAAI,KAAK,EAAE;oBACP,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;iBACvB;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,OAAO,CAAC,OAAO,CAAC,UAAA,GAAG;YACf,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAE1B,IAAI,KAAK,EAAE;gBACP,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC9B;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,CAAC,YAAY,EAAE;YACrB,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;SACpD;IACL,CAAC;CACJ,CAAC","sourcesContent":["import type { BorderFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * Keys of border items\n */\nexport const BorderKeys: (keyof BorderFormat & keyof CSSStyleDeclaration)[] = [\n    'borderTop',\n    'borderRight',\n    'borderBottom',\n    'borderLeft',\n];\n\n// This array needs to match BorderKeys array\nconst BorderWidthKeys: (keyof CSSStyleDeclaration)[] = [\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n];\n\nconst BorderRadiusKeys: (keyof BorderFormat & keyof CSSStyleDeclaration)[] = [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n];\n\nconst AllKeys = BorderKeys.concat(BorderRadiusKeys);\n\n/**\n * @internal\n */\nexport const borderFormatHandler: FormatHandler<BorderFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        BorderKeys.forEach((key, i) => {\n            const value = element.style[key];\n            const defaultWidth = defaultStyle[BorderWidthKeys[i]] ?? '0px';\n            let width = element.style[BorderWidthKeys[i]];\n\n            if (width == '0') {\n                width = '0px';\n            }\n\n            if (value && width != defaultWidth) {\n                format[key] = value == 'none' ? '' : value;\n            }\n        });\n\n        const borderRadius = element.style.borderRadius;\n\n        if (borderRadius) {\n            format.borderRadius = borderRadius;\n        } else {\n            BorderRadiusKeys.forEach(key => {\n                const value = element.style[key];\n\n                if (value) {\n                    format[key] = value;\n                }\n            });\n        }\n    },\n    apply: (format, element) => {\n        AllKeys.forEach(key => {\n            const value = format[key];\n\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n\n        if (format.borderRadius) {\n            element.style.borderRadius = format.borderRadius;\n        }\n    },\n};\n"]}
+{"version":3,"file":"borderFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/common/borderFormatHandler.ts"],"names":[],"mappings":";;;;AAAA,kDAAiD;AAIjD,6CAA6C;AAC7C,IAAM,eAAe,GAAkC;IACnD,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,iBAAiB;CACpB,CAAC;AAEF,IAAM,gBAAgB,GAAuD;IACzE,qBAAqB;IACrB,sBAAsB;IACtB,wBAAwB;IACxB,yBAAyB;CAC5B,CAAC;AAEF,IAAM,OAAO,iFAAO,uBAAU,+BAAK,gBAAgB,SAAC,CAAC;AAErD;;GAEG;AACU,QAAA,mBAAmB,GAAgC;IAC5D,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,uBAAU,CAAC,OAAO,CAAC,UAAC,GAAG,EAAE,CAAC;;YACtB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACjC,IAAM,YAAY,GAAG,MAAA,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,mCAAI,KAAK,CAAC;YAC/D,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;YAE9C,IAAI,KAAK,IAAI,GAAG,EAAE;gBACd,KAAK,GAAG,KAAK,CAAC;aACjB;YAED,IAAI,KAAK,IAAI,KAAK,IAAI,YAAY,EAAE;gBAChC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aAC9C;QACL,CAAC,CAAC,CAAC;QAEH,IAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC;QAEhD,IAAI,YAAY,EAAE;YACd,MAAM,CAAC,YAAY,GAAG,YAAY,CAAC;SACtC;aAAM;YACH,gBAAgB,CAAC,OAAO,CAAC,UAAA,GAAG;gBACxB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAEjC,IAAI,KAAK,EAAE;oBACP,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;iBACvB;YACL,CAAC,CAAC,CAAC;SACN;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,OAAO,CAAC,OAAO,CAAC,UAAA,GAAG;YACf,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAE1B,IAAI,KAAK,EAAE;gBACP,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC9B;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,MAAM,CAAC,YAAY,EAAE;YACrB,OAAO,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;SACpD;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { BorderKeys } from '../utils/borderKeys';\nimport type { BorderFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n// This array needs to match BorderKeys array\nconst BorderWidthKeys: (keyof CSSStyleDeclaration)[] = [\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n];\n\nconst BorderRadiusKeys: (keyof BorderFormat & keyof CSSStyleDeclaration)[] = [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomLeftRadius',\n    'borderBottomRightRadius',\n];\n\nconst AllKeys = [...BorderKeys, ...BorderRadiusKeys];\n\n/**\n * @internal\n */\nexport const borderFormatHandler: FormatHandler<BorderFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        BorderKeys.forEach((key, i) => {\n            const value = element.style[key];\n            const defaultWidth = defaultStyle[BorderWidthKeys[i]] ?? '0px';\n            let width = element.style[BorderWidthKeys[i]];\n\n            if (width == '0') {\n                width = '0px';\n            }\n\n            if (value && width != defaultWidth) {\n                format[key] = value == 'none' ? '' : value;\n            }\n        });\n\n        const borderRadius = element.style.borderRadius;\n\n        if (borderRadius) {\n            format.borderRadius = borderRadius;\n        } else {\n            BorderRadiusKeys.forEach(key => {\n                const value = element.style[key];\n\n                if (value) {\n                    format[key] = value;\n                }\n            });\n        }\n    },\n    apply: (format, element) => {\n        AllKeys.forEach(key => {\n            const value = format[key];\n\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n\n        if (format.borderRadius) {\n            element.style.borderRadius = format.borderRadius;\n        }\n    },\n};\n"]}

package/lib/formatHandlers/defaultFormatHandlers.js

@@ -6,6 +6,7 @@ var ariaFormatHandler_1 = require("./common/ariaFormatHandler");
 var backgroundColorFormatHandler_1 = require("./common/backgroundColorFormatHandler");
 var boldFormatHandler_1 = require("./segment/boldFormatHandler");
 var borderBoxFormatHandler_1 = require("./common/borderBoxFormatHandler");
+var borderColorFormatHandler_1 = require("./common/borderColorFormatHandler");
 var borderFormatHandler_1 = require("./common/borderFormatHandler");
 var boxShadowFormatHandler_1 = require("./common/boxShadowFormatHandler");
 var datasetFormatHandler_1 = require("./common/datasetFormatHandler");
@@ -20,9 +21,11 @@ var htmlAlignFormatHandler_1 = require("./block/htmlAlignFormatHandler");
 var idFormatHandler_1 = require("./common/idFormatHandler");
 var imageStateFormatHandler_1 = require("./segment/imageStateFormatHandler");
 var italicFormatHandler_1 = require("./segment/italicFormatHandler");
+var legacyTableBorderFormatHandler_1 = require("./table/legacyTableBorderFormatHandler");
 var letterSpacingFormatHandler_1 = require("./segment/letterSpacingFormatHandler");
 var lineHeightFormatHandler_1 = require("./block/lineHeightFormatHandler");
 var linkFormatHandler_1 = require("./segment/linkFormatHandler");
+var listItemAlignFormatHandler_1 = require("./list/listItemAlignFormatHandler");
 var listItemThreadFormatHandler_1 = require("./list/listItemThreadFormatHandler");
 var listLevelThreadFormatHandler_1 = require("./list/listLevelThreadFormatHandler");
 var listStyleFormatHandler_1 = require("./list/listStyleFormatHandler");
@@ -49,6 +52,7 @@ var defaultFormatHandlerMap = {
     bold: boldFormatHandler_1.boldFormatHandler,
     border: borderFormatHandler_1.borderFormatHandler,
     borderBox: borderBoxFormatHandler_1.borderBoxFormatHandler,
+    borderColor: borderColorFormatHandler_1.borderColorFormatHandler,
     boxShadow: boxShadowFormatHandler_1.boxShadowFormatHandler,
     dataset: datasetFormatHandler_1.datasetFormatHandler,
     direction: directionFormatHandler_1.directionFormatHandler,
@@ -61,9 +65,11 @@ var defaultFormatHandlerMap = {
     id: idFormatHandler_1.idFormatHandler,
     imageState: imageStateFormatHandler_1.imageStateFormatHandler,
     italic: italicFormatHandler_1.italicFormatHandler,
+    legacyTableBorder: legacyTableBorderFormatHandler_1.legacyTableBorderFormatHandler,
     letterSpacing: letterSpacingFormatHandler_1.letterSpacingFormatHandler,
     lineHeight: lineHeightFormatHandler_1.lineHeightFormatHandler,
     link: linkFormatHandler_1.linkFormatHandler,
+    listItemAlign: listItemAlignFormatHandler_1.listItemAlignFormatHandler,
     listItemThread: listItemThreadFormatHandler_1.listItemThreadFormatHandler,
     listLevelThread: listLevelThreadFormatHandler_1.listLevelThreadFormatHandler,
     listStyle: listStyleFormatHandler_1.listStyleFormatHandler,
@@ -117,13 +123,7 @@ exports.defaultFormatKeysPerCategory = {
     block: sharedBlockFormats,
     listItemThread: ['listItemThread'],
     listLevelThread: ['listLevelThread'],
-    listItemElement: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), [
-        'direction',
-        'textAlign',
-        'lineHeight',
-        'margin',
-        'listStyle',
-    ], false),
+    listItemElement: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(sharedBlockFormats), false), ['listItemAlign', 'margin', 'listStyle'], false),
     listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],
     styleBasedSegment: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(styleBasedSegmentFormats), false), ['textColor', 'backgroundColor', 'lineHeight'], false),
     elementBasedSegment: elementBasedSegmentFormats,
@@ -138,6 +138,7 @@ exports.defaultFormatKeysPerCategory = {
     ], false),
     tableCell: [
         'border',
+        'borderColor',
         'backgroundColor',
         'padding',
         'verticalAlign',
@@ -162,7 +163,7 @@ exports.defaultFormatKeysPerCategory = {
         'direction',
         'role',
     ],
-    tableBorder: ['borderBox', 'tableSpacing'],
+    tableBorder: ['borderBox', 'tableSpacing', 'legacyTableBorder'],
     tableCellBorder: ['borderBox'],
     image: [
         'id',

package/lib/formatHandlers/defaultFormatHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultFormatHandlers.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts"],"names":[],"mappings":";;;;AAAA,gEAA+D;AAC/D,sFAAqF;AACrF,iEAAgE;AAChE,0EAAyE;AACzE,oEAAmE;AACnE,0EAAyE;AACzE,sEAAqE;AACrE,yEAAwE;AACxE,qEAAoE;AACpE,oEAAmE;AACnE,kEAAiE;AACjE,6EAA4E;AAC5E,yEAAwE;AACxE,2DAA0D;AAC1D,yEAAwE;AACxE,4DAA2D;AAC3D,6EAA4E;AAC5E,qEAAoE;AACpE,mFAAkF;AAClF,2EAA0E;AAC1E,iEAAgE;AAChE,kFAAiF;AACjF,oFAAmF;AACnF,wEAAuE;AACvE,mEAAkE;AAClE,qEAAoE;AACpE,gEAA+D;AAC/D,gEAA+D;AAC/D,qEAAoE;AACpE,yFAAwF;AACxF,6EAA4E;AAC5E,+EAA8E;AAC9E,yEAAwE;AACxE,2EAA0E;AAC1E,+FAA8F;AAC9F,2EAA0E;AAC1E,uFAAsF;AACtF,2EAA0E;AAC1E,kFAAiF;AACjF,2EAA0E;AAC1E,0EAAyE;AAgBzE,IAAM,uBAAuB,GAAmB;IAC5C,IAAI,EAAE,qCAAiB;IACvB,eAAe,EAAE,2DAA4B;IAC7C,IAAI,EAAE,qCAAiB;IACvB,MAAM,EAAE,yCAAmB;IAC3B,SAAS,EAAE,+CAAsB;IACjC,SAAS,EAAE,+CAAsB;IACjC,OAAO,EAAE,2CAAoB;IAC7B,SAAS,EAAE,+CAAsB;IACjC,OAAO,EAAE,2CAAoB;IAC7B,KAAK,EAAE,uCAAkB;IACzB,UAAU,EAAE,iDAAuB;IACnC,QAAQ,EAAE,6CAAqB;IAC/B,MAAM,EAAE,yCAAmB;IAC3B,SAAS,EAAE,+CAAsB;IACjC,EAAE,EAAE,iCAAe;IACnB,UAAU,EAAE,iDAAuB;IACnC,MAAM,EAAE,yCAAmB;IAC3B,aAAa,EAAE,uDAA0B;IACzC,UAAU,EAAE,iDAAuB;IACnC,IAAI,EAAE,qCAAiB;IACvB,cAAc,EAAE,yDAA2B;IAC3C,eAAe,EAAE,2DAA4B;IAC7C,SAAS,EAAE,+CAAsB;IACjC,MAAM,EAAE,yCAAmB;IAC3B,OAAO,EAAE,2CAAoB;IAC7B,IAAI,EAAE,qCAAiB;IACvB,IAAI,EAAE,qCAAiB;IACvB,MAAM,EAAE,yCAAmB;IAC3B,gBAAgB,EAAE,6DAA6B;IAC/C,WAAW,EAAE,mDAAwB;IACrC,YAAY,EAAE,qDAAyB;IACvC,SAAS,EAAE,+CAAsB;IACjC,SAAS,EAAE,+CAAsB;IACjC,oBAAoB,EAAE,qEAAiC;IACvD,UAAU,EAAE,iDAAuB;IACnC,eAAe,EAAE,2DAA4B;IAC7C,SAAS,EAAE,+CAAsB;IACjC,aAAa,EAAE,uDAA0B;IACzC,UAAU,EAAE,iDAAuB;IACnC,SAAS,EAAE,+CAAsB;CACpC,CAAC;AAEF,IAAM,wBAAwB,GAAmC;IAC7D,eAAe;IACf,YAAY;IACZ,UAAU;CACb,CAAC;AAEF,IAAM,0BAA0B,GAAmC;IAC/D,QAAQ;IACR,WAAW;IACX,kBAAkB;IAClB,QAAQ;IACR,MAAM;CACT,CAAC;AACF,IAAM,kBAAkB,GAAmC;IACvD,WAAW;IACX,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,YAAY;CACf,CAAC;AACF,IAAM,sBAAsB,GAAmC;IAC3D,iBAAiB;IACjB,QAAQ;IACR,SAAS;IACT,QAAQ;CACX,CAAC;AAEF;;GAEG;AACU,QAAA,4BAA4B,GAErC;IACA,KAAK,EAAE,kBAAkB;IACzB,cAAc,EAAE,CAAC,gBAAgB,CAAC;IAClC,eAAe,EAAE,CAAC,iBAAiB,CAAC;IACpC,eAAe,gFACR,kBAAkB;QACrB,WAAW;QACX,WAAW;QACX,YAAY;QACZ,QAAQ;QACR,WAAW;aACd;IACD,SAAS,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,iBAAiB,CAAC;IAC1F,iBAAiB,gFAAM,wBAAwB,YAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,SAAC;IAC9F,mBAAmB,EAAE,0BAA0B;IAC/C,OAAO,2GACA,wBAAwB,+BACxB,0BAA0B;QAC7B,WAAW;QACX,iBAAiB;QACjB,YAAY;aACf;IACD,cAAc,2GAAM,wBAAwB,+BAAK,0BAA0B,YAAE,WAAW,SAAC;IACzF,kBAAkB,2GACX,wBAAwB,+BACxB,0BAA0B;QAC7B,sBAAsB;aACzB;IACD,SAAS,EAAE;QACP,QAAQ;QACR,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,WAAW;QACX,WAAW;QACX,WAAW;QACX,MAAM;KACT;IACD,QAAQ,EAAE,CAAC,iBAAiB,CAAC;IAC7B,WAAW,EAAE,CAAC,MAAM,CAAC;IACrB,KAAK,EAAE;QACH,MAAM;QACN,IAAI;QACJ,QAAQ;QACR,iBAAiB;QACjB,SAAS;QACT,WAAW;QACX,QAAQ;QACR,MAAM;QACN,aAAa;QACb,WAAW;QACX,WAAW;QACX,MAAM;KACT;IACD,WAAW,EAAE,CAAC,WAAW,EAAE,cAAc,CAAC;IAC1C,eAAe,EAAE,CAAC,WAAW,CAAC;IAC9B,KAAK,EAAE;QACH,IAAI;QACJ,MAAM;QACN,QAAQ;QACR,SAAS;QACT,WAAW;QACX,QAAQ;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,eAAe;QACf,YAAY;KACf;IACD,IAAI,EAAE;QACF,MAAM;QACN,WAAW;QACX,WAAW;QACX,SAAS;QACT,QAAQ;QACR,SAAS;QACT,iBAAiB;QACjB,QAAQ;QACR,MAAM;QACN,WAAW;QACX,iBAAiB;KACpB;IACD,gBAAgB,EAAE,CAAC,WAAW,CAAC;IAC/B,IAAI,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;IAC/B,OAAO,EAAE,CAAC,SAAS,CAAC;IACpB,OAAO,2GAAM,kBAAkB,+BAAK,sBAAsB,YAAE,SAAS,EAAE,MAAM,EAAE,WAAW,SAAC;IAC3F,SAAS,gFAAM,sBAAsB,YAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,SAAC;IAC5E,MAAM,EAAE,CAAC,QAAQ,CAAC;IAClB,OAAO,EAAE,CAAC,WAAW,EAAE,iBAAiB,CAAC,EAAE,mEAAmE;CACjH,CAAC;AAEF;;GAEG;AACU,QAAA,oBAAoB,GAAkB,IAAA,6BAAa,EAAC,uBAAuB,CAAC,CAAC,MAAM,CAC5F,UAAC,MAAM,EAAE,GAAG;IACR,MAAM,CAAC,GAAG,CAAC,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC,KAA0B,CAAC;IACtE,OAAO,MAAM,CAAC;AAClB,CAAC,EACc,EAAE,CACpB,CAAC;AAEF;;GAEG;AACU,QAAA,qBAAqB,GAAmB,IAAA,6BAAa,EAAC,uBAAuB,CAAC,CAAC,MAAM,CAC9F,UAAC,MAAM,EAAE,GAAG;IACR,MAAM,CAAC,GAAG,CAAC,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC,KAA2B,CAAC;IACvE,OAAO,MAAM,CAAC;AAClB,CAAC,EACe,EAAE,CACrB,CAAC","sourcesContent":["import { ariaFormatHandler } from './common/ariaFormatHandler';\nimport { backgroundColorFormatHandler } from './common/backgroundColorFormatHandler';\nimport { boldFormatHandler } from './segment/boldFormatHandler';\nimport { borderBoxFormatHandler } from './common/borderBoxFormatHandler';\nimport { borderFormatHandler } from './common/borderFormatHandler';\nimport { boxShadowFormatHandler } from './common/boxShadowFormatHandler';\nimport { datasetFormatHandler } from './common/datasetFormatHandler';\nimport { directionFormatHandler } from './block/directionFormatHandler';\nimport { displayFormatHandler } from './block/displayFormatHandler';\nimport { entityFormatHandler } from './entity/entityFormatHandler';\nimport { floatFormatHandler } from './common/floatFormatHandler';\nimport { fontFamilyFormatHandler } from './segment/fontFamilyFormatHandler';\nimport { fontSizeFormatHandler } from './segment/fontSizeFormatHandler';\nimport { getObjectKeys } from '../domUtils/getObjectKeys';\nimport { htmlAlignFormatHandler } from './block/htmlAlignFormatHandler';\nimport { idFormatHandler } from './common/idFormatHandler';\nimport { imageStateFormatHandler } from './segment/imageStateFormatHandler';\nimport { italicFormatHandler } from './segment/italicFormatHandler';\nimport { letterSpacingFormatHandler } from './segment/letterSpacingFormatHandler';\nimport { lineHeightFormatHandler } from './block/lineHeightFormatHandler';\nimport { linkFormatHandler } from './segment/linkFormatHandler';\nimport { listItemThreadFormatHandler } from './list/listItemThreadFormatHandler';\nimport { listLevelThreadFormatHandler } from './list/listLevelThreadFormatHandler';\nimport { listStyleFormatHandler } from './list/listStyleFormatHandler';\nimport { marginFormatHandler } from './block/marginFormatHandler';\nimport { paddingFormatHandler } from './block/paddingFormatHandler';\nimport { roleFormatHandler } from './common/roleFormatHandler';\nimport { sizeFormatHandler } from './common/sizeFormatHandler';\nimport { strikeFormatHandler } from './segment/strikeFormatHandler';\nimport { superOrSubScriptFormatHandler } from './segment/superOrSubScriptFormatHandler';\nimport { tableLayoutFormatHandler } from './table/tableLayoutFormatHandler';\nimport { tableSpacingFormatHandler } from './table/tableSpacingFormatHandler';\nimport { textAlignFormatHandler } from './block/textAlignFormatHandler';\nimport { textColorFormatHandler } from './segment/textColorFormatHandler';\nimport { textColorOnTableCellFormatHandler } from './table/textColorOnTableCellFormatHandler';\nimport { textIndentFormatHandler } from './block/textIndentFormatHandler';\nimport { undeletableLinkFormatHandler } from './segment/undeletableLinkFormatHandler';\nimport { underlineFormatHandler } from './segment/underlineFormatHandler';\nimport { verticalAlignFormatHandler } from './common/verticalAlignFormatHandler';\nimport { whiteSpaceFormatHandler } from './block/whiteSpaceFormatHandler';\nimport { wordBreakFormatHandler } from './common/wordBreakFormatHandler';\nimport type { FormatHandler } from './FormatHandler';\nimport type {\n    ContentModelFormatMap,\n    FormatApplier,\n    FormatAppliers,\n    FormatHandlerTypeMap,\n    FormatKey,\n    FormatParser,\n    FormatParsers,\n} from 'roosterjs-content-model-types';\n\ntype FormatHandlers = {\n    [Key in FormatKey]: FormatHandler<FormatHandlerTypeMap[Key]>;\n};\n\nconst defaultFormatHandlerMap: FormatHandlers = {\n    aria: ariaFormatHandler,\n    backgroundColor: backgroundColorFormatHandler,\n    bold: boldFormatHandler,\n    border: borderFormatHandler,\n    borderBox: borderBoxFormatHandler,\n    boxShadow: boxShadowFormatHandler,\n    dataset: datasetFormatHandler,\n    direction: directionFormatHandler,\n    display: displayFormatHandler,\n    float: floatFormatHandler,\n    fontFamily: fontFamilyFormatHandler,\n    fontSize: fontSizeFormatHandler,\n    entity: entityFormatHandler,\n    htmlAlign: htmlAlignFormatHandler,\n    id: idFormatHandler,\n    imageState: imageStateFormatHandler,\n    italic: italicFormatHandler,\n    letterSpacing: letterSpacingFormatHandler,\n    lineHeight: lineHeightFormatHandler,\n    link: linkFormatHandler,\n    listItemThread: listItemThreadFormatHandler,\n    listLevelThread: listLevelThreadFormatHandler,\n    listStyle: listStyleFormatHandler,\n    margin: marginFormatHandler,\n    padding: paddingFormatHandler,\n    role: roleFormatHandler,\n    size: sizeFormatHandler,\n    strike: strikeFormatHandler,\n    superOrSubScript: superOrSubScriptFormatHandler,\n    tableLayout: tableLayoutFormatHandler,\n    tableSpacing: tableSpacingFormatHandler,\n    textAlign: textAlignFormatHandler,\n    textColor: textColorFormatHandler,\n    textColorOnTableCell: textColorOnTableCellFormatHandler,\n    textIndent: textIndentFormatHandler,\n    undeletableLink: undeletableLinkFormatHandler,\n    underline: underlineFormatHandler,\n    verticalAlign: verticalAlignFormatHandler,\n    whiteSpace: whiteSpaceFormatHandler,\n    wordBreak: wordBreakFormatHandler,\n};\n\nconst styleBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [\n    'letterSpacing',\n    'fontFamily',\n    'fontSize',\n];\n\nconst elementBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [\n    'strike',\n    'underline',\n    'superOrSubScript',\n    'italic',\n    'bold',\n];\nconst sharedBlockFormats: (keyof FormatHandlerTypeMap)[] = [\n    'direction',\n    'textAlign',\n    'textIndent',\n    'lineHeight',\n    'whiteSpace',\n];\nconst sharedContainerFormats: (keyof FormatHandlerTypeMap)[] = [\n    'backgroundColor',\n    'margin',\n    'padding',\n    'border',\n];\n\n/**\n * @internal\n */\nexport const defaultFormatKeysPerCategory: {\n    [key in keyof ContentModelFormatMap]: (keyof FormatHandlerTypeMap)[];\n} = {\n    block: sharedBlockFormats,\n    listItemThread: ['listItemThread'],\n    listLevelThread: ['listLevelThread'],\n    listItemElement: [\n        ...sharedBlockFormats,\n        'direction',\n        'textAlign',\n        'lineHeight',\n        'margin',\n        'listStyle',\n    ],\n    listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],\n    styleBasedSegment: [...styleBasedSegmentFormats, 'textColor', 'backgroundColor', 'lineHeight'],\n    elementBasedSegment: elementBasedSegmentFormats,\n    segment: [\n        ...styleBasedSegmentFormats,\n        ...elementBasedSegmentFormats,\n        'textColor',\n        'backgroundColor',\n        'lineHeight',\n    ],\n    segmentOnBlock: [...styleBasedSegmentFormats, ...elementBasedSegmentFormats, 'textColor'],\n    segmentOnTableCell: [\n        ...styleBasedSegmentFormats,\n        ...elementBasedSegmentFormats,\n        'textColorOnTableCell',\n    ],\n    tableCell: [\n        'border',\n        'backgroundColor',\n        'padding',\n        'verticalAlign',\n        'wordBreak',\n        'textColor',\n        'htmlAlign',\n        'size',\n    ],\n    tableRow: ['backgroundColor'],\n    tableColumn: ['size'],\n    table: [\n        'aria',\n        'id',\n        'border',\n        'backgroundColor',\n        'display',\n        'htmlAlign',\n        'margin',\n        'size',\n        'tableLayout',\n        'textColor',\n        'direction',\n        'role',\n    ],\n    tableBorder: ['borderBox', 'tableSpacing'],\n    tableCellBorder: ['borderBox'],\n    image: [\n        'id',\n        'size',\n        'margin',\n        'padding',\n        'borderBox',\n        'border',\n        'boxShadow',\n        'display',\n        'float',\n        'verticalAlign',\n        'imageState',\n    ],\n    link: [\n        'link',\n        'textColor',\n        'underline',\n        'display',\n        'margin',\n        'padding',\n        'backgroundColor',\n        'border',\n        'size',\n        'textAlign',\n        'undeletableLink',\n    ],\n    segmentUnderLink: ['textColor'],\n    code: ['fontFamily', 'display'],\n    dataset: ['dataset'],\n    divider: [...sharedBlockFormats, ...sharedContainerFormats, 'display', 'size', 'htmlAlign'],\n    container: [...sharedContainerFormats, 'htmlAlign', 'size', 'display', 'id'],\n    entity: ['entity'],\n    general: ['textColor', 'backgroundColor'], // General model still need to do color transformation in dark mode\n};\n\n/**\n * @internal\n */\nexport const defaultFormatParsers: FormatParsers = getObjectKeys(defaultFormatHandlerMap).reduce(\n    (result, key) => {\n        result[key] = defaultFormatHandlerMap[key].parse as FormatParser<any>;\n        return result;\n    },\n    <FormatParsers>{}\n);\n\n/**\n * @internal\n */\nexport const defaultFormatAppliers: FormatAppliers = getObjectKeys(defaultFormatHandlerMap).reduce(\n    (result, key) => {\n        result[key] = defaultFormatHandlerMap[key].apply as FormatApplier<any>;\n        return result;\n    },\n    <FormatAppliers>{}\n);\n"]}
+{"version":3,"file":"defaultFormatHandlers.js","sourceRoot":"","sources":["../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/defaultFormatHandlers.ts"],"names":[],"mappings":"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","sourcesContent":["import { ariaFormatHandler } from './common/ariaFormatHandler';\nimport { backgroundColorFormatHandler } from './common/backgroundColorFormatHandler';\nimport { boldFormatHandler } from './segment/boldFormatHandler';\nimport { borderBoxFormatHandler } from './common/borderBoxFormatHandler';\nimport { borderColorFormatHandler } from './common/borderColorFormatHandler';\nimport { borderFormatHandler } from './common/borderFormatHandler';\nimport { boxShadowFormatHandler } from './common/boxShadowFormatHandler';\nimport { datasetFormatHandler } from './common/datasetFormatHandler';\nimport { directionFormatHandler } from './block/directionFormatHandler';\nimport { displayFormatHandler } from './block/displayFormatHandler';\nimport { entityFormatHandler } from './entity/entityFormatHandler';\nimport { floatFormatHandler } from './common/floatFormatHandler';\nimport { fontFamilyFormatHandler } from './segment/fontFamilyFormatHandler';\nimport { fontSizeFormatHandler } from './segment/fontSizeFormatHandler';\nimport { getObjectKeys } from '../domUtils/getObjectKeys';\nimport { htmlAlignFormatHandler } from './block/htmlAlignFormatHandler';\nimport { idFormatHandler } from './common/idFormatHandler';\nimport { imageStateFormatHandler } from './segment/imageStateFormatHandler';\nimport { italicFormatHandler } from './segment/italicFormatHandler';\nimport { legacyTableBorderFormatHandler } from './table/legacyTableBorderFormatHandler';\nimport { letterSpacingFormatHandler } from './segment/letterSpacingFormatHandler';\nimport { lineHeightFormatHandler } from './block/lineHeightFormatHandler';\nimport { linkFormatHandler } from './segment/linkFormatHandler';\nimport { listItemAlignFormatHandler } from './list/listItemAlignFormatHandler';\nimport { listItemThreadFormatHandler } from './list/listItemThreadFormatHandler';\nimport { listLevelThreadFormatHandler } from './list/listLevelThreadFormatHandler';\nimport { listStyleFormatHandler } from './list/listStyleFormatHandler';\nimport { marginFormatHandler } from './block/marginFormatHandler';\nimport { paddingFormatHandler } from './block/paddingFormatHandler';\nimport { roleFormatHandler } from './common/roleFormatHandler';\nimport { sizeFormatHandler } from './common/sizeFormatHandler';\nimport { strikeFormatHandler } from './segment/strikeFormatHandler';\nimport { superOrSubScriptFormatHandler } from './segment/superOrSubScriptFormatHandler';\nimport { tableLayoutFormatHandler } from './table/tableLayoutFormatHandler';\nimport { tableSpacingFormatHandler } from './table/tableSpacingFormatHandler';\nimport { textAlignFormatHandler } from './block/textAlignFormatHandler';\nimport { textColorFormatHandler } from './segment/textColorFormatHandler';\nimport { textColorOnTableCellFormatHandler } from './table/textColorOnTableCellFormatHandler';\nimport { textIndentFormatHandler } from './block/textIndentFormatHandler';\nimport { undeletableLinkFormatHandler } from './segment/undeletableLinkFormatHandler';\nimport { underlineFormatHandler } from './segment/underlineFormatHandler';\nimport { verticalAlignFormatHandler } from './common/verticalAlignFormatHandler';\nimport { whiteSpaceFormatHandler } from './block/whiteSpaceFormatHandler';\nimport { wordBreakFormatHandler } from './common/wordBreakFormatHandler';\nimport type { FormatHandler } from './FormatHandler';\nimport type {\n    ContentModelFormatMap,\n    FormatApplier,\n    FormatAppliers,\n    FormatHandlerTypeMap,\n    FormatKey,\n    FormatParser,\n    FormatParsers,\n} from 'roosterjs-content-model-types';\n\ntype FormatHandlers = {\n    [Key in FormatKey]: FormatHandler<FormatHandlerTypeMap[Key]>;\n};\n\nconst defaultFormatHandlerMap: FormatHandlers = {\n    aria: ariaFormatHandler,\n    backgroundColor: backgroundColorFormatHandler,\n    bold: boldFormatHandler,\n    border: borderFormatHandler,\n    borderBox: borderBoxFormatHandler,\n    borderColor: borderColorFormatHandler,\n    boxShadow: boxShadowFormatHandler,\n    dataset: datasetFormatHandler,\n    direction: directionFormatHandler,\n    display: displayFormatHandler,\n    float: floatFormatHandler,\n    fontFamily: fontFamilyFormatHandler,\n    fontSize: fontSizeFormatHandler,\n    entity: entityFormatHandler,\n    htmlAlign: htmlAlignFormatHandler,\n    id: idFormatHandler,\n    imageState: imageStateFormatHandler,\n    italic: italicFormatHandler,\n    legacyTableBorder: legacyTableBorderFormatHandler,\n    letterSpacing: letterSpacingFormatHandler,\n    lineHeight: lineHeightFormatHandler,\n    link: linkFormatHandler,\n    listItemAlign: listItemAlignFormatHandler,\n    listItemThread: listItemThreadFormatHandler,\n    listLevelThread: listLevelThreadFormatHandler,\n    listStyle: listStyleFormatHandler,\n    margin: marginFormatHandler,\n    padding: paddingFormatHandler,\n    role: roleFormatHandler,\n    size: sizeFormatHandler,\n    strike: strikeFormatHandler,\n    superOrSubScript: superOrSubScriptFormatHandler,\n    tableLayout: tableLayoutFormatHandler,\n    tableSpacing: tableSpacingFormatHandler,\n    textAlign: textAlignFormatHandler,\n    textColor: textColorFormatHandler,\n    textColorOnTableCell: textColorOnTableCellFormatHandler,\n    textIndent: textIndentFormatHandler,\n    undeletableLink: undeletableLinkFormatHandler,\n    underline: underlineFormatHandler,\n    verticalAlign: verticalAlignFormatHandler,\n    whiteSpace: whiteSpaceFormatHandler,\n    wordBreak: wordBreakFormatHandler,\n};\n\nconst styleBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [\n    'letterSpacing',\n    'fontFamily',\n    'fontSize',\n];\n\nconst elementBasedSegmentFormats: (keyof FormatHandlerTypeMap)[] = [\n    'strike',\n    'underline',\n    'superOrSubScript',\n    'italic',\n    'bold',\n];\nconst sharedBlockFormats: (keyof FormatHandlerTypeMap)[] = [\n    'direction',\n    'textAlign',\n    'textIndent',\n    'lineHeight',\n    'whiteSpace',\n];\nconst sharedContainerFormats: (keyof FormatHandlerTypeMap)[] = [\n    'backgroundColor',\n    'margin',\n    'padding',\n    'border',\n];\n\n/**\n * @internal\n */\nexport const defaultFormatKeysPerCategory: {\n    [key in keyof ContentModelFormatMap]: (keyof FormatHandlerTypeMap)[];\n} = {\n    block: sharedBlockFormats,\n    listItemThread: ['listItemThread'],\n    listLevelThread: ['listLevelThread'],\n    listItemElement: [...sharedBlockFormats, 'listItemAlign', 'margin', 'listStyle'],\n    listLevel: ['direction', 'textAlign', 'margin', 'padding', 'listStyle', 'backgroundColor'],\n    styleBasedSegment: [...styleBasedSegmentFormats, 'textColor', 'backgroundColor', 'lineHeight'],\n    elementBasedSegment: elementBasedSegmentFormats,\n    segment: [\n        ...styleBasedSegmentFormats,\n        ...elementBasedSegmentFormats,\n        'textColor',\n        'backgroundColor',\n        'lineHeight',\n    ],\n    segmentOnBlock: [...styleBasedSegmentFormats, ...elementBasedSegmentFormats, 'textColor'],\n    segmentOnTableCell: [\n        ...styleBasedSegmentFormats,\n        ...elementBasedSegmentFormats,\n        'textColorOnTableCell',\n    ],\n    tableCell: [\n        'border',\n        'borderColor',\n        'backgroundColor',\n        'padding',\n        'verticalAlign',\n        'wordBreak',\n        'textColor',\n        'htmlAlign',\n        'size',\n    ],\n    tableRow: ['backgroundColor'],\n    tableColumn: ['size'],\n    table: [\n        'aria',\n        'id',\n        'border',\n        'backgroundColor',\n        'display',\n        'htmlAlign',\n        'margin',\n        'size',\n        'tableLayout',\n        'textColor',\n        'direction',\n        'role',\n    ],\n    tableBorder: ['borderBox', 'tableSpacing', 'legacyTableBorder'],\n    tableCellBorder: ['borderBox'],\n    image: [\n        'id',\n        'size',\n        'margin',\n        'padding',\n        'borderBox',\n        'border',\n        'boxShadow',\n        'display',\n        'float',\n        'verticalAlign',\n        'imageState',\n    ],\n    link: [\n        'link',\n        'textColor',\n        'underline',\n        'display',\n        'margin',\n        'padding',\n        'backgroundColor',\n        'border',\n        'size',\n        'textAlign',\n        'undeletableLink',\n    ],\n    segmentUnderLink: ['textColor'],\n    code: ['fontFamily', 'display'],\n    dataset: ['dataset'],\n    divider: [...sharedBlockFormats, ...sharedContainerFormats, 'display', 'size', 'htmlAlign'],\n    container: [...sharedContainerFormats, 'htmlAlign', 'size', 'display', 'id'],\n    entity: ['entity'],\n    general: ['textColor', 'backgroundColor'], // General model still need to do color transformation in dark mode\n};\n\n/**\n * @internal\n */\nexport const defaultFormatParsers: FormatParsers = getObjectKeys(defaultFormatHandlerMap).reduce(\n    (result, key) => {\n        result[key] = defaultFormatHandlerMap[key].parse as FormatParser<any>;\n        return result;\n    },\n    <FormatParsers>{}\n);\n\n/**\n * @internal\n */\nexport const defaultFormatAppliers: FormatAppliers = getObjectKeys(defaultFormatHandlerMap).reduce(\n    (result, key) => {\n        result[key] = defaultFormatHandlerMap[key].apply as FormatApplier<any>;\n        return result;\n    },\n    <FormatAppliers>{}\n);\n"]}

package/lib/formatHandlers/list/listItemAlignFormatHandler.d.ts

@@ -0,0 +1,6 @@
+import type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';
+import type { FormatHandler } from '../FormatHandler';
+/**
+ * @internal
+ */
+export declare const listItemAlignFormatHandler: FormatHandler<TextAlignFormat & DirectionFormat>;

package/lib/formatHandlers/list/listItemAlignFormatHandler.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listItemAlignFormatHandler = void 0;
+var dir_1 = require("../utils/dir");
+/**
+ * @internal
+ */
+exports.listItemAlignFormatHandler = {
+    parse: function (format, element, context) {
+        var _a;
+        // For list, we usually use align-self to implement alignment
+        if (element.style.alignSelf) {
+            format.textAlign = (0, dir_1.calcAlign)(element.style.alignSelf, context.blockFormat.direction);
+        }
+        else if (element.style.textAlign && ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.style.display) !== 'flex') {
+            var align = element.style.textAlign;
+            // For RTL environment, 'start' and 'end' in textAlign means opposite direction compared to LTR unless parent is using flex display
+            if (context.blockFormat.direction === 'rtl' && (align == 'start' || align == 'end')) {
+                align = align == 'start' ? 'end' : 'start';
+            }
+            format.textAlign = (0, dir_1.calcAlign)(align, context.blockFormat.direction);
+        }
+    },
+    apply: function (format, element) {
+        if (format.textAlign) {
+            var parent_1 = element.parentElement;
+            element.style.alignSelf = format.textAlign;
+            // For list item we use align-self to implement textAlign rather than text-align
+            element.style.removeProperty('text-align');
+            if (parent_1) {
+                parent_1.style.flexDirection = 'column';
+                parent_1.style.display = 'flex';
+            }
+        }
+    },
+};
+//# sourceMappingURL=listItemAlignFormatHandler.js.map

package/lib/formatHandlers/list/listItemAlignFormatHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listItemAlignFormatHandler.js","sourceRoot":"","sources":["../../../../../packages/roosterjs-content-model-dom/lib/formatHandlers/list/listItemAlignFormatHandler.ts"],"names":[],"mappings":";;;AAAA,oCAAyC;AAIzC;;GAEG;AACU,QAAA,0BAA0B,GAAqD;IACxF,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;;QAC5B,6DAA6D;QAC7D,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE;YACzB,MAAM,CAAC,SAAS,GAAG,IAAA,eAAS,EAAC,OAAO,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SACxF;aAAM,IAAI,OAAO,CAAC,KAAK,CAAC,SAAS,IAAI,CAAA,MAAA,OAAO,CAAC,aAAa,0CAAE,KAAK,CAAC,OAAO,MAAK,MAAM,EAAE;YACnF,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;YAEpC,mIAAmI;YACnI,IAAI,OAAO,CAAC,WAAW,CAAC,SAAS,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,EAAE;gBACjF,KAAK,GAAG,KAAK,IAAI,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC;aAC9C;YAED,MAAM,CAAC,SAAS,GAAG,IAAA,eAAS,EAAC,KAAK,EAAE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SACtE;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,IAAM,QAAM,GAAG,OAAO,CAAC,aAAa,CAAC;YAErC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;YAE3C,gFAAgF;YAChF,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;YAE3C,IAAI,QAAM,EAAE;gBACR,QAAM,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC;gBACtC,QAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;aACjC;SACJ;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { calcAlign } from '../utils/dir';\nimport type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const listItemAlignFormatHandler: FormatHandler<TextAlignFormat & DirectionFormat> = {\n    parse: (format, element, context) => {\n        // For list, we usually use align-self to implement alignment\n        if (element.style.alignSelf) {\n            format.textAlign = calcAlign(element.style.alignSelf, context.blockFormat.direction);\n        } else if (element.style.textAlign && element.parentElement?.style.display !== 'flex') {\n            let align = element.style.textAlign;\n\n            // For RTL environment, 'start' and 'end' in textAlign means opposite direction compared to LTR unless parent is using flex display\n            if (context.blockFormat.direction === 'rtl' && (align == 'start' || align == 'end')) {\n                align = align == 'start' ? 'end' : 'start';\n            }\n\n            format.textAlign = calcAlign(align, context.blockFormat.direction);\n        }\n    },\n    apply: (format, element) => {\n        if (format.textAlign) {\n            const parent = element.parentElement;\n\n            element.style.alignSelf = format.textAlign;\n\n            // For list item we use align-self to implement textAlign rather than text-align\n            element.style.removeProperty('text-align');\n\n            if (parent) {\n                parent.style.flexDirection = 'column';\n                parent.style.display = 'flex';\n            }\n        }\n    },\n};\n"]}

package/lib/formatHandlers/table/legacyTableBorderFormatHandler.d.ts

@@ -0,0 +1,6 @@
+import type { FormatHandler } from '../FormatHandler';
+import type { LegacyTableBorderFormat } from 'roosterjs-content-model-types';
+/**
+ * @internal
+ */
+export declare const legacyTableBorderFormatHandler: FormatHandler<LegacyTableBorderFormat>;

package/lib/formatHandlers/table/legacyTableBorderFormatHandler.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.legacyTableBorderFormatHandler = void 0;
+/**
+ * @internal
+ */
+exports.legacyTableBorderFormatHandler = {
+    parse: function (format, element) {
+        var border = element.getAttribute('border');
+        var cellSpacing = element.getAttribute('cellspacing');
+        var cellpadding = element.getAttribute('cellpadding');
+        if (border) {
+            format.legacyTableBorder = border;
+        }
+        if (cellSpacing) {
+            format.cellSpacing = cellSpacing;
+        }
+        if (cellpadding) {
+            format.cellPadding = cellpadding;
+        }
+    },
+    apply: function (format, element) {
+        if (format.legacyTableBorder) {
+            element.setAttribute('border', format.legacyTableBorder);
+        }
+        if (format.cellSpacing) {
+            element.setAttribute('cellspacing', format.cellSpacing);
+        }
+        if (format.cellPadding) {
+            element.setAttribute('cellpadding', format.cellPadding);
+        }
+    },
+};
+//# sourceMappingURL=legacyTableBorderFormatHandler.js.map