All files / roosterjs-content-model-dom/lib/formatHandlers/block paddingFormatHandler.ts

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
1x
 
 
 
1x
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
 
1063x
 
1063x
4252x
4252x
 
 
 
4252x
 
 
 
4252x
3707x
 
 
4252x
 
 
 
4252x
221x
 
 
 
 
1098x
4392x
4392x
 
4392x
476x
 
 
 
119x
 
 
 
4392x
106x
 
 
 
 
 
import { directionFormatHandler } from './directionFormatHandler';
import type { FormatHandler } from '../FormatHandler';
import type { DirectionFormat, PaddingFormat } from 'roosterjs-content-model-types';
 
const PaddingKeys: (keyof PaddingFormat & keyof CSSStyleDeclaration)[] = [
    'paddingTop',
    'paddingRight',
    'paddingBottom',
    'paddingLeft',
];
 
const AlternativeKeyLtr: Partial<Record<
    keyof PaddingFormat,
    keyof CSSStyleDeclaration | undefined
>> = {
    paddingLeft: 'paddingInlineStart',
};
 
const AlternativeKeyRtl: Partial<Record<
    keyof PaddingFormat,
    keyof CSSStyleDeclaration | undefined
>> = {
    paddingRight: 'paddingInlineStart',
};
 
/**
 * @internal
 */
export const paddingFormatHandler: FormatHandler<PaddingFormat & DirectionFormat> = {
    parse: (format, element, context, defaultStyle) => {
        directionFormatHandler.parse(format, element, context, defaultStyle);
 
        PaddingKeys.forEach(key => {
            let value = element.style[key];
            const alterativeKey = (format.direction == 'rtl'
                ? AlternativeKeyRtl
                : AlternativeKeyLtr)[key];
            const defaultValue: string =
                (defaultStyle[key] ??
                    (alterativeKey ? defaultStyle[alterativeKey] : undefined) ??
                    '0px') + '';
 
            if (!value) {
                value = defaultValue;
            }
 
            Iif (!value || value == '0') {
                value = '0px';
            }
 
            if (value && value != defaultValue) {
                format[key] = value;
            }
        });
    },
    apply: (format, element, context) => {
        PaddingKeys.forEach(key => {
            const value = format[key];
            let defaultValue: string | undefined = undefined;
 
            if (element.tagName == 'OL' || element.tagName == 'UL') {
                if (
                    (format.direction == 'rtl' && key == 'paddingRight') ||
                    (format.direction != 'rtl' && key == 'paddingLeft')
                ) {
                    defaultValue = '40px';
                }
            }
 
            if (value && value != defaultValue) {
                element.style[key] = value;
            }
        });
    },
};