Fixed a bug causing emojis to be inserted outside of textarea. Fixed …

…menu rounded corner clipping + positioning.

jquery.emojiarea.css

@@ -9,28 +9,29 @@
 	vertical-align: middle;
 	margin: -3px 0 0 0;
 }
-.emoji-button {
-	position: absolute;
-	z-index: 1;
-	margin-top: 10px;
-	right: 10px;
-}
 .emoji-menu {
-	background: #fff;
 	position: absolute;
-	z-index: 1;
+	z-index: 999;
 	width: 180px;
 	margin-left: -100px;
 	padding: 0;
-	max-height: 200px;
-	overflow: hidden;
-	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+}
+.emoji-menu > div {
+	max-height: 200px;
+	overflow: hidden;
+	background: #fff;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
+	-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
+	box-shadow: 0 1px 5px rgba(0,0,0,0.3);
 }
 .emoji-menu img {
 	width: 25px;

jquery.emojiarea.js

@@ -29,7 +29,8 @@
 		icons: {},
 		defaults: {
 			button: null,
-			buttonLabel: 'Emojis'
+			buttonLabel: 'Emojis',
+			buttonPosition: 'after'
 		}
 	};
 
@@ -177,7 +178,7 @@
 			$button.html(this.options.buttonLabel);
 			$button.addClass('emoji-button');
 			$button.attr({title: this.options.buttonLabel});
-			this.$editor.before($button);
+			this.$editor[this.options.buttonPosition]($button);
 		} else {
 			$button = $(this.options.button);
 		}
@@ -281,13 +282,11 @@
 			$img[0].attachEvent('onresizestart', function(e) { e.returnValue = false; }, false);
 		}
 
-		util.replaceSelection($img[0]);
-
 		this.$editor.trigger('focus');
 		if (this.selection) {
 			util.restoreSelection(this.selection);
 		}
-		try { util.replaceSelection(content); } catch (e) {}
+		try { util.replaceSelection($img[0]); } catch (e) {}
 		this.onChange();
 	};
 
@@ -355,6 +354,7 @@
 		this.$menu = $('<div>');
 		this.$menu.addClass('emoji-menu');
 		this.$menu.hide();
+		this.$items = $('<div>').appendTo(this.$menu);
 
 		$('body').append(this.$menu);
 
@@ -404,14 +404,14 @@
 			}
 		}
 
-		this.$menu.html(html.join(''));
+		this.$items.html(html.join(''));
 	};
 
 	EmojiMenu.prototype.reposition = function() {
 		var $button = this.emojiarea.$button;
 		var offset = $button.offset();
-		offset.top += $button.height();
-		offset.left += Math.round($button.width() / 2);
+		offset.top += $button.outerHeight();
+		offset.left += Math.round($button.outerWidth() / 2);
 
 		this.$menu.css({
 			top: offset.top,