From 07c06db69dcc7371dff07835adad89903a6a10ae Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 15 May 2020 11:03:39 -0400
Subject: [PATCH] refactor(mail(js)): replace ckEditor directive by sgCkeditor
 component

This refactoring

 1. simplifies updating the CKEditor source code;
 2. allows many instances of the CKEditor on the same page;
 3. fixes the cursor positioning on focus.
---
 UI/MailerUI/UIxMailEditor.m                   |   5 -
 .../ContactsUI/UIxContactFoldersView.wox      |   2 +-
 UI/Templates/MailerUI/UIxMailEditor.wox       |  14 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |   2 +-
 UI/Templates/MailerUI/UIxMailPopupView.wox    |   2 +-
 .../PreferencesUI/UIxAccountEditor.wox        |  15 +-
 UI/Templates/PreferencesUI/UIxPreferences.wox |   2 +-
 UI/Templates/SchedulerUI/UIxCalMainView.wox   |   2 +-
 .../js/Common/sgCkeditor.component.js         | 414 ++++++++++++++++++
 .../js/Contacts/Contacts.app.js               |   2 +-
 UI/WebServerResources/js/Mailer/Mailer.app.js |   2 +-
 .../js/Mailer/Mailer.popup.js                 |   2 +-
 .../js/Mailer/MessageEditorController.js      |  19 +-
 .../js/Preferences/AccountDialogController.js |   7 +
 .../js/Preferences/Preferences.app.js         |   2 +-
 .../js/Scheduler/Scheduler.app.js             |   2 +-
 .../js/vendor/ckeditor/ck.js                  | 132 ------
 17 files changed, 461 insertions(+), 165 deletions(-)
 create mode 100644 UI/WebServerResources/js/Common/sgCkeditor.component.js
 delete mode 100644 UI/WebServerResources/js/vendor/ckeditor/ck.js

diff --git a/UI/MailerUI/UIxMailEditor.m b/UI/MailerUI/UIxMailEditor.m
index cbd1a0918..aac35dab2 100644
--- a/UI/MailerUI/UIxMailEditor.m
+++ b/UI/MailerUI/UIxMailEditor.m
@@ -203,11 +203,6 @@ static NSArray *infoKeys = nil;
   return [[ud mailComposeMessageType] isEqualToString: @"html"];
 }
 
