Feature: Add Ferdium Translator (#548)

Add feature to translate text natively using https://github.com/shikar/NODE_GOOGLE_TRANSLATE package and a LibreTranslate self-hosted option (already running on our server on https://translator.ferdium.org).

1 files changed, 229 insertions, 26 deletions

diff --git a/src/webview/contextMenuBuilder.ts b/src/webview/contextMenuBuilder.ts
index 7bd86556e..2e64977c1 100644
--- a/src/webview/contextMenuBuilder.ts
+++ b/src/webview/contextMenuBuilder.ts
@@ -11,8 +11,16 @@ import { clipboard, ipcRenderer, nativeImage, WebContents } from 'electron';
 import { Menu, MenuItem } from '@electron/remote';
 import { cmdOrCtrlShortcutKey, isMac } from '../environment';
 
-import { SEARCH_ENGINE_NAMES, SEARCH_ENGINE_URLS } from '../config';
+import {
+  SEARCH_ENGINE_NAMES,
+  SEARCH_ENGINE_URLS,
+  GOOGLE_TRANSLATOR_LANGUAGES,
+  TRANSLATOR_ENGINE_GOOGLE,
+  TRANSLATOR_ENGINE_LIBRETRANSLATE,
+  LIBRETRANSLATE_TRANSLATOR_LANGUAGES,
+} from '../config';
 import { openExternalUrl } from '../helpers/url-helpers';
+import IContextMenuParams from '../models/IContextMenuParams';
 
 function matchesWord(string: string) {
   const regex =
@@ -21,6 +29,83 @@ function matchesWord(string: string) {
   return string.match(regex);
 }
 
+function childOf(node, ancestor) {
+  let child = node;
+  while (child !== null) {
+    if (child === ancestor) return true;
+    child = child.parentNode;
+  }
+  return false;
+}
+
+function translatePopup(res, isError: boolean = false) {
+  const elementExists = document.querySelector('#container-ferdium-translator');
+  if (elementExists) {
+    elementExists.remove();
+  }
+
+  const style = document.createElement('style');
+  style.innerHTML = `
+    .container-ferdium-translator {
+      position: fixed;
+      opacity: 0.9;
+      z-index: 999999;
+      ${
+        isError
+          ? `background: rgb(255 37 37);`
+          : `background: rgb(131 131 131);`
+      }
+      border-radius: 8px;
+      top: 5%;
+      left: 50%;
+      transform: translate(-50%, -5%);
+      display: flex;
+      flex-direction: row;
+      -webkit-box-shadow: 0px 10px 13px -7px #000000, 5px 5px 13px 9px rgba(0,0,0,0);
+      overflow: auto;
+      max-height: 95%;
+      max-width: 90%;
+      width: max-content;
+      height: max-content;
+      -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+    }
+    .container-ferdium-translator > p {
+      color: white;
+      margin: 10px;
+      text-align: justify;
+    }
+
+    @-webkit-keyframes scale-up-center {
+      0% {
+        -webkit-transform: translate(-50%, -50%) scale(0.5);
+      }
+      100% {
+        -webkit-transform: translate(-50%, -50%) scale(1);
+      }
+    }
+  `;
+  document.head.append(style);
+
+  const para = document.createElement('p');
+
+  const node = document.createTextNode(res);
+  para.append(node);
+
+  const div = document.createElement('div');
+  div.setAttribute('id', 'container-ferdium-translator');
+  div.setAttribute('class', 'container-ferdium-translator');
+
+  div.append(para);
+
+  document.body.insertBefore(div, document.body.firstChild);
+
+  document.addEventListener('click', e => {
+    if (div !== e.target && !childOf(e.target, div)) {
+      div?.remove();
+    }
+  });
+}
+
 interface ContextMenuStringTable {
   lookUpDefinition: ({ word }: { word: string }) => string;
   cut: () => string;
@@ -28,6 +113,17 @@ interface ContextMenuStringTable {
   paste: () => string;
   pasteAndMatchStyle: () => string;
   searchWith: ({ searchEngine }: { searchEngine: string }) => string;
+  translate: () => string;
+  quickTranslate: ({
+    translatorLanguage,
+  }: {
+    translatorLanguage: string;
+  }) => string;
+  translateLanguage: ({
+    translatorLanguage,
+  }: {
+    translatorLanguage: string;
+  }) => string;
   openLinkUrl: () => string;
   openLinkInFerdiumUrl: () => string;
   openInBrowser: () => string;
@@ -52,6 +148,10 @@ const contextMenuStringTable: ContextMenuStringTable = {
   paste: () => 'Paste',
   pasteAndMatchStyle: () => 'Paste and match style',
   searchWith: ({ searchEngine }) => `Search with ${searchEngine}`,
+  translate: () => `Translate to ...`,
+  quickTranslate: ({ translatorLanguage }) =>
+    `Translate to ${translatorLanguage}`,
+  translateLanguage: ({ translatorLanguage }) => `${translatorLanguage}`,
   openLinkUrl: () => 'Open Link',
   openLinkInFerdiumUrl: () => 'Open Link in Ferdium',
   openInBrowser: () => 'Open in Browser',
@@ -127,7 +227,7 @@ export class ContextMenuBuilder {
    *
    * @param contextInfo The object returned from the 'context-menu' Electron event.
    */
-  async showPopupMenu(contextInfo: Electron.ContextMenuParams): Promise<void> {
+  async showPopupMenu(contextInfo: IContextMenuParams): Promise<void> {
     const menu = await this.buildMenuForElement(contextInfo);
     if (!menu) return;
     menu.popup();
@@ -139,7 +239,7 @@ export class ContextMenuBuilder {
    * the list but use most of the default behavior.
    */
   async buildMenuForElement(
-    info: Electron.ContextMenuParams,
+    info: IContextMenuParams,
   ): Promise<Electron.CrossProcessExports.Menu> {
     if (info.linkURL && info.linkURL.length > 0) {
       return this.buildMenuForLink(info);
@@ -165,12 +265,17 @@ export class ContextMenuBuilder {
    * @return {Menu}  The `Menu`
    */
   buildMenuForTextInput(
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
+    const { enableTranslator } = menuInfo;
+
     this.addSpellingItems(menu, menuInfo);
     this.addSearchItems(menu, menuInfo);
+    if (enableTranslator) {
+      this.addTranslateItems(menu, menuInfo);
+    }
 
     this.addCut(menu, menuInfo);
     this.addCopy(menu, menuInfo);
@@ -194,7 +299,7 @@ export class ContextMenuBuilder {
    * @return {Menu}  The `Menu`
    */
   buildMenuForLink(
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
     const isEmailAddress = menuInfo.linkURL.startsWith('mailto:');
@@ -208,7 +313,6 @@ export class ContextMenuBuilder {
         const url = isEmailAddress ? menuInfo.linkText : menuInfo.linkURL;
         clipboard.writeText(url);
         this._sendNotificationOnClipboardEvent(
-          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Link URL copied: ${url}`,
         );
@@ -257,11 +361,16 @@ export class ContextMenuBuilder {
    * Builds a menu applicable to a text field.
    */
   buildMenuForText(
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
+    const { enableTranslator } = menuInfo;
+
     this.addSearchItems(menu, menuInfo);
+    if (enableTranslator) {
+      this.addTranslateItems(menu, menuInfo);
+    }
     this.addCopy(menu, menuInfo);
     this.addInspectElement(menu, menuInfo);
     // @ts-expect-error Expected 1 arguments, but got 2.
@@ -283,7 +392,7 @@ export class ContextMenuBuilder {
    * @return {Menu}  The `Menu`
    */
   buildMenuForImage(
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ): Electron.CrossProcessExports.Menu {
     const menu = new Menu();
 
@@ -303,7 +412,7 @@ export class ContextMenuBuilder {
    */
   addSpellingItems(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const webContents = this.getWebContents();
     // Add each spelling suggestion
@@ -338,7 +447,7 @@ export class ContextMenuBuilder {
    */
   addSearchItems(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     if (!menuInfo.selectionText || menuInfo.selectionText.length === 0) {
       return menu;
@@ -364,11 +473,9 @@ export class ContextMenuBuilder {
 
     const search = new MenuItem({
       label: this.stringTable.searchWith({
-        // @ts-expect-error Property 'searchEngine' does not exist on type 'ContextMenuParams'.
         searchEngine: SEARCH_ENGINE_NAMES[menuInfo.searchEngine],
       }),
       click: () => {
-        // @ts-expect-error Property 'searchEngine' does not exist on type 'ContextMenuParams'.
         const url = SEARCH_ENGINE_URLS[menuInfo.searchEngine]({
           searchTerm: encodeURIComponent(menuInfo.selectionText),
         });
@@ -382,7 +489,106 @@ export class ContextMenuBuilder {
     return menu;
   }
 
-  isSrcUrlValid(menuInfo: Electron.ContextMenuParams) {
+  /**
+   * Adds translate-related menu items.
+   */
+  addTranslateItems(
+    menu: Electron.CrossProcessExports.Menu,
+    menuInfo: IContextMenuParams,
+  ) {
+    const { translatorEngine } = menuInfo;
+
+    if (!menuInfo.selectionText || menuInfo.selectionText.length === 0) {
+      return menu;
+    }
+
+    const match = matchesWord(menuInfo.selectionText);
+    if (!match || match.length === 0) {
+      return menu;
+    }
+
+    const generateTranslationItems = async (
+      translateToLanguage: string,
+      translatorEngine: string,
+    ) => {
+      // TODO: Need to support i18n
+      translatePopup('Loading...', false);
+
+      const translatedText = await ipcRenderer.invoke('translate', {
+        text: menuInfo.selectionText,
+        translateToLanguage,
+        translatorEngine,
+      });
+
+      translatePopup(translatedText.text, translatedText.error);
+    };
+
+    let arrayLanguagesAfterEngine;
+    if (translatorEngine === TRANSLATOR_ENGINE_LIBRETRANSLATE) {
+      arrayLanguagesAfterEngine = LIBRETRANSLATE_TRANSLATOR_LANGUAGES;
+    } else if (translatorEngine === TRANSLATOR_ENGINE_GOOGLE) {
+      arrayLanguagesAfterEngine = GOOGLE_TRANSLATOR_LANGUAGES;
+    }
+
+    const arrayLanguages = Object.keys(arrayLanguagesAfterEngine).map(
+      code => arrayLanguagesAfterEngine[code],
+    );
+
+    const menuLanguages = new Menu();
+
+    const getLanguageCode = (obj, val): string =>
+      Object.keys(obj).find(key => obj[key] === val)!;
+
+    for (const language in arrayLanguages) {
+      if (arrayLanguages[language]) {
+        const languageItem = new MenuItem({
+          label: this.stringTable.translateLanguage({
+            translatorLanguage: arrayLanguages[language],
+          }),
+          click: () => {
+            const translateToLanguageCode = getLanguageCode(
+              arrayLanguagesAfterEngine,
+              arrayLanguages[language],
+            );
+            generateTranslationItems(translateToLanguageCode, translatorEngine);
+          },
+        });
+        menuLanguages.append(languageItem);
+      }
+    }
+
+    const translateToLanguage =
+      arrayLanguagesAfterEngine[menuInfo.translatorLanguage];
+
+    const translateToLanguageCode = getLanguageCode(
+      arrayLanguagesAfterEngine,
+      translateToLanguage,
+    );
+    const quickTranslateItem = new MenuItem({
+      label: this.stringTable.quickTranslate({
+        translatorLanguage: translateToLanguage,
+      }),
+      click: () => {
+        generateTranslationItems(translateToLanguageCode, translatorEngine);
+      },
+    });
+
+    const translateItem = new MenuItem({
+      label: this.stringTable.translate(),
+      submenu: menuLanguages,
+      click: () => {
+        generateTranslationItems(translateToLanguageCode, translatorEngine);
+      },
+    });
+
+    menu.append(translateItem);
+    menu.append(quickTranslateItem);
+    this.addSeparator(menu);
+
+    return menu;
+  }
+
+  isSrcUrlValid(menuInfo: IContextMenuParams) {
     return menuInfo.srcURL && menuInfo.srcURL.length > 0;
   }
 
@@ -391,7 +597,7 @@ export class ContextMenuBuilder {
    */
   addImageItems(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const copyImage = new MenuItem({
       label: this.stringTable.copyImage(),
@@ -403,7 +609,6 @@ export class ContextMenuBuilder {
         );
 
         this._sendNotificationOnClipboardEvent(
-          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Image copied from URL: ${menuInfo.srcURL}`,
         );
@@ -418,7 +623,6 @@ export class ContextMenuBuilder {
       click: () => {
         const result = clipboard.writeText(menuInfo.srcURL);
         this._sendNotificationOnClipboardEvent(
-          // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
           menuInfo.clipboardNotifications,
           () => `Image URL copied: ${menuInfo.srcURL}`,
         );
@@ -446,7 +650,6 @@ export class ContextMenuBuilder {
             });
           });
           this._sendNotificationOnClipboardEvent(
-            // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
             menuInfo.clipboardNotifications,
             () => `Image downloaded: ${urlWithoutBlob}`,
           );
@@ -464,7 +667,7 @@ export class ContextMenuBuilder {
    */
   addCut(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const webContents = this.getWebContents();
     menu.append(
@@ -484,7 +687,7 @@ export class ContextMenuBuilder {
    */
   addCopy(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const webContents = this.getWebContents();
     menu.append(
@@ -504,7 +707,7 @@ export class ContextMenuBuilder {
    */
   addPaste(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const webContents = this.getWebContents();
     menu.append(
@@ -521,7 +724,7 @@ export class ContextMenuBuilder {
 
   addPastePlain(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     if (
       menuInfo.editFlags.canPaste &&
@@ -552,7 +755,7 @@ export class ContextMenuBuilder {
    */
   addInspectElement(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
     needsSeparator = true,
   ) {
     const webContents = this.getWebContents();
@@ -609,6 +812,7 @@ export class ContextMenuBuilder {
    */
   goBack(menu: Electron.CrossProcessExports.Menu) {
     const webContents = this.getWebContents();
+
     menu.append(
       new MenuItem({
         label: this.stringTable.goBack(),
@@ -643,7 +847,7 @@ export class ContextMenuBuilder {
    */
   copyPageUrl(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     menu.append(
       new MenuItem({
@@ -652,7 +856,6 @@ export class ContextMenuBuilder {
         click: () => {
           clipboard.writeText(window.location.href);
           this._sendNotificationOnClipboardEvent(
-            // @ts-expect-error Property 'clipboardNotifications' does not exist on type 'ContextMenuParams'.
             menuInfo?.clipboardNotifications,
             () => `Page URL copied: ${window.location.href}`,
           );
@@ -668,7 +871,7 @@ export class ContextMenuBuilder {
    */
   goToHomePage(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     const baseURL = new window.URL(menuInfo.pageURL);
     menu.append(
@@ -691,7 +894,7 @@ export class ContextMenuBuilder {
    */
   openInBrowser(
     menu: Electron.CrossProcessExports.Menu,
-    menuInfo: Electron.ContextMenuParams,
+    menuInfo: IContextMenuParams,
   ) {
     menu.append(
       new MenuItem({