diff --git a/assets/js/document.js b/assets/js/document.js
index 8405bf08db..b933e12677 100644
--- a/assets/js/document.js
+++ b/assets/js/document.js
@@ -1,3 +1,6 @@
 /** This JS  will be included when loading an HTML in the Document tool */
 
-require('./translatehtml.js');
+import translateHtml from './translatehtml.js';
+document.addEventListener('DOMContentLoaded', function () {
+  translateHtml();
+});
diff --git a/assets/js/translatehtml.js b/assets/js/translatehtml.js
index a579b42521..38536fa5cc 100644
--- a/assets/js/translatehtml.js
+++ b/assets/js/translatehtml.js
@@ -1,28 +1,29 @@
 /* For licensing terms, see /license.txt */
 
-document.addEventListener('DOMContentLoaded', function () {
-  if (
+export default function translateHtml() {
+    if (
       window.user && window.user.locale &&
       window.config &&
       window.config['editor.translate_html'] &&
       'true' === window.config['editor.translate_html']
-  ) {
-    var isoCode = window.user.locale;
-    const translateElement = document.querySelector('.mce-translatehtml');
-    if (translateElement) {
-      document.querySelectorAll('.mce-translatehtml').forEach(function (el) {
-        el.style.display = 'none';
-      });
-      const selectedLang = document.querySelectorAll('[lang="' + isoCode + '"]');
-      if (selectedLang.length > 0) {
-        selectedLang.forEach(function (userLang) {
-          userLang.classList.remove('hidden')
-          userLang.style.display = 'block';
+    ) {
+      var isoCode = window.user.locale;
+      const translateElement = document.querySelector('.mce-translatehtml');
+      if (translateElement) {
+        document.querySelectorAll('.mce-translatehtml').forEach(function (el) {
+          el.style.display = 'none';
         });
+        const selectedLang = document.querySelectorAll('[lang="' + isoCode + '"]');
+        if (selectedLang.length > 0) {
+          selectedLang.forEach(function (userLang) {
+            userLang.classList.remove('hidden')
+            userLang.style.display = 'block';
+          });
+        }
       }
-    } else {
+
       // it checks content from old version
-      const langs = document.querySelectorAll('span[lang]');
+      const langs = document.querySelectorAll('span[lang]:not(.mce-translatehtml)');
       if (langs.length > 0) {
         // it hides all contents with lang
         langs.forEach(function (el) {
@@ -48,5 +49,4 @@ document.addEventListener('DOMContentLoaded', function () {
         }
       }
     }
-  }
-});
+}
diff --git a/assets/js/vendor.js b/assets/js/vendor.js
index 81a4ffcae7..ffeed6816f 100644
--- a/assets/js/vendor.js
+++ b/assets/js/vendor.js
@@ -21,4 +21,7 @@ global.textcomplete = textcomplete;
 
 require('chart.js');
 require('./annotation.js');
-require('./translatehtml.js');
+import translateHtml from './translatehtml.js';
+document.addEventListener('DOMContentLoaded', function () {
+  translateHtml();
+});
diff --git a/assets/vue/views/course/Home.vue b/assets/vue/views/course/Home.vue
index d7b12e2b7a..6ddce93a2d 100644
--- a/assets/vue/views/course/Home.vue
+++ b/assets/vue/views/course/Home.vue
@@ -176,6 +176,7 @@ import axios from "axios";
 import {ENTRYPOINT} from '../../config/entrypoint';
 import {computed, onMounted, reactive, toRefs} from 'vue'
 import {mapGetters, useStore} from "vuex";
+import translateHtml from '../../../js/translatehtml.js';
 
 export default {
   name: 'Home',
@@ -235,6 +236,7 @@ export default {
           if (!isEmpty(response)) {
             // first item
             state.intro = response[0];
+            translateHtml();
           }
         });
 
@@ -250,6 +252,7 @@ export default {
             if (!isEmpty(response)) {
               state.createInSession = false;
               state.intro = response[0];
+              translateHtml();
             }
           });
         }