All files / roosterjs-content-model-core/lib/editor/core DOMHelperImpl.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
1x
 
 
1x
258x
 
1x
347x
 
 
1x
1x
 
 
1x
496x
 
 
1x
251x
251x
 
251x
 
 
 
 
1x
2x
1x
 
1x
 
 
 
1x
1x
 
 
1x
5x
 
 
1x
342x
 
 
342x
 
 
 
342x
 
 
 
 
 
 
1x
1977x
1977x
 
 
 
 
 
1x
192x
192x
 
192x
 
 
 
 
 
1x
9x
9x
9x
9x
9x
 
 
 
 
 
1x
1x
 
 
 
 
 
1x
1x
 
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
1x
258x
 
 
import { isNodeOfType, parseValueWithUnit, toArray } from 'roosterjs-content-model-dom';
import type { ContentModelSegmentFormat, DOMHelper } from 'roosterjs-content-model-types';
 
class DOMHelperImpl implements DOMHelper {
    constructor(private contentDiv: HTMLElement) {}
 
    queryElements(selector: string): HTMLElement[] {
        return toArray(this.contentDiv.querySelectorAll(selector)) as HTMLElement[];
    }
 
    getTextContent(): string {
        return this.contentDiv.textContent || '';
    }
 
    isNodeInEditor(node: Node, excludeRoot?: boolean): boolean {
        return excludeRoot && node == this.contentDiv ? false : this.contentDiv.contains(node);
    }
 
    calculateZoomScale(): number {
        const originalWidth = this.contentDiv.getBoundingClientRect()?.width || 0;
        const visualWidth = this.contentDiv.offsetWidth;
 
        return visualWidth > 0 && originalWidth > 0
            ? Math.round((originalWidth / visualWidth) * 100) / 100
            : 1;
    }
 
    setDomAttribute(name: string, value: string | null) {
        if (value === null) {
            this.contentDiv.removeAttribute(name);
        } else {
            this.contentDiv.setAttribute(name, value);
        }
    }
 
    getDomAttribute(name: string): string | null {
        return this.contentDiv.getAttribute(name);
    }
 
    getDomStyle<T extends keyof CSSStyleDeclaration>(style: T): CSSStyleDeclaration[T] {
        return this.contentDiv.style[style];
    }
 
    findClosestElementAncestor(startFrom: Node, selector?: string): HTMLElement | null {
        const startElement = isNodeOfType(startFrom, 'ELEMENT_NODE')
            ? startFrom
            : startFrom.parentElement;
        const closestElement = selector
            ? (startElement?.closest(selector) as HTMLElement | null)
            : startElement;
 
        return closestElement &&
            this.isNodeInEditor(closestElement) &&
            closestElement != this.contentDiv
            ? closestElement
            : null;
    }
 
    hasFocus(): boolean {
        const activeElement = this.contentDiv.ownerDocument.activeElement;
        return !!(activeElement && this.contentDiv.contains(activeElement));
    }
 
    /**
     * Check if the root element is in RTL mode
     */
    isRightToLeft(): boolean {
        const contentDiv = this.contentDiv;
        const style = contentDiv.ownerDocument.defaultView?.getComputedStyle(contentDiv);
 
        return style?.direction == 'rtl';
    }
 
    /**
     * Get the width of the editable area of the editor content div
     */
    getClientWidth(): number {
        const contentDiv = this.contentDiv;
        const style = contentDiv.ownerDocument.defaultView?.getComputedStyle(contentDiv);
        const paddingLeft = parseValueWithUnit(style?.paddingLeft);
        const paddingRight = parseValueWithUnit(style?.paddingRight);
        return this.contentDiv.clientWidth - (paddingLeft + paddingRight);
    }
 
    /**
     * Get a deep cloned root element
     */
    getClonedRoot(): HTMLElement {
        return this.contentDiv.cloneNode(true /*deep*/) as HTMLElement;
    }
 
    /**
     * Get format of the container element
     */
    getContainerFormat(): ContentModelSegmentFormat {
        const window = this.contentDiv.ownerDocument.defaultView;
 
        const style = window?.getComputedStyle(this.contentDiv);
 
        return style
            ? {
                  fontSize: style.fontSize,
                  fontFamily: style.fontFamily,
                  fontWeight: style.fontWeight,
                  textColor: style.color,
                  backgroundColor: style.backgroundColor,
                  italic: style.fontStyle == 'italic',
                  letterSpacing: style.letterSpacing,
                  lineHeight: style.lineHeight,
                  strikethrough: style.textDecoration?.includes('line-through'),
                  superOrSubScriptSequence: style.verticalAlign,
                  underline: style.textDecoration?.includes('underline'),
              }
            : {};
    }
}
 
/**
 * @internal Create new instance of DOMHelper
 */
export function createDOMHelper(contentDiv: HTMLElement): DOMHelper {
    return new DOMHelperImpl(contentDiv);
}