All files / roosterjs-content-model-dom/lib/formatHandlers/block textAlignFormatHandler.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
1x
1x
 
 
 
 
 
 
1x
 
2220x
 
2220x
 
2220x
 
 
 
 
 
 
 
 
 
2220x
143x
 
 
 
1560x
 
1560x
103x
103x
 
103x
5x
5x
5x
 
98x
 
 
 
 
 
import { calcAlign, ResultMap } from '../utils/dir';
import { directionFormatHandler } from './directionFormatHandler';
import type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';
import type { FormatHandler } from '../FormatHandler';
 
/**
 * @internal
 */
export const textAlignFormatHandler: FormatHandler<DirectionFormat & TextAlignFormat> = {
    parse: (format, element, context, defaultStyle) => {
        directionFormatHandler.parse(format, element, context, defaultStyle);
 
        let textAlign = element.style.textAlign || defaultStyle.textAlign;
 
        Iif (
            element.tagName == 'LI' &&
            element.parentElement?.style.display === 'flex' &&
            element.parentElement.style.flexDirection === 'column' &&
            element.style.alignSelf
        ) {
            // For LI element with flex style applied, we use its "align-self" style value instead since LI has a different implementation for align
            textAlign = element.style.alignSelf;
        }
 
        if (textAlign) {
            format.textAlign = calcAlign(textAlign, format.direction);
        }
    },
    apply: (format, element) => {
        const dir: 'ltr' | 'rtl' = format.direction == 'rtl' ? 'rtl' : 'ltr';
 
        if (format.textAlign) {
            const parent = element.parentElement;
            const parentTag = parent?.tagName;
 
            if (element.tagName == 'LI' && parent && (parentTag == 'OL' || parentTag == 'UL')) {
                element.style.alignSelf = format.textAlign;
                element.parentElement.style.flexDirection = 'column';
                element.parentElement.style.display = 'flex';
            } else {
                element.style.textAlign = ResultMap[format.textAlign][dir];
            }
        }
    },
};