From 38737af813f62e679678cf30126d26ec76c3ed04 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Wed, 10 Dec 2014 17:54:35 -0800
Subject: [PATCH] CRM-15578 - Implement crmUiRichtext; incorporate into
 crmMailing2 UI.

---
 js/angular-crm-ui.js                      | 31 ++++++++++++++++++
 js/angular-crmMailing2-directives.js      | 38 ++++++++++++++---------
 partials/crmMailing2/field/body_html.html |  4 +--
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index 5d895fa350..1ea32df674 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -220,6 +220,37 @@
       };
     })
 
+    // example: <textarea crm-ui-richtext name="body_html" ng-model="mailing.body_html"></textarea>
+    .directive('crmUiRichtext', function (crmUiId, $timeout) {
+      return {
+        require: '?ngModel',
+        link: function (scope, elm, attr, ngModel) {
+          crmUiId(elm);
+          var ck = CKEDITOR.replace(elm[0]);
+
+          if (!ngModel) {
+            return;
+          }
+
+          ck.on('pasteState', function () {
+            scope.$apply(function () {
+              ngModel.$setViewValue(ck.getData());
+            });
+          });
+
+          ck.on('insertText', function () {
+            $timeout(function () {
+              ngModel.$setViewValue(ck.getData());
+            });
+          });
+
+          ngModel.$render = function (value) {
+            ck.setData(ngModel.$viewValue);
+          };
+        }
+      };
+    })
+
     // example: <a crm-ui-lock binding="mymodel.boolfield"></a>
     // example: <a crm-ui-lock
     //            binding="mymodel.boolfield"
diff --git a/js/angular-crmMailing2-directives.js b/js/angular-crmMailing2-directives.js
index 3ca02671e4..c2fcd2010c 100644
--- a/js/angular-crmMailing2-directives.js
+++ b/js/angular-crmMailing2-directives.js
@@ -32,7 +32,7 @@
 
   // example: <input name="subject" /> <input crm-mailing-token crm-for="subject"/>
   // WISHLIST: Instead of global CRM.crmMailing.mailTokens, accept token list as an input
-  crmMailing2.directive('crmMailingToken', function () {
+  crmMailing2.directive('crmMailingToken', function (crmUiId) {
     return {
       scope: {
         crmFor: '@'
@@ -44,29 +44,39 @@
         var form = $(element).closest('form');
         var crmForEl = $('input[name="' + attrs.crmFor + '"],textarea[name="' + attrs.crmFor + '"]', form);
         if (form.length != 1 || crmForEl.length != 1) {
-          if (console.log)
+          if (console.log) {
             console.log('crmMailingToken cannot be matched to input element. Expected to find one form and one input.', form.length, crmForEl.length);
+          }
           return;
         }
 
         // 2. Setup the token selector
-        $(element).select2({width: "10em",
+        $(element).select2({
+          width: "10em",
           dropdownAutoWidth: true,
           data: CRM.crmMailing.mailTokens,
           placeholder: ts('Insert')
         });
         $(element).on('select2-selecting', function (e) {
-          var origVal = crmForEl.val();
-          var origPos = crmForEl[0].selectionStart;
-          var newVal = origVal.substring(0, origPos) + e.val + origVal.substring(origPos, origVal.length);
-          crmForEl.val(newVal);
-          var newPos = (origPos + e.val.length);
-          crmForEl[0].selectionStart = newPos;
-          crmForEl[0].selectionEnd = newPos;
-
-          $(element).select2('close').select2('val', '');
-          crmForEl.triggerHandler('change');
-          crmForEl.focus();
+          var id = crmUiId(crmForEl);
+          if (CKEDITOR.instances[id]) {
+            CKEDITOR.instances[id].insertText(e.val);
+            $(element).select2('close').select2('val', '');
+            CKEDITOR.instances[id].focus();
+          }
+          else {
+            var origVal = crmForEl.val();
+            var origPos = crmForEl[0].selectionStart;
+            var newVal = origVal.substring(0, origPos) + e.val + origVal.substring(origPos, origVal.length);
+            crmForEl.val(newVal);
+            var newPos = (origPos + e.val.length);
+            crmForEl[0].selectionStart = newPos;
+            crmForEl[0].selectionEnd = newPos;
+
+            $(element).select2('close').select2('val', '');
+            crmForEl.triggerHandler('change');
+            crmForEl.focus();
+          }
 
           e.preventDefault();
         });
diff --git a/partials/crmMailing2/field/body_html.html b/partials/crmMailing2/field/body_html.html
index 8ad1f33a70..5b30119e9c 100644
--- a/partials/crmMailing2/field/body_html.html
+++ b/partials/crmMailing2/field/body_html.html
@@ -1,9 +1,9 @@
 <!--
 Controller: EditMailingCtrl
-Required vars: mailing, crmMailingConst
+Required vars: mailing
 -->
 <div style="float: right;">
   <input crm-mailing-token crm-for="body_html" />
 </div>
 
-<textarea name="body_html" ng-model="mailing.body_html"></textarea>
\ No newline at end of file
+<textarea crm-ui-richtext name="body_html" ng-model="mailing.body_html"></textarea>
-- 
2.25.1