Implemented issue #1255 - Chat Widget should support richtext (same as agent chat).

public/assets/chat/chat.coffee

@@ -251,6 +251,11 @@ do($ = window.jQuery, window) ->
     sessionId: undefined
     scrolledToBottom: true
     scrollSnapTolerance: 10
+    richTextFormatKey:
+      66: true # b
+      73: true # i
+      85: true # u
+      83: true # s
 
     T: (string, items...) =>
       if @options.lang && @options.lang isnt 'en'
@@ -367,9 +372,211 @@ do($ = window.jQuery, window) ->
       @el.find('.zammad-chat-controls').on 'submit', @onSubmit
       @el.find('.zammad-chat-body').on 'scroll', @detectScrolledtoBottom
       @el.find('.zammad-scroll-hint').click @onScrollHintClick
-      @input.on
+      @input.on(
         keydown: @checkForEnter
         input: @onInput
+      )
+      @input.on('keydown', (e) =>
+        richtTextControl = false
+        if !e.altKey && !e.ctrlKey && e.metaKey
+          richtTextControl = true
+        else if !e.altKey && e.ctrlKey && !e.metaKey
+          richtTextControl = true
+
+        if richtTextControl && @richTextFormatKey[ e.keyCode ]
+          e.preventDefault()
+          if e.keyCode is 66
+            document.execCommand('bold')
+            return true
+          if e.keyCode is 73
+            document.execCommand('italic')
+            return true
+          if e.keyCode is 85
+            document.execCommand('underline')
+            return true
+          if e.keyCode is 83
+            document.execCommand('strikeThrough')
+            return true
+      )
+      @input.on('paste', (e) =>
+        e.stopPropagation()
+        e.preventDefault()
+
+        clipboardData
+        if e.clipboardData
+          clipboardData = e.clipboardData
+        else if window.clipboardData
+          clipboardData = window.clipboardData
+        else if e.originalEvent.clipboardData
+          clipboardData = e.originalEvent.clipboardData
+        else
+          throw 'No clipboardData support'
+
+        imageInserted = false
+        if clipboardData && clipboardData.items && clipboardData.items[0]
+          item = clipboardData.items[0]
+          if item.kind == 'file' && (item.type == 'image/png' || item.type == 'image/jpeg')
+            imageFile = item.getAsFile()
+            reader = new FileReader()
+
+            reader.onload = (e) =>
+              result = e.target.result
+              img = document.createElement('img')
+              img.src = result
+
+              insert = (dataUrl, width, height, isRetina) =>
+
+                # adapt image if we are on retina devices
+                if @isRetina()
+                  width = width / 2
+                  height = height / 2
+                result = dataUrl
+                img = "<img style=\"width: 100%; max-width: #{width}px;\" src=\"#{result}\">"
+                document.execCommand('insertHTML', false, img)
+
+              # resize if to big
+              @resizeImage(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert)
+
+            reader.readAsDataURL(imageFile)
+            imageInserted = true
+
+        return if imageInserted
+
+        # check existing + paste text for limit
+        text = undefined
+        docType = undefined
+        try
+          text = clipboardData.getData('text/html')
+          docType = 'html'
+          if !text || text.length is 0
+            docType = 'text'
+            text = clipboardData.getData('text/plain')
+          if !text || text.length is 0
+            docType = 'text2'
+            text = clipboardData.getData('text')
+        catch e
+          console.log('Sorry, can\'t insert markup because browser is not supporting it.')
+          docType = 'text3'
+          text = clipboardData.getData('text')
+
+        if docType is 'text' || docType is 'text2' || docType is 'text3'
+          text = '<div>' + text.replace(/\n/g, '</div><div>') + '</div>'
+          text = text.replace(/<div><\/div>/g, '<div><br></div>')
+        console.log('p', docType, text)
+        if docType is 'html'
+          html = $("<div>#{text}</div>")
+          match = false
+          htmlTmp = text
+          regex = new RegExp('<(/w|w)\:[A-Za-z]')
+          if htmlTmp.match(regex)
+            match = true
+            htmlTmp = htmlTmp.replace(regex, '')
+          regex = new RegExp('<(/o|o)\:[A-Za-z]')
+          if htmlTmp.match(regex)
+            match = true
+            htmlTmp = htmlTmp.replace(regex, '')
+          if match
+            html = @wordFilter(html)
+          #html
+
+          html = $(html)
+
+          html.contents().each( ->
+            if @nodeType == 8
+              $(@).remove()
+          )
+
+          # remove tags, keep content
+          html.find('a, font, small, time, form, label').replaceWith( ->
+            $(@).contents()
+          )
+
+          # replace tags with generic div
+          # New type of the tag
+          replacementTag = 'div';
+
+          # Replace all x tags with the type of replacementTag
+          html.find('textarea').each( ->
+            outer = @outerHTML
+
+            # Replace opening tag
+            regex = new RegExp('<' + @tagName, 'i')
+            newTag = outer.replace(regex, '<' + replacementTag)
+
+            # Replace closing tag
+            regex = new RegExp('</' + @tagName, 'i')
+            newTag = newTag.replace(regex, '</' + replacementTag)
+
+            $(@).replaceWith(newTag)
+          )
+
+          # remove tags & content
+          html.find('font, img, svg, input, select, button, style, applet, embed, noframes, canvas, script, frame, iframe, meta, link, title, head, fieldset').remove()
+
+          @removeAttributes(html)
+
+          text = html.html()
+
+        # as fallback, insert html via pasteHtmlAtCaret (for IE 11 and lower)
+        if docType is 'text3'
+          @pasteHtmlAtCaret(text)
+        else
+          document.execCommand('insertHTML', false, text)
+        true
+      )
+      @input.on('drop', (e) =>
+        e.stopPropagation()
+        e.preventDefault()
+
+        dataTransfer
+        if window.dataTransfer # ie
+          dataTransfer = window.dataTransfer
+        else if e.originalEvent.dataTransfer # other browsers
+          dataTransfer = e.originalEvent.dataTransfer
+        else
+          throw 'No clipboardData support'
+
+        x = e.clientX
+        y = e.clientY
+        file = dataTransfer.files[0]
+
+        # look for images
+        if file.type.match('image.*')
+          reader = new FileReader()
+          reader.onload = (e) =>
+            result = e.target.result
+            img = document.createElement('img')
+            img.src = result
+
+            # Insert the image at the carat
+            insert = (dataUrl, width, height, isRetina) =>
+
+              # adapt image if we are on retina devices
+              if @isRetina()
+                width = width / 2
+                height = height / 2
+
+              result = dataUrl
+              img = $("<img style=\"width: 100%; max-width: #{width}px;\" src=\"#{result}\">")
+              img = img.get(0)
+
+              if document.caretPositionFromPoint
+                pos = document.caretPositionFromPoint(x, y)
+                range = document.createRange()
+                range.setStart(pos.offsetNode, pos.offset)
+                range.collapse()
+                range.insertNode(img)
+              else if document.caretRangeFromPoint
+                range = document.caretRangeFromPoint(x, y)
+                range.insertNode(img)
+              else
+                console.log('could not find carat')
+
+            # resize if to big
+            @resizeImage(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert)
+          reader.readAsDataURL(file)
+      )
+
       $(window).on('beforeunload', =>
         @onLeaveTemporary()
       )
