Add FAB to service dashboard (#824)

* Implement #387

* Fix lint

* Upgrade to Electron 9

* Remove dependency on electron-spellchecker

* Allow multiple languages to be selected

* Fix lint

* Don't show spellchecker language chooser for macOS

* Fix _requireAuthenticatedUser throwing error on startup

* Add FAB

24 files changed, 897 insertions, 318 deletions

diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 3dba793b2..f1e70ce59 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -21,6 +21,8 @@ import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 import { serviceLimitStore } from '../../../features/serviceLimit';
 
+import { isMac } from '../../../environment';
+
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
@@ -401,14 +403,16 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer
-              condition={!isSpellcheckerIncludedInCurrentPlan}
-              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
-            >
-              <div className="settings__settings-group">
-                <Select field={form.$('spellcheckerLanguage')} />
-              </div>
-            </PremiumFeatureContainer>
+            {!isMac && (
+              <PremiumFeatureContainer
+                condition={!isSpellcheckerIncludedInCurrentPlan}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+              >
+                <div className="settings__settings-group">
+                  <Select field={form.$('spellcheckerLanguage')} multiple />
+                </div>
+              </PremiumFeatureContainer>
+            )}
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index 78038e86a..826dbb176 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -7,6 +7,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import SearchInput from '../../ui/SearchInput';
 import Infobox from '../../ui/Infobox';
 import Loader from '../../ui/Loader';
+import FAB from '../../ui/FAB';
 import ServiceItem from './ServiceItem';
 import Appear from '../../ui/effects/Appear';
 import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
@@ -175,6 +176,12 @@ export default @observer class ServicesDashboard extends Component {
               </tbody>
             </table>
           )}
