☰

Markdown toolbar for gitlab.com

Markdown toolbar for gitlab.com issues

  1. // ==UserScript==
  2. // @name         Markdown toolbar for gitlab.com
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Markdown toolbar for gitlab.com issues
  6. // @author       sharkoz
  7. // @match        https://gitlab.com/*/issues/*/edit
  8. // @grant        GM_addStyle
  9. // 
  10. // This is a modified version of the script "Markdown toolbar for GreasyFork and UserStyles.org" ()https://greatest.deepsurf.us/en/scripts/6779-markdown-toolbar-for-greasyfork-and-userstyles-org) 
  11. // Thanks a lot to wOxxOm for making that script.
  12. //
  13. // ==/UserScript==
  14. /* jshint -W097 */
  15. 'use strict';
  16.  
  17.  
  18.  
  19.  
  20. var x;
  21.  
  22. // IF IT'S A SUBMIT PAGE
  23. if (false && window.location.href.indexOf('submit') > - 1) {
  24.   // THEN ADD TOOLBAR TO THE 'NEW POST' TEXTBOX
  25.   x = document.querySelectorAll('div.md > textarea:nth-child(1)')[0].parentNode;  
  26.   addFeatures(x);
  27. } 
  28. else {
  29.   var textareas = document.querySelectorAll('textarea');
  30. console.log(textareas)
  31.   // ADD TOOLBAR: TO EDITING YOUR POST, TO 'NEW COMMENT' FORM AND TO EDITING YOUR EXISTING COMMENT(S)
  32.   for (var i = 0; i < textareas.length; i++) {
  33.       console.log(i)
  34.     x = document.querySelectorAll('textarea') [i].parentNode;
  35.     addFeatures(x);
  36.   } 
  37. }  
  38.  
  39.  
  40.  
  41.  
  42.  
  43. function addFeatures(n) {
  44.   
  45.     n.parentNode.textAreaNode = x.firstChild;              
  46.  
  47.     GM_addStyle('\
  48.       .Button {\
  49.           display: inline-block;\
  50.           cursor: pointer;\
  51.           margin: 0px;\
  52.           font-size: 12px;\
  53.           line-height: 1;\
  54.           font-weight: bold;\
  55.           padding: 4px 6px;\
  56.           background: -moz-linear-gradient(center bottom , #CCC 0%, #FAFAFA 100%) repeat scroll 0% 0% #F8F8F8;\
  57.           border: 1px solid #999;\
  58.           border-radius: 2px;\
  59.           white-space: nowrap;\
  60.           text-shadow: 0px 1px 0px #FFF;\
  61.           box-shadow: 0px 1px 0px #FFF inset, 0px -1px 2px #BBB inset;\
  62.           color: #333;}');
  63.  
  64.  
  65.   // add buttons
  66.     btnMake(n, 'H3', 'H3', '\n### ','', true);
  67.     btnMake(n, 'H2', 'H2', '\n## ','', true);
  68.     btnMake(n, 'H1', 'H1', '\n# ','', true);
  69.   btnMake(n, '<b>B</b>', 'Bold', '**');
  70.   btnMake(n, '<i>I</i>', 'Italic', '*');
  71.   // btnMake(n, '<u>U</u>', 'Underline', '<u>','</u>');
  72.   // btnMake(n, '<s>S</s>', 'Strikethrough', '<s>','</s>');  
  73.   btnMake(n, '<s>S</s>', 'Strikethrough', '~~');
  74.   btnMake(n, '^', 'Superscript', '^','', true);
  75.   btnMake(n, '\\n', 'Line break', '&nbsp;\n', '', true);
  76.   btnMake(n, '---', 'Horizontal line', '\n\n---\n\n', '', true);
  77.   /*btnMake(n, 'URL', 'Add URL to selected text',
  78.           function(e) {
  79.             try {edWrapInTag('[', ']('+prompt('URL'+':')+')', edInit(e.target))}
  80.             catch(e) {};
  81.           });*/
  82.   // btnMake(n, 'Image', 'Convert selected https://url to inline image', '!['+'image'+'](', ')');
  83.   //btnMake(n, 'Table', 'Insert table template', '\n| head1 | head2 |\n|-------|-------|\n| cell1 | cell2 |\n| cell3 | cell4 |\n', '', true);
  84.   btnMake(n, 'Code', 'Apply CODE markdown to selected text',
  85.           function(e){
  86.             var ed = edInit(e.target);
  87.             if (ed.sel.indexOf('\n') < 0)
  88.               edWrapInTag('`', '`', ed);
  89.             else
  90.               edWrapInTag(((ed.sel1==0) || (ed.text.charAt(ed.sel1-1) == '\n') ? '' : '\n') + '```' + (ed.sel.charAt(0) == '\n' ? '' : '\n'),
  91.                           (ed.sel.substr(-1) == '\n' ? '' : '\n') + '```' + (ed.text.substr(ed.sel2,1) == '\n' ? '' : '\n'),
  92.                           ed);
  93.           });
  94.     btnMake(n, 'Task', 'Task', '- [ ] ', '', true);
  95. }
  96.  
  97. function btnMake(afterNode, label, title, tag1, tag2, noWrap) {
  98.   var a = document.createElement('a');
  99.   a.className = 'Button';
  100.   a.innerHTML = label;
  101.   a.title = title;
  102.   //a.style.setProperty('float','left');
  103.  
  104.   a.addEventListener('click',
  105.             typeof(tag1) == 'function' 
  106.                      ? tag1
  107.                      : noWrap ? function(e){edInsertText(tag1, edInit(e.target))}
  108.                              : function(e){edWrapInTag(tag1, tag2, edInit(e.target))});   
  109.  
  110.   var nparent = afterNode.parentNode;
  111.   a.textAreaNode = nparent.textAreaNode;
  112.   nparent.insertBefore(a, nparent.firstElementChild);    
  113. }
  114.  
  115.  
  116.  
  117. function edInit(btn) {
  118.  
  119.   var ed = {node: btn.parentNode.textAreaNode } ;           
  120.  
  121.   ed.sel1 = ed.node.selectionStart;
  122.   ed.sel2 = ed.node.selectionEnd,
  123.   ed.text = ed.node.value;
  124.   ed.sel = ed.text.substring(ed.sel1, ed.sel2);
  125.   return ed;    
  126. }
  127.  
  128.  
  129.  
  130.  
  131. function edWrapInTag(tag1, tag2, ed) {
  132.   ed.node.value = ed.text.substr(0, ed.sel1) + tag1 + ed.sel + (tag2?tag2:tag1) + ed.text.substr(ed.sel2);
  133.   ed.node.setSelectionRange(ed.sel1 + tag1.length, ed.sel1 + tag1.length + ed.sel.length);
  134.   ed.node.focus();
  135. }
  136.  
  137. function edInsertText(text, ed) {
  138.   ed.node.value = ed.text.substr(0, ed.sel2) + text + ed.text.substr(ed.sel2);
  139.   ed.node.setSelectionRange(ed.sel2 + text.length, ed.sel2 + text.length);
  140.   ed.node.focus();
  141. }