How to use the roosterjs-editor-dom.normalizeEditorPoint function in roosterjs-editor-dom

To help you get started, we’ve selected a few roosterjs-editor-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / roosterjs / packages / roosterjs-editor-core / lib / coreAPI / createEventHandlers.ts View on Github external
);
        let blockElement = editorSelection.startBlockElement;
        if (!blockElement) {
            // Only reason we don't get the selection block is that we have an empty content div
            // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
            // The fix is to add a DIV wrapping, apply default format and move cursor over
            let nodes = fromHtml('<div><br></div>', core.document);
            let element = core.contentDiv.appendChild(nodes[0]) as HTMLElement;
            applyFormat(element, core.defaultFormat);
            // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
            selectEditorPoint(core, element.firstChild, NodeBoundary.Begin);
        } else if (blockElement.getStartNode().parentNode == blockElement.getEndNode().parentNode) {
            // Only fix the balanced start-end block where start and end node is under same parent
            // The focus node could be pointing to the content div, normalize it to have it point to a child first
            let focusOffset = selectionRange.startOffset;
            let editorPoint = normalizeEditorPoint(focusNode, focusOffset);
            let element = wrapAll(blockElement.getContentNodes()) as HTMLElement;
            if (getTagOfNode(blockElement.getStartNode()) == 'BR') {
                // if the block is just BR, apply default format
                // Otherwise, leave it as it is as we don't want to change the style for existing data
                applyFormat(element, core.defaultFormat);
            }
            // Last restore the selection using the normalized editor point
            selectEditorPoint(core, editorPoint.containerNode, editorPoint.offset);
        }
    }
}
github microsoft / roosterjs / packages / roosterjs-editor-core / lib / undo / snapshotUtils.ts View on Github external
export function addCursorMarkersToSelection(editor: Editor, selectionRange: Range): void {
    // First to insert the start marker
    let startMarker = createCursorMarker(editor, CURSOR_START);
    let startPoint = normalizeEditorPoint(
        selectionRange.startContainer,
        selectionRange.startOffset
    );
    insertCursorMarkerToEditorPoint(editor, startPoint, startMarker);

    // Then the end marker
    // For collapsed selection, use the start marker as the editor so that
    // the end marker is always placed after the start marker
    let endMarker = createCursorMarker(editor, CURSOR_END);
    let endPoint = selectionRange.collapsed
        ? { containerNode: startMarker, offset: NodeBoundary.End }
        : normalizeEditorPoint(selectionRange.endContainer, selectionRange.endOffset);
    insertCursorMarkerToEditorPoint(editor, endPoint, endMarker);
}
github microsoft / roosterjs / packages / roosterjs-editor-core / lib / undo / snapshotUtils.ts View on Github external
export function addCursorMarkersToSelection(editor: Editor, selectionRange: Range): void {
    // First to insert the start marker
    let startMarker = createCursorMarker(editor, CURSOR_START);
    let startPoint = normalizeEditorPoint(
        selectionRange.startContainer,
        selectionRange.startOffset
    );
    insertCursorMarkerToEditorPoint(editor, startPoint, startMarker);

    // Then the end marker
    // For collapsed selection, use the start marker as the editor so that
    // the end marker is always placed after the start marker
    let endMarker = createCursorMarker(editor, CURSOR_END);
    let endPoint = selectionRange.collapsed
        ? { containerNode: startMarker, offset: NodeBoundary.End }
        : normalizeEditorPoint(selectionRange.endContainer, selectionRange.endOffset);
    insertCursorMarkerToEditorPoint(editor, endPoint, endMarker);
}
github microsoft / roosterjs / packages / roosterjs-editor-core / lib / coreAPI / selection.ts View on Github external
);
            range = range.cloneRange();
            range.collapse(!forwardSelection /*toStart*/);
        }
    }

    // 2) try to get rect using range.getBoundingClientRect()
    let rect = getRectFromClientRect(range.getBoundingClientRect());

    // 3)fallback to a nearby range.getBoundingClientRect()
    if (!rect) {
        // This is often the case the cursor runs in middle of two nodes.
        // i.e. <p>{cursor}<br></p>, or <p><img>{cursor}text</p>.
        // range.getBoundingClientRect mostly return a client rect of all 0
        // Skip this if we're in middle of a text node
        let editorPoint = normalizeEditorPoint(range.startContainer, range.startOffset);
        if (
            editorPoint.containerNode.nodeType != NodeType.Text ||
            editorPoint.containerNode.nodeValue.length == editorPoint.offset
        ) {
            let nearbyRange = core.document.createRange();
            nearbyRange.selectNode(editorPoint.containerNode);
            rect = getRectFromClientRect(nearbyRange.getBoundingClientRect());
            if (rect) {
                // Fix the position to boundary of the nearby range
                rect.left = rect.right =
                    editorPoint.offset == NodeBoundary.Begin ? rect.left : rect.right;
            }
        }
    }

    // 4) fallback range.getClientRects()
github microsoft / roosterjs / packages / roosterjs-editor-core / lib / editor / Editor.ts View on Github external
if (!blockElement) {
                // Only reason we don't get the selection block is that we have an empty content div
                // which can happen when users removes everything (i.e. select all and DEL, or backspace from very end to begin)
                // The fix is to add a DIV wrapping, apply default format and move cursor over
                let nodes = fromHtml('<div><br></div>', this.core.document);
                let element = this.core.contentDiv.appendChild(nodes[0]) as HTMLElement;
                applyFormat(element, this.core.defaultFormat);
                // element points to a wrapping node we added "<div><br></div>". We should move the selection left to <br>
                this.selectEditorPoint(element.firstChild, NodeBoundary.Begin);
            } else if (
                blockElement.getStartNode().parentNode == blockElement.getEndNode().parentNode
            ) {
                // Only fix the balanced start-end block where start and end node is under same parent
                // The focus node could be pointing to the content div, normalize it to have it point to a child first
                let focusOffset = selectionRange.startOffset;
                let editorPoint = normalizeEditorPoint(focusNode, focusOffset);
                let element = wrapAll(blockElement.getContentNodes()) as HTMLElement;
                if (getTagOfNode(blockElement.getStartNode()) == 'BR') {
                    // if the block is just BR, apply default format
                    // Otherwise, leave it as it is as we don't want to change the style for existing data
                    applyFormat(element, this.core.defaultFormat);
                }
                // Last restore the selection using the normalized editor point
                this.selectEditorPoint(editorPoint.containerNode, editorPoint.offset);
            }
        }
        this.stopPropagation(event);
    };