How to use the roosterjs-editor-api.replaceWithNode function in roosterjs-editor-api

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

github microsoft / roosterjs-react / packages / roosterjs-react-emoji / lib / plugins / EmojiPlugin.tsx View on Github external
private _insertEmoji(emoji: Emoji, wordBeforeCursor: string): boolean {
        let inserted = false;
        this._editor.addUndoSnapshot();

        const node = this._editor.getDocument().createElement("span");
        node.innerText = emoji.codePoint;
        if (wordBeforeCursor && replaceWithNode(this._editor, wordBeforeCursor, node, false /*exactMatch*/)) {
            inserted = true;
            this._canUndoEmoji = true;

            // Update the editor cursor to be after the inserted node
            window.requestAnimationFrame(() => {
                if (this._editor && this._editor.contains(node)) {
                    this._editor.select(node, PositionType.After);
                    this._editor.addUndoSnapshot();
                }
            });
        } else {
            inserted = this._editor.insertNode(node);
        }

        inserted && this._triggerChangeEvent();
github microsoft / roosterjs / packages / roosterjs-editor-plugins / lib / ContentEdit / features / autoLinkFeatures.ts View on Github external
editor.performAutoComplete(() => {
            replaceWithNode(editor, linkData.originalUrl, anchor, false /* exactMatch */, searcher);

            // The content at cursor has changed. Should also clear the cursor data cache
            clearContentSearcherCache(event);
            return anchor;
        }, ChangeSource.AutoLink);
    });
github microsoft / roosterjs / packages / roosterjs-plugin-picker / lib / PickerPlugin.ts View on Github external
let insertNode = () => {
                    if (wordToReplace) {
                        replaceWithNode(
                            this.editor,
                            wordToReplace,
                            htmlNode,
                            true /* exactMatch */
                        );
                    } else {
                        this.editor.insertNode(htmlNode);
                    }
                    this.setIsSuggesting(false);
                };