+
+          <FAB>
+            <Link to="/settings/recipes">
+              +
+            </Link>
+          </FAB>
         </div>
       </div>
     );
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 50358c36f..ba7cb7317 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -91,6 +91,10 @@ const messages = defineMessages({
     id: 'settings.app.translationHelp',
     defaultMessage: '!!!Help us to translate Ferdi into your language.',
   },
+  spellCheckerLanguageInfo: {
+    id: 'settings.app.spellCheckerLanguageInfo',
+    defaultMessage: '!!!Ferdi uses your Mac\'s build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac\'s System Preferences.',
+  },
   subheadlineCache: {
     id: 'settings.app.subheadlineCache',
     defaultMessage: '!!!Cache',
@@ -518,8 +522,11 @@ export default @observer class EditSettingsForm extends Component {
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
-                    {form.$('enableSpellchecking').value && (
-                    <Select field={form.$('spellcheckerLanguage')} />
+                    {form.$('enableSpellchecking').value && !isMac && (
+                      <Select field={form.$('spellcheckerLanguage')} multiple />
+                    )}
+                    {form.$('enableSpellchecking').value && isMac && (
+                      <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
                   </Fragment>
                 </PremiumFeatureContainer>
diff --git a/src/components/ui/FAB.js b/src/components/ui/FAB.js
new file mode 100644
index 000000000..9359a3c6c
--- /dev/null
+++ b/src/components/ui/FAB.js
@@ -0,0 +1,72 @@
+/**
+ * Floating Action Button (FAB)
+ */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import classnames from 'classnames';
+
+export default @inject('stores') @observer class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => { },
+    type: 'button',
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const {
+      className,
+      disabled,
+      onClick,
+      type,
+      children,
+      htmlForm,
+    } = this.props;
+
+    const buttonProps = {
+      className: classnames({
+        ferdi__fab: true,
+        [`${className}`]: className,
+      }),
+      type,
+    };
+
+    if (disabled) {
+      buttonProps.disabled = true;
+    }
+
+    if (onClick) {
+      buttonProps.onClick = onClick;
+    }
+
+    if (htmlForm) {
+      buttonProps.form = htmlForm;
+    }
+
+    return (
+      // disabling rule as button has type defined in `buttonProps`
+      <button {...buttonProps} type="button">
+        {children}
+      </button>
+    );
+  }
+}
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index da52243ca..b4511433c 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -10,22 +10,60 @@ export default @observer class Select extends Component {
     className: PropTypes.string,
     showLabel: PropTypes.bool,
     disabled: PropTypes.bool,
+    multiple: PropTypes.bool,
   };
 
   static defaultProps = {
     className: null,
     showLabel: true,
     disabled: false,
+    multiple: false,
   };
 
+  constructor(props) {
+    super(props);
+
+    this.element = React.createRef();
+  }
+
+  multipleChange() {
+    const element = this.element.current;
+
+    const result = [];
+    const options = element && element.options;
+
+    for (const option of options) {
+      if (option.selected) {
+        result.push(option.value || option.text);
+      }
+    }
+
+    const { field } = this.props;
+    field.value = result;
+  }
+
   render() {
     const {
       field,
       className,
       showLabel,
       disabled,
+      multiple,
     } = this.props;
 
+    let selected = field.value;
+
+    if (multiple) {
+      if (typeof field.value === 'string' && field.value.substr(0, 1) === '[') {
+        // Value is JSON encoded
+        selected = JSON.parse(field.value);
+      } else if (typeof field.value === 'object') {
+        selected = field.value;
+      } else {
+        selected = [field.value];
+      }
+    }
+
     return (
       <div
         className={classnames({
@@ -44,11 +82,13 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={field.onChange}
+          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
           id={field.id}
-          defaultValue={field.value}
+          defaultValue={selected}
           className="franz-form__select"
           disabled={field.disabled || disabled}
+          multiple={multiple}
+          ref={this.element}
         >
           {field.options.map(type => (
             <option
diff --git a/src/config.js b/src/config.js
index b8af16419..f9eecf375 100644
--- a/src/config.js
+++ b/src/config.js
@@ -98,7 +98,7 @@ export const DEFAULT_APP_SETTINGS = {
   showMessageBadgeWhenMuted: true,
   showDragArea: false,
   enableSpellchecking: true,
-  spellcheckerLanguage: 'en-us',
+  spellcheckerLanguage: '["en-US"]',
   darkMode: process.platform === 'darwin' ? nativeTheme.shouldUseDarkColors : false, // We can't use refs from `./environment` at this time
   locale: '',
   fallbackLocale: 'en-US',
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 3dba3bc11..c6149fd9e 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -247,7 +247,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted,
         showDragArea: settingsData.showDragArea,
         enableSpellchecking: settingsData.enableSpellchecking,
-        spellcheckerLanguage: settingsData.spellcheckerLanguage,
+        spellcheckerLanguage: JSON.stringify(settingsData.spellcheckerLanguage),
         beta: settingsData.beta, // we need this info in the main process as well
         automaticUpdates: settingsData.automaticUpdates, // we need this info in the main process as well
         locale: settingsData.locale, // we need this info in the main process as well
diff --git a/src/electron/ipc-api/settings.js b/src/electron/ipc-api/settings.js
index b651db306..6d48c54e3 100644
--- a/src/electron/ipc-api/settings.js
+++ b/src/electron/ipc-api/settings.js
@@ -2,9 +2,11 @@ import { ipcMain } from 'electron';
 
 export default (params) => {
   ipcMain.on('getAppSettings', (event, type) => {
+    const cleanData = JSON.parse(JSON.stringify(params.settings[type].all));
+
     params.mainWindow.webContents.send('appSettings', {
       type,
-      data: params.settings[type].all,
+      data: cleanData,
     });
   });
 
diff --git a/src/electron/webview-ime-focus.js b/src/electron/webview-ime-focus.js
index 1213b518e..b41232b63 100644
--- a/src/electron/webview-ime-focus.js
+++ b/src/electron/webview-ime-focus.js
@@ -1,3 +1,4 @@
+const { remote } = require('electron');
 const { releaseDocumentFocus } = require('./webview-ime-focus-helpers');
 
 function giveWebviewDocumentFocus(element) {
@@ -9,7 +10,7 @@ function giveWebviewDocumentFocus(element) {
 }
 
 function elementIsUnfocusedWebview(element) {
-  return element.tagName === 'WEBVIEW' && !element.getWebContents().isFocused();
+  return element.tagName === 'WEBVIEW' && !remote.webContents.fromId(element.getWebContentsId()).isFocused();
 }
 
 function webviewDidAutofocus(element) {
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 244ceb521..ce78f34a3 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -285,104 +285,104 @@
         "defaultMessage": "!!!Locked",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.headline",
         "start": {
           "column": 12,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.info",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Unlock with Touch ID",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.touchId",
         "start": {
           "column": 11,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!unlock via Touch ID",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.touchIdPrompt",
         "start": {
           "column": 17,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Password",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.password.label",
         "start": {
           "column": 17,
-          "line": 35
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Unlock",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.submit.label",
         "start": {
           "column": 21,
-          "line": 39
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Unlock with Password",
         "end": {
           "column": 3,
-          "line": 46
+          "line": 47
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.unlockWithPassword",
         "start": {
           "column": 22,
-          "line": 43
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Password invalid",
         "end": {
           "column": 3,
-          "line": 50
+          "line": 51
         },
         "file": "src/components/auth/Locked.js",
         "id": "locked.invalidCredentials",
         "start": {
           "column": 22,
-          "line": 47
+          "line": 48
         }
       }
     ],
@@ -2483,364 +2483,364 @@
         "defaultMessage": "!!!Save service",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 30
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.saveButton",
         "start": {
           "column": 15,
-          "line": 25
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Delete Service",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 34
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.deleteButton",
         "start": {
           "column": 17,
-          "line": 29
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Open darkmode.css",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.openDarkmodeCss",
         "start": {
           "column": 19,
-          "line": 33
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Open user.css",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 42
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.openUserCss",
         "start": {
           "column": 15,
-          "line": 37
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Open user.js",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 46
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.openUserJs",
         "start": {
           "column": 14,
-          "line": 41
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 50
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.recipeFileInfo",
         "start": {
           "column": 18,
-          "line": 45
+          "line": 47
         }
       },
       {
         "defaultMessage": "!!!Available services",
         "end": {
           "column": 3,
-          "line": 52
+          "line": 54
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 49
+          "line": 51
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 56
+          "line": 58
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 53
+          "line": 55
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 60
+          "line": 62
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 57
+          "line": 59
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 64
+          "line": 66
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 61
+          "line": 63
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 68
+          "line": 70
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 65
+          "line": 67
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 72
+          "line": 74
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 69
+          "line": 71
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 76
+          "line": 78
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 73
+          "line": 75
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 80
+          "line": 82
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 77
+          "line": 79
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 84
+          "line": 86
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 81
+          "line": 83
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 88
+          "line": 90
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 85
+          "line": 87
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 92
+          "line": 94
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 89
+          "line": 91
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 96
+          "line": 98
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 93
+          "line": 95
         }
       },
       {
         "defaultMessage": "!!!You currently have hibernation enabled but you can disable hibernation for individual services using this option.",
         "end": {
           "column": 3,
-          "line": 100
+          "line": 102
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.disableHibernationInfo",
         "start": {
           "column": 26,
-          "line": 97
+          "line": 99
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 104
+          "line": 106
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 101
+          "line": 103
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 108
+          "line": 110
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 105
+          "line": 107
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 112
+          "line": 114
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 109
+          "line": 111
         }
       },
       {
         "defaultMessage": "!!!Dark Reader Settings",
         "end": {
           "column": 3,
-          "line": 116
+          "line": 118
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineDarkReaderSettings",
         "start": {
           "column": 30,
-          "line": 113
+          "line": 115
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 120
+          "line": 122
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 117
+          "line": 119
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 124
+          "line": 126
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 121
+          "line": 123
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 128
+          "line": 130
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 125
+          "line": 127
         }
       },
       {
         "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 132
+          "line": 134
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 129
+          "line": 131
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
         "end": {
           "column": 3,
-          "line": 136
+          "line": 138
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 133
+          "line": 135
         }
       }
     ],
@@ -3306,159 +3306,172 @@
         }
       },
       {
-        "defaultMessage": "!!!Cache",
+        "defaultMessage": "!!!Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
         "end": {
           "column": 3,
           "line": 97
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
+        "id": "settings.app.spellCheckerLanguageInfo",
+        "start": {
+          "column": 28,
+          "line": 94
+        }
+      },
+      {
+        "defaultMessage": "!!!Cache",
+        "end": {
+          "column": 3,
+          "line": 101
+        },
+        "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.subheadlineCache",
         "start": {
           "column": 20,
-          "line": 94
+          "line": 98
         }
       },
       {
         "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
         "end": {
           "column": 3,
-          "line": 101
+          "line": 105
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.cacheInfo",
         "start": {
           "column": 13,
-          "line": 98
+          "line": 102
         }
       },
       {
         "defaultMessage": "!!!Couldn't clear all cache",
         "end": {
           "column": 3,
-          "line": 105
+          "line": 109
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.cacheNotCleared",
         "start": {
           "column": 19,
-          "line": 102
+          "line": 106
         }
       },
       {
         "defaultMessage": "!!!Clear cache",
         "end": {
           "column": 3,
-          "line": 109
+          "line": 113
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonClearAllCache",
         "start": {
           "column": 23,
-          "line": 106
+          "line": 110
         }
       },
       {
         "defaultMessage": "!!!Check for updates",
         "end": {
           "column": 3,
-          "line": 113
+          "line": 117
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonSearchForUpdate",
         "start": {
           "column": 25,
-          "line": 110
+          "line": 114
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 117
+          "line": 121
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 114
+          "line": 118
         }
       },
       {
         "defaultMessage": "!!!Is searching for update",
         "end": {
           "column": 3,
-          "line": 121
+          "line": 125
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusSearching",
         "start": {
           "column": 25,
-          "line": 118
+          "line": 122
         }
       },
       {
         "defaultMessage": "!!!Update available, downloading...",
         "end": {
           "column": 3,
-          "line": 125
+          "line": 129
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusAvailable",
         "start": {
           "column": 25,
-          "line": 122
+          "line": 126
         }
       },
       {
         "defaultMessage": "!!!You are using the latest version of Ferdi",
         "end": {
           "column": 3,
-          "line": 129
+          "line": 133
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.updateStatusUpToDate",
         "start": {
           "column": 24,
-          "line": 126
+          "line": 130
         }
       },
       {
         "defaultMessage": "!!!Current version:",
         "end": {
           "column": 3,
-          "line": 133
+          "line": 137
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.currentVersion",
         "start": {
           "column": 18,
-          "line": 130
+          "line": 134
         }
       },
       {
         "defaultMessage": "!!!Changes require restart",
         "end": {
           "column": 3,
-          "line": 137
+          "line": 141
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.restartRequired",
         "start": {
           "column": 29,
-          "line": 134
+          "line": 138
         }
       },
       {
         "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
         "end": {
           "column": 3,
-          "line": 141
+          "line": 145
         },
         "file": "src/components/settings/settings/EditSettingsForm.js",
         "id": "settings.app.languageDisclaimer",
         "start": {
           "column": 22,
-          "line": 138
+          "line": 142
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index dcaa2466a..fd5c0755b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -335,6 +335,7 @@
   "settings.app.scheduledDNDInfo": "Scheduled Do-not-Disturb allows you to define a period of time in which you do not want to get Notifications from Ferdi.",
   "settings.app.scheduledDNDTimeInfo": "Times in 24-Hour-Format. End time can be before start time (e.g. start 17:00, end 09:00) to enable Do-not-Disturb overnight.",
   "settings.app.sentryInfo": "Sending telemetry data allows us to find errors in Ferdi - we will not send any personal information like your message data! Changing this option requires you to restart Ferdi.",
+  "settings.app.spellCheckerLanguageInfo": "Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
   "settings.app.subheadlineCache": "Cache",
   "settings.app.todoServerInfo": "This server will be used for the \"Ferdi Todo\" feature.",
   "settings.app.translationHelp": "Help us to translate Ferdi into your language.",
diff --git a/src/i18n/messages/src/components/auth/Locked.json b/src/i18n/messages/src/components/auth/Locked.json
index ac6091c35..ed3999114 100644
--- a/src/i18n/messages/src/components/auth/Locked.json
+++ b/src/i18n/messages/src/components/auth/Locked.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Locked",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 12
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Ferdi is currently locked. Please unlock Ferdi with your password to see your messages.",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Unlock with Touch ID",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 11
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!unlock via Touch ID",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 17
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Password",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 17
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Unlock",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 21
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Unlock with Password",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 43,
+      "line": 44,
       "column": 22
     },
     "end": {
-      "line": 46,
+      "line": 47,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Password invalid",
     "file": "src/components/auth/Locked.js",
     "start": {
-      "line": 47,
+      "line": 48,
       "column": 22
     },
     "end": {
-      "line": 50,
+      "line": 51,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index 987004199..4ee427e46 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Save service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 25,
+      "line": 27,
       "column": 15
     },
     "end": {
-      "line": 28,
+      "line": 30,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Delete Service",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 29,
+      "line": 31,
       "column": 17
     },
     "end": {
-      "line": 32,
+      "line": 34,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Open darkmode.css",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 33,
+      "line": 35,
       "column": 19
     },
     "end": {
-      "line": 36,
+      "line": 38,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Open user.css",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 37,
+      "line": 39,
       "column": 15
     },
     "end": {
-      "line": 40,
+      "line": 42,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Open user.js",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 41,
+      "line": 43,
       "column": 14
     },
     "end": {
-      "line": 44,
+      "line": 46,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 45,
+      "line": 47,
       "column": 18
     },
     "end": {
-      "line": 48,
+      "line": 50,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 49,
+      "line": 51,
       "column": 21
     },
     "end": {
-      "line": 52,
+      "line": 54,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 53,
+      "line": 55,
       "column": 16
     },
     "end": {
-      "line": 56,
+      "line": 58,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 57,
+      "line": 59,
       "column": 22
     },
     "end": {
-      "line": 60,
+      "line": 62,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 61,
+      "line": 63,
       "column": 23
     },
     "end": {
-      "line": 64,
+      "line": 66,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 65,
+      "line": 67,
       "column": 13
     },
     "end": {
-      "line": 68,
+      "line": 70,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 69,
+      "line": 71,
       "column": 16
     },
     "end": {
-      "line": 72,
+      "line": 74,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 73,
+      "line": 75,
       "column": 20
     },
     "end": {
-      "line": 76,
+      "line": 78,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 77,
+      "line": 79,
       "column": 28
     },
     "end": {
-      "line": 80,
+      "line": 82,
       "column": 3
     }
   },
@@ -186,11 +186,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 81,
+      "line": 83,
       "column": 24
     },
     "end": {
-      "line": 84,
+      "line": 86,
       "column": 3
     }
   },
@@ -199,11 +199,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 85,
+      "line": 87,
       "column": 27
     },
     "end": {
-      "line": 88,
+      "line": 90,
       "column": 3
     }
   },
@@ -212,11 +212,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 89,
+      "line": 91,
       "column": 23
     },
     "end": {
-      "line": 92,
+      "line": 94,
       "column": 3
     }
   },
@@ -225,11 +225,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 93,
+      "line": 95,
       "column": 15
     },
     "end": {
-      "line": 96,
+      "line": 98,
       "column": 3
     }
   },
@@ -238,11 +238,11 @@
     "defaultMessage": "!!!You currently have hibernation enabled but you can disable hibernation for individual services using this option.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 97,
+      "line": 99,
       "column": 26
     },
     "end": {
-      "line": 100,
+      "line": 102,
       "column": 3
     }
   },
@@ -251,11 +251,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 101,
+      "line": 103,
       "column": 25
     },
     "end": {
-      "line": 104,
+      "line": 106,
       "column": 3
     }
   },
@@ -264,11 +264,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 105,
+      "line": 107,
       "column": 18
     },
     "end": {
-      "line": 108,
+      "line": 110,
       "column": 3
     }
   },
@@ -277,11 +277,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 109,
+      "line": 111,
       "column": 19
     },
     "end": {
-      "line": 112,
+      "line": 114,
       "column": 3
     }
   },
@@ -290,11 +290,11 @@
     "defaultMessage": "!!!Dark Reader Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 113,
+      "line": 115,
       "column": 30
     },
     "end": {
-      "line": 116,
+      "line": 118,
       "column": 3
     }
   },
@@ -303,11 +303,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 117,
+      "line": 119,
       "column": 14
     },
     "end": {
-      "line": 120,
+      "line": 122,
       "column": 3
     }
   },
@@ -316,11 +316,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 121,
+      "line": 123,
       "column": 14
     },
     "end": {
-      "line": 124,
+      "line": 126,
       "column": 3
     }
   },
@@ -329,11 +329,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 125,
+      "line": 127,
       "column": 17
     },
     "end": {
-      "line": 128,
+      "line": 130,
       "column": 3
     }
   },
@@ -342,11 +342,11 @@
     "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 129,
+      "line": 131,
       "column": 20
     },
     "end": {
-      "line": 132,
+      "line": 134,
       "column": 3
     }
   },
@@ -355,11 +355,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 133,
+      "line": 135,
       "column": 13
     },
     "end": {
-      "line": 136,
+      "line": 138,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
index fa661ea2f..140d17a8b 100644
--- a/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
+++ b/src/i18n/messages/src/components/settings/services/ServicesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Search service",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 17
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You haven't added any services yet.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 19
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Sorry, but no service matched your search term.",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 18
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Discover services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 20
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load your services",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 25
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 21
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 43,
+      "line": 44,
       "column": 15
     },
     "end": {
-      "line": 46,
+      "line": 47,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Service has been deleted",
     "file": "src/components/settings/services/ServicesDashboard.js",
     "start": {
-      "line": 47,
+      "line": 48,
       "column": 15
     },
     "end": {
-      "line": 50,
+      "line": 51,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
index 97360b78e..373cd78f9 100644
--- a/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
+++ b/src/i18n/messages/src/components/settings/settings/EditSettingsForm.json
@@ -234,15 +234,28 @@
     }
   },
   {
+    "id": "settings.app.spellCheckerLanguageInfo",
+    "defaultMessage": "!!!Ferdi uses your Mac's build-in spellchecker to check for typos. If you want to change the languages the spellchecker checks for, you can do so in your Mac's System Preferences.",
+    "file": "src/components/settings/settings/EditSettingsForm.js",
+    "start": {
+      "line": 94,
+      "column": 28
+    },
+    "end": {
+      "line": 97,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.app.subheadlineCache",
     "defaultMessage": "!!!Cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 94,
+      "line": 98,
       "column": 20
     },
     "end": {
-      "line": 97,
+      "line": 101,
       "column": 3
     }
   },
@@ -251,11 +264,11 @@
     "defaultMessage": "!!!Ferdi cache is currently using {size} of disk space.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 98,
+      "line": 102,
       "column": 13
     },
     "end": {
-      "line": 101,
+      "line": 105,
       "column": 3
     }
   },
@@ -264,11 +277,11 @@
     "defaultMessage": "!!!Couldn't clear all cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 102,
+      "line": 106,
       "column": 19
     },
     "end": {
-      "line": 105,
+      "line": 109,
       "column": 3
     }
   },
@@ -277,11 +290,11 @@
     "defaultMessage": "!!!Clear cache",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 106,
+      "line": 110,
       "column": 23
     },
     "end": {
-      "line": 109,
+      "line": 113,
       "column": 3
     }
   },
@@ -290,11 +303,11 @@
     "defaultMessage": "!!!Check for updates",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 110,
+      "line": 114,
       "column": 25
     },
     "end": {
-      "line": 113,
+      "line": 117,
       "column": 3
     }
   },
@@ -303,11 +316,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 114,
+      "line": 118,
       "column": 23
     },
     "end": {
-      "line": 117,
+      "line": 121,
       "column": 3
     }
   },
