18 files changed, 433 insertions, 61 deletions

diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index ab1604a27..383f38b16 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -45,13 +45,13 @@ export default class LocalApi {
     const s = session.fromPartition(`persist:service-${serviceId}`);
 
     debug('LocalApi::clearCache resolves', serviceId);
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 
   async clearAppCache() {
     const s = session.defaultSession;
 
     debug('LocalApi::clearCache clearAppCache');
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 }
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index f65f51346..e8df58a1e 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -12,6 +12,7 @@ import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
+import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 
 export default @observer class ServiceView extends Component {
   static propTypes = {
@@ -137,11 +138,16 @@ export default @observer class ServiceView extends Component {
                 type={service.restrictionType}
               />
             ) : (
-              <ServiceWebview
-                service={service}
-                setWebviewReference={setWebviewReference}
-                detachService={detachService}
-              />
+              <>
+                {service.recipe.id === 'franz-custom-website' && (
+                  <WebControlsScreen service={service} />
+                )}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewReference}
+                  detachService={detachService}
+                />
+              </>
             )}
           </>
         )}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 7252c695f..07bd17d9c 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -41,6 +41,7 @@ class ServiceWebview extends Component {
         }}
         onUpdateTargetUrl={this.updateTargetUrl}
         useragent={service.userAgent}
