Adds a spoiler button to SO chat (sopython.com/spoiler variant)

SoChatSpoilerAdd.bookmarklet

javascript:(function(){function urlsafe_encode(s){return btoa(s).replace(/\+/g, "-").replace(/\//g, "_")};function encode_utf8(s) {return unescape(encodeURIComponent(s));};function add_spoiler(){try{var input = document.getElementById("input");var left = input.value.slice(0, input.selectionStart);var middle = input.value.slice(input.selectionStart, input.selectionEnd);var right = input.value.slice(input.selectionEnd);if (middle.length == 0){var response = window.prompt("Enter spoiler text.", "");if (response == null || response.length == 0){return;}else{middle = response;};};middle = encode_utf8(middle);middle = encodeURIComponent(urlsafe_encode(middle));middle = "[view spoiler](http://sopython.com/spoiler/" + middle + ")";input.value = left + middle + right;input.setSelectionRange(left.length + middle.length, left.length + middle.length);input.focus();}catch(e){console.log(e);};};function create_button(name, id, func){var buttonArea = document.getElementById("chat-buttons");var button = document.createElement("button");button.className = "button";button.id = id;button.innerHTML = name;button.onclick = func;buttonArea.appendChild(button);};create_button("spoiler", "spoiler-button", add_spoiler);})();

SoChatSpoilerAdd.user.js

// ==UserScript==
// @name        spoiler button adder (SO Chat)
// @namespace   about:blank
// @include     http://chat.stackoverflow.com/rooms/*
// @include     https://chat.stackoverflow.com/rooms/*
// @version     1
// @grant       none
// ==/UserScript==
 

 //substitutes - instead of + and _ instead of /
function urlsafe_encode(s){
    return btoa(s).replace(/\+/g, "-").replace(/\//g, "_")
}    

function encode_utf8(s) {
  return unescape(encodeURIComponent(s));
}

//adds a spoiler to the input textarea.
//inserts it wherever your cursor is.
//any highlighted text goes inside the spoiler.
function add_spoiler(){
    try{
        var input = document.getElementById("input");
        var left = input.value.slice(0, input.selectionStart);
        var middle = input.value.slice(input.selectionStart, input.selectionEnd);
        var right = input.value.slice(input.selectionEnd);
     
        if (middle.length == 0){
            var response = window.prompt("Enter spoiler text.", "");
            if (response == null || response.length == 0){
                return;
            }
            else{
                middle = response;
            }
        }
        
        middle = encode_utf8(middle);
        //not sure if encodeUriComponent is actually necessary here
        //We only want it to avoid adding "=" to the url, but is that something that needs avoiding?
        middle = encodeURIComponent(urlsafe_encode(middle));
        
        middle = "[view spoiler](http://sopython.com/spoiler/" + middle + ")";
        input.value = left + middle + right;
        input.setSelectionRange(left.length + middle.length, left.length + middle.length);
        input.focus();
    }catch(e){
        console.log(e);
    }
}
 
//creates a button that goes next to the input text area.
//todo: add title text
function create_button(name, id, func){
    var buttonArea = document.getElementById("chat-buttons");
 
    var button = document.createElement("button");
    button.className = "button";
    button.id = id;
    button.innerHTML = name;
    button.onclick = func;
    buttonArea.appendChild(button);
}
 
create_button("spoiler", "spoiler-button", add_spoiler);

The button places right next to the existing ones.... there's no margin in between