All files / roosterjs-content-model-core/lib/coreApi/addUndoSnapshot createSnapshotSelection.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
1x
 
1x
 
 
 
 
1x
476x
238x
 
 
238x
172x
172x
 
172x
6x
 
 
172x
15x
 
15x
15x
15x
 
 
 
 
 
 
 
 
 
 
 
238x
 
33x
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
172x
 
172x
 
 
 
 
 
 
 
30x
 
 
 
 
 
 
 
 
 
178x
178x
 
178x
585x
51x
 
 
585x
 
 
178x
 
 
 
51x
51x
 
51x
101x
 
101x
 
23x
11x
11x
 
 
23x
23x
23x
 
23x
 
49x
8x
8x
8x
8x
 
41x
 
49x
 
29x
29x
 
 
 
51x
51x
 
51x
12x
6x
1x
 
 
 
 
51x
 
 
import { isElementOfType, isNodeOfType, moveChildNodes } from 'roosterjs-content-model-dom';
import type { EditorCore, SnapshotSelection } from 'roosterjs-content-model-types';
import { getPath } from './getPath';
 
/**
 * @internal
 */
export function createSnapshotSelection(core: EditorCore): SnapshotSelection {
    const { physicalRoot, api } = core;
    const selection = api.getDOMSelection(core);
 
    // Normalize tables to ensure they have TBODY element between TABLE and TR so that the selection path will include correct values
    if (selection?.type == 'range') {
        const { startContainer, startOffset, endContainer, endOffset } = selection.range;
        let isDOMChanged = normalizeTableTree(startContainer, physicalRoot);
 
        if (endContainer != startContainer) {
            isDOMChanged = normalizeTableTree(endContainer, physicalRoot) || isDOMChanged;
        }
 
        if (isDOMChanged) {
            const newRange = physicalRoot.ownerDocument.createRange();
 
            newRange.setStart(startContainer, startOffset);
            newRange.setEnd(endContainer, endOffset);
            api.setDOMSelection(
                core,
                {
                    type: 'range',
                    range: newRange,
                    isReverted: !!selection.isReverted,
                },
                true /*skipSelectionChangedEvent*/
            );
        }
    }
 
    switch (selection?.type) {
        case 'image':
            return {
                type: 'image',
                imageId: selection.image.id,
            };
 
        case 'table':
            return {
                type: 'table',
                tableId: selection.table.id,
                firstColumn: selection.firstColumn,
                lastColumn: selection.lastColumn,
                firstRow: selection.firstRow,
                lastRow: selection.lastRow,
            };
 
        case 'range':
            const range = selection.range;
 
            return {
                type: 'range',
                start: getPath(range.startContainer, range.startOffset, physicalRoot),
                end: getPath(range.endContainer, range.endOffset, physicalRoot),
                isReverted: !!selection.isReverted,
            };
 
        default:
            return {
                type: 'range',
                start: [],
                end: [],
                isReverted: false,
            };
    }
}
 
function normalizeTableTree(startNode: Node, root: Node) {
    let node: Node | null = startNode;
    let isDOMChanged = false;
 
    while (node && root.contains(node)) {
        if (isNodeOfType(node, 'ELEMENT_NODE') && isElementOfType(node, 'table')) {
            isDOMChanged = normalizeTable(node) || isDOMChanged;
        }
 
        node = node.parentNode;
    }
 
    return isDOMChanged;
}
 
function normalizeTable(table: HTMLTableElement): boolean {
    let isDOMChanged = false;
    let tbody: HTMLTableSectionElement | null = null;
 
    for (let child = table.firstChild; child; child = child.nextSibling) {
        const tag = isNodeOfType(child, 'ELEMENT_NODE') ? child.tagName : null;
 
        switch (tag) {
            case 'TR':
                if (!tbody) {
                    tbody = table.ownerDocument.createElement('tbody');
                    table.insertBefore(tbody, child);
                }
 
                tbody.appendChild(child);
                child = tbody;
                isDOMChanged = true;
 
                break;
            case 'TBODY':
                if (tbody) {
                    moveChildNodes(tbody, child, true /*keepExistingChildren*/);
                    child.parentNode?.removeChild(child);
                    child = tbody;
                    isDOMChanged = true;
                } else {
                    tbody = child as HTMLTableSectionElement;
                }
                break;
            default:
                tbody = null;
                break;
        }
    }
 
    const colgroups = table.querySelectorAll('colgroup');
    const thead = table.querySelector('thead');
 
    if (thead) {
        colgroups.forEach(colgroup => {
            if (!thead.contains(colgroup)) {
                thead.appendChild(colgroup);
            }
        });
    }
 
    return isDOMChanged;
}