From dd70515d7f2795311e3d56eaca5d3065e79529af Mon Sep 17 00:00:00 2001
From: Tim Best <tim@onesignal.com>
Date: Tue, 20 Jun 2017 13:10:57 -0700
Subject: [PATCH] prevent paste beyond max length

---
 README.md                  |  2 +-
 demo/index.html            |  3 +++
 lib/js/jquery.emojiarea.js | 40 +++++++++++++++++++++++---------------
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 4ef0485..0fe7cd5 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ Add `data-emoji-input="unicode"` to your input field. Only the `unicode` value i
 
 **I want to limit my input field to a certain number of characters (maxlength)**
 
-The `maxlength` property is mostly supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length. Unfortunately, you can paste more than the maxlength number of characters, so that needs to be fixed.
+The `maxlength` property is supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length.
 
 **I want classes from my original input field to be copied over to the rich emoji input area**
 
diff --git a/demo/index.html b/demo/index.html
index eef7533..fdc329f 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -31,6 +31,9 @@ <h1>emoji-picker</h1>
             <p class="lead emoji-picker-container">
               <input type="email" class="form-control" placeholder="Input field" data-emojiable="true">
             </p>
+            <p class="lead emoji-picker-container">
+              <input type="email" class="form-control" placeholder="Input with max length of 10" data-emojiable="true" maxlength="10">
+            </p>
             <p class="lead emoji-picker-container">
               <textarea class="form-control textarea-control" rows="3" placeholder="Textarea with emoji image input" data-emojiable="true"></textarea>
             </p>
diff --git a/lib/js/jquery.emojiarea.js b/lib/js/jquery.emojiarea.js
index 184c5d0..0187010 100644
--- a/lib/js/jquery.emojiarea.js
+++ b/lib/js/jquery.emojiarea.js
@@ -387,24 +387,32 @@
       self.updateBodyPadding(editorDiv);
     });
 
-    if (this.options.onPaste) {
-      var self = this;
-      this.$editor.on("paste", function (e) {
-        e.preventDefault();
-
-        if ((e.originalEvent || e).clipboardData) {
-          var content = (e.originalEvent || e).clipboardData.getData('text/plain');
-          var finalText = self.options.onPaste(content);
-          document.execCommand('insertText', false, finalText);
+    this.$editor.on("paste", function (e) {
+      e.preventDefault();
+      var content;
+      var charsRemaining = editorDiv.attr('maxlength') - (editorDiv.text().length + editorDiv.find('img').length);
+      if ((e.originalEvent || e).clipboardData) {
+        content = (e.originalEvent || e).clipboardData.getData('text/plain');
+        if (self.options.onPaste) {
+          content = self.options.onPaste(content);
         }
-        else if (window.clipboardData) {
-          var content = window.clipboardData.getData('Text');
-          var finalText = self.options.onPaste(content);
-          document.selection.createRange().pasteHTML(finalText);
+        if (charsRemaining < content.length) {
+          content = content.substring(0, charsRemaining);
         }
-        editorDiv.scrollTop(editorDiv[0].scrollHeight);
-      });
-    }
+        document.execCommand('insertText', false, content);
+      }
+      else if (window.clipboardData) {
+        content = window.clipboardData.getData('Text');
+        if (self.options.onPaste) {
+          content = self.options.onPaste(content);
+        }
+        if (charsRemaining < content.length) {
+          content = content.substring(0, charsRemaining);
+        }
+        document.selection.createRange().pasteHTML(content);
+      }
+      editorDiv.scrollTop(editorDiv[0].scrollHeight);
+    });
 
     $textarea.after("<i class='emoji-picker-icon emoji-picker " + this.options.popupButtonClasses + "' data-id='" + id + "' data-type='picker'></i>");