-- (NSString *) editorClass
-{
-  return ([self isHTML]? @"ck-editor" : @"plain-text");
-}
-
 - (NSString *) itemPriorityText
 {
   return [self labelForKey: [NSString stringWithFormat: @"%@", [item lowercaseString]]];
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 4c0e118ea..852f9d21c 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, Common.js, Preferences.services.js, Mailer.services.js, Contacts.js, Contacts.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
+    const:jsFiles="vendor/ckeditor/ckeditor.js, Common/sgCkeditor.component.js, Common.js, Preferences.services.js, Mailer.services.js, Contacts.js, Contacts.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
   <script type="text/javascript">
     var contactFolders = <var:string value="contactFolders.jsonRepresentation" const:escapeHTML="NO" />;
   </script>
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index a1eac26e1..2ffb798cc 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -264,18 +264,22 @@
 
         <!-- MESSAGE CONTENT -->
         <md-input-container class="md-block sg-mail-editor-content">
-          <textarea name="content" var:class="editorClass"
+          <textarea name="content" class="plain-text"
+                    ng-if="editor.composeType == 'text'"
                     rows="9"
-                    ck-locale="editor.localeCode"
-                    ck-margin="16px"
-                    ck-focus="editor.onHTMLFocus($event)"
                     ng-model="editor.message.editable.text"
                     ng-focus="editor.onTextFocus($event)"
                     md-autofocus="::!editor.isNew()"
                     md-no-resize="md-no-resize"
                     md-no-autogrow="md-no-autogrow"
                     sg-autogrow="true"
-                    md-detect-hidden="md-detect-hidden" />
+                    md-detect-hidden="md-detect-hidden"><!-- plain text editor --></textarea>
+          <sg-ckeditor id="message-content"
+                       ng-if="editor.composeType == 'html'"
+                       config="editor.ckConfig"
+                       on-instance-ready="editor.onHTMLReady($editor)"
+                       on-focus="editor.onHTMLFocus($editor)"
+                       ng-model="editor.message.editable.text"><!-- HTML editor --></sg-ckeditor>
         </md-input-container>
       </md-dialog-content>
 
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index f62b760f5..5041e86c0 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.js, Mailer.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
+    const:jsFiles="vendor/ckeditor/ckeditor.js, Common/sgCkeditor.component.js, Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.js, Mailer.services.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
   <script type="text/javascript">
     var mailAccounts = <var:string value="mailAccounts" const:escapeHTML="NO" />;
     var userNames = <var:string value="userNames" const:escapeHTML="NO" />;
diff --git a/UI/Templates/MailerUI/UIxMailPopupView.wox b/UI/Templates/MailerUI/UIxMailPopupView.wox
index abcd3df67..ad3ce66ce 100644
--- a/UI/Templates/MailerUI/UIxMailPopupView.wox
+++ b/UI/Templates/MailerUI/UIxMailPopupView.wox
@@ -9,7 +9,7 @@
     className="UIxPageFrame"
     title="title"
     const:popup="YES"
-    const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
+    const:jsFiles="Common.js, Preferences.services.js, Contacts.services.js, Scheduler.services.js, Mailer.app.popup.js, Mailer.services.js, vendor/ckeditor/ckeditor.js, Common/sgCkeditor.component.js, vendor/angular-file-upload.min.js, vendor/FileSaver.min.js">
 
   <main class="layout-fill" ng-controller="navController">
     <div id="detailView" class="view-detail md-default-theme md-background md-bg md-hue-2"
diff --git a/UI/Templates/PreferencesUI/UIxAccountEditor.wox b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
index b3dec3f18..f7f22b05e 100644
--- a/UI/Templates/PreferencesUI/UIxAccountEditor.wox
+++ b/UI/Templates/PreferencesUI/UIxAccountEditor.wox
@@ -122,19 +122,16 @@
             <md-input-container class="md-block md-flex"
                                 ng-if="$AccountDialogController.defaults.SOGoMailComposeMessageType == 'text'">
               <label><var:string label:value="Signature"/></label>
-              <textarea ng-model="$AccountDialogController.account.identities[0].signature"><!-- signature --></textarea>
+              <textarea
+                  ng-model="$AccountDialogController.account.identities[0].signature"><!-- plain text editor --></textarea>
             </md-input-container>
             <div class="pseudo-input-container"
                  ng-if="$AccountDialogController.defaults.SOGoMailComposeMessageType == 'html'">
               <label class="pseudo-input-label"><var:string label:value="Signature"/></label>
-              <textarea class="ck-editor"
-                        ck-locale="$AccountDialogController.defaults.LocaleCode"
-                        ck-options="{ 'autoGrow_minHeight': 70,
-                                    'toolbar': [['Bold', 'Italic', '-', 'Link',
-                                    'Font','FontSize','-','TextColor',
-                                    'BGColor', 'Source']] }"
-                        ck-margin="8px"
-                        ng-model="$AccountDialogController.account.identities[0].signature"><!-- signature --></textarea>
+              <sg-ckeditor
+                  config="$AccountDialogController.ckConfig"
+                  ck-margin="8px"
+                  ng-model="$AccountDialogController.account.identities[0].signature"><!-- HTML editor --></sg-ckeditor>
             </div>
 
             <md-input-container class="md-block md-input-has-value">
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 2b42fccc1..0aefc6f27 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, vendor/qrcode.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">
+    const:jsFiles="vendor/ckeditor/ckeditor.js, Common/sgCkeditor.component.js, vendor/angular-file-upload.min.js, vendor/ng-sortable.min.js, vendor/qrcode.min.js, Common.js, Preferences.js, Preferences.services.js, Mailer.services.js, Contacts.services.js">
 
   <main layout-fill="layout-fill" ui-view="preferences"
         ng-controller="navController"><!-- preferences --> </main>
diff --git a/UI/Templates/SchedulerUI/UIxCalMainView.wox b/UI/Templates/SchedulerUI/UIxCalMainView.wox
index 5526b7e02..2e90d8ca5 100644
--- a/UI/Templates/SchedulerUI/UIxCalMainView.wox
+++ b/UI/Templates/SchedulerUI/UIxCalMainView.wox
@@ -8,7 +8,7 @@
     xmlns:label="OGo:label"
     className="UIxPageFrame"
     title="title"
