Emoji completion in textarea

src/main/scala/gitbucket/core/util/EmojiUtil.scala

@@ -5,7 +5,7 @@ package gitbucket.core.util
  */
 object EmojiUtil {
 
-  private val emojis = Set(
+  val emojis = Set(
     "+1",
     "-1",
     "100",

src/main/scala/gitbucket/core/view/Markdown.scala

@@ -44,7 +44,7 @@ object Markdown {
     val renderer = new GitBucketMarkedRenderer(options, repository,
       enableWikiLink, enableRefsLink, enableAnchor, enableTaskList, hasWritePermission, pages)
 
-    Marked.marked(source, options, renderer)
+    EmojiUtil.convertEmojis(Marked.marked(source, options, renderer))
   }
 
   /**
@@ -113,10 +113,10 @@ object Markdown {
       // convert task list to checkbox.
       val t2 = if(enableTaskList) convertCheckBox(t1, hasWritePermission) else t1
 
-      // convert emoji to image
-      val t3 = EmojiUtil.convertEmojis(t2)
+//      // convert emoji to image
+//      val t3 = EmojiUtil.convertEmojis(t2)
 
-      t3
+      t2
     }
 
     override def link(href: String, title: String, text: String): String = {

src/main/twirl/gitbucket/core/helper/attached.scala.html

@@ -5,10 +5,51 @@
   @textarea
   <div class="clickable">Attach images or documents by dragging &amp; dropping, or selecting them.</div>
 </div>
-@if(generateScript){
 @defining("(id=\")([\\w\\-]*)(\")".r.findFirstMatchIn(textarea.body).map(_.group(2))){ textareaId =>
 <script>
 $(function(){
+  var emojis = @Html(gitbucket.core.util.EmojiUtil.emojis.map("\"" + _ + "\"").mkString("[", ", ", "]"));
+
+  $('#@textareaId').textcomplete([
+    { // emoji strategy
+      id: 'emoji',
+      match: /\B:([\-+\w]*)$/,
+      search: function (term, callback) {
+        callback($.map(emojis, function (emoji) {
+          return emoji.indexOf(term) === 0 ? emoji : null;
+        }));
+      },
+      template: function (value) {
+        return '<img src="@path/assets/common/images/emojis/' + value + '.png" class="emoji"></img>' + value;
+      },
+      replace: function (value) {
+        return ':' + value + ': ';
+      },
+      index: 1
+    }//,
+//    { // tech companies
+//      id: 'tech-companies',
+//      words: ['apple', 'google', 'facebook', 'github'],
+//      match: /\b(\w{2,})$/,
+//      search: function (term, callback) {
+//        callback($.map(this.words, function (word) {
+//          return word.indexOf(term) === 0 ? word : null;
+//        }));
+//      },
+//      index: 1,
+//      replace: function (word) {
+//        return word + ' ';
+//      }
+//    }
+  ], {
+    onKeydown: function (e, commands) {
+      if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
+        return commands.KEY_ENTER;
+      }
+    }
+  });
+
+  @if(generateScript){
     try {
       $([$('#@textareaId').closest('div')[0], $('#@textareaId').next('div')[0]]).dropzone({
         url: '@path/upload/file/@owner/@repository',
@@ -28,7 +69,7 @@ $(function(){
         throw e;
       }
     }
+  }
 });
 </script>
 }
-}

src/main/twirl/gitbucket/core/main.scala.html

@@ -33,6 +33,7 @@
     <script src="@assets/vendors/elastic/jquery.elastic.source.js"></script>
     <script src="@assets/vendors/facebox/facebox.js"></script>
     <script src="@assets/vendors/jquery-hotkeys/jquery.hotkeys.js"></script>
+    <script src="@assets/vendors/jquery-textcomplete-1.6.2/jquery.textcomplete.js"></script>
     @repository.map { repository =>
       @if(!repository.repository.isPrivate){
         <meta name="go-import" content="@context.baseUrl.replaceFirst("^https?://", "")/@repository.owner/@repository.name git @repository.httpUrl" />