Implemented issue #443 - Using text modules also in chat.

app/assets/javascripts/app/controllers/chat.coffee

@@ -462,6 +462,11 @@ class ChatWindow extends App.Controller
         )
     )
 
+    # show text module UI
+    new App.WidgetTextModule(
+      el: @input
+    )
+
   focus: =>
     @input.focus()
 
@@ -473,7 +478,7 @@ class ChatWindow extends App.Controller
     if event.data and event.data.callback
       event.data.callback()
 
-    @$('.js-customerChatInput').ce({
+    @input.ce({
       mode:       'richtext'
       multiline:  true
       maxlength:  40000
@@ -522,7 +527,7 @@ class ChatWindow extends App.Controller
 
     switch event.keyCode
       when TABKEY
-        allChatInputs = $('.js-customerChatInput').not('[disabled="disabled"]')
+        allChatInputs = @input.not('[disabled="disabled"]')
         chatCount = allChatInputs.size()
         index = allChatInputs.index(@input)
 
@@ -542,7 +547,7 @@ class ChatWindow extends App.Controller
                 allChatInputs.eq(chatCount-1).focus()
 
       when ENTERKEY
-        if !event.shiftKey
+        if !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey
           event.preventDefault()
           @sendMessage()
 

app/assets/javascripts/app/controllers/widget/text_module.coffee

@@ -8,7 +8,7 @@ class App.WidgetTextModule extends App.Controller
     # remember instances
     @bindElements = []
     if @selector
-      @bindElements = @$( @selector ).textmodule()
+      @bindElements = @$(@selector).textmodule()
     else
       if @el.attr('contenteditable')
         @bindElements = @el.textmodule()

app/assets/javascripts/app/lib/base/jquery.contenteditable.js

@@ -88,7 +88,7 @@
     // handle enter
     this.$element.on('keydown', function (e) {
       _this.log('keydown', e.keyCode)
-      if ( _this.preventInput ) {
+      if (_this.preventInput) {
         this.log('preventInput', _this.preventInput)
         return
       }
@@ -97,7 +97,7 @@
       if (e.keyCode === 13) {
 
         // disbale multi line
-        if ( !_this.options.multiline ) {
+        if (!_this.options.multiline) {
           e.preventDefault()
           return
         }
@@ -111,6 +111,15 @@
           document.execCommand('Outdent')
           return
         }
+
+        // behavior to enter new line on alt+enter
+        //  on alt + enter not realy newline is fired, to make
+        //  it compat. to other systems, do it here
+        if (!e.shiftKey && e.altKey && !e.ctrlKey && !e.metaKey) {
+          e.preventDefault()
+          _this.paste('<br><br>')
+          return
+        }
       }
 
       // on zammad magicKey + i/b/u/s

app/assets/javascripts/app/lib/base/jquery.textmodule.js

@@ -54,6 +54,7 @@
         // enter
         if (e.keyCode === 13) {
           e.preventDefault()
+          e.stopPropagation()
           var id = _this.$widget.find('.dropdown-menu li.is-active').data('id')
 
           // as fallback use hovered element
@@ -92,6 +93,9 @@
 
           var menu = _this.$widget.find('.dropdown-menu')
 
+          if (!active.get(0)) {
+            return
+          }
           if (active.position().top < 0) {
             // scroll up
             menu.scrollTop( menu.scrollTop() + active.position().top )
@@ -187,7 +191,7 @@
   // set height of widget
   Plugin.prototype.movePosition = function() {
     if (!this._position) return
-    var height       = this.$element.height() + 2
+    var height       = this.$element.outerHeight() + 2
     var widgetHeight = this.$widget.find('ul').height() //+ 60 // + height
     var top          = -( widgetHeight + height ) + this._position.top
     var left = this._position.left - 6

app/assets/javascripts/app/views/customer_chat/chat_window.jst.eco

@@ -26,6 +26,8 @@
   <div class="chat-body js-body"></div>
 </div>
 <div class="chat-controls">
-  <div class="chat-input form-control form-control--small form-control--multiline js-customerChatInput" contenteditable="true"></div>
+  <div class="chat-input">
+    <div class="form-control form-control--small form-control--multiline js-customerChatInput" contenteditable="true"></div>
+  </div>
   <div class="btn btn--primary btn--slim btn--small js-send"><%- @T('Send') %></div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -8199,8 +8199,13 @@ output {
 
 .chat-input {
   margin-right: 10px;
-  max-height: 50vh;
+  flex-grow: 1;
-  overflow: auto;
+  position: relative;
+  
+  .form-control {
+    overflow: auto;
+    max-height: 50vh;
+  }
 }
 
 .browser {