All files / roosterjs-content-model-dom/lib/formatHandlers/list listItemAlignFormatHandler.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
1x
 
 
 
 
 
 
1x
 
 
513x
2x
511x
50x
 
 
50x
1x
 
 
50x
 
 
 
260x
4x
 
4x
 
 
4x
 
4x
3x
3x
 
 
 
 
 
import { calcAlign } from '../utils/dir';
import type { DirectionFormat, TextAlignFormat } from 'roosterjs-content-model-types';
import type { FormatHandler } from '../FormatHandler';
 
/**
 * @internal
 */
export const listItemAlignFormatHandler: FormatHandler<TextAlignFormat & DirectionFormat> = {
    parse: (format, element, context) => {
        // For list, we usually use align-self to implement alignment
        if (element.style.alignSelf) {
            format.textAlign = calcAlign(element.style.alignSelf, context.blockFormat.direction);
        } else if (element.style.textAlign && element.parentElement?.style.display !== 'flex') {
            let align = element.style.textAlign;
 
            // For RTL environment, 'start' and 'end' in textAlign means opposite direction compared to LTR unless parent is using flex display
            if (context.blockFormat.direction === 'rtl' && (align == 'start' || align == 'end')) {
                align = align == 'start' ? 'end' : 'start';
            }
 
            format.textAlign = calcAlign(align, context.blockFormat.direction);
        }
    },
    apply: (format, element) => {
        if (format.textAlign) {
            const parent = element.parentElement;
 
            element.style.alignSelf = format.textAlign;
 
            // For list item we use align-self to implement textAlign rather than text-align
            element.style.removeProperty('text-align');
 
            if (parent) {
                parent.style.flexDirection = 'column';
                parent.style.display = 'flex';
            }
        }
    },
};