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
842x
 
842x
 
 
 
48x
794x
267x
267x
 
267x
267x
 
267x
267x
 
267x
 
 
267x
264x
 
 
 
 
 
 
 
 
 
 
527x
 
 
 
 
 
 
 
527x
 
527x
1x
 
 
 
 
 
 
 
527x
 
 
 
 
 
 
 
317x
4x
 
 
313x
313x
 
313x
 
 
313x
18x
 
 
 
 
295x
 
4510x
 
275x
 
24x
 
 
 
271x
 
 
 
 
271x
6x
 
 
265x
 
 
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;
}