feat: Automatic translation when adding a language - EXO-65422 (#63)

feat: Automatic translation when adding a language - EXO-65422

webapps/src/main/webapp/WEB-INF/conf/automatic-translation/dynamic-container-configuration.xml

@@ -64,5 +64,49 @@
         </object-param>
       </init-params>
     </component-plugin>
+    <component-plugin>
+      <name>addPlugin</name>
+      <set-method>addPlugin</set-method>
+      <type>org.exoplatform.commons.addons.AddOnPluginImpl</type>
+      <description></description>
+      <init-params>
+        <value-param>
+          <name>priority</name>
+          <value>1</value>
+        </value-param>
+        <value-param>
+          <name>containerName</name>
+          <value>bottom-notes-editor-container</value>
+        </value-param>
+        <object-param>
+          <name>automatic-translation-extension-portlet</name>
+          <description></description>
+          <object type="org.exoplatform.commons.addons.PortletModel">
+            <field name="contentId">
+              <string>automatic-translation/AutomaticTranslationExtension</string>
+            </field>
+            <field name="permissions">
+              <collection type="java.util.ArrayList">
+                <value>
+                  <string>*:/platform/users</string>
+                </value>
+              </collection>
+            </field>
+            <field name="title">
+              <string>Automatic Translation Extension Application</string>
+            </field>
+            <field name="showInfoBar">
+              <boolean>false</boolean>
+            </field>
+            <field name="showApplicationState">
+              <boolean>false</boolean>
+            </field>
+            <field name="showApplicationMode">
+              <boolean>false</boolean>
+            </field>
+          </object>
+        </object-param>
+      </init-params>
+    </component-plugin>
   </external-component-plugins>
 </configuration>

webapps/src/main/webapp/javascript/automatic-translation/components/ActivityTranslatedBody.vue

@@ -33,7 +33,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         {{ $t('automaticTranslation.hideTranslation') }}
       </span>
     </div>
-    </div>
+  </div>
 </template>
 
 <script>

webapps/src/main/webapp/javascript/automatic-translation/components/NoteEditorAutomaticTranslation.vue

@@ -0,0 +1,60 @@
+<!--
+Copyright (C) 2023 eXo Platform SAS.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+
+import {
+  fetchAutoTranslation
+} from '../../../vue-apps/automatic-translation-administration/automaticTranslationServices.js';
+
+export default {
+  created() {
+    document.addEventListener('translation-added', (event) => {
+      this.autoTranslate(event.detail);
+    });
+  },
+
+  methods: {
+    autoTranslate(noteContent) {
+      fetchAutoTranslation(noteContent.title,noteContent.lang).then(translated => {
+        this.updateNoteTitle(translated.translation);
+        if (noteContent.content) {
+          const content = this.excludeHtmlSpaceEntities(noteContent.content);
+          fetchAutoTranslation(content,noteContent.lang).then(translated => {
+            const translatedContent = this.restoreHtmlSpaceEntities(translated.translation);
+            this.updateNoteContent(translatedContent);
+          });
+        } 
+      }); 
+    },
+    excludeHtmlSpaceEntities(content) {
+      return content.replace(/&nbsp;/gi, '<span class="notranslate">&nbsp;</span>');
+    },
+    restoreHtmlSpaceEntities(content) {
+      return content.replace(/<span class="notranslate">&nbsp;<\/span>/gi, '&nbsp;');
+    },
+
+    updateNoteContent(content) {
+      this.$root.$emit('update-note-content', content);
+    },
+
+    updateNoteTitle(title) {
+      this.$root.$emit('update-note-title', title);
+    },
+  }
+};
+</script>

webapps/src/main/webapp/javascript/automatic-translation/extensions.js

@@ -107,6 +107,14 @@
       },
     });
 
+    extensionRegistry.registerExtension('notesEditor', 'translation-extension', {
+      id: 'notes-editor-auto-translate',
+      rank: 1000,
+      componentOptions: {
+        vueComponent: Vue.options.components['note-editor-automatic-translation'],
+      },
+    });
+
     extensionRegistry.registerExtension('news', 'translation-menu-extension', {
       id: 'news-auto-translate',
       rank: 1000,

webapps/src/main/webapp/javascript/automatic-translation/initComponents.js

@@ -17,12 +17,14 @@
 import ActivityTranslatedBody from './components/ActivityTranslatedBody.vue';
 import ActivityCommentTranslatedBody from './components/ActivityCommentTranslatedBody.vue';
 import NoteAutomaticTranslation from './components/NoteAutomaticTranslation.vue';
+import NoteEditorAutomaticTranslation from './components/NoteEditorAutomaticTranslation.vue';
 import NewsAutomaticTranslation from './components/NewsAutomaticTranslation.vue';
 
 const components = {
   'activity-translated-body': ActivityTranslatedBody,
   'activity-comment-translated-body': ActivityCommentTranslatedBody,
   'note-automatic-translation': NoteAutomaticTranslation,
+  'note-editor-automatic-translation': NoteEditorAutomaticTranslation,
   'news-automatic-translation': NewsAutomaticTranslation
 };
 

webapps/src/main/webapp/vue-apps/automatic-translation-administration/automaticTranslationServices.js

@@ -48,8 +48,11 @@ export function setApiKey(connector,apikey) {
     });
 }
 
-export function fetchAutoTranslation(content) {
-  const data = `message=${  encodeURIComponent(content)  }&locale=${  eXo.env.portal.language}`;
+export function fetchAutoTranslation(content,lang) {
+  if (!lang){
+    lang = eXo.env.portal.language;
+  }
+  const data = `message=${  encodeURIComponent(content)  }&locale=${ lang }`;
   return fetch(`${eXo.env.portal.context}/${eXo.env.portal.rest}/automatic-translation/translate`, {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'