roosterjs-content-model-dom 0.21.2 → 0.23.0

package/lib/domToModel/processors/textProcessor.js

@@ -8,6 +8,7 @@ var createText_1 = require("../../modelApi/creators/createText");
 var ensureParagraph_1 = require("../../modelApi/common/ensureParagraph");
 var getRegularSelectionOffsets_1 = require("../utils/getRegularSelectionOffsets");
 var hasSpacesOnly_1 = require("../../modelApi/common/hasSpacesOnly");
+var isWhiteSpacePreserved_1 = require("../../domUtils/isWhiteSpacePreserved");
 /**
  * @internal
  */
@@ -41,15 +42,13 @@ var textProcessor = function (group, textNode, context) {
     (_a = context.domIndexer) === null || _a === void 0 ? void 0 : _a.onSegment(textNode, paragraph, segments.filter(function (x) { return !!x; }));
 };
 exports.textProcessor = textProcessor;
-// When we see these values of white-space style, need to preserve spaces and line-breaks and let browser handle it for us.
-var WhiteSpaceValuesNeedToHandle = ['pre', 'pre-wrap', 'pre-line', 'break-spaces'];
 function addTextSegment(group, text, paragraph, context) {
     var _a;
     var textModel;
     if (text) {
         if (!(0, hasSpacesOnly_1.hasSpacesOnly)(text) ||
             ((_a = paragraph === null || paragraph === void 0 ? void 0 : paragraph.segments.length) !== null && _a !== void 0 ? _a : 0) > 0 ||
-            WhiteSpaceValuesNeedToHandle.indexOf((paragraph === null || paragraph === void 0 ? void 0 : paragraph.format.whiteSpace) || '') >= 0) {
+            (0, isWhiteSpacePreserved_1.isWhiteSpacePreserved)(paragraph === null || paragraph === void 0 ? void 0 : paragraph.format.whiteSpace)) {
             textModel = (0, createText_1.createText)(text, context.segmentFormat);
             if (context.isInSelection) {
                 textModel.isSelected = true;

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

@@ -1 +1 @@
-{"version":3,"file":"textProcessor.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/textProcessor.ts"],"names":[],"mappings":"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","sourcesContent":["import { addDecorators } from '../../modelApi/common/addDecorators';\nimport { addSegment } from '../../modelApi/common/addSegment';\nimport { addSelectionMarker } from '../utils/addSelectionMarker';\nimport { createText } from '../../modelApi/creators/createText';\nimport { ensureParagraph } from '../../modelApi/common/ensureParagraph';\nimport { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';\nimport { hasSpacesOnly } from '../../modelApi/common/hasSpacesOnly';\nimport type {\n    ContentModelBlockGroup,\n    ContentModelParagraph,\n    ContentModelText,\n    DomToModelContext,\n    ElementProcessor,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const textProcessor: ElementProcessor<Text> = (\n    group: ContentModelBlockGroup,\n    textNode: Text,\n    context: DomToModelContext\n) => {\n    let txt = textNode.nodeValue || '';\n    const offsets = getRegularSelectionOffsets(context, textNode);\n    const txtStartOffset = offsets[0];\n    let txtEndOffset = offsets[1];\n    const segments: (ContentModelText | undefined)[] = [];\n    const paragraph = ensureParagraph(group, context.blockFormat);\n\n    if (txtStartOffset >= 0) {\n        const subText = txt.substring(0, txtStartOffset);\n        segments.push(addTextSegment(group, subText, paragraph, context));\n        context.isInSelection = true;\n\n        addSelectionMarker(group, context);\n\n        txt = txt.substring(txtStartOffset);\n        txtEndOffset -= txtStartOffset;\n    }\n\n    if (txtEndOffset >= 0) {\n        const subText = txt.substring(0, txtEndOffset);\n        segments.push(addTextSegment(group, subText, paragraph, context));\n\n        if (\n            context.selection &&\n            (context.selection.type != 'range' || !context.selection.range.collapsed)\n        ) {\n            addSelectionMarker(group, context);\n        }\n\n        context.isInSelection = false;\n        txt = txt.substring(txtEndOffset);\n    }\n\n    segments.push(addTextSegment(group, txt, paragraph, context));\n    context.domIndexer?.onSegment(\n        textNode,\n        paragraph,\n        segments.filter((x): x is ContentModelText => !!x)\n    );\n};\n\n// When we see these values of white-space style, need to preserve spaces and line-breaks and let browser handle it for us.\nconst WhiteSpaceValuesNeedToHandle = ['pre', 'pre-wrap', 'pre-line', 'break-spaces'];\n\nfunction addTextSegment(\n    group: ContentModelBlockGroup,\n    text: string,\n    paragraph: ContentModelParagraph,\n    context: DomToModelContext\n): ContentModelText | undefined {\n    let textModel: ContentModelText | undefined;\n\n    if (text) {\n        if (\n            !hasSpacesOnly(text) ||\n            (paragraph?.segments.length ?? 0) > 0 ||\n            WhiteSpaceValuesNeedToHandle.indexOf(paragraph?.format.whiteSpace || '') >= 0\n        ) {\n            textModel = createText(text, context.segmentFormat);\n\n            if (context.isInSelection) {\n                textModel.isSelected = true;\n            }\n\n            addDecorators(textModel, context);\n\n            addSegment(group, textModel, context.blockFormat);\n        }\n    }\n\n    return textModel;\n}\n"]}
+{"version":3,"file":"textProcessor.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/domToModel/processors/textProcessor.ts"],"names":[],"mappings":"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","sourcesContent":["import { addDecorators } from '../../modelApi/common/addDecorators';\nimport { addSegment } from '../../modelApi/common/addSegment';\nimport { addSelectionMarker } from '../utils/addSelectionMarker';\nimport { createText } from '../../modelApi/creators/createText';\nimport { ensureParagraph } from '../../modelApi/common/ensureParagraph';\nimport { getRegularSelectionOffsets } from '../utils/getRegularSelectionOffsets';\nimport { hasSpacesOnly } from '../../modelApi/common/hasSpacesOnly';\nimport { isWhiteSpacePreserved } from '../../domUtils/isWhiteSpacePreserved';\nimport type {\n    ContentModelBlockGroup,\n    ContentModelParagraph,\n    ContentModelText,\n    DomToModelContext,\n    ElementProcessor,\n} from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const textProcessor: ElementProcessor<Text> = (\n    group: ContentModelBlockGroup,\n    textNode: Text,\n    context: DomToModelContext\n) => {\n    let txt = textNode.nodeValue || '';\n    const offsets = getRegularSelectionOffsets(context, textNode);\n    const txtStartOffset = offsets[0];\n    let txtEndOffset = offsets[1];\n    const segments: (ContentModelText | undefined)[] = [];\n    const paragraph = ensureParagraph(group, context.blockFormat);\n\n    if (txtStartOffset >= 0) {\n        const subText = txt.substring(0, txtStartOffset);\n        segments.push(addTextSegment(group, subText, paragraph, context));\n        context.isInSelection = true;\n\n        addSelectionMarker(group, context);\n\n        txt = txt.substring(txtStartOffset);\n        txtEndOffset -= txtStartOffset;\n    }\n\n    if (txtEndOffset >= 0) {\n        const subText = txt.substring(0, txtEndOffset);\n        segments.push(addTextSegment(group, subText, paragraph, context));\n\n        if (\n            context.selection &&\n            (context.selection.type != 'range' || !context.selection.range.collapsed)\n        ) {\n            addSelectionMarker(group, context);\n        }\n\n        context.isInSelection = false;\n        txt = txt.substring(txtEndOffset);\n    }\n\n    segments.push(addTextSegment(group, txt, paragraph, context));\n    context.domIndexer?.onSegment(\n        textNode,\n        paragraph,\n        segments.filter((x): x is ContentModelText => !!x)\n    );\n};\n\nfunction addTextSegment(\n    group: ContentModelBlockGroup,\n    text: string,\n    paragraph: ContentModelParagraph,\n    context: DomToModelContext\n): ContentModelText | undefined {\n    let textModel: ContentModelText | undefined;\n\n    if (text) {\n        if (\n            !hasSpacesOnly(text) ||\n            (paragraph?.segments.length ?? 0) > 0 ||\n            isWhiteSpacePreserved(paragraph?.format.whiteSpace)\n        ) {\n            textModel = createText(text, context.segmentFormat);\n\n            if (context.isInSelection) {\n                textModel.isSelected = true;\n            }\n\n            addDecorators(textModel, context);\n\n            addSegment(group, textModel, context.blockFormat);\n        }\n    }\n\n    return textModel;\n}\n"]}

package/lib/domUtils/entityUtils.d.ts

@@ -30,8 +30,3 @@ export declare function isEntityDelimiter(element: HTMLElement): boolean;
  * @param element the node to add the delimiters
  */
 export declare function addDelimiters(doc: Document, element: HTMLElement): HTMLElement[];
-/**
- * Allowed CSS selector for entity, used by HtmlSanitizer.
- * TODO: Revisit paste logic and check if we can remove HtmlSanitizer
- */
-export declare const AllowedEntityClasses: ReadonlyArray<string>;

package/lib/domUtils/entityUtils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AllowedEntityClasses = exports.addDelimiters = exports.isEntityDelimiter = exports.generateEntityClassNames = exports.parseEntityClassName = exports.getAllEntityWrappers = exports.isEntityElement = void 0;
+exports.addDelimiters = exports.isEntityDelimiter = exports.generateEntityClassNames = exports.parseEntityClassName = exports.getAllEntityWrappers = exports.isEntityElement = void 0;
 var tslib_1 = require("tslib");
 var toArray_1 = require("./toArray");
 var isElementOfType_1 = require("./isElementOfType");
@@ -104,16 +104,4 @@ function insertDelimiter(doc, element, isAfter) {
     (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(span, isAfter ? element.nextSibling : element);
     return span;
 }
-/**
- * Allowed CSS selector for entity, used by HtmlSanitizer.
- * TODO: Revisit paste logic and check if we can remove HtmlSanitizer
- */
-exports.AllowedEntityClasses = [
-    '^' + ENTITY_INFO_NAME + '$',
-    '^' + ENTITY_ID_PREFIX,
-    '^' + ENTITY_TYPE_PREFIX,
-    '^' + ENTITY_READONLY_PREFIX,
-    '^' + DELIMITER_BEFORE + '$',
-    '^' + DELIMITER_AFTER + '$',
-];
 //# sourceMappingURL=entityUtils.js.map

package/lib/domUtils/entityUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"entityUtils.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import toArray from './toArray';\nimport { isElementOfType } from './isElementOfType';\nimport { isNodeOfType } from './isNodeOfType';\nimport type { ContentModelEntityFormat } from 'roosterjs-content-model-types';\n\nconst ENTITY_INFO_NAME = '_Entity';\nconst ENTITY_TYPE_PREFIX = '_EType_';\nconst ENTITY_ID_PREFIX = '_EId_';\nconst ENTITY_READONLY_PREFIX = '_EReadonly_';\nconst ZERO_WIDTH_SPACE = '\\u200B';\nconst DELIMITER_BEFORE = 'entityDelimiterBefore';\nconst DELIMITER_AFTER = 'entityDelimiterAfter';\n\n/**\n * Check if the given DOM Node is an entity wrapper element\n */\nexport function isEntityElement(node: Node): boolean {\n    return isNodeOfType(node, 'ELEMENT_NODE') && node.classList.contains(ENTITY_INFO_NAME);\n}\n\n/**\n * Get all entity wrapper elements under the given root element\n * @param root The root element to query from\n * @returns An array of entity wrapper elements\n */\nexport function getAllEntityWrappers(root: HTMLElement): HTMLElement[] {\n    return toArray(root.querySelectorAll('.' + ENTITY_INFO_NAME)) as HTMLElement[];\n}\n\n/**\n * Parse entity class names from entity wrapper element\n * @param className Class names of entity\n * @param format The output entity format object\n */\nexport function parseEntityClassName(\n    className: string,\n    format: ContentModelEntityFormat\n): boolean | undefined {\n    if (className == ENTITY_INFO_NAME) {\n        return true;\n    } else if (className.indexOf(ENTITY_TYPE_PREFIX) == 0) {\n        format.entityType = className.substring(ENTITY_TYPE_PREFIX.length);\n    } else if (className.indexOf(ENTITY_ID_PREFIX) == 0) {\n        format.id = className.substring(ENTITY_ID_PREFIX.length);\n    } else if (className.indexOf(ENTITY_READONLY_PREFIX) == 0) {\n        format.isReadonly = className.substring(ENTITY_READONLY_PREFIX.length) == '1';\n    }\n}\n\n/**\n * Generate Entity class names for an entity wrapper\n * @param format The source entity format object\n * @returns A combined CSS class name string for entity wrapper\n */\nexport function generateEntityClassNames(format: ContentModelEntityFormat): string {\n    return format.isFakeEntity\n        ? ''\n        : `${ENTITY_INFO_NAME} ${ENTITY_TYPE_PREFIX}${format.entityType ?? ''} ${\n              format.id ? `${ENTITY_ID_PREFIX}${format.id} ` : ''\n          }${ENTITY_READONLY_PREFIX}${format.isReadonly ? '1' : '0'}`;\n}\n\n/**\n * @internal\n */\nexport function isEntityDelimiter(element: HTMLElement): boolean {\n    return (\n        isElementOfType(element, 'span') &&\n        (element.classList.contains(DELIMITER_AFTER) ||\n            element.classList.contains(DELIMITER_BEFORE)) &&\n        element.textContent === ZERO_WIDTH_SPACE\n    );\n}\n\n/**\n * Adds delimiters to the element provided. If the delimiters already exists, will not be added\n * @param element the node to add the delimiters\n */\nexport function addDelimiters(doc: Document, element: HTMLElement): HTMLElement[] {\n    let [delimiterAfter, delimiterBefore] = getDelimiters(element);\n\n    if (!delimiterAfter) {\n        delimiterAfter = insertDelimiter(doc, element, true /*isAfter*/);\n    }\n\n    if (!delimiterBefore) {\n        delimiterBefore = insertDelimiter(doc, element, false /*isAfter*/);\n    }\n\n    return [delimiterAfter, delimiterBefore];\n}\n\nfunction getDelimiters(entityWrapper: HTMLElement): (HTMLElement | undefined)[] {\n    const result: (HTMLElement | undefined)[] = [];\n    const { nextElementSibling, previousElementSibling } = entityWrapper;\n    result.push(\n        isDelimiter(nextElementSibling, DELIMITER_AFTER),\n        isDelimiter(previousElementSibling, DELIMITER_BEFORE)\n    );\n\n    return result;\n}\n\nfunction isDelimiter(el: Element | null, className: string): HTMLElement | undefined {\n    return el?.classList.contains(className) && el.textContent == ZERO_WIDTH_SPACE\n        ? (el as HTMLElement)\n        : undefined;\n}\n\nfunction insertDelimiter(doc: Document, element: Element, isAfter: boolean) {\n    const span = doc.createElement('span');\n\n    span.className = isAfter ? DELIMITER_AFTER : DELIMITER_BEFORE;\n    span.appendChild(doc.createTextNode(ZERO_WIDTH_SPACE));\n    element.parentNode?.insertBefore(span, isAfter ? element.nextSibling : element);\n\n    return span;\n}\n\n/**\n * Allowed CSS selector for entity, used by HtmlSanitizer.\n * TODO: Revisit paste logic and check if we can remove HtmlSanitizer\n */\nexport const AllowedEntityClasses: ReadonlyArray<string> = [\n    '^' + ENTITY_INFO_NAME + '$',\n    '^' + ENTITY_ID_PREFIX,\n    '^' + ENTITY_TYPE_PREFIX,\n    '^' + ENTITY_READONLY_PREFIX,\n    '^' + DELIMITER_BEFORE + '$',\n    '^' + DELIMITER_AFTER + '$',\n];\n"]}
+{"version":3,"file":"entityUtils.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-dom/lib/domUtils/entityUtils.ts"],"names":[],"mappings":"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","sourcesContent":["import toArray from './toArray';\nimport { isElementOfType } from './isElementOfType';\nimport { isNodeOfType } from './isNodeOfType';\nimport type { ContentModelEntityFormat } from 'roosterjs-content-model-types';\n\nconst ENTITY_INFO_NAME = '_Entity';\nconst ENTITY_TYPE_PREFIX = '_EType_';\nconst ENTITY_ID_PREFIX = '_EId_';\nconst ENTITY_READONLY_PREFIX = '_EReadonly_';\nconst ZERO_WIDTH_SPACE = '\\u200B';\nconst DELIMITER_BEFORE = 'entityDelimiterBefore';\nconst DELIMITER_AFTER = 'entityDelimiterAfter';\n\n/**\n * Check if the given DOM Node is an entity wrapper element\n */\nexport function isEntityElement(node: Node): boolean {\n    return isNodeOfType(node, 'ELEMENT_NODE') && node.classList.contains(ENTITY_INFO_NAME);\n}\n\n/**\n * Get all entity wrapper elements under the given root element\n * @param root The root element to query from\n * @returns An array of entity wrapper elements\n */\nexport function getAllEntityWrappers(root: HTMLElement): HTMLElement[] {\n    return toArray(root.querySelectorAll('.' + ENTITY_INFO_NAME)) as HTMLElement[];\n}\n\n/**\n * Parse entity class names from entity wrapper element\n * @param className Class names of entity\n * @param format The output entity format object\n */\nexport function parseEntityClassName(\n    className: string,\n    format: ContentModelEntityFormat\n): boolean | undefined {\n    if (className == ENTITY_INFO_NAME) {\n        return true;\n    } else if (className.indexOf(ENTITY_TYPE_PREFIX) == 0) {\n        format.entityType = className.substring(ENTITY_TYPE_PREFIX.length);\n    } else if (className.indexOf(ENTITY_ID_PREFIX) == 0) {\n        format.id = className.substring(ENTITY_ID_PREFIX.length);\n    } else if (className.indexOf(ENTITY_READONLY_PREFIX) == 0) {\n        format.isReadonly = className.substring(ENTITY_READONLY_PREFIX.length) == '1';\n    }\n}\n\n/**\n * Generate Entity class names for an entity wrapper\n * @param format The source entity format object\n * @returns A combined CSS class name string for entity wrapper\n */\nexport function generateEntityClassNames(format: ContentModelEntityFormat): string {\n    return format.isFakeEntity\n        ? ''\n        : `${ENTITY_INFO_NAME} ${ENTITY_TYPE_PREFIX}${format.entityType ?? ''} ${\n              format.id ? `${ENTITY_ID_PREFIX}${format.id} ` : ''\n          }${ENTITY_READONLY_PREFIX}${format.isReadonly ? '1' : '0'}`;\n}\n\n/**\n * @internal\n */\nexport function isEntityDelimiter(element: HTMLElement): boolean {\n    return (\n        isElementOfType(element, 'span') &&\n        (element.classList.contains(DELIMITER_AFTER) ||\n            element.classList.contains(DELIMITER_BEFORE)) &&\n        element.textContent === ZERO_WIDTH_SPACE\n    );\n}\n\n/**\n * Adds delimiters to the element provided. If the delimiters already exists, will not be added\n * @param element the node to add the delimiters\n */\nexport function addDelimiters(doc: Document, element: HTMLElement): HTMLElement[] {\n    let [delimiterAfter, delimiterBefore] = getDelimiters(element);\n\n    if (!delimiterAfter) {\n        delimiterAfter = insertDelimiter(doc, element, true /*isAfter*/);\n    }\n\n    if (!delimiterBefore) {\n        delimiterBefore = insertDelimiter(doc, element, false /*isAfter*/);\n    }\n\n    return [delimiterAfter, delimiterBefore];\n}\n\nfunction getDelimiters(entityWrapper: HTMLElement): (HTMLElement | undefined)[] {\n    const result: (HTMLElement | undefined)[] = [];\n    const { nextElementSibling, previousElementSibling } = entityWrapper;\n    result.push(\n        isDelimiter(nextElementSibling, DELIMITER_AFTER),\n        isDelimiter(previousElementSibling, DELIMITER_BEFORE)\n    );\n\n    return result;\n}\n\nfunction isDelimiter(el: Element | null, className: string): HTMLElement | undefined {\n    return el?.classList.contains(className) && el.textContent == ZERO_WIDTH_SPACE\n        ? (el as HTMLElement)\n        : undefined;\n}\n\nfunction insertDelimiter(doc: Document, element: Element, isAfter: boolean) {\n    const span = doc.createElement('span');\n\n    span.className = isAfter ? DELIMITER_AFTER : DELIMITER_BEFORE;\n    span.appendChild(doc.createTextNode(ZERO_WIDTH_SPACE));\n    element.parentNode?.insertBefore(span, isAfter ? element.nextSibling : element);\n\n    return span;\n}\n"]}