@@ -1027,4 +1234,204 @@ do($ = window.jQuery, window) ->
         else if direction is 'horizontal'
           return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft))
 
+    isRetina: ->
+      if window.matchMedia
+        mq = window.matchMedia('only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)')
+        return (mq && mq.matches || (window.devicePixelRatio > 1))
+      false
+
+    resizeImage: (dataURL, x = 'auto', y = 'auto', sizeFactor = 1, type, quallity, callback, force = true) ->
+
+      # load image from data url
+      imageObject = new Image()
+      imageObject.onload = ->
+        imageWidth  = imageObject.width
+        imageHeight = imageObject.height
+        console.log('ImageService', 'current size', imageWidth, imageHeight)
+        if y is 'auto' && x is 'auto'
+          x = imageWidth
+          y = imageHeight
+
+        # get auto dimensions
+        if y is 'auto'
+          factor = imageWidth / x
+          y = imageHeight / factor
+
+        if x is 'auto'
+          factor = imageWidth / y
+          x = imageHeight / factor
+
+        # check if resize is needed
+        resize = false
+        if x < imageWidth || y < imageHeight
+          resize = true
+          x = x * sizeFactor
+          y = y * sizeFactor
+        else
+          x = imageWidth
+          y = imageHeight
+
+        # create canvas and set dimensions
+        canvas        = document.createElement('canvas')
+        canvas.width  = x
+        canvas.height = y
+
+        # draw image on canvas and set image dimensions
+        context = canvas.getContext('2d')
+        context.drawImage(imageObject, 0, 0, x, y)
+
+        # set quallity based on image size
+        if quallity == 'auto'
+          if x < 200 && y < 200
+            quallity = 1
+          else if x < 400 && y < 400
+            quallity = 0.9
+          else if x < 600 && y < 600
+            quallity = 0.8
+          else if x < 900 && y < 900
+            quallity = 0.7
+          else
+            quallity = 0.6
+
+        # execute callback with resized image
+        newDataUrl = canvas.toDataURL(type, quallity)
+        if resize
+          console.log('ImageService', 'resize', x/sizeFactor, y/sizeFactor, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
+          callback(newDataUrl, x/sizeFactor, y/sizeFactor, true)
+          return
+        console.log('ImageService', 'no resize', x, y, quallity, (newDataUrl.length * 0.75)/1024/1024, 'in mb')
+        callback(newDataUrl, x, y, false)
+
+      # load image from data url
+      imageObject.src = dataURL
+
+    # taken from https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div/6691294#6691294
+    pasteHtmlAtCaret: (html) ->
+      sel = undefined
+      range = undefined
+      if window.getSelection
+        sel = window.getSelection()
+        if sel.getRangeAt && sel.rangeCount
+          range = sel.getRangeAt(0)
+          range.deleteContents()
+
+          el = document.createElement('div')
+          el.innerHTML = html
+          frag = document.createDocumentFragment(node, lastNode)
+          while node = el.firstChild
+            lastNode = frag.appendChild(node)
+          range.insertNode(frag)
+
+          if lastNode
+            range = range.cloneRange()
+            range.setStartAfter(lastNode)
+            range.collapse(true)
+            sel.removeAllRanges()
+            sel.addRange(range)
+      else if document.selection && document.selection.type != 'Control'
+        document.selection.createRange().pasteHTML(html)
+
+    # (C) sbrin - https://github.com/sbrin
+    # https://gist.github.com/sbrin/6801034
+    wordFilter: (editor) ->
+      content = editor.html()
+
+      # Word comments like conditional comments etc
+      content = content.replace(/<!--[\s\S]+?-->/gi, '')
+
+      # Remove comments, scripts (e.g., msoShowComment), XML tag, VML content,
+      # MS Office namespaced tags, and a few other tags
+      content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]*>/gi, '')
+
+      # Convert <s> into <strike> for line-though
+      content = content.replace(/<(\/?)s>/gi, '<$1strike>')
+
+      # Replace nbsp entites to char since it's easier to handle
+      # content = content.replace(/&nbsp;/gi, "\u00a0")
+      content = content.replace(/&nbsp;/gi, ' ')
+
+      # Convert <span style="mso-spacerun:yes">___</span> to string of alternating
+      # breaking/non-breaking spaces of same length
+      #content = content.replace(/<span\s+style\s*=\s*"\s*mso-spacerun\s*:\s*yes\s*;?\s*"\s*>([\s\u00a0]*)<\/span>/gi, (str, spaces) ->
+      #  return (spaces.length > 0) ? spaces.replace(/./, " ").slice(Math.floor(spaces.length/2)).split("").join("\u00a0") : ''
+      #)
+
+      editor.html(content)
+
+      # Parse out list indent level for lists
+      $('p', editor).each( ->
+        str = $(@).attr('style')
+        matches = /mso-list:\w+ \w+([0-9]+)/.exec(str)
+        if matches
+          $(@).data('_listLevel',  parseInt(matches[1], 10))
+      )
+
+      # Parse Lists
+      last_level = 0
+      pnt = null
+      $('p', editor).each(->
+        cur_level = $(@).data('_listLevel')
+        if cur_level != undefined
+          txt = $(@).text()
+          list_tag = '<ul></ul>'
+          if (/^\s*\w+\./.test(txt))
+            matches = /([0-9])\./.exec(txt)
+            if matches
+              start = parseInt(matches[1], 10)
+              list_tag = start>1 ? '<ol start="' + start + '"></ol>' : '<ol></ol>'
+            else
+              list_tag = '<ol></ol>'
+
+          if cur_level > last_level
+            if last_level == 0
+              $(@).before(list_tag)
+              pnt = $(@).prev()
+            else
+              pnt = $(list_tag).appendTo(pnt)
+
+          if cur_level < last_level
+            for i in [i..last_level-cur_level]
+              pnt = pnt.parent()
+
+          $('span:first', @).remove()
+          pnt.append('<li>' + $(@).html() + '</li>')
+          $(@).remove()
+          last_level = cur_level
+        else
+          last_level = 0
+      )
+
+      $('[style]', editor).removeAttr('style')
+      $('[align]', editor).removeAttr('align')
+      $('span', editor).replaceWith(->
+        $(@).contents()
+      )
+      $('span:empty', editor).remove()
+      $("[class^='Mso']", editor).removeAttr('class')
+      $('p:empty', editor).remove()
+      editor
+
+    removeAttribute: (element) ->
+      return if !element
+      $element = $(element)
+      for att in element.attributes
+        if att && att.name
+          element.removeAttribute(att.name)
+          #$element.removeAttr(att.name)
+
+      $element.removeAttr('style')
+        .removeAttr('class')
+        .removeAttr('lang')
+        .removeAttr('type')
+        .removeAttr('align')
+        .removeAttr('id')
+        .removeAttr('wrap')
+        .removeAttr('title')
+
+    removeAttributes: (html, parent = true) =>
+      if parent
+        html.each((index, element) => @removeAttribute(element) )
+      html.find('*').each((index, element) => @removeAttribute(element) )
+      html
+
   window.ZammadChat = ZammadChat

