How to use roosterjs-editor-api - 10 common examples

To help you get started, we’ve selected a few roosterjs-editor-api 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-plugins / lib / ContentEdit / features / listFeatures.ts View on Github external
);

                if (rangeToDelete) {
                    rangeToDelete.deleteContents();
                }

                // If not explicitly insert br, Chrome/Safari/IE will operate on the previous line
                let tempBr = editor.getDocument().createElement('BR');
                if (Browser.isChrome || Browser.isSafari || Browser.isIE11OrGreater) {
                    editor.insertNode(tempBr);
                }

                if (textBeforeCursor.indexOf('1.') == 0) {
                    toggleNumbering(editor);
                } else {
                    toggleBullet(editor);
                }

                editor.deleteNode(tempBr);
            });
        });
github microsoft / roosterjs / packages / roosterjs-editor-plugins / lib / ContentEdit / autoBullet.ts View on Github external
rangeToDelete.deleteContents();
        }

        // If not explicitly insert br, Chrome will operate on the previous line
        if (browserData.isChrome) {
            let brNode = document.createElement('br');
            editor.insertNode(brNode, {
                position: ContentPosition.SelectionStart,
                updateCursor: true,
                replaceSelection: false,
                insertOnNewLine: false,
            });
        }

        if (identifier == '*' || identifier == '-') {
            toggleBullet(editor);
        } else if (identifier == '1.') {
            toggleNumbering(editor);
        }
    });
github microsoft / roosterjs / packages / roosterjs-editor-plugins / lib / ContentEdit / features / listFeatures.ts View on Github external
textBeforeCursor,
                    true /*exactMatch*/
                );

                if (rangeToDelete) {
                    rangeToDelete.deleteContents();
                }

                // If not explicitly insert br, Chrome/Safari/IE will operate on the previous line
                let tempBr = editor.getDocument().createElement('BR');
                if (Browser.isChrome || Browser.isSafari || Browser.isIE11OrGreater) {
                    editor.insertNode(tempBr);
                }

                if (textBeforeCursor.indexOf('1.') == 0) {
                    toggleNumbering(editor);
                } else {
                    toggleBullet(editor);
                }

                editor.deleteNode(tempBr);
            });
        });
github microsoft / roosterjs / packages / roosterjs-editor-plugins / lib / ContentEdit / autoBullet.ts View on Github external
// If not explicitly insert br, Chrome will operate on the previous line
        if (browserData.isChrome) {
            let brNode = document.createElement('br');
            editor.insertNode(brNode, {
                position: ContentPosition.SelectionStart,
                updateCursor: true,
                replaceSelection: false,
                insertOnNewLine: false,
            });
        }

        if (identifier == '*' || identifier == '-') {
            toggleBullet(editor);
        } else if (identifier == '1.') {
            toggleNumbering(editor);
        }
    });
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);
                };
github microsoft / roosterjs-react / packages / roosterjs-react-command-bar / lib / components / LinkDialog.tsx View on Github external
private insertLink = (): void => {
        const { editor, selectionRange } = this.props;

        if (!this.linkField || !editor || editor.isDisposed()) {
            return;
        }

        editor && !editor.isDisposed() && editor.select(selectionRange);
        this.linkInserted = true; // don't need to restore the selection after dismiss if we're changing selection into a link
        createLink(editor, this.linkField.value);
        this.dismissDialog();
    };
github microsoft / roosterjs / sample / scripts / initFormatBar.ts View on Github external
document.getElementById('alignRightButton').addEventListener('click', function() {
        setAlignment(getCurrentEditor(), Alignment.Right);
    });