@@ -316,11 +329,11 @@
     "defaultMessage": "!!!Is searching for update",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 118,
+      "line": 122,
       "column": 25
     },
     "end": {
-      "line": 121,
+      "line": 125,
       "column": 3
     }
   },
@@ -329,11 +342,11 @@
     "defaultMessage": "!!!Update available, downloading...",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 122,
+      "line": 126,
       "column": 25
     },
     "end": {
-      "line": 125,
+      "line": 129,
       "column": 3
     }
   },
@@ -342,11 +355,11 @@
     "defaultMessage": "!!!You are using the latest version of Ferdi",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 126,
+      "line": 130,
       "column": 24
     },
     "end": {
-      "line": 129,
+      "line": 133,
       "column": 3
     }
   },
@@ -355,11 +368,11 @@
     "defaultMessage": "!!!Current version:",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 130,
+      "line": 134,
       "column": 18
     },
     "end": {
-      "line": 133,
+      "line": 137,
       "column": 3
     }
   },
@@ -368,11 +381,11 @@
     "defaultMessage": "!!!Changes require restart",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 134,
+      "line": 138,
       "column": 29
     },
     "end": {
-      "line": 137,
+      "line": 141,
       "column": 3
     }
   },
@@ -381,11 +394,11 @@
     "defaultMessage": "!!!Official translations are English & German. All other languages are community based translations.",
     "file": "src/components/settings/settings/EditSettingsForm.js",
     "start": {
-      "line": 138,
+      "line": 142,
       "column": 22
     },
     "end": {
-      "line": 141,
+      "line": 145,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
index 173389570..ff6e037fc 100644
--- a/src/i18n/messages/src/features/todos/components/TodosWebview.json
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz Todos are available to premium users now!",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 27,
+      "line": 31,
       "column": 15
     },
     "end": {
-      "line": 30,
+      "line": 34,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Upgrade Account",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 31,
+      "line": 35,
       "column": 14
     },
     "end": {
-      "line": 34,
+      "line": 38,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Everyone else will have to wait a little longer.",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 35,
+      "line": 39,
       "column": 15
     },
     "end": {
-      "line": 38,
+      "line": 42,
       "column": 3
     }
   }
