All files / roosterjs-content-model-dom/lib/domToModel/processors knownElementProcessor.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
1x
1x
1x
1x
1x
1x
1x
1x
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
1x
 
 
 
 
1x
1248x
 
1248x
 
 
 
48x
1200x
287x
287x
 
287x
287x
 
287x
287x
 
287x
 
 
287x
284x
 
 
 
 
 
 
 
 
 
 
913x
 
 
 
 
 
 
 
913x
 
913x
1x
 
 
 
 
 
 
 
913x
 
 
 
 
 
 
 
337x
4x
 
 
333x
333x
 
333x
 
 
333x
18x
 
 
 
 
315x
 
4830x
 
295x
 
24x
 
 
 
291x
 
 
 
 
291x
6x
 
 
285x
 
 
import { addBlock } from '../../modelApi/common/addBlock';
import { blockProcessor } from './blockProcessor';
import { createParagraph } from '../../modelApi/creators/createParagraph';
import { formatContainerProcessor } from './formatContainerProcessor';
import { getDefaultStyle } from '../utils/getDefaultStyle';
import { isBlockElement } from '../utils/isBlockElement';
import { parseFormat } from '../utils/parseFormat';
import { stackFormat } from '../utils/stackFormat';
import type {
    ContentModelSegmentFormat,
    DomToModelContext,
    ElementProcessor,
} from 'roosterjs-content-model-types';
 
const FormatContainerTriggerStyles: (keyof CSSStyleDeclaration)[] = [
    'marginBottom',
    'marginTop',
    'paddingBottom',
    'paddingTop',
    'paddingLeft',
    'paddingRight',
    'borderTopWidth',
    'borderBottomWidth',
    'borderLeftWidth',
    'borderRightWidth',
    'width',
    'height',
    'maxWidth',
    'maxHeight',
    'minWidth',
    'minHeight',
];
const FormatContainerTriggerAttributes = ['id'];
const ByPassFormatContainerTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'A'];
const SegmentDecoratorTags = ['A', 'CODE'];
 
/**
 * @internal
 */
export const knownElementProcessor: ElementProcessor<HTMLElement> = (group, element, context) => {
    const isBlock = isBlockElement(element);
 
    if (
        (isBlock || element.style.display == 'inline-block') && // For inline-block here, we will also check if it should be represented as Format Container
        shouldUseFormatContainer(element, context)
    ) {
        formatContainerProcessor(group, element, context);
    } else if (isBlock) {
        const decorator = context.blockDecorator.tagName ? context.blockDecorator : undefined;
        const isSegmentDecorator = SegmentDecoratorTags.indexOf(element.tagName) >= 0;
 
        stackFormat(context, { segment: 'shallowCloneForBlock', paragraph: 'shallowClone' }, () => {
            const segmentFormat: ContentModelSegmentFormat = {};
 
            parseFormat(element, context.formatParsers.segmentOnBlock, segmentFormat, context);
            Object.assign(context.segmentFormat, segmentFormat);
 
            blockProcessor(group, element, context, segmentFormat);
        });
 
        if (isBlock && !isSegmentDecorator) {
            addBlock(
                group,
                createParagraph(
                    true /*isImplicit*/,
                    context.blockFormat,
                    undefined /*segmentFormat*/,
                    decorator
                )
            );
        }
    } else {
        stackFormat(
            context,
            {
                segment: 'shallowClone',
                paragraph: 'shallowClone',
                link: 'cloneFormat',
            },
            () => {
                parseFormat(element, context.formatParsers.segment, context.segmentFormat, context);
 
                if (context.link.format.href && element.tagName != 'A') {
                    parseFormat(
                        element,
                        context.formatParsers.segmentUnderLink,
                        context.link.format,
                        context
                    );
                }
 
                context.elementProcessors.child(group, element, context);
            }
        );
    }
};
 
function shouldUseFormatContainer(element: HTMLElement, context: DomToModelContext) {
    // For those tags that we know we should not use format container, just return false
    if (ByPassFormatContainerTags.indexOf(element.tagName) >= 0) {
        return false;
    }
 
    const style = element.style;
    const defaultStyle = getDefaultStyle(element);
 
    const bgcolor = style.getPropertyValue('background-color');
 
    // For block element with background, we need to use format container
    if (bgcolor && bgcolor != 'transparent') {
        return true;
    }
 
    // For block element with positive value of border width or top/bottom margin/padding,
    // we need to use format container
    if (
        FormatContainerTriggerStyles.some(
            key => parseInt((style[key] as string) || (defaultStyle[key] as string) || '') > 0
        ) ||
        FormatContainerTriggerAttributes.some(attr => element.hasAttribute(attr))
    ) {
        return true;
    }
 
    // For margin left/right with value "auto", we need to use format container
    Iif (style.marginLeft == 'auto' || style.marginRight == 'auto') {
        return true;
    }
 
    // For element with "align" attribute, we need to use format container
    if (element.getAttribute('align')) {
        return true;
    }
 
    return false;
}