Working with Paragraph Formatting

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {
    DocumentEditorComponent,
    DocumentEditor,
    Selection,
    Editor,
    EditorHistory,
    ContextMenu
} from '@syncfusion/ej2-react-documenteditor';
import { ToolbarComponent, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

DocumentEditorComponent.Inject(
    Selection,
    Editor,
    EditorHistory,
    ContextMenu
);
export class Default extends React.Component<{}, {}> {
    public documenteditor: DocumentEditorComponent;
    public items: ItemModel[] = [
        {
            text: 'Single',
        },
        {
            text: '1.15',
        },
        {
            text: '1.5',
        },
        {
            text: 'Double',
        },
    ];

    public contentTemplate1() {
        return (<DropDownButtonComponent items={this.items} iconCss="e-de-icon-LineSpacing" selected={this.lineSpacingAction.bind(this)} ></DropDownButtonComponent>);
    }
    public componentDidMount(): void {
        this.updateContainerSize();
         this.documenteditor.selectionChange = () => {
            setTimeout(() => { this.onSelectionChange(); }, 20);
        };
    }

    updateContainerSize(): void {
        document.getElementById('container').style.height =
            window.innerHeight - document.getElementById('toolbar').offsetHeight + 'px';
    }

    toolbarButtonClick(arg): void {
        switch (arg.item.id) {
            case 'AlignLeft':
                //Toggle the Left alignment for selected or current paragraph
                this.documenteditor.editor.toggleTextAlignment('Left');
                break;
            case 'AlignRight':
                //Toggle the Right alignment for selected or current paragraph
                this.documenteditor.editor.toggleTextAlignment('Right');
                break;
            case 'AlignCenter':
                //Toggle the Center alignment for selected or current paragraph
                this.documenteditor.editor.toggleTextAlignment('Center');
                break;
            case 'Justify':
                //Toggle the Justify alignment for selected or current paragraph
                this.documenteditor.editor.toggleTextAlignment('Justify');
                break;
            case 'IncreaseIndent':
                //Increase the left indent of selected or current paragraph
                this.documenteditor.editor.increaseIndent();
                break;
            case 'DecreaseIndent':
                //Decrease the left indent of selected or current paragraph
                this.documenteditor.editor.decreaseIndent();
                break;
            case 'ClearFormat':
                this.documenteditor.editor.clearFormatting();
                break;
        }
    }
    //Change the line spacing of selected or current paragraph
    lineSpacingAction(args: any): void {
        let text: string = args.item.text;
        switch (text) {
            case 'Single':
                this.documenteditor.selection.paragraphFormat.lineSpacing = 1;
                break;
            case '1.15':
                this.documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
                break;
            case '1.5':
                this.documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
                break;
            case 'Double':
                this.documenteditor.selection.paragraphFormat.lineSpacing = 2;
                break;
        }
        setTimeout((): void => {
            this.documenteditor.focusIn();
        }, 30);
    }
    // Selection change to retrieve formatting
    onSelectionChange(): void {
        if (this.documenteditor.selection) {
            var paragraphFormat = this.documenteditor.selection.paragraphFormat;
            var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify'];
            for (var i = 0; i < toggleBtnId.length; i++) {
                let toggleBtn: HTMLElement = document.getElementById(
                    toggleBtnId[i]
                );
                toggleBtn.classList.remove('e-btn-toggle');
            }
            if (paragraphFormat.textAlignment === 'Left') {
                document.getElementById('AlignLeft').classList.add('e-btn-toggle');
            } else if (paragraphFormat.textAlignment === 'Right') {
                document.getElementById('AlignRight').classList.add('e-btn-toggle');
            } else if (paragraphFormat.textAlignment === 'Center') {
                document
                    .getElementById('AlignCenter')
                    .classList.add('e-btn-toggle');
            } else {
                document.getElementById('Justify').classList.add('e-btn-toggle');
            }
            // #endregion
        }
    }

    render() {

        return (
            <div>
                <ToolbarComponent id='toolbar' clicked={this.toolbarButtonClick.bind(this)}>
                    <ItemDirective id="AlignLeft" prefixIcon="e-de-icon-AlignLeft" tooltipText="Align Left" />
                    <ItemDirective id="AlignCenter" prefixIcon="e-de-icon-AlignCenter" tooltipText="Align Center" />
                    <ItemDirective id="AlignRight" prefixIcon="e-de-icon-AlignRight" tooltipText="Align Right" />
                    <ItemDirective id="Justify" prefixIcon="e-de-icon-Justify" tooltipText="Justify" />
                    <ItemDirective type="Separator" />
                    <ItemDirective id="IncreaseIndent" prefixIcon="e-de-icon-IncreaseIndent" tooltipText="Increase Indent" />
                    <ItemDirective id="DecreaseIndent" prefixIcon="e-de-icon-DecreaseIndent" tooltipText="Decrease Indent" />
                    <ItemDirective type="Separator" />
                    <ItemDirective template={this.contentTemplate1} />
                    <ItemDirective id="ClearFormat" prefixIcon="e-de-icon-ClearAll" tooltipText="Clear Formatting" />
                </ToolbarComponent>

                <DocumentEditorComponent
                    id="container"
                    ref={scope => {
                        this.documenteditor = scope;
                    }}
                    isReadOnly={false}
                    enableSelection={true}
                    enableEditor={true}
                    enableEditorHistory={true}
                    enableContextMenu={true}
                    enableTableDialog={true}
                />
            </div>
        );
    }
}
ReactDOM.render(<Default />, document.getElementById('sample'));