All files / roosterjs-content-model-dom/lib/formatHandlers/common borderFormatHandler.ts

96.97% Statements 32/33
83.33% Branches 20/24
100% Functions 5/5
96.97% Lines 32/33

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 801x   1x       1x             1x             1x         1x   1409x 5636x 5636x 5636x   5636x       5636x 442x 442x     14x 14x 14x   14x   442x       1409x   1409x 2x   1407x 5628x   5628x 4x           1707x 13656x   13656x 238x       1707x 1x        
import { BorderKeys } from '../utils/borderKeys';
import type { BorderFormat } from 'roosterjs-content-model-types';
import { combineBorderValue, extractBorderValues } from '../../domUtils/style/borderValues';
import type { FormatHandler } from '../FormatHandler';
 
// This array needs to match BorderKeys array
const BorderWidthKeys: (keyof CSSStyleDeclaration)[] = [
    'borderTopWidth',
    'borderRightWidth',
    'borderBottomWidth',
    'borderLeftWidth',
];
 
const BorderRadiusKeys: (keyof BorderFormat & keyof CSSStyleDeclaration)[] = [
    'borderTopLeftRadius',
    'borderTopRightRadius',
    'borderBottomLeftRadius',
    'borderBottomRightRadius',
];
 
const AllKeys = [...BorderKeys, ...BorderRadiusKeys];
 
/**
 * @internal
 */
export const borderFormatHandler: FormatHandler<BorderFormat> = {
    parse: (format, element, _, defaultStyle) => {
        BorderKeys.forEach((key, i) => {
            const value = element.style[key];
            const defaultWidth = defaultStyle[BorderWidthKeys[i]] ?? '0px';
            let width = element.style[BorderWidthKeys[i]];
 
            Iif (width == '0') {
                width = '0px';
            }
 
            if (value && width != defaultWidth) {
                let result = value;
                if (result.includes('initial')) {
                    // Remove 'initial' from the last part (color) of the border value
                    // since browsers ignore it when setting the inline style property
                    const border = extractBorderValues(value);
                    Eif (border.color === 'initial') {
                        border.color = '';
                    }
                    result = combineBorderValue(border);
                }
                format[key] = result == 'none' ? '' : result;
            }
        });
 
        const borderRadius = element.style.borderRadius;
 
        if (borderRadius) {
            format.borderRadius = borderRadius;
        } else {
            BorderRadiusKeys.forEach(key => {
                const value = element.style[key];
 
                if (value) {
                    format[key] = value;
                }
            });
        }
    },
    apply: (format, element) => {
        AllKeys.forEach(key => {
            const value = format[key];
 
            if (value) {
                element.style[key] = value;
            }
        });
 
        if (format.borderRadius) {
            element.style.borderRadius = format.borderRadius;
        }
    },
};