-    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ckeditor/ck.js, vendor/ng-sortable.min.js, Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, vendor/angular-file-upload.min.js, Scheduler.js, Scheduler.services.js,  vendor/FileSaver.min.js">
+    const:jsFiles="vendor/ckeditor/ckeditor.js, vendor/ng-sortable.min.js, Common/sgCkeditor.component.js, Common.js, Preferences.services.js, Contacts.services.js, Mailer.services.js, vendor/angular-file-upload.min.js, Scheduler.js, Scheduler.services.js,  vendor/FileSaver.min.js">
   <script type="text/javascript">
     var firstDayOfWeek = <var:string value="firstDayOfWeek"/>;
     var dayStartHour = <var:string value="dayStartHour"/>;
diff --git a/UI/WebServerResources/js/Common/sgCkeditor.component.js b/UI/WebServerResources/js/Common/sgCkeditor.component.js
new file mode 100644
index 000000000..0a574d5be
--- /dev/null
+++ b/UI/WebServerResources/js/Common/sgCkeditor.component.js
@@ -0,0 +1,414 @@
+/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+
+(function() {
+  'use strict';
+
+  /**
+   * sgCkeditor - A component for the CKEditor v4
+   * Based on https://github.com/jziggas/ng-ck/.
+   * @memberof SOGo.Common
+   * @example:
+     <sg-ckeditor
+        config="$ctrl.config"
+        on-instance-ready="$ctrl.onEditorReady($editor)"
+        on-focus="$ctrl.onEditorFocus($editor)"
+        ng-model="$ctrl.content"></sg-ckeditor>
+  */
+  function sgCkeditorConfigProvider() {
+    // Default plugins that have successfully passed through Angular's $sanitize service
+    var defaultConfiguration = {
+      toolbarGroups: [
+        { name: 'basicstyles', groups: [ 'basicstyles' ] },
+        { name: 'colors' },
+        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
+        { name: 'links' },
+        { name: 'insert' },
+        { name: 'editing', groups: [ 'spellchecker' ] },
+        { name: 'styles' },
+        { name: 'mode' }
+      ],
+
+      // The default plugins included in the basic setup define some buttons that
+      // are not needed in a basic editor. They are removed here.
+      removeButtons: 'Strike,Subscript,Superscript,BGColor,Anchor,Format,Image',
+
+      // Dialog windows are also simplified.
+      removeDialogTabs: 'link:advanced',
+
+      enterMode: CKEDITOR.ENTER_BR,
+      tabSpaces: 4,
+      // fullPage: true, include header and body
+      allowedContent: true, // don't filter tags
+      entities: false,
+
+      // Configure autogrow
+      // https://ckeditor.com/docs/ckeditor4/latest/guide/dev_autogrow.html
+      autoGrow_onStartup: true,
+      autoGrow_minHeight: 300,
+      autoGrow_bottomSpace: 0,
+      language: 'en',
+
+      // The Upload Image plugin requires a remote URL to be defined even though we won't use it
+      imageUploadUrl: '/SOGo/'
+    };
+
+    var events = [
+      'activeEnterModeChange',
+      'activeFilterChange',
+      'afterCommandExec',
+      'afterInsertHtml',
+      'afterPaste',
+      'afterPasteFromWord',
+      'afterSetData',
+      'afterUndoImage',
+      'ariaEditorHelpLabel',
+      'autogrow',
+      'beforeCommandExec',
+      'beforeDestroy',
+      'beforeGetData',
+      'beforeModeUnload',
+      'beforeSetMode',
+      'beforeUndoImage',
+      'blur',
+      'change',
+      'configLoaded',
+      'contentDirLoaded',
+      'contentDom',
+      'contentDomInvalidated',
+      'contentDomUnload',
+      'customConfigLoaded',
+      'dataFiltered',
+      'dataReady',
+      'destroy',
+      'dialogHide',
+      'dialogShow',
+      'dirChanged',
+      'doubleclick',
+      'dragend',
+      'dragstart',
+      'drop',
+      'elementsPathUpdate',
+      'fileUploadRequest',
+      'fileUploadResponse',
+      'floatingSpaceLayout',
+      'focus',
+      'getData',
+      'getSnapshot',
+      'insertElement',
+      'insertHtml',
+      'insertText',
+      'instanceReady',
+      'key',
+      'langLoaded',
+      'loadSnapshot',
+      'loaded',
+      'lockSnapshot',
+      'maximize',
+      'menuShow',
+      'mode',
+      'notificationHide',
+      'notificationShow',
+      'notificationUpdate',
+      'paste',
+      'pasteFromWord',
+      'pluginsLoaded',
+      'readOnly',
+      'removeFormatCleanup',
+      'required',
+      'resize',
+      'save',
+      'saveSnapshot',
+      'selectionChange',
+      'setData',
+      'stylesSet',
+      'template',
+      'toDataFormat',
+      'toHtml',
+      'unlockSnapshot',
+      'updateSnapshot',
+      'widgetDefinition'
+    ];
+
+    var config = angular.copy(defaultConfiguration);
+
+    this.$get = function () {
+      return {
+        config: config,
+        events: events
+      }
+    };
+  }
+
+  var sgCkeditorComponent = {
+    controllerAs: 'vm',
+    require: {
+      ngModelCtrl: 'ngModel'
+    },
+    bindings: {
+      checkTextLength: '<?',
+      config: '<?',
+      maxLength: '<?',
+      minLength: '<?',
+      ckMargin: '@?',
+      onActiveEnterModeChange: '&?',
+      onActiveFilterChange: '&?',
+      onAfterCommandExec: '&?',
+      onAfterInsertHtml: '&?',
+      onAfterPaste: '&?',
+      onAfterPasteFromWord: '&?',
+      onAfterSetData: '&?',
+      onAfterUndoImage: '&?',
+      onAriaEditorHelpLabel: '&?',
+      onAutogrow: '&?',
+      onBeforeCommandExec: '&?',
+      onBeforeDestroy: '&?',
+      onBeforeGetData: '&?',
+      onBeforeModeUnload: '&?',
+      onBeforeSetMode: '&?',
+      onBeforeUndoImage: '&?',
+      onBlur: '&?',
+      onChange: '&?',
+      onConfigLoaded: '&?',
+      onContentChanged: '&?', // Not CKEditor API
+      onContentDirLoaded: '&?',
+      onContentDom: '&?',
+      onContentDomInvalidated: '&?',
+      onContentDomUnload: '&?',
+      onCustomConfigLoaded: '&?',
+      onDataFiltered: '&?',
+      onDataReady: '&?',
+      onDestroy: '&?', // Not sure if this works because of the cleanup done in $onDestroy. Needs testing.
+      onDialogHide: '&?',
+      onDialogShow: '&?',
+      onDirChanged: '&?',
+      onDoubleclick: '&?',
+      onDragend: '&?',
+      onDragstart: '&?',
+      onDrop: '&?',
+      onElementsPathUpdate: '&?',
+      onFileUploadRequest: '&?',
+      onFileUploadResponse: '&?',
+      onFloatingSpaceLayout: '&?',
+      onFocus: '&?',
+      onGetData: '&?',
+      onGetSnapshot: '&?',
+      onInsertElement: '&?',
+      onInsertHtml: '&?',
+      onInsertText: '&?',
+      onInstanceReady: '&?',
+      onKey: '&?',
+      onLangLoaded: '&?',
+      onLoadSnapshot: '&?',
+      onLoaded: '&?',
+      onLockSnapshot: '&?',
+      onMaximize: '&?',
+      onMenuShow: '&?',
+      onMode: '&?',
+      onNotificationHide: '&?',
+      onNotificationShow: '&?',
+      onNotificationUpdate: '&?',
+      onPaste: '&?',
+      onPasteFromWord: '&?',
+      onPluginsLoaded: '&?',
+      onReadOnly: '&?',
+      onRemoveFormatCleanup: '&?',
+      onRequired: '&?',
+      onResize: '&?',
+      onSave: '&?',
+      onSaveSnapshot: '&?',
+      onSelectionChange: '&?',
+      onSetData: '&?',
+      onStylesSet: '&?',
+      onTemplate: '&?',
+      onToDataFormat: '&?',
+      onToHtml: '&?',
+      onUnlockSnapshot: '&?',
+      onUpdateSnapshot: '&?',
+      onWidgetDefinition: '&?',
+      placeholder: '<?',
+      readOnly: '<?',
+      required: '<?'
+    },
+    template: '<textarea ng-attr-placeholder="{{vm.placeholder}}"></textarea>',
+    controller: sgCkeditorController
+  };
+
+  sgCkeditorController.$inject = ['$element', '$scope', '$parse', '$timeout', 'sgCkeditorConfig'];
+  function sgCkeditorController ($element, $scope, $parse, $timeout, sgCkeditorConfig) {
+    var vm = this;
+    var config;
+    var content;
+    var editor;
+    var editorElement;
+    var editorChanged = false;
+    var modelChanged = false;
+
+    this.$onInit = function () {
+      vm.ngModelCtrl.$render = function () {
+        if (editor) {
+          editor.setData(vm.ngModelCtrl.$viewValue, {
+            noSnapshot: true,
+            callback: function () {
+              editor.fire('updateSnapshot')
+            }
+          })
+        }
+      };
+
+      config = vm.config ? angular.merge(sgCkeditorConfig.config, vm.config) : sgCkeditorConfig.config;
+
+      if (config.language) {
+        // Pickup the first matching language supported by SCAYT
+        // See http://docs.ckeditor.com/#!/guide/dev_howtos_scayt
+        config.scayt_sLang = _.find(['en_US', 'en_GB', 'pt_BR', 'da_DK', 'nl_NL', 'en_CA', 'fi_FI', 'fr_FR', 'fr_CA', 'de_DE', 'el_GR', 'it_IT', 'nb_NO', 'pt_PT', 'es_ES', 'sv_SE'], function(sLang) {
+          return sLang.lastIndexOf(config.language, 0) == 0;
+        }) || 'en_US';
+
+        // Disable caching of the language
+        // See https://github.com/WebSpellChecker/ckeditor-plugin-scayt/issues/126
+        config.scayt_disableOptionsStorage = 'lang';
+      }
+
+      if (vm.ckMargin) {
+        // Set the margin of the iframe editable content
+        CKEDITOR.addCss('.cke_editable { margin-top: ' + vm.ckMargin +
+                        '; margin-left: ' + vm.ckMargin +
+                        '; margin-right: ' + vm.ckMargin + '; }');
+      }
+    };
+
+    this.$postLink = function () {
+      editorElement = $element[0].children[0];
+      editor = CKEDITOR.replace(editorElement, config);
+
+      editor.on('instanceReady', onInstanceReady);
+      editor.on('pasteState', onEditorChange);
+      editor.on('change', onEditorChange);
+      editor.on('paste', onEditorPaste);
+      editor.on('fileUploadRequest', onEditorFileUploadRequest);
+
+      if (content) {
+        modelChanged = true
+        editor.setData(content, {
+          noSnapshot: true,
+          callback: function () {
+            editor.fire('updateSnapshot')
+          }
+        });
+      }
+    };
+
+    this.$onChanges = function (changes) {
+      if (
+        changes.ngModel &&
+          changes.ngModel.currentValue !== changes.ngModel.previousValue
+      ) {
+        content = changes.ngModel.currentValue;
+        if (editor && !editorChanged) {
+          if (content) {
+            editor.setData(content, {
+              noSnapshot: true,
+              callback: function () {
+                editor.fire('updateSnapshot')
+              }
+            });
+            modelChanged = true;
+          }
+        }
+        editorChanged = false;
+      }
+      if (editor && changes.readOnly) {
+        editor.setReadOnly(changes.readOnly.currentValue);
+      }
+    }
+
+    this.$onDestroy = function () {
+      editor.destroy();
+    }
+
+    function onInstanceReady (event) {
+      // Register binded callbacks for all available events
+      _.forEach(_.filter(sgCkeditorConfig.events, function (eventName) {
+        return eventName != 'instanceReady';
+      }), function (eventName) {
+        var callbackName = 'on' + eventName[0].toUpperCase() + eventName.slice(1);
+        if (vm[callbackName]) {
+          editor.on(eventName, function (event) {
+            vm[callbackName]({
+              '$event': event,
+              '$editor': editor
+            });
+          });
+        }
+      });
+
+      if (vm.onInstanceReady) {
+        vm.onInstanceReady({
+          '$event': event,
+          '$editor': editor
+        });
+      }
+
+      // vm.ngModelCtrl.$render();
+    }
+
+    function onEditorChange () {
+      var html = editor.getData();
+      var text = editor.document.getBody().getText();
+
+      if (text === '\n') {
+        text = '';
+      }
+
+      if (!modelChanged && html !== vm.ngModelCtrl.$viewValue) {
+        editorChanged = true;
+        vm.ngModelCtrl.$setViewValue(html);
+        validate(vm.checkTextLength ? text : html);
+        if (vm.onContentChanged) {
+          vm.onContentChanged({
+            'editor': editor,
+            'html': html,
+            'text': text
+          });
+        }
+      }
+      modelChanged = false;
+    }
+
+    function onEditorPaste (event) {
+      var html;
+      if (event.data.type == 'html') {
+        html = event.data.dataValue;
+        // Remove images to avoid ghost image in Firefox; images will be handled by the Image Upload plugin
+        event.data.dataValue = html.replace(/<img( [^>]*)?>/gi, '');
+      }
+    }
+
+    function onEditorFileUploadRequest (event) {
+      // Intercept the request when an image is pasted, keep an inline base64 version only.
+      var data, img;
+      data = event.data.fileLoader.data;
+      img = editor.document.createElement('img');
+      img.setAttribute('src', data);
+      editor.insertElement(img);
+      event.cancel();
+    }
+
+    function validate (body) {
+      if (vm.maxLength) {
+        vm.ngModelCtrl.$setValidity('maxlength', body.length > vm.maxLength + 1);
+      }
+      if (vm.minLength) {
+        vm.ngModelCtrl.$setValidity('minlength', body.length <= vm.minLength);
+      }
+      if (vm.required) {
+        vm.ngModelCtrl.$setValidity('required', body.length > 0);
+      }
+    }
+  }
+
+  angular
+    .module('sgCkeditor', [])
+    .provider('sgCkeditorConfig', sgCkeditorConfigProvider)
+    .component('sgCkeditor', sgCkeditorComponent);
+})();
diff --git a/UI/WebServerResources/js/Contacts/Contacts.app.js b/UI/WebServerResources/js/Contacts/Contacts.app.js
index 51263aaa4..52510f927 100644
--- a/UI/WebServerResources/js/Contacts/Contacts.app.js
+++ b/UI/WebServerResources/js/Contacts/Contacts.app.js
@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.ContactsUI', ['ngCookies', 'ui.router', 'angularFileUpload', 'ck', 'SOGo.Common', 'SOGo.PreferencesUI', 'SOGo.MailerUI'])
+  angular.module('SOGo.ContactsUI', ['ngCookies', 'ui.router', 'angularFileUpload', 'sgCkeditor', 'SOGo.Common', 'SOGo.PreferencesUI', 'SOGo.MailerUI'])
     .config(configure)
     .run(runBlock);
 
