feature: add emoji to rich textarea

src/cli/cms/editor/handlebars/printInput.js

@@ -91,6 +91,7 @@ export function createInputRich(attributes, inputClass, params) {
     { icon: "ti-link",               title: "Add link",               action: "insertLink",   param: "",         popup: "link" },
     { icon: "console",               title: "Code style",             action: "code",         param: "",                          key:"{code}" },
     { icon: "ti-image",              title: "media",                  action: "media",        param: "",         popup: "image" },
+    { icon: "ti-face-smile",         title: "smiley",                 action: "smiley",       param: "",         popup: "smiley" },
   ];
   if(params.toolbar !== '*') params.toolbar = params.toolbar.split(',')
   var inputRich = `<div class="wysiwyg-container rich">
@@ -100,7 +101,7 @@ export function createInputRich(attributes, inputClass, params) {
     if(params.toolbar === '*' || params.toolbar.indexOf(button.action) > -1){
       var hotkey = (button.hotkey != null) ? `hotkey="${button.hotkey}"` : ''
       var popup = (button.popup != null) ? `data-popup="${button.popup}"` : ''
-      if (button.action === 'image') button.action = 'insertImage'
+      if (button.popup === 'image') button.action = 'insertImage'
       if (button.action === 'list') button.action = 'insertList'
       inputRich += `<a  class="wysiwyg-toolbar-icon parent-${button.icon}" 
                         data-action="${button.action}"

src/server/public/abejs/scripts/modules/EditorBlock.js

@@ -5,6 +5,7 @@ import {nextSibling} from '../utils/dom'
 import Color from '../utils/color-picker'
 import Link from '../utils/link-picker'
 import image from '../utils/img-picker'
+import smiley from '../utils/smiley-picker'
 import RichText from '../utils/rich-texarea'
 import Json from './EditorJson'
 import EditorUtils from './EditorUtils'
@@ -26,6 +27,11 @@ export default class EditorBlock {
       this.image = new image(imgWysiwyg)
     }
 
+    var imgWysiwyg = document.querySelector('.wysiwyg-popup.smiley')
+    if (imgWysiwyg != null) {
+      this.smiley = new smiley(imgWysiwyg)
+    }
+
     this._removeblock = [].slice.call(document.querySelectorAll('.list-group[data-block]'))
     this._handleClickRemoveBlock = this._clickRemoveBlock.bind(this)
 
@@ -307,7 +313,7 @@ export default class EditorBlock {
       })
       var newRichs = [].slice.call(newBlock.querySelectorAll('.rich'))
       Array.prototype.forEach.call(newRichs, (newRich) => {
-        new RichText(newRich, this.color, this.link, this.image)
+        new RichText(newRich, this.color, this.link, this.image, this.smiley)
       })
     }
 

src/server/public/abejs/scripts/modules/EditorInputs.js

@@ -8,6 +8,7 @@ import RichText from '../utils/rich-texarea'
 import Color from '../utils/color-picker'
 import Link from '../utils/link-picker'
 import image from '../utils/img-picker'
