fix: html spaces entities are removed after translation in news and n…

…otes content - EXO-65429 (#49) Prior to this change, after requesting a translation of html content all   html symbols are removed which causing a formatting issue when it comes to an empty tag with only space like a new line in ckeditor with paragraph enter mode. This PR adds a workaround to avoid such issue in translators with this behavior as DeepL
exoplatform · Oct 22, 2023 · 76c4afd · 76c4afd
1 parent b7cec6c
commit 76c4afd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.../src/main/webapp/javascript/automatic-translation/components/NewsAutomaticTranslation.vue b/.../src/main/webapp/javascript/automatic-translation/components/NewsAutomaticTranslation.vue
@@ -66,13 +66,19 @@ export default {
           this.handleTranslatedTitle(translated.translation);
           fetchAutoTranslation(this.news.summary).then(translated => {
             this.handleTranslatedSummary(translated.translation);
-            fetchAutoTranslation(this.news.body).then(translated => {
+            const content = this.toHtml(this.news.body).replace(/&nbsp;/gi, '@nbsp@');
+            fetchAutoTranslation(this.toHtml(content)).then(translated => {
               this.handleTranslatedContent(translated.translation);
             });
           });
         });
       }
     },
+    toHtml(content) {
+      const domParser = new DOMParser();
+      const docElement = domParser.parseFromString(content, 'text/html').documentElement;
+      return docElement?.children[1].innerHTML;
+    },
     resetAutoTranslation() {
       this.isResetAutoTranslating = true;
       this.autoTranslatedTitle = this.autoTranslatedSummary = this.autoTranslatedContent = null;
@@ -90,7 +96,7 @@ export default {
       this.updateNewsSummary(translatedText);
     },
     handleTranslatedContent(translatedText) {
-      this.autoTranslatedContent = translatedText.replace('<p></p>', '<p>&nbsp;</p>');
+      this.autoTranslatedContent = translatedText.replace(/@nbsp@/gi, '&nbsp;');
       this.updateNewsContent(this.autoTranslatedContent);
       this.checkAutoTranslatedStatus();
     },

diff --git a/.../src/main/webapp/javascript/automatic-translation/components/NoteAutomaticTranslation.vue b/.../src/main/webapp/javascript/automatic-translation/components/NoteAutomaticTranslation.vue
@@ -65,7 +65,8 @@ export default {
       this.isAutoTranslating = true;
       fetchAutoTranslation(this.note.title).then(translated => {
         this.handleTranslatedTitle(translated.translation);
-        fetchAutoTranslation(this.note.content).then(translated => {
+        const content = this.note.content.replace(/&nbsp;/gi, '@nbsp@');
+        fetchAutoTranslation(content).then(translated => {
           this.handleTranslatedContent(translated.translation);
         });
       });
@@ -100,7 +101,7 @@ export default {
       this.checkAutoTranslatedStatus();
     },
     handleTranslatedContent(translatedText) {
-      this.autoTranslatedContent = translatedText.replace('<p></p>', '<p>&nbsp;</p>');
+      this.autoTranslatedContent = translatedText.replace(/@nbsp@/gi, '&nbsp;');
       this.updateNoteContent(this.autoTranslatedContent);
       this.previouslySelectedVersion = this.selectedTranslation;
       this.updateSelectedTranslation(this.autoTranslation);