diff --git a/UI/WebServerResources/js/Mailer/Mailer.app.js b/UI/WebServerResources/js/Mailer/Mailer.app.js
index 924a2bac5..11312b836 100644
--- a/UI/WebServerResources/js/Mailer/Mailer.app.js
+++ b/UI/WebServerResources/js/Mailer/Mailer.app.js
@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.MailerUI', ['ngCookies', 'ui.router', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.ContactsUI', 'SOGo.SchedulerUI', 'ngAnimate', 'SOGo.PreferencesUI'])
+  angular.module('SOGo.MailerUI', ['ngCookies', 'ui.router', 'sgCkeditor', 'angularFileUpload', 'SOGo.Common', 'SOGo.ContactsUI', 'SOGo.SchedulerUI', 'ngAnimate', 'SOGo.PreferencesUI'])
     .config(configure)
     .run(runBlock);
 
diff --git a/UI/WebServerResources/js/Mailer/Mailer.popup.js b/UI/WebServerResources/js/Mailer/Mailer.popup.js
index bbbb12696..980078ab9 100644
--- a/UI/WebServerResources/js/Mailer/Mailer.popup.js
+++ b/UI/WebServerResources/js/Mailer/Mailer.popup.js
@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.MailerUI', ['ngCookies', 'ui.router', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.ContactsUI', 'SOGo.SchedulerUI', 'ngAnimate', 'SOGo.PreferencesUI'])
+  angular.module('SOGo.MailerUI', ['ngCookies', 'ui.router', 'sgCkeditor', 'angularFileUpload', 'SOGo.Common', 'SOGo.ContactsUI', 'SOGo.SchedulerUI', 'ngAnimate', 'SOGo.PreferencesUI'])
     .config(configure)
     .run(runBlock)
     .controller('MessageEditorControllerPopup', MessageEditorControllerPopup);
