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).

12 files changed, 540 insertions, 26 deletions

diff --git a/src/@types/stores.types.ts b/src/@types/stores.types.ts
index eec18c11e..13870a43a 100644
--- a/src/@types/stores.types.ts
+++ b/src/@types/stores.types.ts
@@ -90,6 +90,7 @@ interface AppStore extends TypedStore {
   darkMode: boolean;
   dictionaries: [];
   enableSpellchecking: boolean;
+  enableTranslator: boolean;
   fetchDataInterval: 4;
   get(key: string): any;
   getAppCacheSizeRequest: () => void;
@@ -106,6 +107,8 @@ interface AppStore extends TypedStore {
   reloadAfterResume: boolean;
   reloadAfterResumeTime: number;
   searchEngine: string;
+  translatorEngine: string;
+  translatorLanguage: string;
   spellcheckerLanguage: string;
   splitMode: boolean;
   splitColumns: number;
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index 0e5be38ed..e6cba922b 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -870,12 +870,24 @@ class EditSettingsForm extends Component {
                     {intl.formatMessage(messages.spellCheckerLanguageInfo)}
                   </p>
                 )}
+
                 <p className="settings__help">
                   {intl.formatMessage(messages.appRestartRequired)}
                 </p>
 
                 <Hr />
 
+                <Toggle field={form.$('enableTranslator')} />
+
+                {form.$('enableTranslator').value && (
+                  <Select field={form.$('translatorEngine')} />
+                )}
+                {form.$('enableTranslator').value && (
+                  <Select field={form.$('translatorLanguage')} />
+                )}
+
+                <Hr />
+
                 <a
                   href={FERDIUM_TRANSLATION}
                   target="_blank"
diff --git a/src/config.ts b/src/config.ts
index 150b7101d..c8cb09d84 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -24,6 +24,8 @@ export const LIVE_WS_API = 'wss://api.franzinfra.com';
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
 export const DEV_API_FRANZ_WEBSITE = 'https://meetfranz.com';
 export const LIVE_API_FERDIUM_WEBSITE = 'https://ferdium.org';
+export const LIVE_API_FERDIUM_LIBRETRANSLATE =
+  'https://translator.ferdium.org/translate';
 
 export const STATS_API = 'https://stats.franzinfra.com';
 
@@ -84,6 +86,140 @@ export const SEARCH_ENGINE_NAMES = {
   [SEARCH_ENGINE_DDG]: 'DuckDuckGo',
 };
 
+export const TRANSLATOR_ENGINE_GOOGLE = 'Google';
+export const TRANSLATOR_ENGINE_LIBRETRANSLATE = 'LibreTranslate';
+export const TRANSLATOR_ENGINE_NAMES = {
+  [TRANSLATOR_ENGINE_LIBRETRANSLATE]:
+    'Ferdium Translator (Powered by LibreTranslate)',
+  [TRANSLATOR_ENGINE_GOOGLE]: 'Google',
+};
+
+export const LIBRETRANSLATE_TRANSLATOR_LANGUAGES = {
+  ar: 'Arabic',
+  zh: 'Chinese',
+  en: 'English',
+  fr: 'French',
+  de: 'German',
+  hi: 'Hindi',
+  id: 'Indonesian',
+  ga: 'Irish',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  pl: 'Polish',
+  pt: 'Portuguese',
+  ru: 'Russian',
+  es: 'Spanish',
+  tr: 'Turkish',
+  vi: 'Vietnamese',
+};
+
+export const GOOGLE_TRANSLATOR_LANGUAGES = {
+  af: 'Afrikaans',
+  sq: 'Albanian',
+  ar: 'Arabic',
+  hy: 'Armenian',
+  az: 'Azerbaijani',
+  eu: 'Basque',
+  be: 'Belarusian',
+  bn: 'Bengali',
+  bs: 'Bosnian',
+  bg: 'Bulgarian',
+  ca: 'Catalan',
+  ceb: 'Cebuano',
+  ny: 'Chichewa',
+  'zh-cn': 'Chinese Simplified',
+  'zh-tw': 'Chinese Traditional',
+  co: 'Corsican',
+  hr: 'Croatian',
+  cs: 'Czech',
+  da: 'Danish',
+  nl: 'Dutch',
+  en: 'English',
+  eo: 'Esperanto',
+  et: 'Estonian',
+  tl: 'Filipino',
+  fi: 'Finnish',
+  fr: 'French',
+  fy: 'Frisian',
+  gl: 'Galician',
+  ka: 'Georgian',
+  de: 'German',
+  el: 'Greek',
+  gu: 'Gujarati',
+  ht: 'Haitian Creole',
+  ha: 'Hausa',
+  haw: 'Hawaiian',
+  iw: 'Hebrew',
+  hi: 'Hindi',
+  hmn: 'Hmong',
+  hu: 'Hungarian',
+  is: 'Icelandic',
+  ig: 'Igbo',
+  id: 'Indonesian',
+  ga: 'Irish',
+  it: 'Italian',
+  ja: 'Japanese',
+  jw: 'Javanese',
+  kn: 'Kannada',
+  kk: 'Kazakh',
+  km: 'Khmer',
+  ko: 'Korean',
+  ku: 'Kurdish (Kurmanji)',
+  ky: 'Kyrgyz',
+  lo: 'Lao',
+  la: 'Latin',
+  lv: 'Latvian',
+  lt: 'Lithuanian',
+  lb: 'Luxembourgish',
+  mk: 'Macedonian',
+  mg: 'Malagasy',
+  ms: 'Malay',
+  ml: 'Malayalam',
+  mt: 'Maltese',
+  mi: 'Maori',
+  mr: 'Marathi',
+  mn: 'Mongolian',
+  my: 'Myanmar (Burmese)',
+  ne: 'Nepali',
+  no: 'Norwegian',
+  ps: 'Pashto',
+  fa: 'Persian',
+  pl: 'Polish',
+  pt: 'Portuguese',
+  ma: 'Punjabi',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sm: 'Samoan',
+  gd: 'Scots Gaelic',
+  sr: 'Serbian',
+  st: 'Sesotho',
+  sn: 'Shona',
+  sd: 'Sindhi',
+  si: 'Sinhala',
+  sk: 'Slovak',
+  sl: 'Slovenian',
+  so: 'Somali',
+  es: 'Spanish',
+  su: 'Sudanese',
+  sw: 'Swahili',
+  sv: 'Swedish',
+  tg: 'Tajik',
+  ta: 'Tamil',
+  te: 'Telugu',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  ur: 'Urdu',
+  uz: 'Uzbek',
+  vi: 'Vietnamese',
+  cy: 'Welsh',
+  xh: 'Xhosa',
+  yi: 'Yiddish',
+  yo: 'Yoruba',
+  zu: 'Zulu',
+};
+
 export const SEARCH_ENGINE_URLS = {
   [SEARCH_ENGINE_STARTPAGE]: ({ searchTerm }) =>
     `https://www.startpage.com/sp/search?query=${searchTerm}`,
@@ -222,6 +358,7 @@ export const DEFAULT_APP_SETTINGS = {
   showMessageBadgeWhenMuted: true,
   showDragArea: false,
   enableSpellchecking: true,
+  enableTranslator: false,
   spellcheckerLanguage: 'en-us',
   darkMode: false,
   navigationBarManualActive: false,
@@ -261,6 +398,8 @@ export const DEFAULT_APP_SETTINGS = {
   iconSize: iconSizeBias,
   navigationBarBehaviour: 'custom',
   searchEngine: SEARCH_ENGINE_STARTPAGE,
+  translatorLanguage: 'en',
+  translatorEngine: TRANSLATOR_ENGINE_LIBRETRANSLATE,
   useHorizontalStyle: false,
   hideCollapseButton: false,
   isMenuCollapsed: false,
diff --git a/src/containers/settings/EditSettingsScreen.tsx b/src/containers/settings/EditSettingsScreen.tsx
index fbbed629a..a4d7ba0eb 100644
--- a/src/containers/settings/EditSettingsScreen.tsx
+++ b/src/containers/settings/EditSettingsScreen.tsx
@@ -15,6 +15,10 @@ import {
   ICON_SIZES,
   NAVIGATION_BAR_BEHAVIOURS,
   SEARCH_ENGINE_NAMES,
+  TRANSLATOR_ENGINE_NAMES,
+  GOOGLE_TRANSLATOR_LANGUAGES,
+  TRANSLATOR_ENGINE_GOOGLE,
+  LIBRETRANSLATE_TRANSLATOR_LANGUAGES,
   TODO_APPS,
   DEFAULT_SETTING_KEEP_ALL_WORKSPACES_LOADED,
   DEFAULT_IS_FEATURE_ENABLED_BY_USER,
@@ -103,6 +107,14 @@ const messages = defineMessages({
     id: 'settings.app.form.searchEngine',
     defaultMessage: 'Search engine',
   },
+  translatorEngine: {
+    id: 'settings.app.form.translatorEngine',
+    defaultMessage: 'Translator Engine',
+  },
+  translatorLanguage: {
+    id: 'settings.app.form.translatorLanguage',
+    defaultMessage: 'Default Translator language',
+  },
   hibernateOnStartup: {
     id: 'settings.app.form.hibernateOnStartup',
     defaultMessage: 'Keep services in hibernation on startup',
@@ -267,6 +279,10 @@ const messages = defineMessages({
     id: 'settings.app.form.enableSpellchecking',
     defaultMessage: 'Enable spell checking',
   },
+  enableTranslator: {
+    id: 'settings.app.form.enableTranslator',
+    defaultMessage: 'Enable Translator',
+  },
   enableGPUAcceleration: {
     id: 'settings.app.form.enableGPUAcceleration',
     defaultMessage: 'Enable GPU Acceleration',
@@ -342,6 +358,8 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
         notifyTaskBarOnMessage: Boolean(settingsData.notifyTaskBarOnMessage),
         navigationBarBehaviour: settingsData.navigationBarBehaviour,
         searchEngine: settingsData.searchEngine,
+        translatorEngine: settingsData.translatorEngine,
+        translatorLanguage: settingsData.translatorLanguage,
         hibernateOnStartup: Boolean(settingsData.hibernateOnStartup),
         hibernationStrategy: Number(settingsData.hibernationStrategy),
         wakeUpStrategy: Number(settingsData.wakeUpStrategy),
@@ -394,6 +412,7 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
         ),
         showDragArea: Boolean(settingsData.showDragArea),
         enableSpellchecking: Boolean(settingsData.enableSpellchecking),
+        enableTranslator: Boolean(settingsData.enableTranslator),
         spellcheckerLanguage: settingsData.spellcheckerLanguage,
         userAgentPref: settingsData.userAgentPref,
         beta: Boolean(settingsData.beta), // we need this info in the main process as well
@@ -451,6 +470,16 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
       sort: false,
     });
 
+    const translatorEngines = getSelectOptions({
+      locales: TRANSLATOR_ENGINE_NAMES,
+      sort: false,
+    });
+
+    const translatorLanguages = getSelectOptions({
+      locales: LIBRETRANSLATE_TRANSLATOR_LANGUAGES,
+      sort: false,
+    });
+
     const hibernationStrategies = getSelectOptions({
       locales: HIBERNATION_STRATEGIES,
       sort: false,
@@ -574,6 +603,18 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           default: DEFAULT_APP_SETTINGS.searchEngine,
           options: searchEngines,
         },
+        translatorEngine: {
+          label: intl.formatMessage(messages.translatorEngine),
+          value: settings.all.app.translatorEngine,
+          default: DEFAULT_APP_SETTINGS.translatorEngine,
+          options: translatorEngines,
+        },
+        translatorLanguage: {
+          label: intl.formatMessage(messages.translatorLanguage),
+          value: settings.all.app.translatorLanguage,
+          default: DEFAULT_APP_SETTINGS.translatorLanguage,
+          options: translatorLanguages,
+        },
         hibernateOnStartup: {
           label: intl.formatMessage(messages.hibernateOnStartup),
           value: settings.all.app.hibernateOnStartup,
@@ -677,6 +718,11 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
           value: settings.all.app.enableSpellchecking,
           default: DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
+        enableTranslator: {
+          label: intl.formatMessage(messages.enableTranslator),
+          value: settings.all.app.enableTranslator,
+          default: DEFAULT_APP_SETTINGS.enableTranslator,
+        },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
           value: settings.all.app.spellcheckerLanguage,
@@ -828,6 +874,14 @@ class EditSettingsScreen extends Component<EditSettingsScreenProps> {
       },
     };
 
+    if (settings.app.translatorEngine === TRANSLATOR_ENGINE_GOOGLE) {
+      const translatorGoogleLanguages = getSelectOptions({
+        locales: GOOGLE_TRANSLATOR_LANGUAGES,
+        sort: false,
+      });
+      config.fields.translatorLanguage.options = translatorGoogleLanguages;
+    }
+
     if (workspaces.isFeatureActive) {
       config.fields.keepAllWorkspacesLoaded = {
         label: intl.formatMessage(messages.keepAllWorkspacesLoaded),
diff --git a/src/helpers/translation-helpers.ts b/src/helpers/translation-helpers.ts
new file mode 100644
index 000000000..215b2a49c
--- /dev/null
+++ b/src/helpers/translation-helpers.ts
@@ -0,0 +1,47 @@
+import fetch from 'node-fetch';
+import translateGoogle from 'translate-google';
+import { LIVE_API_FERDIUM_LIBRETRANSLATE } from '../config';
+
+export async function translateTo(
+  text: string,
+  translateToLanguage: string,
+  translatorEngine: string,
+): Promise<{ text: string; error: boolean }> {
+  const errorText =
+    // TODO: Need to support i18n
+    'FERDIUM ERROR: An error occured. Please select less text to translate or try again later.';
+
+  if (translatorEngine === 'Google') {
+    try {
+      const res = await translateGoogle(text, {
+        to: translateToLanguage,
+      });
+
+      return { text: res, error: false };
+    } catch {
+      return { text: errorText, error: true };
+    }
+  } else if (translatorEngine === 'LibreTranslate') {
+    try {
+      const res = await fetch(LIVE_API_FERDIUM_LIBRETRANSLATE, {
+        method: 'POST',
+        body: JSON.stringify({
+          q: text,
+          source: 'auto',
+          target: translateToLanguage,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+
+      const response = await res.json();
+
+      return { text: response.translatedText, error: false };
+    } catch {
+      return { text: errorText, error: true };
+    }
+  }
+
+  return { text: errorText, error: true };
+}
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index a98bc2f77..4dc8bad82 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -219,6 +219,7 @@
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Always show Ferdium in System Tray",
   "settings.app.form.enableTodos": "Enable Ferdium Todos",
+  "settings.app.form.enableTranslator": "Enable Translator",
   "settings.app.form.grayscaleServicesDim": "Grayscale dim level",
   "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup",
   "settings.app.form.hibernationStrategy": "Hibernation strategy",
@@ -256,6 +257,8 @@
   "settings.app.form.splitColumns": "Number of columns",
   "settings.app.form.splitMode": "Enable Split View Mode",
   "settings.app.form.startMinimized": "Start minimized",
+  "settings.app.form.translatorEngine": "Translator Engine",
+  "settings.app.form.translatorLanguage": "Default Translator language",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
   "settings.app.form.useGrayscaleServices": "Use grayscale services",
   "settings.app.form.useHorizontalStyle": "Use horizontal style",
diff --git a/src/index.ts b/src/index.ts
index 05e222a25..7c80ca955 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -45,6 +45,7 @@ import './electron/exception';
 import { asarPath } from './helpers/asar-helpers';
 import { openExternalUrl } from './helpers/url-helpers';
 import userAgent from './helpers/userAgent-helpers';
+import { translateTo } from './helpers/translation-helpers';
 
 const debug = require('./preload-safe-debug')('Ferdium:App');
 
@@ -500,6 +501,18 @@ app.on('login', (event, _webContents, _request, authInfo, callback) => {
   }
 });
 
+ipcMain.handle(
+  'translate',
+  async (_e, { text, translateToLanguage, translatorEngine }) => {
+    const response = await translateTo(
+      text,
+      translateToLanguage,
+      translatorEngine,
+    );
+    return response;
+  },
+);
+
 // TODO: evaluate if we need to store the authCallback for every service
 ipcMain.on('feature-basic-auth-credentials', (_e, { user, password }) => {
   debug('Received basic auth credentials', user, '********');
diff --git a/src/models/IContextMenuParams.ts b/src/models/IContextMenuParams.ts
new file mode 100644
index 000000000..c661b4595
--- /dev/null
+++ b/src/models/IContextMenuParams.ts
@@ -0,0 +1,7 @@
+export default interface IContextMenuParams extends Electron.ContextMenuParams {
+  enableTranslator: boolean;
+  clipboardNotifications: boolean;
+  searchEngine: string;
+  translatorEngine: string;
+  translatorLanguage: string;
+}
diff --git a/src/stores/ServicesStore.ts b/src/stores/ServicesStore.ts
index 83ec7d18e..00cf33b17 100644
--- a/src/stores/ServicesStore.ts
+++ b/src/stores/ServicesStore.ts
@@ -158,6 +158,13 @@ export default class ServicesStore extends TypedStore {
     );
 
     reaction(
+      () => this.stores.settings.app.enableTranslator,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
       () => this.stores.settings.app.spellcheckerLanguage,
       () => {
         this._shareSettingsWithServiceProcess();
@@ -207,6 +214,20 @@ export default class ServicesStore extends TypedStore {
     );
 
     reaction(
+      () => this.stores.settings.app.translatorEngine,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
+      () => this.stores.settings.app.translatorLanguage,
+      () => {
+        this._shareSettingsWithServiceProcess();
+      },
+    );
+
+    reaction(
       () => this.stores.settings.app.clipboardNotifications,
       () => {
         this._shareSettingsWithServiceProcess();
diff --git a/src/webview/contextMenu.ts b/src/webview/contextMenu.ts
index 72f927ef4..61771854f 100644
--- a/src/webview/contextMenu.ts
+++ b/src/webview/contextMenu.ts
@@ -9,6 +9,9 @@ export default async function setupContextMenu(
   getSpellcheckerLanguage: () => void,
   getSearchEngine: () => void,
   getClipboardNotifications: () => void,
+  getEnableTranslator: () => void,
+  getTranslatorEngine: () => void,
+  getTranslatorLanguage: () => void,
 ) {
   const contextMenuBuilder = new ContextMenuBuilder(webContents);
 
@@ -19,6 +22,9 @@ export default async function setupContextMenu(
         ...props,
         searchEngine: getSearchEngine(),
         clipboardNotifications: getClipboardNotifications(),
+        enableTranslator: getEnableTranslator(),
+        translatorEngine: getTranslatorEngine(),
+        translatorLanguage: getTranslatorLanguage(),
       },
       // @ts-expect-error Expected 1 arguments, but got 4.
       isSpellcheckEnabled(),
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({
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 8c93da202..acf4f9f31 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -188,6 +188,9 @@ class RecipeController {
       () => this.spellcheckerLanguage,
       () => this.settings.app.searchEngine,
       () => this.settings.app.clipboardNotifications,
+      () => this.settings.app.enableTranslator,
+      () => this.settings.app.translatorEngine,
+      () => this.settings.app.translatorLanguage,
     );
 
     autorun(() => this.update());
@@ -293,6 +296,9 @@ class RecipeController {
     );
     debug('darkReaderSettigs', this.settings.service.darkReaderSettings);
     debug('searchEngine', this.settings.app.searchEngine);
+    debug('enableTranslator', this.settings.app.enableTranslator);
+    debug('translatorEngine', this.settings.app.translatorEngine);
+    debug('translatorLanguage', this.settings.app.translatorLanguage);
 
     if (this.userscript && this.userscript.internal_setSettings) {
       this.userscript.internal_setSettings(this.settings);