Skip to content

Commit

Permalink
fix: fix broken references to documentEditor
Browse files Browse the repository at this point in the history
  • Loading branch information
@dsouza95
dsouza95 committed Nov 16, 2023
1 parent 4a0d1e5 commit 2918978
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 75 deletions.
67 changes: 35 additions & 32 deletions src/syncfusion/index.ts
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -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);
Expand All @@ -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<string> {
const endpoint =
"https://api.iarahealth.com/speech/syncfusion/sfdt_to_html/";

Expand All @@ -80,7 +81,7 @@ export class IaraSyncfusionAdapter
return response;
}

async htmlToSfdt(content: string) {
async htmlToSfdt(content: string): Promise<string> {
const endpoint =
"https://api.iarahealth.com/speech/syncfusion/html_to_sfdt/";

Expand All @@ -96,13 +97,13 @@ export class IaraSyncfusionAdapter
return response;
}

async insertTemplate(template: string) {
async insertTemplate(template: string): Promise<void> {
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<string> {
const contentSfdt = await this._editor.documentEditor
.saveAsBlob("Sfdt")
.then((blob: Blob) => blob.text());

Expand Down Expand Up @@ -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();
Expand All @@ -146,17 +147,16 @@ export class IaraSyncfusionAdapter
}

// Syncfusion formatter
let text = inference.richTranscript
.replace(/^<div>/, "")
.replace(/<\/div>$/, "");

const initialSelectionOffsets = {
end: this._editorSelection.endOffset,
start: this._editorSelection.startOffset,
};
const wordBefore = this._getWordBeforeSelection(initialSelectionOffsets);
const wordAfter = this._getWordAfterSelection(initialSelectionOffsets);

let text = inference.richTranscript
.replace(/^<div>/, "")
.replace(/<\/div>$/, "");
text = this._inferenceFormatter.format(inference, wordBefore, wordAfter);

const [firstLine, ...lines]: string[] = text.split("</div><div>");
Expand All @@ -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<void> {
const element = document.getElementById(
"iara-syncfusion-editor-container_editor"
);
Expand All @@ -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) => {
Expand All @@ -228,15 +231,15 @@ export class IaraSyncfusionAdapter
}, 3000);
};

blockEditorWhileSpeaking(status: boolean) {
blockEditorWhileSpeaking(status: boolean): void {
const wrapper = document.getElementById("iara-syncfusion-editor-container");
if (wrapper)
status
? (wrapper.style.cursor = "not-allowed")
: (wrapper.style.cursor = "auto");
}

undo() {
undo(): void {
this._editorHistory.undo();
}

Expand All @@ -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 {
Expand Down
83 changes: 40 additions & 43 deletions src/syncfusion/toolbarConfig.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -92,19 +88,21 @@ export const toolbarButtonClick = (
}
};

export const toolBarSettings = (editor: DocumentEditorContainer) => {
export const toolBarSettings = (
editor: DocumentEditorContainer
): Record<string, any>[] => {
//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();
Expand All @@ -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");
Expand All @@ -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",
Expand All @@ -191,7 +188,7 @@ export const toolBarSettings = (editor: DocumentEditorContainer) => {
"Verdana",
"Windings",
];
let fontSize: string[] = [
const fontSize: string[] = [
"8",
"9",
"10",
Expand Down

0 comments on commit 2918978

Please sign in to comment.