package/lib/domUtils/isWhiteSpacePreserved.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the given white-space style value will cause preserving white space
+ * @param whiteSpace The white-space style value to check
+ */
+export declare function isWhiteSpacePreserved(whiteSpace: string | undefined): boolean;

package/lib/{modelApi/common → domUtils}/isWhiteSpacePreserved.js

@@ -4,13 +4,11 @@ exports.isWhiteSpacePreserved = void 0;
 // According to https://developer.mozilla.org/en-US/docs/Web/CSS/white-space, these style values will need to preserve white spaces
 var WHITESPACE_PRE_VALUES = ['pre', 'pre-wrap', 'break-spaces'];
 /**
- * Check if we have white-space to be preserved for a given paragraph
- * @param paragraph The paragraph to check
+ * Check if the given white-space style value will cause preserving white space
+ * @param whiteSpace The white-space style value to check
  */
-function isWhiteSpacePreserved(paragraph) {
-    return ((paragraph.format.whiteSpace &&
-        WHITESPACE_PRE_VALUES.indexOf(paragraph.format.whiteSpace) >= 0) ||
-        false);
+function isWhiteSpacePreserved(whiteSpace) {
+    return !!whiteSpace && WHITESPACE_PRE_VALUES.indexOf(whiteSpace) >= 0;
 }
 exports.isWhiteSpacePreserved = isWhiteSpacePreserved;
 //# sourceMappingURL=isWhiteSpacePreserved.js.map

package/lib/domUtils/isWhiteSpacePreserved.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isWhiteSpacePreserved.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-dom/lib/domUtils/isWhiteSpacePreserved.ts"],"names":[],"mappings":";;;AAAA,mIAAmI;AACnI,IAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC;AAElE;;;GAGG;AACH,SAAgB,qBAAqB,CAAC,UAA8B;IAChE,OAAO,CAAC,CAAC,UAAU,IAAI,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;AAC1E,CAAC;AAFD,sDAEC","sourcesContent":["// According to https://developer.mozilla.org/en-US/docs/Web/CSS/white-space, these style values will need to preserve white spaces\nconst WHITESPACE_PRE_VALUES = ['pre', 'pre-wrap', 'break-spaces'];\n\n/**\n * Check if the given white-space style value will cause preserving white space\n * @param whiteSpace The white-space style value to check\n */\nexport function isWhiteSpacePreserved(whiteSpace: string | undefined): boolean {\n    return !!whiteSpace && WHITESPACE_PRE_VALUES.indexOf(whiteSpace) >= 0;\n}\n"]}

package/lib/domUtils/reuseCachedElement.d.ts

@@ -0,0 +1,14 @@
+/**
+ * When set a DOM tree into editor, reuse the existing element in editor and no need to change it
+ * @param param Parent node of the reused element
+ * @param element The element to keep in parent node
+ * @param refNode Reference node, it is point to current node that is being processed. It must be a child of parent node, or null.
+ * We will start processing from this node, if it is not the same with element, remove it and keep processing its next sibling,
+ * until we see an element that is the same with the passed in element or null.
+ * @returns The new reference element
+ */
+export declare function reuseCachedElement(parent: Node, element: Node, refNode: Node | null): Node | null;
+/**
+ * @internal
+ */
+export declare function removeNode(node: Node): Node | null;

package/lib/{modelToDom/utils → domUtils}/reuseCachedElement.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.removeNode = exports.reuseCachedElement = void 0;
-var entityUtils_1 = require("../../domUtils/entityUtils");
+var entityUtils_1 = require("./entityUtils");
 /**
- * @internal
+ * When set a DOM tree into editor, reuse the existing element in editor and no need to change it
+ * @param param Parent node of the reused element
+ * @param element The element to keep in parent node
+ * @param refNode Reference node, it is point to current node that is being processed. It must be a child of parent node, or null.
+ * We will start processing from this node, if it is not the same with element, remove it and keep processing its next sibling,
+ * until we see an element that is the same with the passed in element or null.
+ * @returns The new reference element
  */
 function reuseCachedElement(parent, element, refNode) {
     var _a;

package/lib/domUtils/reuseCachedElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reuseCachedElement.js","sourceRoot":"","sources":["../../../../packages-content-model/roosterjs-content-model-dom/lib/domUtils/reuseCachedElement.ts"],"names":[],"mappings":";;;AAAA,6CAAgD;AAEhD;;;;;;;;GAQG;AACH,SAAgB,kBAAkB,CAAC,MAAY,EAAE,OAAa,EAAE,OAAoB;;IAChF,IAAI,OAAO,CAAC,UAAU,IAAI,MAAM,EAAE;QAC9B,wGAAwG;QACxG,2GAA2G;QAC3G,uEAAuE;QACvE,OAAO,OAAO,IAAI,OAAO,IAAI,OAAO,IAAI,CAAC,IAAA,6BAAe,EAAC,OAAO,CAAC,EAAE;YAC/D,IAAM,IAAI,GAAG,OAAO,CAAC,WAAW,CAAC;YAEjC,MAAA,OAAO,CAAC,UAAU,0CAAE,WAAW,CAAC,OAAO,CAAC,CAAC;YACzC,OAAO,GAAG,IAAI,CAAC;SAClB;QAED,IAAI,OAAO,IAAI,OAAO,IAAI,OAAO,EAAE;YAC/B,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC;SACjC;aAAM;YACH,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;SACzC;KACJ;SAAM;QACH,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KACzC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AAtBD,gDAsBC;AAED;;GAEG;AACH,SAAgB,UAAU,CAAC,IAAU;;IACjC,IAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC;IAC9B,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAEnC,OAAO,IAAI,CAAC;AAChB,CAAC;AALD,gCAKC","sourcesContent":["import { isEntityElement } from './entityUtils';\n\n/**\n * When set a DOM tree into editor, reuse the existing element in editor and no need to change it\n * @param param Parent node of the reused element\n * @param element The element to keep in parent node\n * @param refNode Reference node, it is point to current node that is being processed. It must be a child of parent node, or null.\n * We will start processing from this node, if it is not the same with element, remove it and keep processing its next sibling,\n * until we see an element that is the same with the passed in element or null.\n * @returns The new reference element\n */\nexport function reuseCachedElement(parent: Node, element: Node, refNode: Node | null): Node | null {\n    if (element.parentNode == parent) {\n        // Remove nodes before the one we are hitting since they don't appear in Content Model at this position.\n        // But we don't want to touch entity since it would better to keep entity at its place unless it is removed\n        // In that case we will remove it after we have handled all other nodes\n        while (refNode && refNode != element && !isEntityElement(refNode)) {\n            const next = refNode.nextSibling;\n\n            refNode.parentNode?.removeChild(refNode);\n            refNode = next;\n        }\n\n        if (refNode && refNode == element) {\n            refNode = refNode.nextSibling;\n        } else {\n            parent.insertBefore(element, refNode);\n        }\n    } else {\n        parent.insertBefore(element, refNode);\n    }\n\n    return refNode;\n}\n\n/**\n * @internal\n */\nexport function removeNode(node: Node): Node | null {\n    const next = node.nextSibling;\n    node.parentNode?.removeChild(node);\n\n    return next;\n}\n"]}

package/lib/formatHandlers/block/paddingFormatHandler.js

@@ -11,10 +11,15 @@ var PaddingKeys = [
  * @internal
  */
 exports.paddingFormatHandler = {
-    parse: function (format, element) {
+    parse: function (format, element, _, defaultStyle) {
         PaddingKeys.forEach(function (key) {
+            var _a;
             var value = element.style[key];
-            if (value) {
+            var defaultValue = (_a = defaultStyle[key]) !== null && _a !== void 0 ? _a : '0px';
+            if (value == '0') {
+                value = '0px';
+            }
+            if (value && value != defaultValue) {
                 format[key] = value;
             }
         });

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

@@ -1 +1 @@
-{"version":3,"file":"paddingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,WAAW,GAAwD;IACrE,YAAY;IACZ,cAAc;IACd,eAAe;IACf,aAAa;CAChB,CAAC;AAEF;;GAEG;AACU,QAAA,oBAAoB,GAAiC;IAC9D,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,WAAW,CAAC,OAAO,CAAC,UAAA,GAAG;YACnB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEjC,IAAI,KAAK,EAAE;gBACP,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aACvB;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,WAAW,CAAC,OAAO,CAAC,UAAA,GAAG;YACnB,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAC1B,IAAI,KAAK,EAAE;gBACP,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC9B;QACL,CAAC,CAAC,CAAC;IACP,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { PaddingFormat } from 'roosterjs-content-model-types';\n\nconst PaddingKeys: (keyof PaddingFormat & keyof CSSStyleDeclaration)[] = [\n    'paddingTop',\n    'paddingRight',\n    'paddingBottom',\n    'paddingLeft',\n];\n\n/**\n * @internal\n */\nexport const paddingFormatHandler: FormatHandler<PaddingFormat> = {\n    parse: (format, element) => {\n        PaddingKeys.forEach(key => {\n            const value = element.style[key];\n\n            if (value) {\n                format[key] = value;\n            }\n        });\n    },\n    apply: (format, element) => {\n        PaddingKeys.forEach(key => {\n            const value = format[key];\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n    },\n};\n"]}
+{"version":3,"file":"paddingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/paddingFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,WAAW,GAAwD;IACrE,YAAY;IACZ,cAAc;IACd,eAAe;IACf,aAAa;CAChB,CAAC;AAEF;;GAEG;AACU,QAAA,oBAAoB,GAAiC;IAC9D,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,WAAW,CAAC,OAAO,CAAC,UAAA,GAAG;;YACnB,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC/B,IAAM,YAAY,GAAG,MAAA,YAAY,CAAC,GAAG,CAAC,mCAAI,KAAK,CAAC;YAEhD,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,CAAC;aACvB;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,WAAW,CAAC,OAAO,CAAC,UAAA,GAAG;YACnB,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YAC1B,IAAI,KAAK,EAAE;gBACP,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;aAC9B;QACL,CAAC,CAAC,CAAC;IACP,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { PaddingFormat } from 'roosterjs-content-model-types';\n\nconst PaddingKeys: (keyof PaddingFormat & keyof CSSStyleDeclaration)[] = [\n    'paddingTop',\n    'paddingRight',\n    'paddingBottom',\n    'paddingLeft',\n];\n\n/**\n * @internal\n */\nexport const paddingFormatHandler: FormatHandler<PaddingFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        PaddingKeys.forEach(key => {\n            let value = element.style[key];\n            const defaultValue = defaultStyle[key] ?? '0px';\n\n            if (value == '0') {\n                value = '0px';\n            }\n\n            if (value && value != defaultValue) {\n                format[key] = value;\n            }\n        });\n    },\n    apply: (format, element) => {\n        PaddingKeys.forEach(key => {\n            const value = format[key];\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n    },\n};\n"]}

package/lib/formatHandlers/block/whiteSpaceFormatHandler.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.whiteSpaceFormatHandler = void 0;
+var shouldSetValue_1 = require("../utils/shouldSetValue");
 /**
  * @internal
  */
 exports.whiteSpaceFormatHandler = {
     parse: function (format, element, _, defaultStyle) {
         var whiteSpace = element.style.whiteSpace || defaultStyle.whiteSpace;
-        if (whiteSpace) {
+        if ((0, shouldSetValue_1.shouldSetValue)(whiteSpace, 'normal', format.whiteSpace, defaultStyle.whiteSpace)) {
             format.whiteSpace = whiteSpace;
         }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"whiteSpaceFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/whiteSpaceFormatHandler.ts"],"names":[],"mappings":";;;AAGA;;GAEG;AACU,QAAA,uBAAuB,GAAoC;IACpE,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,YAAY,CAAC,UAAU,CAAC;QAEvE,IAAI,UAAU,EAAE;YACZ,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;SAClC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAM,UAAU,GAAG,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC;QACrD,IAAI,MAAM,CAAC,UAAU,IAAI,UAAU,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC;SAC5D;IACL,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { WhiteSpaceFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const whiteSpaceFormatHandler: FormatHandler<WhiteSpaceFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        const whiteSpace = element.style.whiteSpace || defaultStyle.whiteSpace;\n\n        if (whiteSpace) {\n            format.whiteSpace = whiteSpace;\n        }\n    },\n    apply: (format, element, context) => {\n        const whiteSpace = context.implicitFormat.whiteSpace;\n        if (format.whiteSpace != whiteSpace) {\n            element.style.whiteSpace = format.whiteSpace || 'normal';\n        }\n    },\n};\n"]}
+{"version":3,"file":"whiteSpaceFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/block/whiteSpaceFormatHandler.ts"],"names":[],"mappings":";;;AAAA,0DAAyD;AAIzD;;GAEG;AACU,QAAA,uBAAuB,GAAoC;IACpE,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,YAAY,CAAC,UAAU,CAAC;QAEvE,IAAI,IAAA,+BAAc,EAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE;YAClF,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;SAClC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAM,UAAU,GAAG,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC;QACrD,IAAI,MAAM,CAAC,UAAU,IAAI,UAAU,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC;SAC5D;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { shouldSetValue } from '../utils/shouldSetValue';\nimport type { FormatHandler } from '../FormatHandler';\nimport type { WhiteSpaceFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const whiteSpaceFormatHandler: FormatHandler<WhiteSpaceFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        const whiteSpace = element.style.whiteSpace || defaultStyle.whiteSpace;\n\n        if (shouldSetValue(whiteSpace, 'normal', format.whiteSpace, defaultStyle.whiteSpace)) {\n            format.whiteSpace = whiteSpace;\n        }\n    },\n    apply: (format, element, context) => {\n        const whiteSpace = context.implicitFormat.whiteSpace;\n        if (format.whiteSpace != whiteSpace) {\n            element.style.whiteSpace = format.whiteSpace || 'normal';\n        }\n    },\n};\n"]}

package/lib/formatHandlers/common/backgroundColorFormatHandler.js

@@ -2,13 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.backgroundColorFormatHandler = void 0;
 var color_1 = require("../utils/color");
+var shouldSetValue_1 = require("../utils/shouldSetValue");
 /**
  * @internal
  */
 exports.backgroundColorFormatHandler = {
     parse: function (format, element, context, defaultStyle) {
         var backgroundColor = (0, color_1.getColor)(element, true /*isBackground*/, context.darkColorHandler, !!context.isDarkMode) || defaultStyle.backgroundColor;
-        if (backgroundColor) {
+        if ((0, shouldSetValue_1.shouldSetValue)(backgroundColor, 'transparent', undefined /*existingValue*/, defaultStyle.backgroundColor)) {
             format.backgroundColor = backgroundColor;
         }
     },

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

@@ -1 +1 @@
-{"version":3,"file":"backgroundColorFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/common/backgroundColorFormatHandler.ts"],"names":[],"mappings":";;;AAAA,wCAAoD;AAIpD;;GAEG;AACU,QAAA,4BAA4B,GAAyC;IAC9E,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;QAC1C,IAAM,eAAe,GACjB,IAAA,gBAAQ,EACJ,OAAO,EACP,IAAI,CAAC,gBAAgB,EACrB,OAAO,CAAC,gBAAgB,EACxB,CAAC,CAAC,OAAO,CAAC,UAAU,CACvB,IAAI,YAAY,CAAC,eAAe,CAAC;QAEtC,IAAI,eAAe,EAAE;YACjB,MAAM,CAAC,eAAe,GAAG,eAAe,CAAC;SAC5C;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAI,MAAM,CAAC,eAAe,EAAE;YACxB,IAAA,gBAAQ,EACJ,OAAO,EACP,MAAM,CAAC,eAAe,EACtB,IAAI,CAAC,gBAAgB,EACrB,OAAO,CAAC,gBAAgB,EACxB,CAAC,CAAC,OAAO,CAAC,UAAU,CACvB,CAAC;SACL;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { getColor, setColor } from '../utils/color';\nimport type { BackgroundColorFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        const backgroundColor =\n            getColor(\n                element,\n                true /*isBackground*/,\n                context.darkColorHandler,\n                !!context.isDarkMode\n            ) || defaultStyle.backgroundColor;\n\n        if (backgroundColor) {\n            format.backgroundColor = backgroundColor;\n        }\n    },\n    apply: (format, element, context) => {\n        if (format.backgroundColor) {\n            setColor(\n                element,\n                format.backgroundColor,\n                true /*isBackground*/,\n                context.darkColorHandler,\n                !!context.isDarkMode\n            );\n        }\n    },\n};\n"]}
+{"version":3,"file":"backgroundColorFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/common/backgroundColorFormatHandler.ts"],"names":[],"mappings":";;;AAAA,wCAAoD;AACpD,0DAAyD;AAIzD;;GAEG;AACU,QAAA,4BAA4B,GAAyC;IAC9E,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;QAC1C,IAAM,eAAe,GACjB,IAAA,gBAAQ,EACJ,OAAO,EACP,IAAI,CAAC,gBAAgB,EACrB,OAAO,CAAC,gBAAgB,EACxB,CAAC,CAAC,OAAO,CAAC,UAAU,CACvB,IAAI,YAAY,CAAC,eAAe,CAAC;QAEtC,IACI,IAAA,+BAAc,EACV,eAAe,EACf,aAAa,EACb,SAAS,CAAC,iBAAiB,EAC3B,YAAY,CAAC,eAAe,CAC/B,EACH;YACE,MAAM,CAAC,eAAe,GAAG,eAAe,CAAC;SAC5C;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAI,MAAM,CAAC,eAAe,EAAE;YACxB,IAAA,gBAAQ,EACJ,OAAO,EACP,MAAM,CAAC,eAAe,EACtB,IAAI,CAAC,gBAAgB,EACrB,OAAO,CAAC,gBAAgB,EACxB,CAAC,CAAC,OAAO,CAAC,UAAU,CACvB,CAAC;SACL;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { getColor, setColor } from '../utils/color';\nimport { shouldSetValue } from '../utils/shouldSetValue';\nimport type { BackgroundColorFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const backgroundColorFormatHandler: FormatHandler<BackgroundColorFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        const backgroundColor =\n            getColor(\n                element,\n                true /*isBackground*/,\n                context.darkColorHandler,\n                !!context.isDarkMode\n            ) || defaultStyle.backgroundColor;\n\n        if (\n            shouldSetValue(\n                backgroundColor,\n                'transparent',\n                undefined /*existingValue*/,\n                defaultStyle.backgroundColor\n            )\n        ) {\n            format.backgroundColor = backgroundColor;\n        }\n    },\n    apply: (format, element, context) => {\n        if (format.backgroundColor) {\n            setColor(\n                element,\n                format.backgroundColor,\n                true /*isBackground*/,\n                context.darkColorHandler,\n                !!context.isDarkMode\n            );\n        }\n    },\n};\n"]}

package/lib/formatHandlers/common/borderFormatHandler.js

@@ -9,19 +9,35 @@ exports.BorderKeys = [
     'borderRight',
     'borderBottom',
     'borderLeft',
-    'borderRadius',
+];
+// This array needs to match BorderKeys array
+var BorderWidthKeys = [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
 ];
 /**
  * @internal
  */
 exports.borderFormatHandler = {
-    parse: function (format, element) {
-        exports.BorderKeys.forEach(function (key) {
+    parse: function (format, element, _, defaultStyle) {
+        exports.BorderKeys.forEach(function (key, i) {
+            var _a;
             var value = element.style[key];
-            if (value) {
+            var defaultWidth = (_a = defaultStyle[BorderWidthKeys[i]]) !== null && _a !== void 0 ? _a : '0px';
+            var width = element.style[BorderWidthKeys[i]];
+            if (width == '0') {
+                width = '0px';
+            }
+            if (value && width != defaultWidth) {
                 format[key] = value == 'none' ? '' : value;
             }
         });
+        var borderRadius = element.style.borderRadius;
+        if (borderRadius) {
+            format.borderRadius = borderRadius;
+        }
     },
     apply: function (format, element) {
         exports.BorderKeys.forEach(function (key) {

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

@@ -1 +1 @@
-{"version":3,"file":"borderFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/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;IACZ,cAAc;CACjB,CAAC;AAEF;;GAEG;AACU,QAAA,mBAAmB,GAAgC;IAC5D,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,kBAAU,CAAC,OAAO,CAAC,UAAA,GAAG;YAClB,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEjC,IAAI,KAAK,EAAE;gBACP,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;aAC9C;QACL,CAAC,CAAC,CAAC;IACP,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,kBAAU,CAAC,OAAO,CAAC,UAAA,GAAG;YAClB,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;IACP,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    'borderRadius',\n];\n\n/**\n * @internal\n */\nexport const borderFormatHandler: FormatHandler<BorderFormat> = {\n    parse: (format, element) => {\n        BorderKeys.forEach(key => {\n            const value = element.style[key];\n\n            if (value) {\n                format[key] = value == 'none' ? '' : value;\n            }\n        });\n    },\n    apply: (format, element) => {\n        BorderKeys.forEach(key => {\n            const value = format[key];\n\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n    },\n};\n"]}
+{"version":3,"file":"borderFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/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;;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;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,kBAAU,CAAC,OAAO,CAAC,UAAA,GAAG;YAClB,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;IACP,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\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        }\n    },\n    apply: (format, element) => {\n        BorderKeys.forEach(key => {\n            const value = format[key];\n\n            if (value) {\n                element.style[key] = value;\n            }\n        });\n    },\n};\n"]}

package/lib/formatHandlers/common/sizeFormatHandler.js

@@ -58,7 +58,7 @@ function tryParseSize(element, attrName) {
     var value = parseInt(attrValue || '');
     return attrValue && PercentageRegex.test(attrValue)
         ? attrValue
-        : Number.isNaN(value)
+        : Number.isNaN(value) || value == 0
             ? undefined
             : value + 'px';
 }

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

@@ -1 +1 @@
-{"version":3,"file":"sizeFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/common/sizeFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,eAAe,GAAG,UAAU,CAAC;AAEnC;;GAEG;AACU,QAAA,iBAAiB,GAA8B;IACxD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACpE,IAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACvE,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACxC,IAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;QAC1C,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACxC,IAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;QAE1C,IAAI,KAAK,EAAE;YACP,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;SACxB;QACD,IAAI,MAAM,EAAE;YACR,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;SAC1B;QACD,IAAI,QAAQ,EAAE;YACV,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC9B;QACD,IAAI,SAAS,EAAE;YACX,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;SAChC;QACD,IAAI,QAAQ,EAAE;YACV,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC9B;QACD,IAAI,SAAS,EAAE;YACX,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;SAChC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;SACtC;QACD,IAAI,MAAM,CAAC,MAAM,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;SACxC;QACD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;SAC5C;QACD,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;SAC9C;QACD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;SAC5C;QACD,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;SAC9C;IACL,CAAC;CACJ,CAAC;AAEF,SAAS,YAAY,CAAC,OAAoB,EAAE,QAA4B;IACpE,IAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAExC,OAAO,SAAS,IAAI,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;QAC/C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC;YACrB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC;AACvB,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { SizeFormat } from 'roosterjs-content-model-types';\n\nconst PercentageRegex = /[\\d\\.]+%/;\n\n/**\n * @internal\n */\nexport const sizeFormatHandler: FormatHandler<SizeFormat> = {\n    parse: (format, element, context) => {\n        const width = element.style.width || tryParseSize(element, 'width');\n        const height = element.style.height || tryParseSize(element, 'height');\n        const maxWidth = element.style.maxWidth;\n        const maxHeight = element.style.maxHeight;\n        const minWidth = element.style.minWidth;\n        const minHeight = element.style.minHeight;\n\n        if (width) {\n            format.width = width;\n        }\n        if (height) {\n            format.height = height;\n        }\n        if (maxWidth) {\n            format.maxWidth = maxWidth;\n        }\n        if (maxHeight) {\n            format.maxHeight = maxHeight;\n        }\n        if (minWidth) {\n            format.minWidth = minWidth;\n        }\n        if (minHeight) {\n            format.minHeight = minHeight;\n        }\n    },\n    apply: (format, element) => {\n        if (format.width) {\n            element.style.width = format.width;\n        }\n        if (format.height) {\n            element.style.height = format.height;\n        }\n        if (format.maxWidth) {\n            element.style.maxWidth = format.maxWidth;\n        }\n        if (format.maxHeight) {\n            element.style.maxHeight = format.maxHeight;\n        }\n        if (format.minWidth) {\n            element.style.minWidth = format.minWidth;\n        }\n        if (format.minHeight) {\n            element.style.minHeight = format.minHeight;\n        }\n    },\n};\n\nfunction tryParseSize(element: HTMLElement, attrName: 'width' | 'height'): string | undefined {\n    const attrValue = element.getAttribute(attrName);\n    const value = parseInt(attrValue || '');\n\n    return attrValue && PercentageRegex.test(attrValue)\n        ? attrValue\n        : Number.isNaN(value)\n        ? undefined\n        : value + 'px';\n}\n"]}
+{"version":3,"file":"sizeFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/common/sizeFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,eAAe,GAAG,UAAU,CAAC;AAEnC;;GAEG;AACU,QAAA,iBAAiB,GAA8B;IACxD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACpE,IAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,YAAY,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACvE,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACxC,IAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;QAC1C,IAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;QACxC,IAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,SAAS,CAAC;QAE1C,IAAI,KAAK,EAAE;YACP,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;SACxB;QACD,IAAI,MAAM,EAAE;YACR,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC;SAC1B;QACD,IAAI,QAAQ,EAAE;YACV,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC9B;QACD,IAAI,SAAS,EAAE;YACX,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;SAChC;QACD,IAAI,QAAQ,EAAE;YACV,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC9B;QACD,IAAI,SAAS,EAAE;YACX,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC;SAChC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;SACtC;QACD,IAAI,MAAM,CAAC,MAAM,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;SACxC;QACD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;SAC5C;QACD,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;SAC9C;QACD,IAAI,MAAM,CAAC,QAAQ,EAAE;YACjB,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;SAC5C;QACD,IAAI,MAAM,CAAC,SAAS,EAAE;YAClB,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;SAC9C;IACL,CAAC;CACJ,CAAC;AAEF,SAAS,YAAY,CAAC,OAAoB,EAAE,QAA4B;IACpE,IAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAExC,OAAO,SAAS,IAAI,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC;QAC/C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;YACnC,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC;AACvB,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { SizeFormat } from 'roosterjs-content-model-types';\n\nconst PercentageRegex = /[\\d\\.]+%/;\n\n/**\n * @internal\n */\nexport const sizeFormatHandler: FormatHandler<SizeFormat> = {\n    parse: (format, element, context) => {\n        const width = element.style.width || tryParseSize(element, 'width');\n        const height = element.style.height || tryParseSize(element, 'height');\n        const maxWidth = element.style.maxWidth;\n        const maxHeight = element.style.maxHeight;\n        const minWidth = element.style.minWidth;\n        const minHeight = element.style.minHeight;\n\n        if (width) {\n            format.width = width;\n        }\n        if (height) {\n            format.height = height;\n        }\n        if (maxWidth) {\n            format.maxWidth = maxWidth;\n        }\n        if (maxHeight) {\n            format.maxHeight = maxHeight;\n        }\n        if (minWidth) {\n            format.minWidth = minWidth;\n        }\n        if (minHeight) {\n            format.minHeight = minHeight;\n        }\n    },\n    apply: (format, element) => {\n        if (format.width) {\n            element.style.width = format.width;\n        }\n        if (format.height) {\n            element.style.height = format.height;\n        }\n        if (format.maxWidth) {\n            element.style.maxWidth = format.maxWidth;\n        }\n        if (format.maxHeight) {\n            element.style.maxHeight = format.maxHeight;\n        }\n        if (format.minWidth) {\n            element.style.minWidth = format.minWidth;\n        }\n        if (format.minHeight) {\n            element.style.minHeight = format.minHeight;\n        }\n    },\n};\n\nfunction tryParseSize(element: HTMLElement, attrName: 'width' | 'height'): string | undefined {\n    const attrValue = element.getAttribute(attrName);\n    const value = parseInt(attrValue || '');\n\n    return attrValue && PercentageRegex.test(attrValue)\n        ? attrValue\n        : Number.isNaN(value) || value == 0\n        ? undefined\n        : value + 'px';\n}\n"]}

package/lib/formatHandlers/segment/boldFormatHandler.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.boldFormatHandler = void 0;
+var shouldSetValue_1 = require("../utils/shouldSetValue");
 var moveChildNodes_1 = require("../../domUtils/moveChildNodes");
 /**
  * @internal
@@ -8,7 +9,7 @@ var moveChildNodes_1 = require("../../domUtils/moveChildNodes");
 exports.boldFormatHandler = {
     parse: function (format, element, context, defaultStyle) {
         var fontWeight = element.style.fontWeight || defaultStyle.fontWeight;
-        if (fontWeight) {
+        if ((0, shouldSetValue_1.shouldSetValue)(fontWeight, '400', format.fontWeight, defaultStyle.fontWeight)) {
             format.fontWeight = fontWeight;
         }
     },

package/lib/formatHandlers/segment/boldFormatHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"boldFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/segment/boldFormatHandler.ts"],"names":[],"mappings":";;;AAAA,gEAAkE;AAIlE;;GAEG;AACU,QAAA,iBAAiB,GAA8B;IACxD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;QAC1C,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,YAAY,CAAC,UAAU,CAAC;QAEvE,IAAI,UAAU,EAAE;YACZ,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;SAClC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW,EAAE;YAC1C,OAAO;SACV;QAED,IAAM,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC;QAE1D,IACI,CAAC,eAAe,IAAI,eAAe,IAAI,MAAM,CAAC,UAAU,CAAC;YACzD,CAAC,CAAC,eAAe,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,EAC1E;YACE,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,EAAE;gBAC7B,IAAA,kCAAiB,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC;aACnC;iBAAM;gBACH,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC;aAC5D;SACJ;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { wrapAllChildNodes } from '../../domUtils/moveChildNodes';\nimport type { BoldFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const boldFormatHandler: FormatHandler<BoldFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        const fontWeight = element.style.fontWeight || defaultStyle.fontWeight;\n\n        if (fontWeight) {\n            format.fontWeight = fontWeight;\n        }\n    },\n    apply: (format, element, context) => {\n        if (typeof format.fontWeight === 'undefined') {\n            return;\n        }\n\n        const blockFontWeight = context.implicitFormat.fontWeight;\n\n        if (\n            (blockFontWeight && blockFontWeight != format.fontWeight) ||\n            (!blockFontWeight && format.fontWeight && format.fontWeight != 'normal')\n        ) {\n            if (format.fontWeight == 'bold') {\n                wrapAllChildNodes(element, 'b');\n            } else {\n                element.style.fontWeight = format.fontWeight || 'normal';\n            }\n        }\n    },\n};\n"]}
+{"version":3,"file":"boldFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/segment/boldFormatHandler.ts"],"names":[],"mappings":";;;AAAA,0DAAyD;AACzD,gEAAkE;AAIlE;;GAEG;AACU,QAAA,iBAAiB,GAA8B;IACxD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;QAC1C,IAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,IAAI,YAAY,CAAC,UAAU,CAAC;QAEvE,IAAI,IAAA,+BAAc,EAAC,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC,UAAU,CAAC,EAAE;YAC/E,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;SAClC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,WAAW,EAAE;YAC1C,OAAO;SACV;QAED,IAAM,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC;QAE1D,IACI,CAAC,eAAe,IAAI,eAAe,IAAI,MAAM,CAAC,UAAU,CAAC;YACzD,CAAC,CAAC,eAAe,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC,EAC1E;YACE,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,EAAE;gBAC7B,IAAA,kCAAiB,EAAC,OAAO,EAAE,GAAG,CAAC,CAAC;aACnC;iBAAM;gBACH,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,QAAQ,CAAC;aAC5D;SACJ;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { shouldSetValue } from '../utils/shouldSetValue';\nimport { wrapAllChildNodes } from '../../domUtils/moveChildNodes';\nimport type { BoldFormat } from 'roosterjs-content-model-types';\nimport type { FormatHandler } from '../FormatHandler';\n\n/**\n * @internal\n */\nexport const boldFormatHandler: FormatHandler<BoldFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        const fontWeight = element.style.fontWeight || defaultStyle.fontWeight;\n\n        if (shouldSetValue(fontWeight, '400', format.fontWeight, defaultStyle.fontWeight)) {\n            format.fontWeight = fontWeight;\n        }\n    },\n    apply: (format, element, context) => {\n        if (typeof format.fontWeight === 'undefined') {\n            return;\n        }\n\n        const blockFontWeight = context.implicitFormat.fontWeight;\n\n        if (\n            (blockFontWeight && blockFontWeight != format.fontWeight) ||\n            (!blockFontWeight && format.fontWeight && format.fontWeight != 'normal')\n        ) {\n            if (format.fontWeight == 'bold') {\n                wrapAllChildNodes(element, 'b');\n            } else {\n                element.style.fontWeight = format.fontWeight || 'normal';\n            }\n        }\n    },\n};\n"]}

package/lib/formatHandlers/segment/letterSpacingFormatHandler.js

@@ -1,17 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.letterSpacingFormatHandler = void 0;
+var shouldSetValue_1 = require("../utils/shouldSetValue");
 /**
  * @internal
  */
 exports.letterSpacingFormatHandler = {
-    parse: function (format, element, context, defaultStyle) {
+    parse: function (format, element, _, defaultStyle) {
         var letterSpacing = element.style.letterSpacing || defaultStyle.letterSpacing;
-        if (letterSpacing) {
+        if ((0, shouldSetValue_1.shouldSetValue)(letterSpacing, 'normal', format.letterSpacing, defaultStyle.letterSpacing)) {
             format.letterSpacing = letterSpacing;
         }
     },
-    apply: function (format, element, context) {
+    apply: function (format, element) {
         if (format.letterSpacing) {
             element.style.letterSpacing = format.letterSpacing;
         }

package/lib/formatHandlers/segment/letterSpacingFormatHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"letterSpacingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/segment/letterSpacingFormatHandler.ts"],"names":[],"mappings":";;;AAGA;;GAEG;AACU,QAAA,0BAA0B,GAAuC;IAC1E,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY;QAC1C,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,YAAY,CAAC,aAAa,CAAC;QAEhF,IAAI,aAAa,EAAE;YACf,MAAM,CAAC,aAAa,GAAG,aAAa,CAAC;SACxC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,OAAO;QAC5B,IAAI,MAAM,CAAC,aAAa,EAAE;YACtB,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;SACtD;IACL,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { LetterSpacingFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const letterSpacingFormatHandler: FormatHandler<LetterSpacingFormat> = {\n    parse: (format, element, context, defaultStyle) => {\n        const letterSpacing = element.style.letterSpacing || defaultStyle.letterSpacing;\n\n        if (letterSpacing) {\n            format.letterSpacing = letterSpacing;\n        }\n    },\n    apply: (format, element, context) => {\n        if (format.letterSpacing) {\n            element.style.letterSpacing = format.letterSpacing;\n        }\n    },\n};\n"]}
+{"version":3,"file":"letterSpacingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/segment/letterSpacingFormatHandler.ts"],"names":[],"mappings":";;;AAAA,0DAAyD;AAIzD;;GAEG;AACU,QAAA,0BAA0B,GAAuC;IAC1E,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,YAAY;QACpC,IAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC,aAAa,IAAI,YAAY,CAAC,aAAa,CAAC;QAEhF,IACI,IAAA,+BAAc,EACV,aAAa,EACb,QAAQ,EACR,MAAM,CAAC,aAAa,EACpB,YAAY,CAAC,aAAa,CAC7B,EACH;YACE,MAAM,CAAC,aAAa,GAAG,aAAa,CAAC;SACxC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,aAAa,EAAE;YACtB,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC;SACtD;IACL,CAAC;CACJ,CAAC","sourcesContent":["import { shouldSetValue } from '../utils/shouldSetValue';\nimport type { FormatHandler } from '../FormatHandler';\nimport type { LetterSpacingFormat } from 'roosterjs-content-model-types';\n\n/**\n * @internal\n */\nexport const letterSpacingFormatHandler: FormatHandler<LetterSpacingFormat> = {\n    parse: (format, element, _, defaultStyle) => {\n        const letterSpacing = element.style.letterSpacing || defaultStyle.letterSpacing;\n\n        if (\n            shouldSetValue(\n                letterSpacing,\n                'normal',\n                format.letterSpacing,\n                defaultStyle.letterSpacing\n            )\n        ) {\n            format.letterSpacing = letterSpacing;\n        }\n    },\n    apply: (format, element) => {\n        if (format.letterSpacing) {\n            element.style.letterSpacing = format.letterSpacing;\n        }\n    },\n};\n"]}

package/lib/formatHandlers/table/tableSpacingFormatHandler.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tableSpacingFormatHandler = void 0;
 var BorderCollapsed = 'collapse';
+var CellPadding = 'cellPadding';
 /**
  * @internal
  */
@@ -10,6 +11,12 @@ exports.tableSpacingFormatHandler = {
         if (element.style.borderCollapse == BorderCollapsed) {
             format.borderCollapse = true;
         }
+        else {
+            var cellPadding = element.getAttribute(CellPadding);
+            if (cellPadding) {
+                format.borderCollapse = true;
+            }
+        }
     },
     apply: function (format, element) {
         if (format.borderCollapse) {

package/lib/formatHandlers/table/tableSpacingFormatHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableSpacingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,eAAe,GAAG,UAAU,CAAC;AAEnC;;GAEG;AACU,QAAA,yBAAyB,GAAiC;IACnE,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,OAAO,CAAC,KAAK,CAAC,cAAc,IAAI,eAAe,EAAE;YACjD,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;SAChC;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,cAAc,EAAE;YACvB,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,eAAe,CAAC;YAC/C,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;SAC1C;IACL,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { SpacingFormat } from 'roosterjs-content-model-types';\n\nconst BorderCollapsed = 'collapse';\n\n/**\n * @internal\n */\nexport const tableSpacingFormatHandler: FormatHandler<SpacingFormat> = {\n    parse: (format, element) => {\n        if (element.style.borderCollapse == BorderCollapsed) {\n            format.borderCollapse = true;\n        }\n    },\n    apply: (format, element) => {\n        if (format.borderCollapse) {\n            element.style.borderCollapse = BorderCollapsed;\n            element.style.borderSpacing = '0';\n            element.style.boxSizing = 'border-box';\n        }\n    },\n};\n"]}
+{"version":3,"file":"tableSpacingFormatHandler.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/table/tableSpacingFormatHandler.ts"],"names":[],"mappings":";;;AAGA,IAAM,eAAe,GAAG,UAAU,CAAC;AACnC,IAAM,WAAW,GAAG,aAAa,CAAC;AAElC;;GAEG;AACU,QAAA,yBAAyB,GAAiC;IACnE,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,OAAO,CAAC,KAAK,CAAC,cAAc,IAAI,eAAe,EAAE;YACjD,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;SAChC;aAAM;YACH,IAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YACtD,IAAI,WAAW,EAAE;gBACb,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;aAChC;SACJ;IACL,CAAC;IACD,KAAK,EAAE,UAAC,MAAM,EAAE,OAAO;QACnB,IAAI,MAAM,CAAC,cAAc,EAAE;YACvB,OAAO,CAAC,KAAK,CAAC,cAAc,GAAG,eAAe,CAAC;YAC/C,OAAO,CAAC,KAAK,CAAC,aAAa,GAAG,GAAG,CAAC;YAClC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;SAC1C;IACL,CAAC;CACJ,CAAC","sourcesContent":["import type { FormatHandler } from '../FormatHandler';\nimport type { SpacingFormat } from 'roosterjs-content-model-types';\n\nconst BorderCollapsed = 'collapse';\nconst CellPadding = 'cellPadding';\n\n/**\n * @internal\n */\nexport const tableSpacingFormatHandler: FormatHandler<SpacingFormat> = {\n    parse: (format, element) => {\n        if (element.style.borderCollapse == BorderCollapsed) {\n            format.borderCollapse = true;\n        } else {\n            const cellPadding = element.getAttribute(CellPadding);\n            if (cellPadding) {\n                format.borderCollapse = true;\n            }\n        }\n    },\n    apply: (format, element) => {\n        if (format.borderCollapse) {\n            element.style.borderCollapse = BorderCollapsed;\n            element.style.borderSpacing = '0';\n            element.style.boxSizing = 'border-box';\n        }\n    },\n};\n"]}

package/lib/formatHandlers/utils/color.js

@@ -29,6 +29,7 @@ exports.DeprecatedColors = [
     'windowframe',
     'window',
 ];
+var BlackColor = 'rgb(0, 0, 0)';
 /**
  * Get color from given HTML element
  * @param element The element to get color from
@@ -41,7 +42,7 @@ function getColor(element, isBackground, darkColorHandler, isDarkMode) {
         element.getAttribute(isBackground ? 'bgcolor' : 'color') ||
         undefined;
     if (color && exports.DeprecatedColors.indexOf(color) > -1) {
-        color = undefined;
+        color = isBackground ? undefined : BlackColor;
     }
     if (darkColorHandler) {
         color = darkColorHandler.parseColorValue(color, isDarkMode).lightModeColor;

package/lib/formatHandlers/utils/color.js.map

@@ -1 +1 @@
-{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACU,QAAA,gBAAgB,GAAa;IACtC,gBAAgB;IAChB,cAAc;IACd,qBAAqB;IACrB,iBAAiB;IACjB,eAAe;IACf,cAAc;IACd,gBAAgB;IAChB,YAAY;IACZ,iBAAiB;IACjB,cAAc;IACd,aAAa;IACb,UAAU;IACV,UAAU;IACV,MAAM;IACN,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,iBAAiB;IACjB,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;CACX,CAAC;AAEF;;;;;;GAMG;AACH,SAAgB,QAAQ,CACpB,OAAoB,EACpB,YAAqB,EACrB,gBAA0C,EAC1C,UAAmB;IAEnB,IAAI,KAAK,GACL,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;QACpE,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QACxD,SAAS,CAAC;IAEd,IAAI,KAAK,IAAI,wBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC/C,KAAK,GAAG,SAAS,CAAC;KACrB;IAED,IAAI,gBAAgB,EAAE;QAClB,KAAK,GAAG,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,cAAc,CAAC;KAC9E;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AApBD,4BAoBC;AAED;;;;;;;GAOG;AACH,SAAgB,QAAQ,CACpB,OAAoB,EACpB,cAAsB,EACtB,YAAqB,EACrB,gBAA0C,EAC1C,UAAmB;IAEnB,IAAM,cAAc,GAAG,gBAAgB;QACnC,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,EAAE,UAAU,CAAC;QAC5D,CAAC,CAAC,cAAc,CAAC;IAErB,IAAI,YAAY,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC;KAClD;SAAM;QACH,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;KACxC;AACL,CAAC;AAhBD,4BAgBC","sourcesContent":["import type { ColorManager } from 'roosterjs-content-model-types';\n\n/**\n * List of deprecated colors\n */\nexport const DeprecatedColors: string[] = [\n    'inactiveborder',\n    'activeborder',\n    'inactivecaptiontext',\n    'inactivecaption',\n    'activecaption',\n    'appworkspace',\n    'infobackground',\n    'background',\n    'buttonhighlight',\n    'buttonshadow',\n    'captiontext',\n    'infotext',\n    'menutext',\n    'menu',\n    'scrollbar',\n    'threeddarkshadow',\n    'threedface',\n    'threedhighlight',\n    'threedlightshadow',\n    'threedfhadow',\n    'windowtext',\n    'windowframe',\n    'window',\n];\n\n/**\n * Get color from given HTML element\n * @param element The element to get color from\n * @param isBackground True to get background color, false to get text color\n * @param darkColorHandler The dark color handler object to help manager dark mode color\n * @param isDarkMode Whether element is in dark mode now\n */\nexport function getColor(\n    element: HTMLElement,\n    isBackground: boolean,\n    darkColorHandler: ColorManager | undefined,\n    isDarkMode: boolean\n): string | undefined {\n    let color =\n        (isBackground ? element.style.backgroundColor : element.style.color) ||\n        element.getAttribute(isBackground ? 'bgcolor' : 'color') ||\n        undefined;\n\n    if (color && DeprecatedColors.indexOf(color) > -1) {\n        color = undefined;\n    }\n\n    if (darkColorHandler) {\n        color = darkColorHandler.parseColorValue(color, isDarkMode).lightModeColor;\n    }\n\n    return color;\n}\n\n/**\n * Set color to given HTML element\n * @param element The element to set color to\n * @param lightModeColor The color to set, always pass in color in light mode\n * @param isBackground True to set background color, false to set text color\n * @param darkColorHandler The dark color handler object to help manager dark mode color\n * @param isDarkMode Whether element is in dark mode now\n */\nexport function setColor(\n    element: HTMLElement,\n    lightModeColor: string,\n    isBackground: boolean,\n    darkColorHandler: ColorManager | undefined,\n    isDarkMode: boolean\n) {\n    const effectiveColor = darkColorHandler\n        ? darkColorHandler.registerColor(lightModeColor, isDarkMode)\n        : lightModeColor;\n\n    if (isBackground) {\n        element.style.backgroundColor = effectiveColor;\n    } else {\n        element.style.color = effectiveColor;\n    }\n}\n"]}
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/color.ts"],"names":[],"mappings":";;;AAEA;;GAEG;AACU,QAAA,gBAAgB,GAAa;IACtC,gBAAgB;IAChB,cAAc;IACd,qBAAqB;IACrB,iBAAiB;IACjB,eAAe;IACf,cAAc;IACd,gBAAgB;IAChB,YAAY;IACZ,iBAAiB;IACjB,cAAc;IACd,aAAa;IACb,UAAU;IACV,UAAU;IACV,MAAM;IACN,WAAW;IACX,kBAAkB;IAClB,YAAY;IACZ,iBAAiB;IACjB,mBAAmB;IACnB,cAAc;IACd,YAAY;IACZ,aAAa;IACb,QAAQ;CACX,CAAC;AAEF,IAAM,UAAU,GAAG,cAAc,CAAC;AAElC;;;;;;GAMG;AACH,SAAgB,QAAQ,CACpB,OAAoB,EACpB,YAAqB,EACrB,gBAA0C,EAC1C,UAAmB;IAEnB,IAAI,KAAK,GACL,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC;QACpE,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;QACxD,SAAS,CAAC;IAEd,IAAI,KAAK,IAAI,wBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE;QAC/C,KAAK,GAAG,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC;KACjD;IAED,IAAI,gBAAgB,EAAE;QAClB,KAAK,GAAG,gBAAgB,CAAC,eAAe,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,cAAc,CAAC;KAC9E;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AApBD,4BAoBC;AAED;;;;;;;GAOG;AACH,SAAgB,QAAQ,CACpB,OAAoB,EACpB,cAAsB,EACtB,YAAqB,EACrB,gBAA0C,EAC1C,UAAmB;IAEnB,IAAM,cAAc,GAAG,gBAAgB;QACnC,CAAC,CAAC,gBAAgB,CAAC,aAAa,CAAC,cAAc,EAAE,UAAU,CAAC;QAC5D,CAAC,CAAC,cAAc,CAAC;IAErB,IAAI,YAAY,EAAE;QACd,OAAO,CAAC,KAAK,CAAC,eAAe,GAAG,cAAc,CAAC;KAClD;SAAM;QACH,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAC;KACxC;AACL,CAAC;AAhBD,4BAgBC","sourcesContent":["import type { ColorManager } from 'roosterjs-content-model-types';\n\n/**\n * List of deprecated colors\n */\nexport const DeprecatedColors: string[] = [\n    'inactiveborder',\n    'activeborder',\n    'inactivecaptiontext',\n    'inactivecaption',\n    'activecaption',\n    'appworkspace',\n    'infobackground',\n    'background',\n    'buttonhighlight',\n    'buttonshadow',\n    'captiontext',\n    'infotext',\n    'menutext',\n    'menu',\n    'scrollbar',\n    'threeddarkshadow',\n    'threedface',\n    'threedhighlight',\n    'threedlightshadow',\n    'threedfhadow',\n    'windowtext',\n    'windowframe',\n    'window',\n];\n\nconst BlackColor = 'rgb(0, 0, 0)';\n\n/**\n * Get color from given HTML element\n * @param element The element to get color from\n * @param isBackground True to get background color, false to get text color\n * @param darkColorHandler The dark color handler object to help manager dark mode color\n * @param isDarkMode Whether element is in dark mode now\n */\nexport function getColor(\n    element: HTMLElement,\n    isBackground: boolean,\n    darkColorHandler: ColorManager | undefined,\n    isDarkMode: boolean\n): string | undefined {\n    let color =\n        (isBackground ? element.style.backgroundColor : element.style.color) ||\n        element.getAttribute(isBackground ? 'bgcolor' : 'color') ||\n        undefined;\n\n    if (color && DeprecatedColors.indexOf(color) > -1) {\n        color = isBackground ? undefined : BlackColor;\n    }\n\n    if (darkColorHandler) {\n        color = darkColorHandler.parseColorValue(color, isDarkMode).lightModeColor;\n    }\n\n    return color;\n}\n\n/**\n * Set color to given HTML element\n * @param element The element to set color to\n * @param lightModeColor The color to set, always pass in color in light mode\n * @param isBackground True to set background color, false to set text color\n * @param darkColorHandler The dark color handler object to help manager dark mode color\n * @param isDarkMode Whether element is in dark mode now\n */\nexport function setColor(\n    element: HTMLElement,\n    lightModeColor: string,\n    isBackground: boolean,\n    darkColorHandler: ColorManager | undefined,\n    isDarkMode: boolean\n) {\n    const effectiveColor = darkColorHandler\n        ? darkColorHandler.registerColor(lightModeColor, isDarkMode)\n        : lightModeColor;\n\n    if (isBackground) {\n        element.style.backgroundColor = effectiveColor;\n    } else {\n        element.style.color = effectiveColor;\n    }\n}\n"]}

package/lib/formatHandlers/utils/parseValueWithUnit.js

@@ -25,6 +25,7 @@ function parseValueWithUnit(value, currentSizePxOrElement, resultUnit) {
                 result = ptToPx(num);
                 break;
             case 'em':
+            case 'rem':
                 result = getFontSize(currentSizePxOrElement) * num;
                 break;
             case 'ex':

package/lib/formatHandlers/utils/parseValueWithUnit.js.map

@@ -1 +1 @@
-{"version":3,"file":"parseValueWithUnit.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/parseValueWithUnit.ts"],"names":[],"mappings":";;;;AAAA,IAAM,gBAAgB,GAAG,2BAA2B,CAAC;AAErD;;;;;GAKG;AACH,SAAgB,kBAAkB,CAC9B,KAAkB,EAClB,sBAA6C,EAC7C,UAA8B;IAF9B,sBAAA,EAAA,UAAkB;IAElB,2BAAA,EAAA,iBAA8B;IAE9B,IAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,IAAI,KAAK,EAAE;QACD,IAAA,KAAA,oBAAwB,KAAK,IAAA,EAA5B,CAAC,QAAA,EAAE,MAAM,QAAA,EAAE,EAAE,QAAA,EAAE,IAAI,QAAS,CAAC;QACpC,IAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAE/B,QAAQ,IAAI,EAAE;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,GAAG,CAAC;gBACb,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBACrB,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC;gBACnD,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzD,MAAM;YACV,KAAK,GAAG;gBACJ,MAAM,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;gBAC3D,MAAM;YACV;gBACI,kCAAkC;gBAClC,MAAM;SACb;KACJ;IAED,IAAI,MAAM,GAAG,CAAC,IAAI,UAAU,IAAI,IAAI,EAAE;QAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;KAC3B;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAvCD,gDAuCC;AAED,SAAS,WAAW,CAAC,oBAA2C;;IAC5D,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE;QAC7C,OAAO,CAAC,CAAC;KACZ;SAAM,IAAI,OAAO,oBAAoB,KAAK,QAAQ,EAAE;QACjD,OAAO,oBAAoB,CAAC;KAC/B;SAAM;QACH,IAAM,SAAS,GACX,MAAA,MAAA,oBAAoB,CAAC,aAAa,CAAC,WAAW,0CAAE,gBAAgB,CAAC,oBAAoB,EAChF,QAAQ,mCAAI,EAAE,CAAC;QACxB,IAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QACxC,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAEpC,OAAO,SAAS,CAAC;KACpB;AACL,CAAC;AAED,SAAS,MAAM,CAAC,EAAU;IACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;AAC9C,CAAC;AAED,SAAS,MAAM,CAAC,EAAU;IACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;AAC9C,CAAC","sourcesContent":["const MarginValueRegex = /(-?\\d+(\\.\\d+)?)([a-z]+|%)/;\n\n/**\n * Parse unit value with its unit\n * @param value The source value to parse\n * @param currentSizePxOrElement The source element which has this unit value, or current font size (in px) from context.\n * @param resultUnit Unit for result, can be px or pt. @default px\n */\nexport function parseValueWithUnit(\n    value: string = '',\n    currentSizePxOrElement?: number | HTMLElement,\n    resultUnit: 'px' | 'pt' = 'px'\n): number {\n    const match = MarginValueRegex.exec(value);\n    let result = 0;\n\n    if (match) {\n        const [_, numStr, __, unit] = match;\n        const num = parseFloat(numStr);\n\n        switch (unit) {\n            case 'px':\n                result = num;\n                break;\n            case 'pt':\n                result = ptToPx(num);\n                break;\n            case 'em':\n                result = getFontSize(currentSizePxOrElement) * num;\n                break;\n            case 'ex':\n                result = (getFontSize(currentSizePxOrElement) * num) / 2;\n                break;\n            case '%':\n                result = (getFontSize(currentSizePxOrElement) * num) / 100;\n                break;\n            default:\n                // TODO: Support more unit if need\n                break;\n        }\n    }\n\n    if (result > 0 && resultUnit == 'pt') {\n        result = pxToPt(result);\n    }\n\n    return result;\n}\n\nfunction getFontSize(currentSizeOrElement?: number | HTMLElement): number {\n    if (typeof currentSizeOrElement === 'undefined') {\n        return 0;\n    } else if (typeof currentSizeOrElement === 'number') {\n        return currentSizeOrElement;\n    } else {\n        const styleInPt =\n            currentSizeOrElement.ownerDocument.defaultView?.getComputedStyle(currentSizeOrElement)\n                .fontSize ?? '';\n        const floatInPt = parseFloat(styleInPt);\n        const floatInPx = ptToPx(floatInPt);\n\n        return floatInPx;\n    }\n}\n\nfunction ptToPx(pt: number): number {\n    return Math.round((pt * 4000) / 3) / 1000;\n}\n\nfunction pxToPt(px: number) {\n    return Math.round((px * 3000) / 4) / 1000;\n}\n"]}
+{"version":3,"file":"parseValueWithUnit.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/parseValueWithUnit.ts"],"names":[],"mappings":";;;;AAAA,IAAM,gBAAgB,GAAG,2BAA2B,CAAC;AAErD;;;;;GAKG;AACH,SAAgB,kBAAkB,CAC9B,KAAkB,EAClB,sBAA6C,EAC7C,UAA8B;IAF9B,sBAAA,EAAA,UAAkB;IAElB,2BAAA,EAAA,iBAA8B;IAE9B,IAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3C,IAAI,MAAM,GAAG,CAAC,CAAC;IAEf,IAAI,KAAK,EAAE;QACD,IAAA,KAAA,oBAAwB,KAAK,IAAA,EAA5B,CAAC,QAAA,EAAE,MAAM,QAAA,EAAE,EAAE,QAAA,EAAE,IAAI,QAAS,CAAC;QACpC,IAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAE/B,QAAQ,IAAI,EAAE;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,GAAG,CAAC;gBACb,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;gBACrB,MAAM;YACV,KAAK,IAAI,CAAC;YACV,KAAK,KAAK;gBACN,MAAM,GAAG,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC;gBACnD,MAAM;YACV,KAAK,IAAI;gBACL,MAAM,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;gBACzD,MAAM;YACV,KAAK,GAAG;gBACJ,MAAM,GAAG,CAAC,WAAW,CAAC,sBAAsB,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;gBAC3D,MAAM;YACV;gBACI,kCAAkC;gBAClC,MAAM;SACb;KACJ;IAED,IAAI,MAAM,GAAG,CAAC,IAAI,UAAU,IAAI,IAAI,EAAE;QAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;KAC3B;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAxCD,gDAwCC;AAED,SAAS,WAAW,CAAC,oBAA2C;;IAC5D,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE;QAC7C,OAAO,CAAC,CAAC;KACZ;SAAM,IAAI,OAAO,oBAAoB,KAAK,QAAQ,EAAE;QACjD,OAAO,oBAAoB,CAAC;KAC/B;SAAM;QACH,IAAM,SAAS,GACX,MAAA,MAAA,oBAAoB,CAAC,aAAa,CAAC,WAAW,0CAAE,gBAAgB,CAAC,oBAAoB,EAChF,QAAQ,mCAAI,EAAE,CAAC;QACxB,IAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;QACxC,IAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAEpC,OAAO,SAAS,CAAC;KACpB;AACL,CAAC;AAED,SAAS,MAAM,CAAC,EAAU;IACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;AAC9C,CAAC;AAED,SAAS,MAAM,CAAC,EAAU;IACtB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;AAC9C,CAAC","sourcesContent":["const MarginValueRegex = /(-?\\d+(\\.\\d+)?)([a-z]+|%)/;\n\n/**\n * Parse unit value with its unit\n * @param value The source value to parse\n * @param currentSizePxOrElement The source element which has this unit value, or current font size (in px) from context.\n * @param resultUnit Unit for result, can be px or pt. @default px\n */\nexport function parseValueWithUnit(\n    value: string = '',\n    currentSizePxOrElement?: number | HTMLElement,\n    resultUnit: 'px' | 'pt' = 'px'\n): number {\n    const match = MarginValueRegex.exec(value);\n    let result = 0;\n\n    if (match) {\n        const [_, numStr, __, unit] = match;\n        const num = parseFloat(numStr);\n\n        switch (unit) {\n            case 'px':\n                result = num;\n                break;\n            case 'pt':\n                result = ptToPx(num);\n                break;\n            case 'em':\n            case 'rem':\n                result = getFontSize(currentSizePxOrElement) * num;\n                break;\n            case 'ex':\n                result = (getFontSize(currentSizePxOrElement) * num) / 2;\n                break;\n            case '%':\n                result = (getFontSize(currentSizePxOrElement) * num) / 100;\n                break;\n            default:\n                // TODO: Support more unit if need\n                break;\n        }\n    }\n\n    if (result > 0 && resultUnit == 'pt') {\n        result = pxToPt(result);\n    }\n\n    return result;\n}\n\nfunction getFontSize(currentSizeOrElement?: number | HTMLElement): number {\n    if (typeof currentSizeOrElement === 'undefined') {\n        return 0;\n    } else if (typeof currentSizeOrElement === 'number') {\n        return currentSizeOrElement;\n    } else {\n        const styleInPt =\n            currentSizeOrElement.ownerDocument.defaultView?.getComputedStyle(currentSizeOrElement)\n                .fontSize ?? '';\n        const floatInPt = parseFloat(styleInPt);\n        const floatInPx = ptToPx(floatInPt);\n\n        return floatInPx;\n    }\n}\n\nfunction ptToPx(pt: number): number {\n    return Math.round((pt * 4000) / 3) / 1000;\n}\n\nfunction pxToPt(px: number) {\n    return Math.round((px * 3000) / 4) / 1000;\n}\n"]}

package/lib/formatHandlers/utils/shouldSetValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @internal
+ */
+export declare function shouldSetValue(value: string | undefined, normalValue: string, existingValue: string | undefined, defaultValue: string | undefined): boolean;

package/lib/formatHandlers/utils/shouldSetValue.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldSetValue = void 0;
+/**
+ * @internal
+ */
+function shouldSetValue(value, normalValue, existingValue, defaultValue) {
+    return (!!value &&
+        value != 'inherit' &&
+        !!(value != normalValue || existingValue || (defaultValue && value != defaultValue)));
+}
+exports.shouldSetValue = shouldSetValue;
+//# sourceMappingURL=shouldSetValue.js.map

package/lib/formatHandlers/utils/shouldSetValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shouldSetValue.js","sourceRoot":"","sources":["../../../../../packages-content-model/roosterjs-content-model-dom/lib/formatHandlers/utils/shouldSetValue.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,SAAgB,cAAc,CAC1B,KAAyB,EACzB,WAAmB,EACnB,aAAiC,EACjC,YAAgC;IAEhC,OAAO,CACH,CAAC,CAAC,KAAK;QACP,KAAK,IAAI,SAAS;QAClB,CAAC,CAAC,CAAC,KAAK,IAAI,WAAW,IAAI,aAAa,IAAI,CAAC,YAAY,IAAI,KAAK,IAAI,YAAY,CAAC,CAAC,CACvF,CAAC;AACN,CAAC;AAXD,wCAWC","sourcesContent":["/**\n * @internal\n */\nexport function shouldSetValue(\n    value: string | undefined,\n    normalValue: string,\n    existingValue: string | undefined,\n    defaultValue: string | undefined\n): boolean {\n    return (\n        !!value &&\n        value != 'inherit' &&\n        !!(value != normalValue || existingValue || (defaultValue && value != defaultValue))\n    );\n}\n"]}