☰

Medium: Editor For Programmers

Use `code` for inline code. Automatically fix quotes in code tags. Link to a section of text easily.

当前为 2016-07-09 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Medium: Editor For Programmers
  3. // @namespace    https://github.com/Zren/
  4. // @version      3
  5. // @description  Use `code` for inline code. Automatically fix quotes in code tags. Link to a section of text easily.
  6. // @author       Zren
  7. // @icon         https://medium.com/favicon.ico
  8. // @match        https://medium.com/p/*/edit
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function(){
  13.     function wrapInlineCode() {
  14.         var tagBefore = '<code class="markup--code"><strong class="markup--strong">';
  15.         var tagAfter = '</strong></code>';
  16.  
  17.         var sel = window.getSelection();
  18.         if (sel.type === 'Caret' && sel.focusNode.nodeName === "#text") {
  19.             // Note: Does not trigger if first character in text node, since the focus isn't a Text node.
  20.             var str = sel.focusNode.nodeValue;
  21.             var before = str.substr(0, sel.focusOffset - 1);
  22.             var after = str.substr(sel.focusOffset);
  23.             console.log("Before: ", before);
  24.             console.log("After: ", after);
  25.             var index = before.lastIndexOf('`');
  26.             if (index >= 0) {
  27.                 // we just typed the right quote
  28.                 if (index === before.length-1) {
  29.                     // ``
  30.                     // Ignore
  31.                 } else {
  32.                     // `...`
  33.                     var range = document.createRange();
  34.                     range.setStart(sel.focusNode, index);
  35.                     range.setEnd(sel.focusNode, sel.focusOffset);
  36.                     sel.removeAllRanges();
  37.                     sel.addRange(range);
  38.                     var html = range.toString();
  39.                     html = html.substr(1, html.length-2); // trim ``
  40.                     html = tagBefore + html + tagAfter + ' ';
  41.                     document.execCommand('insertHTML', false, html);
  42.                     range.collapse(false); // move cursor to end
  43.                     return;
  44.                 }
  45.             }
  46.             var index = after.indexOf('`');
  47.             if (index >= 0) {
  48.                 // we just typed the left quote
  49.                 if (index == 0) {
  50.                     // ``
  51.                     // Ignore
  52.                 } else {
  53.                     var range = document.createRange();
  54.                     range.setStart(sel.focusNode, sel.focusOffset - 1);
  55.                     range.setEnd(sel.focusNode, sel.focusOffset + index + 1);
  56.                     sel.removeAllRanges();
  57.                     sel.addRange(range);
  58.                     var html = range.toString();
  59.                     html = html.substr(1, html.length-2); // trim ``
  60.                     html = tagBefore + html + tagAfter + ' ';
  61.                     document.execCommand('insertHTML', false, html);
  62.                     range.collapse(false); // move cursor to end
  63.                     return;
  64.                 }
  65.             }
  66.         }
  67.     }
  68.     
  69.     function alwaysBrInPre(e) {
  70.         var sel = window.getSelection();
  71.         if (sel.type === 'Caret' && sel.focusNode.nodeName === "#text") {
  72.             console.log(sel.focusNode.nodeValue.length, sel.focusOffset, sel.focusNode.nodeValue.substr(sel.focusOffset), sel.focusNode);
  73.             if (sel.focusOffset !== 0) return; // End of line = selecting start of next line.
  74.  
  75.             // Focused on start of line.
  76.             var el = sel.focusNode;
  77.             while (el) {
  78.                 if (!el.parentNode) break; // Don't run on #document element since it doesn't have el.hasAttribute
  79.                 if (el.classList && el.classList.contains('section-inner')) break; // Ignore everything outside the post itself.
  80.                 if (el != el.parentNode.firstChild) break; // Only match end of line = start of next line.
  81.                 if (el.parentNode.tagName == 'PRE') {
  82.                     // Insert linebreak <br>
  83.                     
  84.                     var secondPre = el.parentNode;
  85.                     var firstPre = secondPre.previousSibling;
  86.                     
  87.                     firstPre.appendChild(document.createElement('br')); // <br> removed during split
  88.                     var newFocusLine = document.createElement('br');
  89.                     firstPre.appendChild(newFocusLine); // The actual <br> we wanted to enter.
  90.                     
  91.                     // Move all elements back into the first pre.
  92.                     while (secondPre.firstChild) {
  93.                         firstPre.appendChild(secondPre.firstChild);
  94.                     }
  95.                     
  96.                     // Delete the second <pre>
  97.                     // We can't remove it since it will break the entire editor...
  98.                     secondPre.appendChild(document.createElement('br'));
  99.                     //secondPre.remove();
  100.                     //document.execCommand('delete');
  101.                     
  102.                     // Move cursor to new line.
  103.                     var range = document.createRange();
  104.                     range.setStart(newFocusLine, 0);
  105.                     range.collapse(true);
  106.                     sel.removeAllRanges();
  107.                     sel.addRange(range);
  108.                     
  109.                     e.preventDefault();
  110.                 }
  111.                 el = el.parentNode;
  112.             }
  113.         }
  114.     }
  115.  
  116.     function onKeyDown(e) {
  117.         if (e.key === '`') {
  118.             setTimeout(wrapInlineCode, 100); // Wait for ` to be written so we can replace it
  119.         } else if (e.keyCode == 9) { // Tab
  120.             e.preventDefault();
  121.         } else if (e.keyCode == 13) { // Enter
  122.             alwaysBrInPre(e);
  123.         } else if (e.key == '6' && e.ctrlKey && e.altKey) {
  124.             console.log('CTRL+ALT+6', e);
  125.         } else {
  126.             console.log('Key:', e.key, e.ctrlKey, e.altKey);
  127.         }
  128.     }
  129.     
  130.     function fixQuotes() {
  131.         // Fix quotes in <pre> and <code> tags.
  132.         setInterval(function(){
  133.             var codeTags = document.querySelectorAll('pre, code');
  134.             for (var tag of codeTags) {
  135.                 if (tag.innerHTML.indexOf('“') >= 0 || tag.innerHTML.indexOf('”') >= 0) {
  136.                     tag.innerHTML = tag.innerHTML.replace('“', '"').replace('”', '"');
  137.                 }
  138.             }
  139.         }, 1000);
  140.     }
  141.     
  142.     function showPermalink() {
  143.         // Setup (temporary) permalink to line.
  144.         var tag = document.createElement('a');
  145.         tag.style.position = 'absolute';
  146.         tag.style.display = 'block';
  147.         tag.style.top = '-9999px';
  148.         tag.style.left = 0;
  149.         tag.style.color = '#888';
  150.         tag.innerHTML = '¶'; //'[link]';
  151.         document.body.appendChild(tag);
  152.  
  153.         function onMouseOver(e) {
  154.             var el = e.relatedTarget || e.target;
  155.             while (el) {
  156.                 if (!el.parentNode) break; // Don't run on #document element since it doesn't have el.hasAttribute
  157.                 if (el.classList.contains('section-inner')) break; // Ignore everything outside the post itself.
  158.                 if (el.hasAttribute('name')) {
  159.                     showTag(el)
  160.                     break;
  161.                 }
  162.                 el = el.parentNode;
  163.             }
  164.         }
  165.         function showTag(el) {
  166.             var rect = el.getBoundingClientRect();
  167.             var url = document.querySelector('link[rel="canonical"]').href;
  168.             url = url.substr(0, url.length - '/edit'.length);
  169.             url += '#' + el.getAttribute('name');
  170.             tag.href = 'javascript:window.history.replaceState({}, "", "' + url + '")';
  171.             var tagGuide = document.querySelector('.section-inner');
  172.             var tagGuideRect = tagGuide.getBoundingClientRect();
  173.             var tagRect = tag.getBoundingClientRect();
  174.             tag.style.left = '' + (tagGuideRect.left + window.scrollX - tagRect.width - 60) + 'px';
  175.             tag.style.top = '' + (rect.top + window.scrollY) + 'px';
  176.         }
  177.  
  178.         var taggedElements = document.querySelectorAll('.postArticle-content');
  179.         for (var el of taggedElements) {
  180.             //el.addEventListener('mouseover', onMouseOver, true);
  181.             el.addEventListener('click', onMouseOver, true);
  182.         }
  183.     }
  184.     
  185.     function onLoad() {
  186.         // Bind keys
  187.         var main = document.querySelector('main[contenteditable="true"]');
  188.         main.addEventListener('keydown', onKeyDown, true);
  189.         
  190.         fixQuotes();
  191.         showPermalink();
  192.     }
  193.  
  194.     function waitForLoad() {
  195.         var main = document.querySelector('main[contenteditable="true"]');
  196.         if (main) {
  197.             onLoad();
  198.             console.log('[Medium: Markdown] Loaded');
  199.         } else {
  200.             setTimeout(waitForLoad, 100);
  201.         }
  202.     }
  203.     setTimeout(waitForLoad, 100);
  204. })();
  205.