+        disablewebsecurity={service.recipe.disablewebsecurity}
         allowpopups
       />
     );
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index 49b970c97..c2bebf9bb 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -13,7 +13,7 @@ export default theme => ({
     display: 'flex',
   },
   modal: {
-    background: '#FFF',
+    background: theme.colorModalBackground,
     maxWidth: '90%',
     height: 'auto',
     margin: 'auto auto',
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d052da6f2..f24c0b044 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -35,9 +35,6 @@ const styles = theme => ({
 
     transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
 
-    '&:hover $closeTodosButton': {
-      opacity: 1,
-    },
     '& webview': {
       height: '100%',
     },
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index abf176604..4480b2545 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -162,6 +162,10 @@ export default class TodoStore extends FeatureStore {
         theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
+
+    this.webview.addEventListener('new-window', ({ url }) => {
+      this.actions.app.openExternalUrl({ url });
+    });
   };
 
   _goToService = ({ url, serviceId }) => {
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
new file mode 100644
index 000000000..03f601a17
--- /dev/null
+++ b/src/features/webControls/components/WebControls.js
@@ -0,0 +1,190 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+
+import {
+  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline,
+} from '@mdi/js';
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+    height: 50,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: [0, 20],
+
+    '& + div': {
+      height: 'calc(100% - 50px)',
+    },
+  },
+  button: {
+    width: 30,
+    height: 50,
+    transition: 'opacity 0.25s',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+
+    '&:disabled': {
+      opacity: 0.5,
+    },
+  },
+  icon: {
+    width: '20px !important',
+    height: 20,
+    marginTop: 5,
+  },
+  input: {
+    marginBottom: 0,
+    height: 'auto',
+    marginLeft: 10,
+    flex: 1,
+    border: 0,
+    padding: [4, 10],
+    borderRadius: theme.borderRadius,
+    background: theme.inputBackground,
+    color: theme.inputColor,
+  },
+  inputButton: {
+    color: theme.colorText,
+  },
+});
+
+@injectSheet(styles) @observer
+class WebControls extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    goHome: PropTypes.func.isRequired,
+    canGoBack: PropTypes.bool.isRequired,
+    goBack: PropTypes.func.isRequired,
+    canGoForward: PropTypes.bool.isRequired,
+    goForward: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    navigate: PropTypes.func.isRequired,
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const { url } = props;
+    const { editUrl } = state;
+
+    if (!editUrl) {
+      return {
+        inputUrl: url,
+        editUrl: state.editUrl,
+      };
+    }
+  }
+
+  inputRef = React.createRef();
+
+  state = {
+    inputUrl: '',
+    editUrl: false,
+  }
+
+  render() {
+    const {
+      classes,
+      goHome,
+      canGoBack,
+      goBack,
+      canGoForward,
+      goForward,
+      reload,
+      url,
+      navigate,
+    } = this.props;
+
+    const {
+      inputUrl,
+      editUrl,
+    } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <button
+          onClick={goHome}
+          type="button"
+          className={classes.button}
+        >
+          <Icon
+            icon={mdiHomeOutline}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goBack}
+          type="button"
+          className={classes.button}
+          disabled={!canGoBack}
+        >
+          <Icon
+            icon={mdiArrowLeft}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goForward}
+          type="button"
+          className={classes.button}
+          disabled={!canGoForward}
+        >
+          <Icon
+            icon={mdiArrowRight}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={reload}
+          type="button"
+          className={classes.button}
+        >
+          <Icon
+            icon={mdiReload}
+            className={classes.icon}
+          />
+        </button>
+        <input
+          value={editUrl ? inputUrl : url}
+          className={classes.input}
+          onChange={event => this.setState({
+            inputUrl: event.target.value,
+          })}
+          onFocus={(event) => {
+            event.target.select();
+            this.setState({
+              editUrl: true,
+            });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              this.setState({
+                editUrl: false,
+              });
+              navigate(inputUrl);
+              this.inputRef.current.blur();
+            } else if (event.key === 'Escape') {
+              this.setState({
+                editUrl: false,
+                inputUrl: url,
+              });
+              event.target.blur();
+            }
+          }}
+          ref={this.inputRef}
+        />
+      </div>
+    );
+  }
+}
+
+export default WebControls;
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
new file mode 100644
index 000000000..1452d5a3d
--- /dev/null
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import { autorun, observable } from 'mobx';
+import WebControls from '../components/WebControls';
+import ServicesStore from '../../../stores/ServicesStore';
+import Service from '../../../models/Service';
+
+const URL_EVENTS = [
+  'load-commit',
+  // 'dom-ready',
+  'will-navigate',
+  'did-navigate',
+  'did-navigate-in-page',
+];
+
+@inject('stores', 'actions') @observer
+class WebControlsScreen extends Component {
+  @observable url = '';
+
+  @observable canGoBack = false;
+
+  @observable canGoForward = false;
+
+  webview = null;
+
+  autorunDisposer = null;
+
+  componentDidMount() {
+    const { service } = this.props;
+
+    this.autorunDisposer = autorun(() => {
+      if (service.isAttached) {
+        this.webview = service.webview;
+
+        URL_EVENTS.forEach((event) => {
+          this.webview.addEventListener(event, (e) => {
+            if (!e.isMainFrame) return;
+
+            this.url = e.url;
+            this.canGoBack = this.webview.canGoBack();
+            this.canGoForward = this.webview.canGoForward();
+          });
+        });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer();
+  }
+
+  goHome() {
+    const { reloadActive } = this.props.actions.service;
+
+    if (!this.webview) return;
+
+    reloadActive();
+  }
+
+  reload() {
+    if (!this.webview) return;
+
+    this.webview.reload();
+  }
+
+  goBack() {
+    if (!this.webview) return;
+
+    this.webview.goBack();
+  }
+
+  goForward() {
+    if (!this.webview) return;
+
+    this.webview.goForward();
+  }
+
+  navigate(newUrl) {
+    if (!this.webview) return;
+
+    let url = newUrl;
+
+    try {
+      url = new URL(url).toString();
+    } catch (err) {
+      // eslint-disable-next-line no-useless-escape
+      if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) {
+        url = `http://${url}`;
+      } else {
+        url = `https://www.google.com/search?query=${url}`;
+      }
+    }
+
+    this.webview.loadURL(url);
+    this.url = url;
+  }
+
+  render() {
+    return (
+      <WebControls
+        goHome={() => this.goHome()}
+        reload={() => this.reload()}
+        canGoBack={this.canGoBack}
+        goBack={() => this.goBack()}
+        canGoForward={this.canGoForward}
+        goForward={() => this.goForward()}
+        navigate={url => this.navigate(url)}
+        url={this.url}
+      />
+    );
+  }
+}
+
+export default WebControlsScreen;
+
+WebControlsScreen.wrappedComponent.propTypes = {
+  service: PropTypes.instanceOf(Service).isRequired,
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    service: PropTypes.shape({
+      reloadActive: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/index.js b/src/index.js
index d9d51fd5b..7de7a5e1c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -331,22 +331,7 @@ app.on('login', (event, webContents, request, authInfo, callback) => {
   debug('browser login event', authInfo);
   event.preventDefault();
 
-  if (authInfo.isProxy && authInfo.scheme === 'basic') {
-    debug('Sending service echo ping');
-    webContents.send('get-service-id');
-
-    ipcMain.once('service-id', (e, id) => {
-      debug('Received service id', id);
-
-      const ps = proxySettings.get(id);
-      if (ps) {
-        debug('Sending proxy auth callback for service', id);
-        callback(ps.user, ps.password);
-      } else {
-        debug('No proxy auth config found for', id);
-      }
-    });
-  } else if (authInfo.scheme === 'basic') {
+  if (!authInfo.isProxy && authInfo.scheme === 'basic') {
     debug('basic auth handler', authInfo);
     basicAuthHandler(mainWindow, authInfo);
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index b72f0df96..32bd1644b 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -302,6 +302,9 @@ const _templateFactory = intl => [
         label: intl.formatMessage(menuItems.pasteAndMatchStyle),
         accelerator: 'Cmd+Shift+V',
         selector: 'pasteAndMatchStyle:',
+        click() {
+          getActiveWebview().pasteAndMatchStyle();
+        },
       },
       {
         label: intl.formatMessage(menuItems.delete),
@@ -867,6 +870,10 @@ export default class FranzMenu {
       checked: service.isActive,
       click: () => {
         this.actions.service.setActive({ serviceId: service.id });
+
+        if (isMac && i === 0) {
+          app.mainWindow.restore();
+        }
       },
     })));
 
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 97c02d194..1de46d2a3 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -29,7 +29,7 @@ export default class FranzTouchBar {
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
       const buttons = [];
-      this.stores.services.enabled.forEach(((service) => {
+      this.stores.services.allDisplayed.forEach(((service) => {
         buttons.push(new TouchBarButton({
           label: `${service.name}${service.unreadDirectMessageCount > 0
             ? ' 🔴' : ''} ${service.unreadDirectMessageCount === 0
@@ -42,7 +42,7 @@ export default class FranzTouchBar {
         }), new TouchBarSpacer({ size: 'small' }));
       }));
 
-      const touchBar = new TouchBar(buttons);
+      const touchBar = new TouchBar({ items: buttons });
       currentWindow.setTouchBar(touchBar);
     } else {
       currentWindow.setTouchBar(null);
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index b0d60e75e..00c0f699f 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -36,6 +36,8 @@ export default class Recipe {
 
   message = '';
 
+  disablewebsecurity = false;
+
   constructor(data) {
     if (!data) {
       throw Error('Recipe config not valid');
@@ -74,6 +76,8 @@ export default class Recipe {
     this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
     this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
 
+    this.disablewebsecurity = data.config.disablewebsecurity || this.disablewebsecurity;
+
     this.message = data.config.message || this.message;
   }
 
diff --git a/src/models/Service.js b/src/models/Service.js
index 848a84aa2..e45c39564 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -134,6 +134,9 @@ export default class Service {
       id: this.id,
       spellcheckerLanguage: this.spellcheckerLanguage,
       isDarkModeEnabled: this.isDarkModeEnabled,
+      team: this.team,
+      url: this.url,
+      hasCustomIcon: this.hasCustomIcon,
     };
   }
 
@@ -185,19 +188,24 @@ export default class Service {
     return userAgent;
   }
 
-  initializeWebViewEvents({ handleIPCMessage, openWindow }) {
+  initializeWebViewEvents({ handleIPCMessage, openWindow, stores }) {
+    const webContents = this.webview.getWebContents();
+
     this.webview.addEventListener('ipc-message', e => handleIPCMessage({
       serviceId: this.id,
       channel: e.channel,
       args: e.args,
     }));
 
-    this.webview.addEventListener('new-window', (event, url, frameName, options) => openWindow({
-      event,
-      url,
-      frameName,
-      options,
-    }));
+    this.webview.addEventListener('new-window', (event, url, frameName, options) => {
+      console.log('open window', event, url, frameName, options);
+      openWindow({
+        event,
+        url,
+        frameName,
+        options,
+      });
+    });
 
     this.webview.addEventListener('did-start-loading', (event) => {
       debug('Did start load', this.name, event);
@@ -231,6 +239,28 @@ export default class Service {
       debug('Service crashed', this.name);
       this.hasCrashed = true;
     });
+
+    webContents.on('login', (event, request, authInfo, callback) => {
+      // const authCallback = callback;
+      debug('browser login event', authInfo);
+      event.preventDefault();
+
+      if (authInfo.isProxy && authInfo.scheme === 'basic') {
+        debug('Sending service echo ping');
+        webContents.send('get-service-id');
+
+        debug('Received service id', this.id);
+
+        const ps = stores.settings.proxy[this.id];
+
+        if (ps) {
+          debug('Sending proxy auth callback for service', this.id);
+          callback(ps.user, ps.password);
+        } else {
+          debug('No proxy auth config found for', this.id);
+        }
+      }
+    });
   }
 
   initializeWebViewListener() {
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 315235ba4..0398b7533 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -23,6 +23,7 @@ import { getLocale } from '../helpers/i18n-helpers';
 
 import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
 import { isValidExternalURL } from '../helpers/url-helpers';
+import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Franz:AppStore');
 
@@ -327,6 +328,8 @@ export default class AppStore extends Store {
 
     await clearAppCache._promise;
 
+    await sleep(ms('1s'));
+
     this.getAppCacheSizeRequest.execute();
 
     this.isClearingAllCache = false;
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index d1fd2be3d..08befe4eb 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -345,6 +345,7 @@ export default class ServicesStore extends Store {
       service.initializeWebViewEvents({
         handleIPCMessage: this.actions.service.handleIPCMessage,
         openWindow: this.actions.service.openWindow,
+        stores: this.stores,
       });
       service.initializeWebViewListener();
     }
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index 83914f581..d3b976554 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -255,9 +255,9 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
       },
       {
         id: 'resetToDefault',
-        label: `Reset to system default (${SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
+        label: `Reset to system default (${defaultSpellcheckerLanguage === 'automatic' ? 'Automatic' : SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
         type: 'radio',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
+        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage || (defaultSpellcheckerLanguage !== 'automatic' && spellcheckerLanguage === 'automatic'),
         click() {
           debug('Resetting service spellchecker to system default');
           ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
@@ -297,12 +297,13 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
 };
 
 export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', (e, props) => {
+  webContents.on('context-menu', async (e, props) => {
     e.preventDefault();
 
     let suggestions = [];
     if (spellcheckProvider && props.misspelledWord) {
-      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
+      debug('Mispelled word', props.misspelledWord);
+      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
 
       debug('Suggestions', suggestions);
     }
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index c223b73de..353eb31fd 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -12,6 +12,7 @@ import contextMenu from './contextMenu';
 import './notifications';
 
 import { DEFAULT_APP_SETTINGS } from '../config';
+import { isDevMode } from '../environment';
 
 const debug = require('debug')('Franz:Plugin');
 
@@ -173,11 +174,17 @@ new RecipeController();
 // Patching window.open
 const originalWindowOpen = window.open;
 
+
 window.open = (url, frameName, features) => {
+  debug('window.open', url, frameName, features);
   // We need to differentiate if the link should be opened in a popup or in the systems default browser
-  if (!frameName && !features) {
+  if (!frameName && !features && typeof features !== 'string') {
     return ipcRenderer.sendToHost('new-window', url);
   }
 
   return originalWindowOpen(url, frameName, features);
 };
+
+if (isDevMode) {
+  window.log = console.log;
+}
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 9158b3b94..06cbd283a 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,6 +1,7 @@
 import { webFrame } from 'electron';
-import { SpellCheckerProvider } from 'electron-hunspell';
+import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
 import path from 'path';
+import { readFileSync } from 'fs';
 
 import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
@@ -10,18 +11,21 @@ const debug = require('debug')('Franz:spellchecker');
 let provider;
 let currentDict;
 let _isEnabled = false;
+let attached;
+
+const DEFAULT_LOCALE = 'en-us';
 
 async function loadDictionary(locale) {
   try {
     const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    await provider.loadDictionary(locale, `${fileLocation}.dic`, `${fileLocation}.aff`);
     debug('Loaded dictionary', locale, 'from', fileLocation);
+    return provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
   } catch (err) {
     console.error('Could not load dictionary', err);
   }
 }
 
-export async function switchDict(locale) {
+export async function switchDict(locale = DEFAULT_LOCALE) {
   try {
     debug('Trying to load dictionary', locale);
 
@@ -40,8 +44,8 @@ export async function switchDict(locale) {
     if (currentDict) {
       provider.unloadDictionary(locale);
     }
-    loadDictionary(locale);
-    provider.switchDictionary(locale);
+    await loadDictionary(locale);
+    await attached.switchLanguage(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -52,18 +56,32 @@ export async function switchDict(locale) {
   }
 }
 
-export default async function initialize(languageCode = 'en-us') {
+export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+
+  if (locales.length >= 1) {
+    return locales[0];
+  }
+
+  return null;
+}
+
+export default async function initialize(languageCode = DEFAULT_LOCALE) {
   try {
     provider = new SpellCheckerProvider();
-    const locale = languageCode.toLowerCase();
+    const locale = getSpellcheckerLocaleByFuzzyIdentifier(languageCode);
 
     debug('Init spellchecker');
     await provider.initialize();
-    // await loadDictionaries();
 
-    debug('Available spellchecker dictionaries', provider.availableDictionaries);
+    debug('Attaching spellcheck provider');
+    attached = await attachSpellCheckProvider(provider);
+
+    const availableDictionaries = await provider.getAvailableDictionaries();
 
-    switchDict(locale);
+    debug('Available spellchecker dictionaries', availableDictionaries);
+
+    await switchDict(locale);
 
     return provider;
   } catch (err) {
@@ -83,13 +101,3 @@ export function disable() {
     currentDict = null;
   }
 }
-
-export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
-
-  if (locales.length >= 1) {
-    return locales[0];
-  }
-
-  return null;
-}