diff --git a/src/models/Service.js b/src/models/Service.js
index 45dc55fce..4b5e8592d 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -1,5 +1,5 @@
 import { autorun, computed, observable } from 'mobx';
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, remote } from 'electron';
 import normalizeUrl from 'normalize-url';
 import path from 'path';
 
@@ -227,7 +227,7 @@ export default class Service {
 
 
   initializeWebViewEvents({ handleIPCMessage, openWindow, stores }) {
-    const webContents = this.webview.getWebContents();
+    const webContents = remote.webContents.fromId(this.webview.getWebContentsId());
 
     // If the recipe has implemented modifyRequestHeaders,
     // Send those headers to ipcMain so that it can be set in session
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index a8d9cc1fb..448260638 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -618,7 +618,10 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
 
     if (service.webview) {
-      service.webview.send(channel, args);
+      // Make sure the args are clean, otherwise ElectronJS can't transmit them
+      const cleanArgs = JSON.parse(JSON.stringify(args));
+
+      service.webview.send(channel, cleanArgs);
     }
   }
 
@@ -895,10 +898,14 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
 
     if (service.webview) {
+      // We need to completely clone the object, otherwise Electron won't be able to send the object via IPC
+      const shareWithWebview = JSON.parse(JSON.stringify(service.shareWithWebview));
+
       debug('Initialize recipe', service.recipe.id, service.name);
-      service.webview.send('initialize-recipe', Object.assign({
+      service.webview.send('initialize-recipe', {
+        ...shareWithWebview,
         franzVersion: app.getVersion(),
-      }, service.shareWithWebview), service.recipe);
+      }, service.recipe);
     }
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 3a53d150d..c1ed2944a 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -99,7 +99,7 @@ export default class UserStore extends Store {
 
     // Reactions
     this.registerReactions([
-      this._requireAuthenticatedUser,
+      this._requireAuthenticatedUser.bind(this),
       this._getUserData.bind(this),
       this._resetTrialActivationState.bind(this),
     ]);
@@ -321,7 +321,7 @@ export default class UserStore extends Store {
     }
 
     const { router } = this.stores;
-    const currentRoute = router.location.pathname;
+    const currentRoute = window.location.hash;
     if (!this.isLoggedIn
       && currentRoute.includes('token=')) {
       router.push(this.WELCOME_ROUTE);
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 38f8fd26d..cf2568fc4 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -110,3 +110,32 @@
     z-index: 9999;
   }
 }
+
+.ferdi__fab {
+  box-sizing: border-box;
+
+  width: 50px;
+  height: 50px;
+
+  border-radius: 25px;
+  white-space: nowrap;
+  z-index: 9998;
+  list-style: none;
+  background: $theme-brand-primary;
+  
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+
+  cursor: pointer;
+  
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+  a {
+    font-size: 30px;
+    color: #FFFFFF;
+    cursor: pointer;  
+  }
+}
\ No newline at end of file
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index eeb825ece..d04f90830 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -1,50 +1,14 @@
 import { remote } from 'electron';
-import { ContextMenuBuilder, ContextMenuListener } from 'electron-spellchecker';
+import ContextMenuBuilder from './contextMenuBuilder';
 
 const webContents = remote.getCurrentWebContents();
 
-export default async function setupContextMenu(handler) {
-  const addCustomMenuItems = (menu, menuInfo) => {
-    // Add "Paste as plain text" item when right-clicking editable content
-    if (
-      menuInfo.editFlags.canPaste
-      && !menuInfo.linkText
-      && !menuInfo.hasImageContents
-    ) {
-      menu.insert(
-        3,
-        new remote.MenuItem({
-          label: 'Paste as plain text',
-          accelerator: 'CommandOrControl+Shift+V',
-          click: () => webContents.pasteAndMatchStyle(),
-        }),
-      );
-    }
-
-    // Add "Open Link in Ferdi" item for links
-    if (menuInfo.linkURL) {
-      menu.insert(
-        2,
-        new remote.MenuItem({
-          label: 'Open Link in Ferdi',
-          click: () => {
-            window.location.href = menuInfo.linkURL;
-          },
-        }),
-      );
-    }
-
-    return menu;
-  };
-
+export default async function setupContextMenu() {
   const contextMenuBuilder = new ContextMenuBuilder(
-    handler,
-    null,
-    true,
-    addCustomMenuItems,
+    webContents,
   );
-  // eslint-disable-next-line no-new
-  new ContextMenuListener((info) => {
-    contextMenuBuilder.showPopupMenu(info);
+
+  webContents.on('context-menu', (event, params) => {
+    contextMenuBuilder.showPopupMenu(params);
   });
 }
diff --git a/src/webview/contextMenuBuilder.js b/src/webview/contextMenuBuilder.js
new file mode 100644
index 000000000..ee27877b9
--- /dev/null
+++ b/src/webview/contextMenuBuilder.js
@@ -0,0 +1,419 @@
+/**
+ * Context Menu builder.
+ *
+ * Based on "electron-spellchecker"'s  ContextMenuBuilder but customized for Ferdi
+ * and for usage with Electron's build-in spellchecker
+ *
+ * Source: https://github.com/electron-userland/electron-spellchecker/blob/master/src/context-menu-builder.js
+ */
+const {
+  clipboard, nativeImage, remote, shell,
+} = require('electron');
+
+const { Menu, MenuItem } = remote;
+
+function matchesWord(string) {
+  const regex = /[\u0041-\u005A\u0061-\u007A\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u0527\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0\u08A2-\u08AC\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0977\u0979-\u097F\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C33\u0C35-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191C\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA697\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA793\uA7A0-\uA7AA\uA7F8-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA80-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]+/g;
+
+  return string.match(regex);
+}
+
+const contextMenuStringTable = {
+  copyMail: () => 'Copy Email Address',
+  copyLinkUrl: () => 'Copy Link',
+  openLinkUrl: () => 'Open Link',
+  copyImageUrl: () => 'Copy Image URL',
+  copyImage: () => 'Copy Image',
+  addToDictionary: () => 'Add to Dictionary',
+  lookUpDefinition: ({ word }) => `Look Up "${word}"`,
+  searchGoogle: () => 'Search with Google',
+  cut: () => 'Cut',
+  copy: () => 'Copy',
+  paste: () => 'Paste',
+  inspectElement: () => 'Inspect Element',
+};
+
+/**
+ * ContextMenuBuilder creates context menus based on the content clicked - this
+ * information is derived from
+ * https://github.com/electron/electron/blob/master/docs/api/web-contents.md#event-context-menu,
+ * which we use to generate the menu. We also use the spell-check information to
+ * generate suggestions.
+ */
+module.exports = class ContextMenuBuilder {
+  /**
+   * Creates an instance of ContextMenuBuilder
+   *
+   * @param  {webContents} webContents  Current webContents
+   * @param  {Boolean} debugMode    If true, display the "Inspect Element" menu item.
+   * @param  {function} processMenu If passed, this method will be passed the menu to change
+   *                                it prior to display. Signature: (menu, info) => menu
+   */
+  constructor(webContents, debugMode = false, processMenu = m => m) {
+    this.debugMode = debugMode;
+    this.processMenu = processMenu;
+    this.menu = null;
+    this.stringTable = Object.assign({}, contextMenuStringTable);
+    this.getWebContents = () => webContents;
+  }
+
+  /**
+   * Specify alternate string formatter for each context menu.
+   * String table consist of string formatter as function instead per each context menu item,
+   * allows to change string in runtime. All formatters are simply typeof () => string, except
+   * lookUpDefinition provides word, ({word}) => string.
+   *
+   * @param {Object} stringTable The object contains string foramtter function for context menu.
+   * It is allowed to specify only certain menu string as necessary, which will makes other string
+   * fall backs to default.
+   *
+   */
+  setAlternateStringFormatter(stringTable) {
+    this.stringTable = Object.assign(this.stringTable, stringTable);
+  }
+
+  /**
+   * Shows a popup menu given the information returned from the context-menu
+   * event. This is probably the only method you need to call in this class.
+   *
+   * @param  {Object} contextInfo   The object returned from the 'context-menu'
+   *                                Electron event.
+   *
+   * @return {Promise}              Completion
+   */
+  async showPopupMenu(contextInfo) {
+    const menu = await this.buildMenuForElement(contextInfo);
+    if (!menu) return;
+    menu.popup({});
+  }
+
+  /**
+   * Builds a context menu specific to the given info that _would_ be shown
+   * immediately by {{showPopupMenu}}. Use this to add your own menu items to
+   * the list but use most of the default behavior.
+   *
+   * @return {Promise<Menu>}      The newly created `Menu`
+   */
+  async buildMenuForElement(info) {
+    if (info.linkURL && info.linkURL.length > 0) {
+      return this.buildMenuForLink(info);
+    }
+
+    if (info.hasImageContents && info.srcURL && info.srcURL.length > 1) {
+      return this.buildMenuForImage(info);
+    }
+
+    if (info.isEditable || (info.inputFieldType && info.inputFieldType !== 'none')) {
+      return this.buildMenuForTextInput(info);
+    }
+
+    return this.buildMenuForText(info);
+  }
+
+  /**
+   * Builds a menu applicable to a text input field.
+   *
+   * @return {Menu}  The `Menu`
+   */
+  buildMenuForTextInput(menuInfo) {
+    const menu = new Menu();
+
+    this.addSpellingItems(menu, menuInfo);
+    this.addSearchItems(menu, menuInfo);
+
+    this.addCut(menu, menuInfo);
+    this.addCopy(menu, menuInfo);
+    this.addPaste(menu, menuInfo);
+    this.addPastePlain(menu, menuInfo);
+    this.addInspectElement(menu, menuInfo);
+    this.processMenu(menu, menuInfo);
+
+    return menu;
+  }
+
+  /**
+   * Builds a menu applicable to a link element.
+   *
+   * @return {Menu}  The `Menu`
+   */
+  buildMenuForLink(menuInfo) {
+    const menu = new Menu();
+    const isEmailAddress = menuInfo.linkURL.startsWith('mailto:');
+
+    const copyLink = new MenuItem({
+      label: isEmailAddress ? this.stringTable.copyMail() : this.stringTable.copyLinkUrl(),
+      click: () => {
+        // Omit the mailto: portion of the link; we just want the address
+        clipboard.writeText(isEmailAddress
+          ? menuInfo.linkText : menuInfo.linkURL);
+      },
+    });
+
+    const openLink = new MenuItem({
+      label: this.stringTable.openLinkUrl(),
+      click: () => {
+        shell.openExternal(menuInfo.linkURL);
+      },
+    });
+
+    const openInFerdiLink = new MenuItem({
+      label: 'Open Link in Ferdi',
+      click: () => {
+        window.location.href = menuInfo.linkURL;
+      },
+    });
+
+    menu.append(copyLink);
+    menu.append(openLink);
+    menu.append(openInFerdiLink);
+
+    if (this.isSrcUrlValid(menuInfo)) {
+      this.addSeparator(menu);
+      this.addImageItems(menu, menuInfo);
+    }
+
+    this.addInspectElement(menu, menuInfo);
+    this.processMenu(menu, menuInfo);
+
+    return menu;
+  }
+
+  /**
+   * Builds a menu applicable to a text field.
+   *
+   * @return {Menu}  The `Menu`
+   */
+  buildMenuForText(menuInfo) {
+    const menu = new Menu();
+
+    this.addSearchItems(menu, menuInfo);
+    this.addCopy(menu, menuInfo);
+    this.addInspectElement(menu, menuInfo);
+    this.processMenu(menu, menuInfo);
+
+    return menu;
+  }
+
+  /**
+   * Builds a menu applicable to an image.
+   *
+   * @return {Menu}  The `Menu`
+   */
+  buildMenuForImage(menuInfo) {
+    const menu = new Menu();
+
+    if (this.isSrcUrlValid(menuInfo)) {
+      this.addImageItems(menu, menuInfo);
+    }
+    this.addInspectElement(menu, menuInfo);
+    this.processMenu(menu, menuInfo);
+
+    return menu;
+  }
+
+  /**
+   * Checks if the current text selection contains a single misspelled word and
+   * if so, adds suggested spellings as individual menu items.
+   */
+  addSpellingItems(menu, menuInfo) {
+    const target = this.getWebContents();
+    // Add each spelling suggestion
+    for (const suggestion of menuInfo.dictionarySuggestions) {
+      menu.append(new MenuItem({
+        label: suggestion,
+        // eslint-disable-next-line no-loop-func
+        click: () => target.replaceMisspelling(suggestion),
+      }));
+    }
+
+    // Allow users to add the misspelled word to the dictionary
+    if (menuInfo.misspelledWord) {
+      menu.append(
+        new MenuItem({
+          label: 'Add to dictionary',
+          click: () => target.session.addWordToSpellCheckerDictionary(menuInfo.misspelledWord),
+        }),
+      );
+    }
+
+    return menu;
+  }
+
+  /**
+   * Adds search-related menu items.
+   */
+  addSearchItems(menu, menuInfo) {
+    if (!menuInfo.selectionText || menuInfo.selectionText.length < 1) {
+      return menu;
+    }
+
+    const match = matchesWord(menuInfo.selectionText);
+    if (!match || match.length === 0) {
+      return menu;
+    }
+
+    if (process.platform === 'darwin') {
+      const target = this.getWebContents();
+
+      const lookUpDefinition = new MenuItem({
+        label: this.stringTable.lookUpDefinition({ word: menuInfo.selectionText.trim() }),
+        click: () => target.showDefinitionForSelection(),
+      });
+
+      menu.append(lookUpDefinition);
+    }
+
+    const search = new MenuItem({
+      label: this.stringTable.searchGoogle(),
+      click: () => {
+        const url = `https://www.google.com/#q=${encodeURIComponent(menuInfo.selectionText)}`;
+
+        shell.openExternal(url);
+      },
+    });
+
+    menu.append(search);
+    this.addSeparator(menu);
+
+    return menu;
+  }
+
+  isSrcUrlValid(menuInfo) {
+    return menuInfo.srcURL && menuInfo.srcURL.length > 0;
+  }
+
+  /**
+   * Adds "Copy Image" and "Copy Image URL" items when `src` is valid.
+   */
+  addImageItems(menu, menuInfo) {
+    const copyImage = new MenuItem({
+      label: this.stringTable.copyImage(),
+      click: () => this.convertImageToBase64(menuInfo.srcURL,
+        dataURL => clipboard.writeImage(nativeImage.createFromDataURL(dataURL))),
+    });
+
+    menu.append(copyImage);
+
+    const copyImageUrl = new MenuItem({
+      label: this.stringTable.copyImageUrl(),
+      click: () => clipboard.writeText(menuInfo.srcURL),
+    });
+
+    menu.append(copyImageUrl);
+    return menu;
+  }
+
+  /**
+   * Adds the Cut menu item
+   */
+  addCut(menu, menuInfo) {
+    const target = this.getWebContents();
+    menu.append(new MenuItem({
+      label: this.stringTable.cut(),
+      accelerator: 'CommandOrControl+X',
+      enabled: menuInfo.editFlags.canCut,
+      click: () => target.cut(),
+    }));
+
+    return menu;
+  }
+
+  /**
+   * Adds the Copy menu item.
+   */
+  addCopy(menu, menuInfo) {
+    const target = this.getWebContents();
+    menu.append(new MenuItem({
+      label: this.stringTable.copy(),
+      accelerator: 'CommandOrControl+C',
+      enabled: menuInfo.editFlags.canCopy,
+      click: () => target.copy(),
+    }));
+
+    return menu;
+  }
+
+  /**
+   * Adds the Paste menu item.
+   */
+  addPaste(menu, menuInfo) {
+    const target = this.getWebContents();
+    menu.append(new MenuItem({
+      label: this.stringTable.paste(),
+      accelerator: 'CommandOrControl+V',
+      enabled: menuInfo.editFlags.canPaste,
+      click: () => target.paste(),
+    }));
+
+    return menu;
+  }
+
+  addPastePlain(menu, menuInfo) {
+    if (
+      menuInfo.editFlags.canPaste
+      && !menuInfo.linkText
+      && !menuInfo.hasImageContents
+    ) {
+      const target = this.getWebContents();
+      menu.append(
+        new MenuItem({
+          label: 'Paste as plain text',
+          accelerator: 'CommandOrControl+Shift+V',
+          click: () => target.pasteAndMatchStyle(),
+        }),
+      );
+    }
+  }
+
+  /**
+   * Adds a separator item.
+   */
+  addSeparator(menu) {
+    menu.append(new MenuItem({ type: 'separator' }));
+    return menu;
+  }
+
+  /**
+   * Adds the "Inspect Element" menu item.
+   */
+  addInspectElement(menu, menuInfo, needsSeparator = true) {
+    const target = this.getWebContents();
+    if (!this.debugMode) return menu;
+    if (needsSeparator) this.addSeparator(menu);
+
+    const inspect = new MenuItem({
+      label: this.stringTable.inspectElement(),
+      click: () => target.inspectElement(menuInfo.x, menuInfo.y),
+    });
+
+    menu.append(inspect);
+    return menu;
+  }
+
+  /**
+   * Converts an image to a base-64 encoded string.
+   *
+   * @param  {String} url           The image URL
+   * @param  {Function} callback    A callback that will be invoked with the result
+   * @param  {String} outputFormat  The image format to use, defaults to 'image/png'
+   */
+  convertImageToBase64(url, callback, outputFormat = 'image/png') {
+    let canvas = document.createElement('CANVAS');
+    const ctx = canvas.getContext('2d');
+    // eslint-disable-next-line no-undef
+    const img = new Image();
+    img.crossOrigin = 'Anonymous';
+
+    img.onload = () => {
+      canvas.height = img.height;
+      canvas.width = img.width;
+      ctx.drawImage(img, 0, 0);
+
+      const dataURL = canvas.toDataURL(outputFormat);
+      canvas = null;
+      callback(dataURL);
+    };
+
+    img.src = url;
+  }
+};
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index b0aefd9c1..c6724e35a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -65,7 +65,18 @@ class RecipeController {
   }
 
   @computed get spellcheckerLanguage() {
-    return this.settings.service.spellcheckerLanguage || this.settings.app.spellcheckerLanguage;
+    let selected;
+    const langs = this.settings.service.spellcheckerLanguage || this.settings.app.spellcheckerLanguage;
+    if (typeof langs === 'string' && langs.substr(0, 1) === '[') {
+      // Value is JSON encoded
+      selected = JSON.parse(langs);
+    } else if (typeof langs === 'object') {
+      selected = langs;
+    } else {
+      selected = [langs];
+    }
+
+    return selected;
   }
 
   cldIdentifier = null;
@@ -165,11 +176,11 @@ class RecipeController {
 
     if (this.settings.app.enableSpellchecking) {
       debug('Setting spellchecker language to', this.spellcheckerLanguage);
-      let { spellcheckerLanguage } = this;
-      if (spellcheckerLanguage === 'automatic') {
+      const { spellcheckerLanguage } = this;
+      if (spellcheckerLanguage.includes('automatic')) {
         this.automaticLanguageDetection();
         debug('Found `automatic` locale, falling back to user locale until detected', this.settings.app.locale);
-        spellcheckerLanguage = this.settings.app.locale;
+        spellcheckerLanguage.push(this.settings.app.locale);
       } else if (this.cldIdentifier) {
         this.cldIdentifier.destroy();
       }
@@ -318,7 +329,10 @@ class RecipeController {
         const spellcheckerLocale = getSpellcheckerLocaleByFuzzyIdentifier(findResult.language);
         debug('Language detected reliably, setting spellchecker language to', spellcheckerLocale);
         if (spellcheckerLocale) {
-          switchDict(spellcheckerLocale);
+          switchDict([
+            ...this.spellcheckerLanguage,
+            spellcheckerLocale,
+          ]);
         }
       }
     }, 225));
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index a33a506b2..287c9cf11 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,53 +1,42 @@
 import { webFrame } from 'electron';
-import { SpellCheckHandler } from 'electron-spellchecker';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 import setupContextMenu from './contextMenu';
 
 const debug = require('debug')('Franz:spellchecker');
 
-let handler;
-let currentDict;
 let _isEnabled = false;
 
-export async function switchDict(locale) {
-  try {
-    debug('Trying to load dictionary', locale);
-
-    if (!handler) {
-      console.warn('SpellcheckHandler not initialized');
-
-      return;
-    }
-
-    if (locale === currentDict) {
-      console.warn('Dictionary is already used', currentDict);
+export async function switchDict(locales) {
+  const { platform } = process;
+  if (platform === 'darwin') {
+    // MacOS uses the build-in languages which cannot be changed
+    return;
+  }
 
-      return;
-    }
+  try {
+    debug('Trying to load dictionary', locales);
 
-    handler.switchLanguage(locale);
+    webFrame.session.setSpellCheckerLanguages([...locales, 'en-US']);
 
-    debug('Switched dictionary to', locale);
+    debug('Switched dictionary to', locales);
 
-    currentDict = locale;
     _isEnabled = true;
   } catch (err) {
     console.error(err);
   }
 }
 
-export default async function initialize(languageCode = 'en-us') {
+export default async function initialize(languages = ['en-us']) {
   try {
-    handler = new SpellCheckHandler();
-    setTimeout(() => handler.attachToInput(), 1000);
-    const locale = languageCode.toLowerCase();
-
     debug('Init spellchecker');
 
-    switchDict(locale);
-    setupContextMenu(handler);
+    switchDict([
+      navigator.language,
+      ...languages,
+    ]);
+    setupContextMenu();
 
-    return handler;
+    return true;
   } catch (err) {
     console.error(err);
     return false;
@@ -60,10 +49,7 @@ export function isEnabled() {
 
 export function disable() {
   if (isEnabled()) {
-    handler.unsubscribe();
-    webFrame.setSpellCheckProvider(currentDict, { spellCheck: () => true });
-    _isEnabled = false;
-    currentDict = null;
+    // TODO: How to disable build-in spellchecker?
   }
 }