Greasyfork forum MARKDOWN for comments

Select MARKDOWN format by default, add help links, add toolbar formatting buttons for markdown

As of 2014-12-06. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name          Greasyfork forum MARKDOWN for comments
// @author        wOxxOm
// @description   Select MARKDOWN format by default, add help links, add toolbar formatting buttons for markdown
// @namespace     wOxxOm.scripts
// @version       1.13
// @include       https://greatest.deepsurf.us/*forum/discussion/*
// @include       https://greatest.deepsurf.us/*forum/post/discussion*
// @run-at        document-start
// @grant         none
// ==/UserScript==

var ob = new MutationObserver(function(mutations){
  for (var i=0, ml=mutations.length, m; (i<ml) && (m=mutations[i]); i++)
    for (var j=0, nodes=m.addedNodes, nl=nodes.length, n; (j<nl) && (n=nodes[j]); j++)
      if (n.nodeType == 1) {
        if (n.localName == 'label') {
          if (n.for != 'Form_Format2')
            continue;
        } 
        else if (!(n = n.querySelector('label[for="Form_Format2"]')))
          continue;

        for (var p=n; (p = p.parentNode) && (p.localName != 'form'); ) {}
        if (p && (p.action.indexOf('/editcomment/') < 0))
          n.click();

        addFeatures(n);
        return;
      }
});
ob.observe(document, {subtree:true, childList:true});

function addFeatures(n) {
  // add formatting help tooltips
  n.previousElementSibling.insertAdjacentHTML('beforeend',
         ' (<a href="/help/allowed-markup" target="_blank" title="'+
         '* (name, title), a (href), abbr, b, blockquote (cite), br, center, cite, code, dd, del, dfn, div, dl, dt, em, '+
         'h1, h2, h3, h4, h5, h6, hr, i, ins, img (alt, height, src (https), width), kbd, li, mark, ol, p, pre, q (cite), '+
         'rp, rt, ruby, s, samp, small, span, strike, strong, tt, table, tbody, tfoot, thead, td, th, tr, sub, sup, '+
         'time (datetime, pubdate), u, ul, var">?</a>)');
  n.insertAdjacentHTML('beforeend',
         ' (<a href="http://www.darkcoding.net/software/markdown-quick-reference/" target="_blank">?</a>)');

  // add buttons
  n.parentNode.textAreaNode = n.parentNode.querySelector('textarea');
  btnMake(n, '<b>B</b>', 'Bold', '**');
  btnMake(n, '<i>I</i>', 'Italic', '*');
  btnMake(n, '<u>U</u>', 'Underline', '<u>','</u>');
  btnMake(n, '<s>S</s>', 'Strikethrough', '<s>','</s>');
  btnMake(n, '&lt;br&gt;', 'Force line break', '<br>','', true);
  btnMake(n, '---', 'Horizontal line', '\n\n---\n\n', '', true);
  btnMake(n, 'URL', 'Add URL to selected text', 
          function(e) {
            try {edWrapInTag('[', ']('+prompt("URL:")+')', edInit(e.target))}
            catch(e) {};
          });
  btnMake(n, 'Image (https)', 'Convert selected https://url to inline image', '![image](', ')');
  btnMake(n, 'Table', 'Insert table template', '\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n', '', true);
  btnMake(n, 'Code', 'Apply CODE markdown to selected text',
          function(e){
            var ed = edInit(e.target);
            if (ed.sel.indexOf('\n') < 0)
              edWrapInTag('`', '`', ed);
            else
              edWrapInTag(((ed.sel1==0) || (ed.text.charAt(ed.sel1-1) == '\n') ? '' : '\n') + '```' + (ed.sel.charAt(0) == '\n' ? '' : '\n'),
                          (ed.sel.substr(-1) == '\n' ? '' : '\n') + '```' + (ed.text.substr(ed.sel2,1) == '\n' ? '' : '\n'),
                          ed);
          });
}

function btnMake(afterNode, label, title, tag1_or_cb, tag2, noWrap) {
  var a = document.createElement('a');
  a.className = 'Button';
  a.style.setProperty('float','right');
  a.innerHTML = label;
  a.title = title;
  a.addEventListener('click',
            typeof(tag1_or_cb) == 'function'
                     ? tag1_or_cb
                     : noWrap ? function(e){edInsertText(tag1_or_cb, edInit(e.target))}
                              : function(e){edWrapInTag(tag1_or_cb, tag2, edInit(e.target))});
  a.textAreaNode = afterNode.parentNode.textAreaNode;
  afterNode.parentNode.insertBefore(a, afterNode.nextElementSibling);
}

function edInit(btn) {
  var ed = {node: btn.textAreaNode || btn.parentNode.textAreaNode}
  ed.sel1 = ed.node.selectionStart;
  ed.sel2 = ed.node.selectionEnd,
  ed.text = ed.node.value;
  ed.sel = ed.text.substring(ed.sel1, ed.sel2);
  return ed;
}

function edWrapInTag(tag1, tag2, ed) {
  ed.node.value = ed.text.substr(0, ed.sel1) + tag1 + ed.sel + (tag2?tag2:tag1) + ed.text.substr(ed.sel2);
  ed.node.setSelectionRange(ed.sel1 + tag1.length, ed.sel1 + tag1.length + ed.sel.length);
  ed.node.focus();
}

function edInsertText(text, ed) {
  ed.node.value = ed.text.substr(0, ed.sel2) + text + ed.text.substr(ed.sel2);
  ed.node.setSelectionRange(ed.sel2 + text.length, ed.sel2 + text.length);
  ed.node.focus();
}