diff --git a/src/syncfusion/index.ts b/src/syncfusion/index.ts index 49a773f..4ce2eb4 100644 --- a/src/syncfusion/index.ts +++ b/src/syncfusion/index.ts @@ -1,11 +1,12 @@ import type { + DocumentEditorContainer, Editor, EditorHistory, Selection, } from "@syncfusion/ej2-documenteditor"; import { EditorAdapter } from "../editor"; -import { IaraInference } from "../speech"; import { IaraEditorInferenceFormatter } from "../editor/formatter"; +import { IaraInference } from "../speech"; import { toolBarSettings, toolbarButtonClick } from "./toolbarConfig"; interface SelectionOffsets { @@ -40,9 +41,9 @@ export class IaraSyncfusionAdapter } constructor( - protected _editor: any, + protected _editor: DocumentEditorContainer, protected _recognition: any, - replaceToolbar: boolean = true + replaceToolbar = true ) { super(_editor, _recognition); this._editor.contentChange = this._onContentChange.bind(this); @@ -56,15 +57,15 @@ export class IaraSyncfusionAdapter return this._editorHistory.undoStack?.length || 0; } - insertParagraph() { + insertParagraph(): void { this._editorAPI.insertText("\n"); } - insertText(text: string) { + insertText(text: string): void { this._editorAPI.insertText(text); } - async sfdtToHtml(content: string) { + async sfdtToHtml(content: string): Promise { const endpoint = "https://api.iarahealth.com/speech/syncfusion/sfdt_to_html/"; @@ -80,7 +81,7 @@ export class IaraSyncfusionAdapter return response; } - async htmlToSfdt(content: string) { + async htmlToSfdt(content: string): Promise { const endpoint = "https://api.iarahealth.com/speech/syncfusion/html_to_sfdt/"; @@ -96,13 +97,13 @@ export class IaraSyncfusionAdapter return response; } - async insertTemplate(template: string) { + async insertTemplate(template: string): Promise { const response = await this.htmlToSfdt(template); - this._editor.open(response); + this._editor.documentEditor.open(response); } - async getEditorContent() { - const contentSfdt = await this._editor + async getEditorContent(): Promise { + const contentSfdt = await this._editor.documentEditor .saveAsBlob("Sfdt") .then((blob: Blob) => blob.text()); @@ -135,7 +136,7 @@ export class IaraSyncfusionAdapter return wordBefore; } - insertInference(inference: IaraInference) { + insertInference(inference: IaraInference): void { if (inference.isFirst) { if (this._editorSelection.text.length) this._editorAPI.delete(); this._initialUndoStackSize = this.getUndoStackSize(); @@ -146,10 +147,6 @@ export class IaraSyncfusionAdapter } // Syncfusion formatter - let text = inference.richTranscript - .replace(/^
/, "") - .replace(/<\/div>$/, ""); - const initialSelectionOffsets = { end: this._editorSelection.endOffset, start: this._editorSelection.startOffset, @@ -157,6 +154,9 @@ export class IaraSyncfusionAdapter const wordBefore = this._getWordBeforeSelection(initialSelectionOffsets); const wordAfter = this._getWordAfterSelection(initialSelectionOffsets); + let text = inference.richTranscript + .replace(/^
/, "") + .replace(/<\/div>$/, ""); text = this._inferenceFormatter.format(inference, wordBefore, wordAfter); const [firstLine, ...lines]: string[] = text.split("
"); @@ -169,33 +169,34 @@ export class IaraSyncfusionAdapter }); } - initToolbarConfigs() { + initToolbarConfigs(): void { const toolbarItems = toolBarSettings(this._editor); this._toolBar.addItems(toolbarItems, 5); this._editor.toolbarClick = this.onClickToolbar.bind(this); this.removePropertiesPane(); } - onClickToolbar(arg: { item: any }) { - toolbarButtonClick(arg, this._editorAPI, this._editor); + onClickToolbar(arg: { item: any }): void { + toolbarButtonClick(arg, this._editor); } - removePropertiesPane() { + removePropertiesPane(): void { this._editor.showPropertiesPane = false; - const paneButton = document.querySelector( + const paneButton: HTMLElement | null = document.querySelector( ".e-de-ctnr-properties-pane-btn" - ) as HTMLElement; - paneButton.remove(); + ); + paneButton?.remove(); //remove wrapper button - const wrapper = document.querySelector(".e-de-tlbr-wrapper") as HTMLElement; - wrapper.style.width = "100%"; + const wrapper: HTMLElement | null = + document.querySelector(".e-de-tlbr-wrapper"); + if (wrapper) wrapper.style.width = "100%"; } private async _onEditorDestroy() { this.finishReport(); } - private async _onContentChange() { + private async _onContentChange(): Promise { const element = document.getElementById( "iara-syncfusion-editor-container_editor" ); @@ -208,13 +209,15 @@ export class IaraSyncfusionAdapter this.savingReportSpan.innerText = "Salvando..."; element.appendChild(this.savingReportSpan); } - const contentText = await this._editor + const contentText = await this._editor.documentEditor .saveAsBlob("Txt") .then((blob: Blob) => blob.text()); const contentHTML = await this.getEditorContent(); - this._debounceToSave(() => this._onReportChanged(contentText, contentHTML)); + this._debounceToSave(() => { + this._onReportChanged(contentText, contentHTML); + }); } private _debounceToSave = (func: () => void) => { @@ -228,7 +231,7 @@ export class IaraSyncfusionAdapter }, 3000); }; - blockEditorWhileSpeaking(status: boolean) { + blockEditorWhileSpeaking(status: boolean): void { const wrapper = document.getElementById("iara-syncfusion-editor-container"); if (wrapper) status @@ -236,7 +239,7 @@ export class IaraSyncfusionAdapter : (wrapper.style.cursor = "auto"); } - undo() { + undo(): void { this._editorHistory.undo(); } @@ -252,12 +255,12 @@ export class IaraSyncfusionAdapter setEditorFontFamily(fontFamily: string): void { this._editorSelection.characterFormat.fontFamily = fontFamily; - this._editor.focusIn(); + this._editor.documentEditor.focusIn(); } setEditorFontSize(fontSize: number): void { this._editorSelection.characterFormat.fontSize = fontSize; - this._editor.focusIn(); + this._editor.documentEditor.focusIn(); } editorToggleBold(): void { diff --git a/src/syncfusion/toolbarConfig.ts b/src/syncfusion/toolbarConfig.ts index a47eb2e..5b5e775 100644 --- a/src/syncfusion/toolbarConfig.ts +++ b/src/syncfusion/toolbarConfig.ts @@ -1,79 +1,75 @@ -import { - DocumentEditorContainer, - Editor, -} from "@syncfusion/ej2-documenteditor"; +import { DocumentEditorContainer } from "@syncfusion/ej2-documenteditor"; import { ComboBox } from "@syncfusion/ej2-dropdowns"; import { ColorPicker } from "@syncfusion/ej2-inputs"; export const toolbarButtonClick = ( - arg: { item: any }, - editorAPI: Editor, + arg: { item: { id: string } }, editor: DocumentEditorContainer -) => { +): void => { switch (arg.item.id) { case "bold": //Toggles the bold of selected content - editorAPI.toggleBold(); + editor.documentEditor.editor.toggleBold(); break; case "italic": //Toggles the Italic of selected content - editorAPI.toggleItalic(); + editor.documentEditor.editor.toggleItalic(); break; case "underline": //Toggles the underline of selected content - editorAPI.toggleUnderline("Single"); + editor.documentEditor.editor.toggleUnderline("Single"); break; case "strikethrough": //Toggles the strikethrough of selected content - editorAPI.toggleStrikethrough(); + editor.documentEditor.editor.toggleStrikethrough(); break; case "subscript": //Toggles the subscript of selected content - editorAPI.toggleSubscript(); + editor.documentEditor.editor.toggleSubscript(); break; case "superscript": //Toggles the superscript of selected content - editorAPI.toggleSuperscript(); + editor.documentEditor.editor.toggleSuperscript(); break; case "AlignLeft": //Toggle the Left alignment for selected or current paragraph - editorAPI.toggleTextAlignment("Left"); + editor.documentEditor.editor.toggleTextAlignment("Left"); break; case "AlignRight": //Toggle the Right alignment for selected or current paragraph - editorAPI.toggleTextAlignment("Right"); + editor.documentEditor.editor.toggleTextAlignment("Right"); break; case "AlignCenter": //Toggle the Center alignment for selected or current paragraph - editorAPI.toggleTextAlignment("Center"); + editor.documentEditor.editor.toggleTextAlignment("Center"); break; case "Justify": //Toggle the Justify alignment for selected or current paragraph - editorAPI.toggleTextAlignment("Justify"); + editor.documentEditor.editor.toggleTextAlignment("Justify"); break; case "IncreaseIndent": //Increase the left indent of selected or current paragraph - editorAPI.increaseIndent(); + editor.documentEditor.editor.increaseIndent(); break; case "DecreaseIndent": //Decrease the left indent of selected or current paragraph - editorAPI.decreaseIndent(); + editor.documentEditor.editor.decreaseIndent(); break; case "ClearFormat": //Clear all formattiing of the selected paragraph or content. - editorAPI.clearFormatting(); + editor.documentEditor.editor.clearFormatting(); break; case "Bullets": //To create bullet list - editorAPI.applyBullet("\uf0b7", "Symbol"); + editor.documentEditor.editor.applyBullet("\uf0b7", "Symbol"); break; case "Numbering": //To create numbering list - editorAPI.applyNumbering("%1)", "UpRoman"); + editor.documentEditor.editor.applyNumbering("%1)", "UpRoman"); break; case "clearlist": //To clear list - editorAPI.clearList(); + editor.documentEditor.editor.clearList(); break; case "Single": editor.documentEditor.selection.paragraphFormat.lineSpacing = 1; @@ -92,19 +88,21 @@ export const toolbarButtonClick = ( } }; -export const toolBarSettings = (editor: DocumentEditorContainer) => { +export const toolBarSettings = ( + editor: DocumentEditorContainer +): Record[] => { //To change the font Style of selected content - const changeFontFamily = (args: { value: any }) => { + const changeFontFamily = (args: { value: string }) => { editor.documentEditor.selection.characterFormat.fontFamily = args.value; editor.documentEditor.focusIn(); }; //To Change the font Size of selected content - const changeFontSize = (args: { value: any }) => { + const changeFontSize = (args: { value: number }) => { editor.documentEditor.selection.characterFormat.fontSize = args.value; editor.documentEditor.focusIn(); }; //To Change the font Color of selected content - const changeFontColor = (args: { currentValue: { hex: any } }) => { + const changeFontColor = (args: { currentValue: { hex: string } }) => { editor.documentEditor.selection.characterFormat.fontColor = args.currentValue.hex; editor.documentEditor.focusIn(); @@ -117,19 +115,19 @@ export const toolBarSettings = (editor: DocumentEditorContainer) => { //Selection change to retrieve formatting const onSelectionChange = () => { if (editor.documentEditor.selection) { - var paragraphFormat = editor.documentEditor.selection.paragraphFormat; - var toggleBtnId = [ + const paragraphFormat = editor.documentEditor.selection.paragraphFormat; + const toggleBtnIds = [ "AlignLeft", "AlignCenter", "AlignRight", "Justify", "ShowParagraphMark", ]; - for (let i = 0; i < toggleBtnId.length; i++) { - let toggleBtn = document.getElementById(toggleBtnId[i]); + toggleBtnIds.forEach(toggleBtnId => { + const toggleBtn = document.getElementById(toggleBtnId); //Remove toggle state. 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"); @@ -149,31 +147,30 @@ export const toolBarSettings = (editor: DocumentEditorContainer) => { } }; const enableDisableFontOptions = () => { - var characterformat = editor.documentEditor.selection.characterFormat; - var properties = [ + const characterformat = editor.documentEditor.selection.characterFormat; + const properties = [ characterformat.bold, characterformat.italic, characterformat.underline, characterformat.strikethrough, ]; - var toggleBtnId = ["bold", "italic", "underline", "strikethrough"]; - for (var i = 0; i < properties.length; i++) { + const toggleBtnId = ["bold", "italic", "underline", "strikethrough"]; + for (let i = 0; i < properties.length; i++) { changeActiveState(properties[i], toggleBtnId[i]); } }; function changeActiveState(property: string | boolean, btnId: string) { - let toggleBtn: HTMLElement | null = document.getElementById(btnId); + const toggleBtn: HTMLElement | null = document.getElementById(btnId); if ( - (typeof property == "boolean" && property == true) || + (typeof property == "boolean" && property) || (typeof property == "string" && property !== "None") ) toggleBtn?.classList.add("e-btn-toggle"); - else { - if (toggleBtn?.classList.contains("e-btn-toggle")) - toggleBtn.classList.remove("e-btn-toggle"); + else if (toggleBtn?.classList.contains("e-btn-toggle")) { + toggleBtn.classList.remove("e-btn-toggle"); } } - let fontStyle: string[] = [ + const fontStyle: string[] = [ "Algerian", "Arial", "Calibri", @@ -191,7 +188,7 @@ export const toolBarSettings = (editor: DocumentEditorContainer) => { "Verdana", "Windings", ]; - let fontSize: string[] = [ + const fontSize: string[] = [ "8", "9", "10",