Working with Paragraph Formatting

import {    DocumentEditor,    Editor,    Selection,    EditorHistory ,SfdtExport,ContextMenu } from '@syncfusion/ej2-documenteditor';
import { Toolbar } from '@syncfusion/ej2-navigations';
import { ItemModel, DropDownButton } from '@syncfusion/ej2-splitbuttons';
//Inject the require module
DocumentEditor.Inject(    Editor,    Selection,    EditorHistory , SfdtExport,ContextMenu);
let documenteditor: DocumentEditor = new DocumentEditor({
isReadOnly: false,    enableSelection: true,    enableEditorHistory: true,    enableEditor: true,    enableContextMenu: true, enableSfdtExport:true
});
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;
}
}
//Change the line spacing of selected or current paragraph
function lineSpacingAction(args: any) {
let text: string = 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((): void => {
documenteditor.focusIn();
}, 30);
}
documenteditor.selectionChange = () => {
setTimeout(() => {
onSelectionChange();
}, 20);
};
// Selection change to retrieve formatting
function onSelectionChange() {
if (documenteditor.selection) {
var paragraphFormat = 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
}
}
//Toolbar configuration to add paragraph formatting options
let toolBar: Toolbar = new Toolbar({
clicked: toolbarButtonClick,
items: [
{
prefixIcon: 'e-de-icon-AlignLeft',
tooltipText: 'Align Left',
id: 'AlignLeft',
},
{
prefixIcon: 'e-de-icon-AlignCenter',
tooltipText: 'Align Center',
id: 'AlignCenter',
},
{
prefixIcon: 'e-de-icon-AlignRight',
tooltipText: 'Align Right',
id: 'AlignRight',
},
{
prefixIcon: 'e-de-icon-Justify',
tooltipText: 'Justify',
id: 'Justify',
},
{
prefixIcon: 'e-de-icon-IncreaseIndent',
tooltipText: 'Increase Indent',
id: 'IncreaseIndent',
},
{
prefixIcon: 'e-de-icon-DecreaseIndent',
tooltipText: 'Decrease Indent',
id: 'DecreaseIndent',
},
{ type: 'Seperator' },
{
id: 'lineSpacing',
},{
prefixIcon: 'e-de-icon-ClearAll',
tooltipText: 'ClearFormatting',
id: 'ClearFormat',
}
],
});
toolBar.appendTo('#toolbar');
let items: ItemModel[] = [
{
text: 'Single',
},
{
text: '1.15',
},
{
text: '1.5',
},
{
text: 'Double',
},
];
let dropdown = new DropDownButton({
items: items,
iconCss: 'e-de-icon-LineSpacing',
select: lineSpacingAction,
});
dropdown.appendTo('#lineSpacing');

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

updateContainerSize();
documenteditor.appendTo('#DocumentEditor');

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-documenteditor/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/fabric.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/fabric.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='toolbar'>            
        </div>
        <div style="width:100%;height: 100%">
            <!--Element which will render as DocumentEditor -->
            <div id="DocumentEditor"></div>
        </div>
    </div>
</body>

</html>