Discussions » Creation Requests

A Markdown toolbar for reddit.com

§
Posted: 2015-08-14
Edited: 2015-08-20

A Markdown toolbar for reddit.com

Reddit uses Markdown in making posts (it requires to have log in).
It would be great to have a userscript that offers a Markdown toolbar for reddit.
What I have in mind is these two very useful scripts:
Markdown toolbar for GreasyFork and UserStyles.org by wOxxOm, and
Github Comment Enhancer by jerone.

§
Posted: 2015-08-16
Edited: 2015-08-21

I have modified the userscript by @wOxxOm.

edit: Please see my new post.

§
Posted: 2015-08-17

Wouldn't it be better to remove the whole for statement, because it'll still run the loop ?

§
Posted: 2015-08-21
Edited: 2015-08-24

I've posted a new version of the script.
edit 8/24: Now the script works in all cases.

// ==UserScript==
// @name              reddit Markdown toolbar
// @include           https://www.reddit.com/*submit*
// @include           https://www.reddit.com/*comments*
// @icon              https://raw.githubusercontent.com/dcurtis/markdown-mark/master/png/66x40-solid.png
// @version           1
// @grant             GM_addStyle
// ==/UserScript==


var x;

// IF IT'S A SUBMIT PAGE
if (window.location.href.indexOf('submit') > - 1) {
  // THEN ADD TOOLBAR TO THE 'NEW POST' TEXTBOX
  x = document.querySelectorAll('div.md > textarea:nth-child(1)')[0].parentNode;
  addFeatures(x);
} 
else {
  var textareas = document.querySelectorAll('textarea');

  // ADD TOOLBAR TO EDITING TO NEW COMMENTS FORM + TO YOUR EXISTING COMMENTS
  for (i = 0; i < textareas.length - 2; i++) {
    x = document.querySelectorAll('textarea') [i].parentNode;
    addFeatures(x);
  } 
}  





function addFeatures(n) {

    n.parentNode.textAreaNode = x.firstChild;              


    GM_addStyle('\
      .Button {\
          display: inline-block;\
          cursor: pointer;\
          margin: 0px;\
          font-size: 12px;\
          line-height: 1;\
          font-weight: bold;\
          padding: 4px 6px;\
          background: -moz-linear-gradient(center bottom , #CCC 0%, #FAFAFA 100%) repeat scroll 0% 0% #F8F8F8;\
          border: 1px solid #999;\
          border-radius: 2px;\
          white-space: nowrap;\
          text-shadow: 0px 1px 0px #FFF;\
          box-shadow: 0px 1px 0px #FFF inset, 0px -1px 2px #BBB inset;\
          color: #333;}');


  // add buttons
  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, tag2, noWrap) {
  var a = document.createElement('a');
  a.className = 'Button';
  a.innerHTML = label;
  a.title = title;
  a.style.setProperty('float','right');

  a.addEventListener('click',
            typeof(tag1) == 'function' 
                     ? tag1
                     : noWrap ? function(e){edInsertText(tag1, edInit(e.target))}
                             : function(e){edWrapInTag(tag1, tag2, edInit(e.target))});   

  var nparent = afterNode.parentNode;
  a.textAreaNode = nparent.textAreaNode;
  nparent.insertBefore(a, nparent.firstElementChild);    
}



function edInit(btn) {

  var ed = {node: 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();
}
§
Posted: 2015-08-24
Edited: 2015-08-24

edit 8/24: Now the script works in all cases.

§
Posted: 2015-08-24

@wOxxOm: is it ok with you if I uploaded this script? (giving you the credit for the initial code, of course)

woxxomMod
§
Posted: 2015-08-24
Edited: 2015-08-24

The script's license is MIT, so yes, you can, see the awesome tldrlegal.com for details.

§
Posted: 2015-08-24

Thanks for the reply. I've uploaded it here.

Post reply

Sign in to post a reply.