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
+//      // convert emoji to image
-      val t3 = EmojiUtil.convertEmojis(t2)
+//      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,30 +5,71 @@
   @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(){
-  try {
+  var emojis = @Html(gitbucket.core.util.EmojiUtil.emojis.map("\"" + _ + "\"").mkString("[", ", ", "]"));
-    $([$('#@textareaId').closest('div')[0], $('#@textareaId').next('div')[0]]).dropzone({
+
-      url: '@path/upload/file/@owner/@repository',
+  $('#@textareaId').textcomplete([
-      maxFilesize: 10,
+    { // emoji strategy
-      acceptedFiles: @Html(FileUtil.mimeTypeWhiteList.mkString("'", ",", "'")),
+      id: 'emoji',
-      dictInvalidFileType: 'Unfortunately, we don\'t support that file type. Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, or PDF.',
+      match: /\B:([\-+\w]*)$/,
-      previewTemplate: "<div class=\"dz-preview\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>Uploading your files...</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
+      search: function (term, callback) {
-      success: function(file, id) {
+        callback($.map(emojis, function (emoji) {
-        var attachFile = (file.type.match(/image\/.*/) ? '\n![' + file.name.split('.')[0] : '\n[' + file.name) +
+          return emoji.indexOf(term) === 0 ? emoji : null;
-          '](@baseUrl/@owner/@repository/_attached/' + id + ')';
+        }));
-        $('#@textareaId').val($('#@textareaId').val() + attachFile);
+      },
-        $(file.previewElement).prevAll('div.dz-preview').addBack().remove();
+      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',
+        maxFilesize: 10,
+        acceptedFiles: @Html(FileUtil.mimeTypeWhiteList.mkString("'", ",", "'")),
+        dictInvalidFileType: 'Unfortunately, we don\'t support that file type. Try again with a PNG, GIF, JPG, DOCX, PPTX, XLSX, TXT, or PDF.',
+        previewTemplate: "<div class=\"dz-preview\">\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>Uploading your files...</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
+        success: function(file, id) {
+          var attachFile = (file.type.match(/image\/.*/) ? '\n![' + file.name.split('.')[0] : '\n[' + file.name) +
+            '](@baseUrl/@owner/@repository/_attached/' + id + ')';
+          $('#@textareaId').val($('#@textareaId').val() + attachFile);
+          $(file.previewElement).prevAll('div.dz-preview').addBack().remove();
+        }
+      });
+    } catch(e) {
+      if (e.message !== "Dropzone already attached.") {
+        throw e;
       }
-    });
-  } catch(e) {
-    if (e.message !== "Dropzone already attached.") {
-      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" />