public/assets/chat/chat.js

@@ -1,3 +1,64 @@
+if (!window.zammadChatTemplates) {
+  window.zammadChatTemplates = {};
+}
+window.zammadChatTemplates["agent"] = function (__obj) {
+  if (!__obj) __obj = {};
+  var __out = [], __capture = function(callback) {
+    var out = __out, result;
+    __out = [];
+    callback.call(this);
+    result = __out.join('');
+    __out = out;
+    return __safe(result);
+  }, __sanitize = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else if (typeof value !== 'undefined' && value != null) {
+      return __escape(value);
+    } else {
+      return '';
+    }
+  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
+  __safe = __obj.safe = function(value) {
+    if (value && value.ecoSafe) {
+      return value;
+    } else {
+      if (!(typeof value !== 'undefined' && value != null)) value = '';
+      var result = new String(value);
+      result.ecoSafe = true;
+      return result;
+    }
+  };
+  if (!__escape) {
+    __escape = __obj.escape = function(value) {
+      return ('' + value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    };
+  }
+  (function() {
+    (function() {
+      if (this.agent.avatar) {
+        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
+        __out.push(__sanitize(this.agent.avatar));
+        __out.push('">\n');
+      }
+    
+      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
+    
+      __out.push(__sanitize(this.agent.name));
+    
+      __out.push('</span>\n</span>');
+    
+    }).call(this);
+    
+  }).call(__obj);
+  __obj.safe = __objSafe, __obj.escape = __escape;
+  return __out.join('');
+};
+
 var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
   slice = [].slice,
   extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -60,7 +121,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     Log.prototype.log = function(level, items) {
-      var i, item, len, logString;
+      var item, j, len, logString;
       items.unshift('||');
       items.unshift(level);
       items.unshift(this.options.logPrefix);
@@ -69,8 +130,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         return;
       }
       logString = '';
-      for (i = 0, len = items.length; i < len; i++) {
+      for (j = 0, len = items.length; j < len; j++) {
-        item = items[i];
+        item = items[j];
         logString += ' ';
         if (typeof item === 'object') {
           logString += JSON.stringify(item);
@@ -173,11 +234,11 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       })(this);
       this.ws.onmessage = (function(_this) {
         return function(e) {
-          var i, len, pipe, pipes;
+          var j, len, pipe, pipes;
           pipes = JSON.parse(e.data);
           _this.log.debug('onMessage', e.data);
-          for (i = 0, len = pipes.length; i < len; i++) {
+          for (j = 0, len = pipes.length; j < len; j++) {
-            pipe = pipes[i];
+            pipe = pipes[j];
             if (pipe.event === 'pong') {
               _this.ping();
             }
@@ -386,8 +447,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
 
     ZammadChat.prototype.scrollSnapTolerance = 10;
 
+    ZammadChat.prototype.richTextFormatKey = {
+      66: true,
+      73: true,
+      85: true,
+      83: true
+    };
+
     ZammadChat.prototype.T = function() {
-      var i, item, items, len, string, translations;
+      var item, items, j, len, string, translations;
       string = arguments[0], items = 2 <= arguments.length ? slice.call(arguments, 1) : [];
       if (this.options.lang && this.options.lang !== 'en') {
         if (!this.translations[this.options.lang]) {
@@ -401,8 +469,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         }
       }
       if (items) {
-        for (i = 0, len = items.length; i < len; i++) {
+        for (j = 0, len = items.length; j < len; j++) {
-          item = items[i];
+          item = items[j];
           string = string.replace(/%s/, item);
         }
       }
@@ -425,6 +493,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     function ZammadChat(options) {
+      this.removeAttributes = bind(this.removeAttributes, this);
       this.startTimeoutObservers = bind(this.startTimeoutObservers, this);
       this.onCssLoaded = bind(this.onCssLoaded, this);
       this.setAgentOnlineState = bind(this.setAgentOnlineState, this);
@@ -552,6 +621,203 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
         keydown: this.checkForEnter,
         input: this.onInput
       });
+      this.input.on('keydown', (function(_this) {
+        return function(e) {
+          var richtTextControl;
+          richtTextControl = false;
+          if (!e.altKey && !e.ctrlKey && e.metaKey) {
+            richtTextControl = true;
+          } else if (!e.altKey && e.ctrlKey && !e.metaKey) {
+            richtTextControl = true;
+          }
+          if (richtTextControl && _this.richTextFormatKey[e.keyCode]) {
+            e.preventDefault();
+            if (e.keyCode === 66) {
+              document.execCommand('bold');
+              return true;
+            }
+            if (e.keyCode === 73) {
+              document.execCommand('italic');
+              return true;
+            }
+            if (e.keyCode === 85) {
+              document.execCommand('underline');
+              return true;
+            }
+            if (e.keyCode === 83) {
+              document.execCommand('strikeThrough');
+              return true;
+            }
+          }
+        };
+      })(this));
+      this.input.on('paste', (function(_this) {
+        return function(e) {
+          var clipboardData, docType, error, html, htmlTmp, imageFile, imageInserted, item, match, reader, regex, replacementTag, text;
+          e.stopPropagation();
+          e.preventDefault();
+          clipboardData;
+          if (e.clipboardData) {
+            clipboardData = e.clipboardData;
+          } else if (window.clipboardData) {
+            clipboardData = window.clipboardData;
+          } else if (e.originalEvent.clipboardData) {
+            clipboardData = e.originalEvent.clipboardData;
+          } else {
+            throw 'No clipboardData support';
+          }
+          imageInserted = false;
+          if (clipboardData && clipboardData.items && clipboardData.items[0]) {
+            item = clipboardData.items[0];
+            if (item.kind === 'file' && (item.type === 'image/png' || item.type === 'image/jpeg')) {
+              imageFile = item.getAsFile();
+              reader = new FileReader();
+              reader.onload = function(e) {
+                var img, insert, result;
+                result = e.target.result;
+                img = document.createElement('img');
+                img.src = result;
+                insert = function(dataUrl, width, height, isRetina) {
+                  if (_this.isRetina()) {
+                    width = width / 2;
+                    height = height / 2;
+                  }
+                  result = dataUrl;
+                  img = "<img style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">";
+                  return document.execCommand('insertHTML', false, img);
+                };
+                return _this.resizeImage(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert);
+              };
+              reader.readAsDataURL(imageFile);
+              imageInserted = true;
+            }
+          }
+          if (imageInserted) {
+            return;
+          }
+          text = void 0;
+          docType = void 0;
+          try {
+            text = clipboardData.getData('text/html');
+            docType = 'html';
+            if (!text || text.length === 0) {
+              docType = 'text';
+              text = clipboardData.getData('text/plain');
+            }
+            if (!text || text.length === 0) {
+              docType = 'text2';
+              text = clipboardData.getData('text');
+            }
+          } catch (error) {
+            e = error;
+            console.log('Sorry, can\'t insert markup because browser is not supporting it.');
+            docType = 'text3';
+            text = clipboardData.getData('text');
+          }
+          if (docType === 'text' || docType === 'text2' || docType === 'text3') {
+            text = '<div>' + text.replace(/\n/g, '</div><div>') + '</div>';
+            text = text.replace(/<div><\/div>/g, '<div><br></div>');
+          }
+          console.log('p', docType, text);
+          if (docType === 'html') {
+            html = $("<div>" + text + "</div>");
+            match = false;
+            htmlTmp = text;
+            regex = new RegExp('<(/w|w)\:[A-Za-z]');
+            if (htmlTmp.match(regex)) {
+              match = true;
+              htmlTmp = htmlTmp.replace(regex, '');
+            }
+            regex = new RegExp('<(/o|o)\:[A-Za-z]');
+            if (htmlTmp.match(regex)) {
+              match = true;
+              htmlTmp = htmlTmp.replace(regex, '');
+            }
+            if (match) {
+              html = _this.wordFilter(html);
+            }
+            html = $(html);
+            html.contents().each(function() {
+              if (this.nodeType === 8) {
+                return $(this).remove();
+              }
+            });
+            html.find('a, font, small, time, form, label').replaceWith(function() {
+              return $(this).contents();
+            });
+            replacementTag = 'div';
+            html.find('textarea').each(function() {
+              var newTag, outer;
+              outer = this.outerHTML;
+              regex = new RegExp('<' + this.tagName, 'i');
+              newTag = outer.replace(regex, '<' + replacementTag);
+              regex = new RegExp('</' + this.tagName, 'i');
+              newTag = newTag.replace(regex, '</' + replacementTag);
+              return $(this).replaceWith(newTag);
+            });
+            html.find('font, img, svg, input, select, button, style, applet, embed, noframes, canvas, script, frame, iframe, meta, link, title, head, fieldset').remove();
+            _this.removeAttributes(html);
+            text = html.html();
+          }
+          if (docType === 'text3') {
+            _this.pasteHtmlAtCaret(text);
+          } else {
+            document.execCommand('insertHTML', false, text);
+          }
+          return true;
+        };
+      })(this));
+      this.input.on('drop', (function(_this) {
+        return function(e) {
+          var dataTransfer, file, reader, x, y;
+          e.stopPropagation();
+          e.preventDefault();
+          dataTransfer;
+          if (window.dataTransfer) {
+            dataTransfer = window.dataTransfer;
+          } else if (e.originalEvent.dataTransfer) {
+            dataTransfer = e.originalEvent.dataTransfer;
+          } else {
+            throw 'No clipboardData support';
+          }
+          x = e.clientX;
+          y = e.clientY;
+          file = dataTransfer.files[0];
+          if (file.type.match('image.*')) {
+            reader = new FileReader();
+            reader.onload = function(e) {
+              var img, insert, result;
+              result = e.target.result;
+              img = document.createElement('img');
+              img.src = result;
+              insert = function(dataUrl, width, height, isRetina) {
+                var pos, range;
+                if (_this.isRetina()) {
+                  width = width / 2;
+                  height = height / 2;
+                }
+                result = dataUrl;
+                img = $("<img style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">");
+                img = img.get(0);
+                if (document.caretPositionFromPoint) {
+                  pos = document.caretPositionFromPoint(x, y);
+                  range = document.createRange();
+                  range.setStart(pos.offsetNode, pos.offset);
+                  range.collapse();
+                  return range.insertNode(img);
+                } else if (document.caretRangeFromPoint) {
+                  range = document.caretRangeFromPoint(x, y);
+                  return range.insertNode(img);
+                } else {
+                  return console.log('could not find carat');
+                }
+              };
+              return _this.resizeImage(img.src, 460, 'auto', 2, 'image/jpeg', 'auto', insert);
+            };
+            return reader.readAsDataURL(file);
+          }
+        };
+      })(this));
       $(window).on('beforeunload', (function(_this) {
         return function() {
           return _this.onLeaveTemporary();
@@ -595,9 +861,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onWebSocketMessage = function(pipes) {
-      var i, len, pipe;
+      var j, len, pipe;
-      for (i = 0, len = pipes.length; i < len; i++) {
+      for (j = 0, len = pipes.length; j < len; j++) {
-        pipe = pipes[i];
+        pipe = pipes[j];
         this.log.debug('ws:onmessage', pipe);
         switch (pipe.event) {
           case 'chat_error':
@@ -683,15 +949,15 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
     };
 
     ZammadChat.prototype.onReopenSession = function(data) {
-      var i, len, message, ref, unfinishedMessage;
+      var j, len, message, ref, unfinishedMessage;
       this.log.debug('old messages', data.session);
       this.inactiveTimeout.start();
       unfinishedMessage = sessionStorage.getItem('unfinished_message');
       if (data.agent) {
         this.onConnectionEstablished(data);
         ref = data.session;
-        for (i = 0, len = ref.length; i < len; i++) {
+        for (j = 0, len = ref.length; j < len; j++) {
-          message = ref[i];
+          message = ref[j];
           this.renderMessage({
             message: message.content,
             id: message.id,
@@ -1322,73 +1588,223 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
       }
     };
 
+    ZammadChat.prototype.isRetina = function() {
+      var mq;
+      if (window.matchMedia) {
+        mq = window.matchMedia('only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen  and (min-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx)');
+        return mq && mq.matches || (window.devicePixelRatio > 1);
+      }
+      return false;
+    };
+
+    ZammadChat.prototype.resizeImage = function(dataURL, x, y, sizeFactor, type, quallity, callback, force) {
+      var imageObject;
+      if (x == null) {
+        x = 'auto';
+      }
+      if (y == null) {
+        y = 'auto';
+      }
+      if (sizeFactor == null) {
+        sizeFactor = 1;
+      }
+      if (force == null) {
+        force = true;
+      }
+      imageObject = new Image();
+      imageObject.onload = function() {
+        var canvas, context, factor, imageHeight, imageWidth, newDataUrl, resize;
+        imageWidth = imageObject.width;
+        imageHeight = imageObject.height;
+        console.log('ImageService', 'current size', imageWidth, imageHeight);
+        if (y === 'auto' && x === 'auto') {
+          x = imageWidth;
+          y = imageHeight;
+        }
+        if (y === 'auto') {
+          factor = imageWidth / x;
+          y = imageHeight / factor;
+        }
+        if (x === 'auto') {
+          factor = imageWidth / y;
+          x = imageHeight / factor;
+        }
+        resize = false;
+        if (x < imageWidth || y < imageHeight) {
+          resize = true;
+          x = x * sizeFactor;
+          y = y * sizeFactor;
+        } else {
+          x = imageWidth;
+          y = imageHeight;
+        }
+        canvas = document.createElement('canvas');
+        canvas.width = x;
+        canvas.height = y;
+        context = canvas.getContext('2d');
+        context.drawImage(imageObject, 0, 0, x, y);
+        if (quallity === 'auto') {
+          if (x < 200 && y < 200) {
+            quallity = 1;
+          } else if (x < 400 && y < 400) {
+            quallity = 0.9;
+          } else if (x < 600 && y < 600) {
+            quallity = 0.8;
+          } else if (x < 900 && y < 900) {
+            quallity = 0.7;
+          } else {
+            quallity = 0.6;
+          }
+        }
+        newDataUrl = canvas.toDataURL(type, quallity);
+        if (resize) {
+          console.log('ImageService', 'resize', x / sizeFactor, y / sizeFactor, quallity, (newDataUrl.length * 0.75) / 1024 / 1024, 'in mb');
+          callback(newDataUrl, x / sizeFactor, y / sizeFactor, true);
+          return;
+        }
+        console.log('ImageService', 'no resize', x, y, quallity, (newDataUrl.length * 0.75) / 1024 / 1024, 'in mb');
+        return callback(newDataUrl, x, y, false);
+      };
+      return imageObject.src = dataURL;
+    };
+
+    ZammadChat.prototype.pasteHtmlAtCaret = function(html) {
+      var el, frag, lastNode, node, range, sel;
+      sel = void 0;
+      range = void 0;
+      if (window.getSelection) {
+        sel = window.getSelection();
+        if (sel.getRangeAt && sel.rangeCount) {
+          range = sel.getRangeAt(0);
+          range.deleteContents();
+          el = document.createElement('div');
+          el.innerHTML = html;
+          frag = document.createDocumentFragment(node, lastNode);
+          while (node = el.firstChild) {
+            lastNode = frag.appendChild(node);
+          }
+          range.insertNode(frag);
+          if (lastNode) {
+            range = range.cloneRange();
+            range.setStartAfter(lastNode);
+            range.collapse(true);
+            sel.removeAllRanges();
+            return sel.addRange(range);
+          }
+        }
+      } else if (document.selection && document.selection.type !== 'Control') {
+        return document.selection.createRange().pasteHTML(html);
+      }
+    };
+
+    ZammadChat.prototype.wordFilter = function(editor) {
+      var content, last_level, pnt;
+      content = editor.html();
+      content = content.replace(/<!--[\s\S]+?-->/gi, '');
+      content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]*>/gi, '');
+      content = content.replace(/<(\/?)s>/gi, '<$1strike>');
+      content = content.replace(/&nbsp;/gi, ' ');
+      editor.html(content);
+      $('p', editor).each(function() {
+        var matches, str;
+        str = $(this).attr('style');
+        matches = /mso-list:\w+ \w+([0-9]+)/.exec(str);
+        if (matches) {
+          return $(this).data('_listLevel', parseInt(matches[1], 10));
+        }
+      });
+      last_level = 0;
+      pnt = null;
+      $('p', editor).each(function() {
+        var cur_level, i, j, list_tag, matches, ref, ref1, ref2, start, txt;
+        cur_level = $(this).data('_listLevel');
+        if (cur_level !== void 0) {
+          txt = $(this).text();
+          list_tag = '<ul></ul>';
+          if (/^\s*\w+\./.test(txt)) {
+            matches = /([0-9])\./.exec(txt);
+            if (matches) {
+              start = parseInt(matches[1], 10);
+              list_tag = (ref = start > 1) != null ? ref : '<ol start="' + start + {
+                '"></ol>': '<ol></ol>'
+              };
+            } else {
+              list_tag = '<ol></ol>';
+            }
+          }
+          if (cur_level > last_level) {
+            if (last_level === 0) {
+              $(this).before(list_tag);
+              pnt = $(this).prev();
+            } else {
+              pnt = $(list_tag).appendTo(pnt);
+            }
+          }
+          if (cur_level < last_level) {
+            for (i = j = ref1 = i, ref2 = last_level - cur_level; ref1 <= ref2 ? j <= ref2 : j >= ref2; i = ref1 <= ref2 ? ++j : --j) {
+              pnt = pnt.parent();
+            }
+          }
+          $('span:first', this).remove();
+          pnt.append('<li>' + $(this).html() + '</li>');
+          $(this).remove();
+          return last_level = cur_level;
+        } else {
+          return last_level = 0;
+        }
+      });
+      $('[style]', editor).removeAttr('style');
+      $('[align]', editor).removeAttr('align');
+      $('span', editor).replaceWith(function() {
+        return $(this).contents();
+      });
+      $('span:empty', editor).remove();
+      $("[class^='Mso']", editor).removeAttr('class');
+      $('p:empty', editor).remove();
+      return editor;
+    };
+
+    ZammadChat.prototype.removeAttribute = function(element) {
+      var $element, att, j, len, ref;
+      if (!element) {
+        return;
+      }
+      $element = $(element);
+      ref = element.attributes;
+      for (j = 0, len = ref.length; j < len; j++) {
+        att = ref[j];
+        if (att && att.name) {
+          element.removeAttribute(att.name);
+        }
+      }
+      return $element.removeAttr('style').removeAttr('class').removeAttr('lang').removeAttr('type').removeAttr('align').removeAttr('id').removeAttr('wrap').removeAttr('title');
+    };
+
+    ZammadChat.prototype.removeAttributes = function(html, parent) {
+      if (parent == null) {
+        parent = true;
+      }
+      if (parent) {
+        html.each((function(_this) {
+          return function(index, element) {
+            return _this.removeAttribute(element);
+          };
+        })(this));
+      }
+      html.find('*').each((function(_this) {
+        return function(index, element) {
+          return _this.removeAttribute(element);
+        };
+      })(this));
+      return html;
+    };
+
     return ZammadChat;
 
   })(Base);
   return window.ZammadChat = ZammadChat;
 })(window.jQuery, window);
 
-if (!window.zammadChatTemplates) {
-  window.zammadChatTemplates = {};
-}
-window.zammadChatTemplates["agent"] = function (__obj) {
-  if (!__obj) __obj = {};
-  var __out = [], __capture = function(callback) {
-    var out = __out, result;
-    __out = [];
-    callback.call(this);
-    result = __out.join('');
-    __out = out;
-    return __safe(result);
-  }, __sanitize = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else if (typeof value !== 'undefined' && value != null) {
-      return __escape(value);
-    } else {
-      return '';
-    }
-  }, __safe, __objSafe = __obj.safe, __escape = __obj.escape;
-  __safe = __obj.safe = function(value) {
-    if (value && value.ecoSafe) {
-      return value;
-    } else {
-      if (!(typeof value !== 'undefined' && value != null)) value = '';
-      var result = new String(value);
-      result.ecoSafe = true;
-      return result;
-    }
-  };
-  if (!__escape) {
-    __escape = __obj.escape = function(value) {
-      return ('' + value)
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-    };
-  }
-  (function() {
-    (function() {
-      if (this.agent.avatar) {
-        __out.push('\n<img class="zammad-chat-agent-avatar" src="');
-        __out.push(__sanitize(this.agent.avatar));
-        __out.push('">\n');
-      }
-    
-      __out.push('\n<span class="zammad-chat-agent-sentence">\n  <span class="zammad-chat-agent-name">');
-    
-      __out.push(__sanitize(this.agent.name));
-    
-      __out.push('</span>\n</span>');
-    
-    }).call(this);
-    
-  }).call(__obj);
-  __obj.safe = __objSafe, __obj.escape = __escape;
-  return __out.join('');
-};
-
 if (!window.zammadChatTemplates) {
   window.zammadChatTemplates = {};
 }