☰

Comment Text Styles - scrap.tf

Allows changing text style in comment using "Bold", "Italic", "Underline", "Strikethrough" and "Link" buttons above comment input.

// ==UserScript==
// @name        Comment Text Styles - scrap.tf
// @description Allows changing text style in comment using "Bold", "Italic", "Underline", "Strikethrough" and "Link" buttons above comment input.
// @namespace   Violentmonkey Scripts
// @match				https://scrap.tf/*
// @license     MIT
// @grant       none
// @version     0.3
// @author      U.N.Owen
// @require     http://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js
// ==/UserScript==
function add_text_style(comment, start_offset, end_offset, token, value){
  var comm_text = comment.value;
  var start = comment.selectionStart;
  var end = comment.selectionEnd;
  comment.value = comm_text.substring(0,start) + '[' + token + value + ']' + comm_text.substring(start,end) + '[/' + token + ']' + comm_text.substring(end);
  comment.selectionStart = start + start_offset;
  if(token=='url'){
    comment.selectionEnd = start + end_offset;
  }
  else{
  	comment.selectionEnd = end + end_offset;
  }
}

var comment_input = $(".comment-input")[0];
var toolbar = $("<span>")

/* //uncomment to only show toolbar when text is selected
toolbar.hide();

$(".comment-input:first").on('mouseup keyup', ()=>{
  if(comment_input.selectionStart != comment_input.selectionEnd){
    toolbar.show();
  }
  else{
    toolbar.hide();
  }
});
*/

var bold_a = $('<a style="margin:2pt" title="Bold"><i class="fa fa-bold"></i></a>').mousedown(function(e){
  e.preventDefault();
  add_text_style(comment_input, 3, 3, 'b', '');
});
var italic_a = $('<a style="margin:2pt" title="Italic"><i class="fa fa-italic"></i></a>').mousedown(function(e){
  e.preventDefault();
  add_text_style(comment_input, 3, 3, 'i', '');
});
var underline_a = $('<a style="margin:2pt" title="Underline"><i class="fa fa-underline"></i></a>').mousedown(function(e){
  e.preventDefault();
  add_text_style(comment_input, 3, 3, 'u', '');
});
var strikethrough_a = $('<a style="margin:2pt" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>').mousedown(function(e){
  e.preventDefault();
  add_text_style(comment_input, 3, 3, 's', '');
});
var link_a = $('<a style="margin:2pt" title="Link"><i class="fa fa-link"></i></a>').mousedown(function(e){
  e.preventDefault();
  add_text_style(comment_input, 5, 9, 'url','=link');
});

var color_picker = $('<input type="color" id="TextColor" value="#123456" style="display:none">').on('change', function(){
  add_text_style(comment_input, 15, 15, 'color','='+color_picker.val());
});
var color_a = $('<a style="margin:2pt" title="Text Color"><b><u>A</u></b></a>').mousedown(function(e){
  e.preventDefault();
  color_picker.click();
});
color_a.append(color_picker);

toolbar.append(bold_a);
toolbar.append(italic_a);
toolbar.append(underline_a);
toolbar.append(strikethrough_a);
toolbar.append(link_a);
toolbar.append(color_a);
$(".comment-header").before(toolbar);