fix: deletion of translation

Author: deltork

packages/studio-web/src/app/shared/download/download.service.ts

@@ -81,19 +81,22 @@ Please host all assets on your server, include the font and package imports defi
           (t_node) => t_node.id,
         ),
       );
-      //update current translation text
+      //update current translation text or remove delete
       doc
         .querySelectorAll("s.translation, s.sentence__translation")
         .forEach((sentence: Element) => {
-          if (
-            sentence.id in translations &&
-            translation_node_ids.has(sentence.id)
-          ) {
-            sentence.textContent = translations[sentence.id];
+          const sentenceID: string = sentence.hasAttribute("sentence-id")
+            ? (sentence.getAttribute("sentence-id") as string)
+            : sentence.id;
+          if (sentenceID in translations) {
+            sentence.textContent = translations[sentenceID];
+          } else {
+            //remove deleted translations
+            sentence.remove();
           }
         });
+      // Add new translations
       sentence_nodes.forEach((sentence: Element) => {
-        // Add a translation
         if (
           sentence.id in translations &&
           !translation_node_ids.has(sentence.id)
@@ -111,17 +114,6 @@ Please host all assets on your server, include the font and package imports defi
           newSentence.append(translations[sentence.id]);
           sentence.insertAdjacentElement("afterend", newSentence);
         }
-        // Remove a translation
-        if (
-          sentence.id in translations &&
-          translations[sentence.id] === null &&
-          translation_node_ids.has(sentence.id)
-        ) {
-          let elementToRemove = doc.querySelector(
-            `#${sentence.id}.sentence__translation`,
-          );
-          elementToRemove?.remove();
-        }
       });
 
       return true;

packages/web-component/src/components/read-along-component/read-along.tsx

@@ -1087,11 +1087,10 @@ export class ReadAlongComponent {
             .forEach((sentences) => {
               if (sentences.length) {
                 sentences.forEach((sentence) => {
-                  let translation: { [key: string]: string } = {};
                   if (sentence.id && sentenceIsAligned(sentence)) {
-                    translation[sentence.id] = "";
                     lastAlignedSentenceId = `${sentence.id}`;
-                  } else {
+                  } else if (/translation/.test(sentence.className)) {
+                    const translation: { [key: string]: string } = {};
                     if ((sentence as Element).hasAttribute("sentence-id")) {
                       let sentenceID = (sentence as Element).getAttribute(
                         "sentence-id",
@@ -1387,14 +1386,13 @@ export class ReadAlongComponent {
   }
 
   removeLine(sentence_element: Element) {
-    let newTranslation = {};
-    newTranslation[sentence_element.id] = null;
-    this.translations = { ...this.translations, ...newTranslation };
+    delete this.translations[sentence_element.id];
+    this.translations = { ...this.translations };
   }
 
   updateTranslation(sentence_id: string, text: string) {
     this.translations[sentence_id] = text;
-    console.log(JSON.stringify(this.translations));
+    //console.log(JSON.stringify(this.translations));
   }
 
   async handleFiles(event: any, pageIndex: number) {
@@ -1753,9 +1751,8 @@ export class ReadAlongComponent {
                       if (event.key == "Enter") event.preventDefault();
                     }}
                     data-placeholder={this.getI18nString("line-placeholder")}
-                  >
-                    {this.translations[sentenceID]}
-                  </p>
+                    innerHTML={this.translations[sentenceID]}
+                  ></p>
                 </span>
               );
             } else {