How did you guys add text to the quick reply?

[Ulises]

The way I am currently adding text to the quick reply is pretty bad:

function put_tag_in_quick_reply(username) {
   $('.quick-reply .form_post_quick_reply textarea').val(function(index, value) {
       if (value == "") {
           return username;
       } else {
           return value + " " + username;
       }
   });
}
I figured out how to do it in the full reply page from this thread. I've also looked at the Quick Reply BBCode plugin, but it looks like the author is creating a wysiwyg from scratch and using that which is insane, in a good way. :P Any tips from you veterans? 

[Peter]

A few ways to go about this. I assume you are wanting to add content to where the caret position is, so I will offer you a solution on that problem to get you started.  Though maybe wait and see what other solutions are posted, as there are a few different ways handling ranges.

So, with textareas, we get access to a few range properties that we can use to insert content at the caret position quite easily.  See the example below on how to achieve this. 

let str_to_add = "Hello World"; // Your content to add at the caret

let $msg = $(".form_post_quick_reply").find("textarea[name=message]");
let current_val = $msg.val();
let current_pos = $msg.prop("selectionStart");

$msg.val(current_val.substring(0, current_pos) + str_to_add + current_val.substring(current_pos, current_val.length));

Basically we get where the caret position is (i.e where you clicked in the area),  chop up the original textarea value, insert the content after the first chunk, then concat the last chunk.

[Ulises]

Thanks Peter that's more than enough -- now I'm curious as to who would ever use selectionDirection.

[Peter]

Anytime

I guess selectionDirection would be useful if you need to do something specific for right to left languages

[Chris]

I should also add for future reference that the Proboards library extends jQuery's prototype with a method to make things a bit simpler

jQuery.fn.replaceSelection = function (t) {
	return e(this).each(function () {
		if (void 0 !== this.selectionStart) {
			var i = this.value.substring(0, this.selectionStart),
			a = this.value.substring(this.selectionEnd);
			this.value = i + t + a,
			this.selectionStart = i.length + t.length,
			this.selectionEnd = i.length + t.length
		} else if (void 0 !== document.selection) {
			e(this).focus();
			var n = document.selection.createRange();
			n.text = t,
			n.collapse(!1),
			n.select()
		}
	}),
	this
}

So you could also do this opaquely without having to mess with the underlying selection api:

$('.form_post_quick_reply textarea[name="message"]').replaceSelection('Hello World')

It should be able to work on any element capable of retaining a local selection upon losing focus such as a textarea or the body of an iframe and also includes support for old school IE/Opera selection api.