How to use the roosterjs-editor-api.getFormatState 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.

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 / publish / samplesite / scripts / plugins / ShowFormatState.ts View on Github external
public onPluginEvent(event: PluginEvent) {
        if (event.eventType == PluginEventType.KeyUp || event.eventType == PluginEventType.MouseUp || event.eventType == PluginEventType.ContentChanged) {
            let formatState = getFormatState(this.editor);
            if (formatState) {
                let result = '';
                if (formatState.fontName) {
                    result += ' <b>fontName:</b> ' + formatState.fontName;
                }
                if (formatState.fontSize) {
                    result += ' <b>fontSize:</b> ' + formatState.fontSize;
                }
                if (formatState.backgroundColor) {
                    result += ' <b>backgroundColor:</b> ' + formatState.backgroundColor;
                }
                if (formatState.textColor) {
                    result += ' <b>textColor:</b> ' + formatState.textColor;
                }
                if (formatState.isBold) {
                    result += ' <b>Bold</b> ';
github microsoft / roosterjs / publish / samplesite / scripts / controls / sidePane / formatState / FormatStatePlugin.ts View on Github external
private getFormatState() {
        let format = this.editor && getFormatState(this.editor);
        let rect = this.editor && this.editor.getCursorRect();
        return {
            format,
            inIME: this.editor && this.editor.isInIME(),
            x: rect ? rect.left : 0,
            y: rect ? rect.top : 0,
        };
    }
}
github microsoft / roosterjs-react / packages / roosterjs-react-command-bar / lib / components / RoosterCommandBar.tsx View on Github external
private _updateFormatState = (): void => {
        const { roosterCommandBarPlugin } = this.props;

        const editor: Editor = roosterCommandBarPlugin.getEditor();
        const formatState = editor ? getFormatState(editor) : null;
        if (formatState && this._hasFormatStateChanged(formatState)) {
            this.setState({ formatState });
        }
    };
github microsoft / roosterjs / publish / samplesite / scripts / controls / ribbon / Ribbon.tsx View on Github external
render() {
        let plugin = this.props.plugin;
        let editor = plugin.getEditor();
        let format = editor && getFormatState(editor);
        return (
            <div className={styles.ribbon + ' ' + (this.props.className || '')}>
                {Object.keys(ribbonButtons).map(key => (
                    <RibbonButton
                        key={key}
                        plugin={plugin}
                        format={format}
                        button={ribbonButtons[key]}
                        onClicked={this.onButtonClicked}
                    />
                ))}
                <button onClick={this.onSave} className={styles.textButton}>
                    Export
                </button>
                <button onClick={this.onClear} className={styles.textButton}>
                    Clear
github microsoft / roosterjs-react / packages / roosterjs-react-ribbon / lib / components / Ribbon.tsx View on Github external
private updateRibbonState = () => {
        this.ribbonStateJobId = null;
        let editor = this.props.ribbonPlugin.getEditor();
        let formatState = editor ? getFormatState(editor) : null;
        if (formatState && this.isFormatStateChanged(formatState)) {
            this.setFormatState(formatState);
        }
    };