All files / roosterjs-content-model-core/lib/corePlugin/cache textMutationObserver.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
138
139
140
141
1x
1x
 
 
 
 
 
 
 
1x
 
 
 
102x
102x
102x
 
102x
102x
 
 
1x
100x
 
 
 
 
 
 
 
1x
83x
 
 
1x
287x
 
287x
157x
 
 
 
102x
163x
163x
163x
163x
163x
163x
 
163x
163x
 
163x
409x
409x
 
409x
2x
407x
119x
 
 
 
2x
 
2x
 
117x
 
 
 
405x
 
384x
3x
 
 
 
1x
 
 
2x
 
 
384x
 
 
5x
 
 
 
5x
5x
 
5x
 
 
16x
9x
7x
4x
 
 
16x
12x
12x
 
 
16x
 
 
 
163x
157x
5x
 
 
 
 
 
 
157x
5x
 
 
6x
 
 
1x
 
 
 
 
1x
 
 
 
102x
 
 
import { createDOMHelper } from '../../editor/core/DOMHelperImpl';
import {
    findClosestBlockEntityContainer,
    findClosestEntityWrapper,
    isNodeOfType,
} from 'roosterjs-content-model-dom';
import type { DOMHelper, TextMutationObserver } from 'roosterjs-content-model-types';
import type { Mutation } from './MutationType';
 
class TextMutationObserverImpl implements TextMutationObserver {
    private observer: MutationObserver;
    private domHelper: DOMHelper;
 
    constructor(
        private contentDiv: HTMLDivElement,
        private onMutation: (mutation: Mutation) => void
    ) {
        this.observer = new MutationObserver(this.onMutationInternal);
        this.domHelper = createDOMHelper(contentDiv);
    }
 
    startObserving() {
        this.observer.observe(this.contentDiv, {
            subtree: true,
            childList: true,
            attributes: true,
            characterData: true,
        });
    }
 
    stopObserving() {
        this.observer.disconnect();
    }
 
    flushMutations(ignoreMutations?: boolean) {
        const mutations = this.observer.takeRecords();
 
        if (!ignoreMutations) {
            this.onMutationInternal(mutations);
        }
    }
 
    private onMutationInternal = (mutations: MutationRecord[]) => {
        let canHandle = true;
        let firstTarget: Node | null = null;
        let lastTextChangeNode: Node | null = null;
        let addedNodes: Node[] = [];
        let removedNodes: Node[] = [];
        let reconcileText = false;
 
        const ignoredNodes = new Set<Node>();
        const includedNodes = new Set<Node>();
 
        for (let i = 0; i < mutations.length && canHandle; i++) {
            const mutation = mutations[i];
            const target = mutation.target;
 
            if (ignoredNodes.has(target)) {
                continue;
            } else if (!includedNodes.has(target)) {
                if (
                    findClosestEntityWrapper(target, this.domHelper) ||
                    findClosestBlockEntityContainer(target, this.domHelper)
                ) {
                    ignoredNodes.add(target);
 
                    continue;
                } else {
                    includedNodes.add(target);
                }
            }
 
            switch (mutation.type) {
                case 'attributes':
                    if (this.domHelper.isNodeInEditor(target, true /*excludingSelf*/)) {
                        if (
                            mutation.attributeName == 'id' &&
                            isNodeOfType(target, 'ELEMENT_NODE')
                        ) {
                            this.onMutation({ type: 'elementId', element: target });
                        } else {
                            // We cannot handle attributes changes on editor content for now
                            canHandle = false;
                        }
                    }
                    break;
 
                case 'characterData':
                    Iif (lastTextChangeNode && lastTextChangeNode != mutation.target) {
                        // Multiple text nodes got changed, we don't know how to handle it
                        canHandle = false;
                    } else {
                        lastTextChangeNode = mutation.target;
                        reconcileText = true;
                    }
                    break;
 
                case 'childList':
                    if (!firstTarget) {
                        firstTarget = mutation.target;
                    } else if (firstTarget != mutation.target) {
                        canHandle = false;
                    }
 
                    if (canHandle) {
                        addedNodes = addedNodes.concat(Array.from(mutation.addedNodes));
                        removedNodes = removedNodes.concat(Array.from(mutation.removedNodes));
                    }
 
                    break;
            }
        }
 
        if (canHandle) {
            if (addedNodes.length > 0 || removedNodes.length > 0) {
                this.onMutation({
                    type: 'childList',
                    addedNodes,
                    removedNodes,
                });
            }
 
            if (reconcileText) {
                this.onMutation({ type: 'text' });
            }
        } else {
            this.onMutation({ type: 'unknown' });
        }
    };
}
 
/**
 * @internal
 */
export function createTextMutationObserver(
    contentDiv: HTMLDivElement,
    onMutation: (mutation: Mutation) => void
): TextMutationObserver {
    return new TextMutationObserverImpl(contentDiv, onMutation);
}