Working with Paragraph Formatting in React DocumentEditor component

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { DocumentEditorComponent, Selection, Editor, EditorHistory, ContextMenu } from '@syncfusion/ej2-react-documenteditor';
import { ToolbarComponent, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
//Inject require modules.
DocumentEditorComponent.Inject(Selection, Editor, EditorHistory, ContextMenu);
function App() {
    let documenteditor;
    React.useEffect(() => {
        componentDidMount();
    }, []);
    let items = [
        {
            text: 'Single',
        },
        {
            text: '1.15',
        },
        {
            text: '1.5',
        },
        {
            text: 'Double',
        },
    ];
    function contentTemplate1() {
        return (<DropDownButtonComponent items={items} iconCss="e-de-icon-LineSpacing" select={lineSpacingAction}></DropDownButtonComponent>);
    }
    function componentDidMount() {
        documenteditor.selectionChange = () => {
            setTimeout(() => { onSelectionChange(); }, 20);
        };
    }
    function toolbarButtonClick(arg) {
        switch (arg.item.id) {
            case 'AlignLeft':
                //Toggle the Left alignment for selected or current paragraph
                documenteditor.editor.toggleTextAlignment('Left');
                break;
            case 'AlignRight':
                //Toggle the Right alignment for selected or current paragraph
                documenteditor.editor.toggleTextAlignment('Right');
                break;
            case 'AlignCenter':
                //Toggle the Center alignment for selected or current paragraph
                documenteditor.editor.toggleTextAlignment('Center');
                break;
            case 'Justify':
                //Toggle the Justify alignment for selected or current paragraph
                documenteditor.editor.toggleTextAlignment('Justify');
                break;
            case 'IncreaseIndent':
                //Increase the left indent of selected or current paragraph
                documenteditor.editor.increaseIndent();
                break;
            case 'DecreaseIndent':
                //Decrease the left indent of selected or current paragraph
                documenteditor.editor.decreaseIndent();
                break;
            case 'ClearFormat':
                documenteditor.editor.clearFormatting();
                break;
            case 'ShowParagraphMark':
                //Show or hide the hidden characters like spaces, tab, paragraph marks, and breaks.
                documenteditor.documentEditorSettings.showHiddenMarks = !documenteditor.documentEditorSettings.showHiddenMarks;
                break;
        }
    }
    //Change the line spacing of selected or current paragraph
    function lineSpacingAction(args) {
        let text = args.item.text;
        switch (text) {
            case 'Single':
                documenteditor.selection.paragraphFormat.lineSpacing = 1;
                break;
            case '1.15':
                documenteditor.selection.paragraphFormat.lineSpacing = 1.15;
                break;
            case '1.5':
                documenteditor.selection.paragraphFormat.lineSpacing = 1.5;
                break;
            case 'Double':
                documenteditor.selection.paragraphFormat.lineSpacing = 2;
                break;
        }
        setTimeout(() => {
            documenteditor.focusIn();
        }, 30);
    }
    // Selection change to retrieve formatting
    function onSelectionChange() {
        if (documenteditor.selection) {
            var paragraphFormat = documenteditor.selection.paragraphFormat;
            var toggleBtnId = ['AlignLeft', 'AlignCenter', 'AlignRight', 'Justify', 'ShowParagraphMark'];
            //Remove toggle state.
            for (var i = 0; i < toggleBtnId.length; i++) {
                let toggleBtn = document.getElementById(toggleBtnId[i]);
                toggleBtn.classList.remove('e-btn-toggle');
            }
            //Add toggle state based on selection paragraph format.
            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');
            }
            if (documenteditor.documentEditorSettings.showHiddenMarks) {
                document.getElementById('ShowParagraphMark').classList.add('e-btn-toggle');
            }
            // #endregion
        }
    }
    return (<div>
        <ToolbarComponent id='toolbar' clicked={toolbarButtonClick}>
            <ItemDirective id="AlignLeft" prefixIcon="e-de-ctnr-alignleft e-icons" tooltipText="Align Left"/>
            <ItemDirective id="AlignCenter" prefixIcon="e-de-ctnr-aligncenter e-icons" tooltipText="Align Center"/>
            <ItemDirective id="AlignRight" prefixIcon="e-de-ctnr-alignright e-icons" tooltipText="Align Right"/>
            <ItemDirective id="Justify" prefixIcon="e-de-ctnr-justify e-icons" tooltipText="Justify"/>
            <ItemDirective type="Separator"/>
            <ItemDirective id="IncreaseIndent" prefixIcon="e-de-ctnr-increaseindent e-icons" tooltipText="Increase Indent"/>
            <ItemDirective id="DecreaseIndent" prefixIcon="e-de-ctnr-decreaseindent e-icons" tooltipText="Decrease Indent"/>
            <ItemDirective type="Separator"/>
            <ItemDirective template={contentTemplate1}/>
            <ItemDirective id="ClearFormat" prefixIcon="e-de-ctnr-clearall e-icons" tooltipText="Clear Formatting"/>
            <ItemDirective type="Separator"/>
            <ItemDirective id="ShowParagraphMark" prefixIcon="e-de-e-paragraph-mark e-icons" tooltipText="Show the hidden characters like spaces, tab, paragraph marks, and breaks.(Ctrl + *)"/>
        </ToolbarComponent>

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