+import smiley from '../utils/smiley-picker'
 import on from 'on'
 
 export default class EditorInputs {
@@ -25,6 +26,10 @@ export default class EditorInputs {
     if (imgWysiwyg != null) {
       this.image = new image(imgWysiwyg)
     }
+    var imgWysiwyg = document.querySelector('.wysiwyg-popup.smiley')
+    if (imgWysiwyg != null) {
+      this.smiley = new smiley(imgWysiwyg)
+    }
     this.onBlur = on(this)
     this.onReload = on(this)
     this.onDisableInput = on(this)
@@ -68,7 +73,7 @@ export default class EditorInputs {
     var richs = document.querySelectorAll('.rich')
     if(typeof richs !== 'undefined' && richs !== null){
       Array.prototype.forEach.call(richs, (rich) => {
-        new RichText(rich, this.color, this.link, this.image)
+        new RichText(rich, this.color, this.link, this.image, this.smiley)
       })
     }
 

src/server/public/abejs/scripts/utils/rich-texarea.js

@@ -2,10 +2,11 @@
 
 export default class RichTexarea {
 
-  constructor(wrapper, color, link, image) {
+  constructor(wrapper, color, link, image, smiley) {
     this.color = color
     this.link = link
     this.image = image
+    this.smiley = smiley
     this.wrapper = wrapper
     this.textarea = wrapper.querySelector('.form-rich')
     this.btns = this.wrapper.querySelectorAll('.wysiwyg-toolbar-icon')
@@ -113,6 +114,16 @@ export default class RichTexarea {
           })
           this.image.show(this.el)
           break
+        case 'smiley':
+          var html = this.textEditor.getHTML()
+          off = this.smiley.onSmiley((obj) => {
+            this._replaceSelectionWithHtml(obj)
+            this.textEditor.setHTML(this.textEditor.getHTML())
+            this.setHTML()
+            off()
+          })
+          this.smiley.show(this.el)
+          break
       }
     }
     else if(this.action === 'code'){

src/server/public/abejs/scripts/utils/smiley-picker.js

@@ -0,0 +1,109 @@
+import on from 'on'
+import Popup from './popup'
+
+export default class SmileyPicker {
+
+  constructor(wrapper) {
+    this.popup = new Popup(wrapper)
+    this.wrapper = wrapper
+    this.smileys = [
+      {desc: "grinning face with smiling eyes", icon: "😁"},
+      {desc: "face with tears of joy", icon: "😂"},
+      {desc: "smiling face with open mouth", icon: "😃"},
+      {desc: "smiling face with open mouth and smiling eyes", icon: "😄"},
+      {desc: "smiling face with open mouth and cold sweat", icon: "😅"},
+      {desc: "smiling face with open mouth and tightly-closed eyes", icon: "😆"},
+      {desc: "winking face", icon: "😉"},
+      {desc: "smiling face with smiling eyes", icon: "😊"},
+      {desc: "face savouring delicious food", icon: "😋"},
+      {desc: "relieved face", icon: "😌"},
+      {desc: "smiling face with heart-shaped eyes", icon: "😍"},
+      {desc: "smirking face", icon: "😏"},
+      {desc: "unamused face", icon: "😒"},
+      {desc: "face with cold sweat", icon: "😓"},
+      {desc: "pensive face", icon: "😔"},
+      {desc: "confounded face", icon: "😖"},
+      {desc: "face throwing a kiss", icon: "😘"},
+      {desc: "kissing face with closed eyes", icon: "😚"},
+      {desc: "face with stuck-out tongue and winking eye", icon: "😜"},
+      {desc: "face with stuck-out tongue and tightly-closed eyes", icon: "😝"},
+      {desc: "disappointed face", icon: "😞"},
+      {desc: "angry face", icon: "😠"},
+      {desc: "pouting face", icon: "😡"},
+      {desc: "crying face", icon: "😢"},
+      {desc: "persevering face", icon: "😣"},
+      {desc: "face with look of triumph", icon: "😤"},
+      {desc: "disappointed but relieved face", icon: "😥"},
+      {desc: "fearful face", icon: "😨"},
+      {desc: "weary face", icon: "😩"},
+      {desc: "sleepy face", icon: "😪"},
+      {desc: "tired face", icon: "😫"},
+      {desc: "loudly crying face", icon: "😭"},
+      {desc: "face with open mouth and cold sweat", icon: "😰"},
+      {desc: "face screaming in fear", icon: "😱"},
+      {desc: "astonished face", icon: "😲"},
+      {desc: "flushed face", icon: "😳"},
+      {desc: "dizzy face", icon: "😵"},
+      {desc: "face with medical mask", icon: "😷"},
+      {desc: "grinning cat face with smiling eyes", icon: "😸"},
+      {desc: "cat face with tears of joy", icon: "😹"},
+      {desc: "smiling cat face with open mouth", icon: "😺"},
+      {desc: "smiling cat face with heart-shaped eyes", icon: "😻"},
+      {desc: "cat face with wry smile", icon: "😼"},
+      {desc: "kissing cat face with closed eyes", icon: "😽"},
+      {desc: "pouting cat face", icon: "😾"},
+      {desc: "crying cat face", icon: "😿"},
+      {desc: "weary cat face", icon: "🙀"},
+      {desc: "face with no good gesture", icon: "🙅"},
+      {desc: "face with ok gesture", icon: "🙆"},
+      {desc: "person bowing deeply", icon: "🙇"},
+      {desc: "see-no-evil monkey", icon: "🙈"},
+      {desc: "hear-no-evil monkey", icon: "🙉"},
+      {desc: "speak-no-evil monkey", icon: "🙊"},
+      {desc: "happy person raising one hand", icon: "🙋"},
+      {desc: "person raising both hands in celebration", icon: "🙌"},
+      {desc: "person frowning", icon: "🙍"},
+      {desc: "person with pouting face", icon: "🙎"},
+      {desc: "person with folded hands", icon: "🙏"}
+    ]
+
+    var countSmiley = 0;
+    var smileyHTML = `<table cellpadding="0" cellspacing="0">
+                        <tbody>
+                          <tr>`
+
+    this.smileys.forEach((smiley) => {
+      if(countSmiley > 9) {
+        smileyHTML += '</tr><tr>'
+        countSmiley = 0
+      }
+      smileyHTML += `<td class="wysiwyg-toolbar-smiley" data-smiley="${smiley.icon}">
+                      <span class="" title="${smiley.desc}" data-smiley="${smiley.icon}">${smiley.icon}</span>
+                     </td>`
+       countSmiley++
+    })
+    smileyHTML +=     `</tr>
+                      </tbody>
+                    </table>`
+
+    this.wrapper.innerHTML = smileyHTML
+    this.bindEvt()
+  }
+
+  bindEvt(){
+    this.onSmiley = on(this)
+    this.wrapper.addEventListener('click', (e) => {
+      var target = e.target
+      if(target.getAttribute('data-smiley') != null){
+        this.onSmiley._fire(`&nbsp;${target.getAttribute('data-smiley')}&nbsp;`)
+        this.popup.close()
+      }
+    })
+  }
+
+  show(el){
+    var elBounds = el.getBoundingClientRect()
+    this.popup.open(elBounds.left, (elBounds.top + elBounds.height + 5))
+  }
+
+}

src/server/sass/modules/_editor-inputs.scss

@@ -144,6 +144,16 @@ select[multiple], select[size] {
       border: 0;
     }
   }
+  &.smiley {
+    padding: 3px 5px 0px 0px;
+  }
+  .wysiwyg-toolbar-smiley {
+    width: 19px;
+    text-align: center;
+    &:hover {
+      cursor: pointer;
+    }
+  }
 }
 
 .rich [contenteditable]{

src/server/views/template-engine.html

@@ -24,7 +24,7 @@
       </div>
       <div class="wysiwyg-popup color"></div>
       <div class="wysiwyg-popup link"></div>
-      <div class="wysiwyg-popup image"></div>
+      <div class="wysiwyg-popup smiley"></div>
     <script type="text/javascript" src="/abejs/libs/bootstrap.min.js"></script>
     <script type="text/javascript" src="/abejs/libs/jquery.dataTables.min.js"></script>
     <script type="text/javascript" src="/abejs/libs/dataTables.bootstrap.min.js"></script>