diff --git a/UI/WebServerResources/js/Mailer/MessageEditorController.js b/UI/WebServerResources/js/Mailer/MessageEditorController.js
index f6fa6330a..7d4cf4e0f 100644
--- a/UI/WebServerResources/js/Mailer/MessageEditorController.js
+++ b/UI/WebServerResources/js/Mailer/MessageEditorController.js
@@ -40,8 +40,12 @@
       if (Preferences.defaults.SOGoMailAutoSave)
         // Enable auto-save of draft
         this.autosave = $timeout(this.autosaveDrafts, Preferences.defaults.SOGoMailAutoSave*1000*60);
+
       // Set the locale of CKEditor
       this.localeCode = Preferences.defaults.LocaleCode;
+      this.ckConfig = { language: Preferences.defaults.LocaleCode };
+
+      this.composeType = Preferences.defaults.SOGoMailComposeMessageType;
 
       this.replyPlacement = Preferences.defaults.SOGoMailReplyPlacement;
       if (this.message.origin && this.message.origin.action == 'forward') {
@@ -415,14 +419,21 @@
       }
     };
 
-    this.onHTMLFocus = function ($event) {
-      var caretAtTop = (this.replyPlacement == 'above');
+    this.onHTMLReady = function ($editor) {
+      if (!this.isNew()) {
+        onCompletePromise().then(function() {
+          $editor.focus();
+        });
+      }
+    };
 
+    this.onHTMLFocus = function (editor) {
       if (this.firstFocus) {
         onCompletePromise().then(function(element) {
-          var selected = $event.editor.getSelection(),
+          var caretAtTop = (vm.replyPlacement == 'above'),
+              selected = editor.getSelection(),
               selected_ranges = selected.getRanges(),
-              children = $event.editor.document.getBody().getChildren(),
+              children = editor.document.getBody().getChildren(),
               node;
 
           if (caretAtTop) {
diff --git a/UI/WebServerResources/js/Preferences/AccountDialogController.js b/UI/WebServerResources/js/Preferences/AccountDialogController.js
index 335a8f3ae..7cc764257 100644
--- a/UI/WebServerResources/js/Preferences/AccountDialogController.js
+++ b/UI/WebServerResources/js/Preferences/AccountDialogController.js
@@ -23,6 +23,13 @@
     vm.cancel = cancel;
     vm.save = save;
     vm.hostnameRE = accountId > 0 ? /^(?!(127\.0\.0\.1|localhost(?:\.localdomain)?)$)/ : /./;
+    vm.ckConfig = {
+      'autoGrow_minHeight': 70,
+      'toolbar': [['Bold', 'Italic', '-', 'Link',
+                   'Font','FontSize','-','TextColor',
+                   'BGColor', 'Source']],
+      language: defaults.LocaleCode
+    };
 
     if (!vm.account.encryption)
       vm.account.encryption = "none";
diff --git a/UI/WebServerResources/js/Preferences/Preferences.app.js b/UI/WebServerResources/js/Preferences/Preferences.app.js
index 098e6115e..4eb1cea78 100644
--- a/UI/WebServerResources/js/Preferences/Preferences.app.js
+++ b/UI/WebServerResources/js/Preferences/Preferences.app.js
@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.PreferencesUI', ['ui.router', 'ck', 'angularFileUpload', 'SOGo.Common', 'SOGo.MailerUI', 'SOGo.ContactsUI', 'SOGo.Authentication', 'as.sortable'])
+  angular.module('SOGo.PreferencesUI', ['ui.router', 'sgCkeditor', 'angularFileUpload', 'SOGo.Common', 'SOGo.MailerUI', 'SOGo.ContactsUI', 'SOGo.Authentication', 'as.sortable'])
     .config(configure)
     .run(runBlock);
 
diff --git a/UI/WebServerResources/js/Scheduler/Scheduler.app.js b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
index 83c704c29..84ffd4115 100644
--- a/UI/WebServerResources/js/Scheduler/Scheduler.app.js
+++ b/UI/WebServerResources/js/Scheduler/Scheduler.app.js
@@ -4,7 +4,7 @@
 (function() {
   'use strict';
 
-  angular.module('SOGo.SchedulerUI', ['ngCookies', 'ui.router', 'angularFileUpload', 'ck', 'SOGo.Common', 'SOGo.PreferencesUI', 'SOGo.ContactsUI', 'SOGo.MailerUI', 'as.sortable'])
+  angular.module('SOGo.SchedulerUI', ['ngCookies', 'ui.router', 'angularFileUpload', 'sgCkeditor', 'SOGo.Common', 'SOGo.PreferencesUI', 'SOGo.ContactsUI', 'SOGo.MailerUI', 'as.sortable'])
     .config(configure)
     .run(runBlock);
 
diff --git a/UI/WebServerResources/js/vendor/ckeditor/ck.js b/UI/WebServerResources/js/vendor/ckeditor/ck.js
deleted file mode 100644
index 50ac94000..000000000
--- a/UI/WebServerResources/js/vendor/ckeditor/ck.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
-/* JavaScript for CKEditor module */
-
-(function() {
-  'use strict';
-
-  ckEditor.$inject = ['$parse'];
-  function ckEditor($parse) {
-    var calledEarly, loaded;
-    loaded = false;
-    calledEarly = false;
-
-    return {
-      restrict: 'C',
-      require: '?ngModel',
-      compile: function(element, attributes, transclude) {
-        var loadIt, local;
-
-        local = this;
-        loadIt = function() {
-          return calledEarly = true;
-        };
-
-        element.ready(function() {
-          return loadIt();
-        });
-
-        return {
-          post: function($scope, element, attributes, controller) {
-            if (calledEarly) {
-              return local.link($scope, element, attributes, controller);
-            }
-            loadIt = (function($scope, element, attributes, controller) {
-              return function() {
-                local.link($scope, element, attributes, controller);
-              };
-            })($scope, element, attributes, controller);
-          }
-        };
-      },
-
-      link: function($scope, elm, attr, ngModel) {
-        var ck, options = {}, locale, margin;
-        if (!ngModel) {
-          return;
-        }
-
-        if (calledEarly && !loaded) {
-          return loaded = true;
-        }
-        loaded = false;
-
-        if (attr.ckOptions)
-          options = angular.fromJson(attr.ckOptions.replace(/'/g, "\""));
-
-        if (attr.ckLocale) {
-          locale = $parse(attr.ckLocale)($scope);
-          options.language = locale;
-
-          // Pickup the first matching language supported by SCAYT
-          // See http://docs.ckeditor.com/#!/guide/dev_howtos_scayt
-          options.scayt_sLang = _.find(['en_US', 'en_GB', 'pt_BR', 'da_DK', 'nl_NL', 'en_CA', 'fi_FI', 'fr_FR', 'fr_CA', 'de_DE', 'el_GR', 'it_IT', 'nb_NO', 'pt_PT', 'es_ES', 'sv_SE'], function(sLang) {
-            return sLang.lastIndexOf(locale, 0) == 0;
-          }) || 'en_US';
-
-          // Disable caching of the language
-          // See https://github.com/WebSpellChecker/ckeditor-plugin-scayt/issues/126
-          options.scayt_disableOptionsStorage = 'lang';
-        }
-
-        if (attr.ckMargin) {
-          // Set the margin of the iframe editable content
-          margin = attr.ckMargin;
-          CKEDITOR.addCss('.cke_editable { margin-top: ' + margin +
-                          '; margin-left: ' + margin +
-                          '; margin-right: ' + margin + '; }');
-        }
-
-        // The Upload Image plugin requires a remote URL to be defined even though we won't use it
-        options.imageUploadUrl = '/SOGo/';
-
-        ck = CKEDITOR.replace(elm[0], options);
-
-        if (attr.mdAutofocus && $parse(attr.mdAutofocus)($scope)) {
-          // Autofocus is enabled
-          ck.on('instanceReady', function(event) {
-            ck.focus();
-          });
-          ck.on('focus', function(event) {
-            if (attr.ckFocus) {
-              $parse(attr.ckFocus)($scope, {'$event': event});
-            }
-          });
-        }
-
-        // Update the model whenever the content changes
-        ck.on('change', function() {
-          $scope.$apply(function() {
-            ngModel.$setViewValue(ck.getData());
-          });
-        });
-
-        ck.on('paste', function(event) {
-          var html;
-          if (event.data.type == 'html') {
-            html = event.data.dataValue;
-            // Remove images to avoid ghost image in Firefox; images will be handled by the Image Upload plugin
-            event.data.dataValue = html.replace(/<img( [^>]*)?>/gi, '');
-          }
-        });
-
-        // Intercept the request when an image is pasted, keep an inline base64 version only.
-        ck.on('fileUploadRequest', function(event) {
-          var data, img;
-          data = event.data.fileLoader.data;
-          img = ck.document.createElement('img');
-          img.setAttribute('src', data);
-          ck.insertElement(img);
-          event.cancel();
-        });
-
-        ngModel.$render = function(value) {
-          ck.setData(ngModel.$viewValue);
-        };
-      }
-    };
-  }
-
-  angular
-    .module('ck', [])
-    .directive('ckEditor', ckEditor);
-})();