All files / roosterjs-content-model-dom/lib/modelToDom contentModelToDom.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
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
270x
 
270x
 
270x
1x
 
 
270x
129x
 
 
270x
 
270x
 
 
 
 
270x
 
 
810x
 
 
 
 
270x
22x
248x
 
 
 
118x
 
118x
118x
 
118x
 
 
 
 
130x
3x
 
127x
 
 
 
 
 
 
 
 
238x
237x
3x
234x
230x
 
 
 
4x
4x
 
 
 
 
 
 
 
 
 
238x
2x
 
2x
 
2x
2x
2x
 
 
 
 
 
 
 
 
 
 
238x
 
 
import { isNodeOfType } from '../domUtils/isNodeOfType';
import { toArray } from '../domUtils/toArray';
import type { ContentModelDocumentWithPersistedCache } from '../modelApi/selection/iterateSelections';
import type {
    ContentModelDocument,
    DOMSelection,
    ModelToDomBlockAndSegmentNode,
    ModelToDomContext,
} from 'roosterjs-content-model-types';
 
/**
 * Create DOM tree fragment from Content Model document
 * @param doc Document object of the target DOM tree
 * @param root Target node that will become the container of new DOM tree.
 * When a DOM node with existing node is passed, it will be merged with content model so that unchanged blocks
 * won't be touched.
 * @param model The content model document to generate DOM tree from
 * @param context The context object for Content Model to DOM conversion
 * @returns The selection range created in DOM tree from this model, or null when there is no selection
 */
export function contentModelToDom(
    doc: Document,
    root: Node,
    model: ContentModelDocument,
    context: ModelToDomContext
): DOMSelection | null {
    context.modelHandlers.blockGroupChildren(doc, root, model, context);
 
    const range = extractSelectionRange(doc, context);
 
    if (model.hasRevertedRangeSelection && range?.type == 'range') {
        range.isReverted = true;
    }
 
    if (context.domIndexer && context.allowCacheElement) {
        (model as ContentModelDocumentWithPersistedCache).persistCache = true;
    }
 
    root.normalize();
 
    return range;
}
 
function extractSelectionRange(doc: Document, context: ModelToDomContext): DOMSelection | null {
    const {
        regularSelection: { start, end },
        tableSelection,
        imageSelection,
    } = context;
 
    let startPosition: { container: Node; offset: number } | undefined;
    let endPosition: { container: Node; offset: number } | undefined;
 
    if (imageSelection) {
        return imageSelection;
    } else if (
        (startPosition = start && calcPosition(start)) &&
        (endPosition = end && calcPosition(end))
    ) {
        const range = doc.createRange();
 
        range.setStart(startPosition.container, startPosition.offset);
        range.setEnd(endPosition.container, endPosition.offset);
 
        return {
            type: 'range',
            range,
            isReverted: false,
        };
    } else if (tableSelection) {
        return tableSelection;
    } else {
        return null;
    }
}
 
function calcPosition(
    pos: ModelToDomBlockAndSegmentNode
): { container: Node; offset: number } | undefined {
    let result: { container: Node; offset: number } | undefined;
 
    if (pos.block) {
        if (!pos.segment) {
            result = { container: pos.block, offset: 0 };
        } else if (isNodeOfType(pos.segment, 'TEXT_NODE')) {
            result = {
                container: pos.segment,
                offset: pos.offset ?? pos.segment.nodeValue?.length ?? 0,
            };
        } else Eif (pos.segment.parentNode) {
            result = {
                container: pos.segment.parentNode,
                offset:
                    toArray(pos.segment.parentNode.childNodes as NodeListOf<Node>).indexOf(
                        pos.segment
                    ) + 1,
            };
        }
    }
 
    if (result && isNodeOfType(result.container, 'DOCUMENT_FRAGMENT_NODE')) {
        const childNodes = result.container.childNodes;
 
        Iif (childNodes.length > result.offset) {
            result = { container: childNodes[result.offset], offset: 0 };
        } else Eif (result.container.lastChild) {
            const container = result.container.lastChild;
            result = {
                container,
                offset: isNodeOfType(container, 'TEXT_NODE')
                    ? container.nodeValue?.length ?? 0
                    : container.childNodes.length,
            };
        } else {
            result = undefined;
        }
    }
 
    return result;
}