☰

AO3 Formatting Shortcuts

Keyboard shortcuts for HTML tags

  1. // ==UserScript==
  2. // @name         AO3 Formatting Shortcuts
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4.2
  5. // @license      MIT
  6. // @description  Keyboard shortcuts for HTML tags
  7. // @author       Grumblesaur
  8. // @match        https://archiveofourown.org/works/*
  9. // @match        https://archiveofourown.org/comments/*
  10. // @match        https://archiveofourown.org/chapters/*
  11. // @icon         https://www.google.com/s2/favicons?sz=64&domain=archiveofourown.org
  12. // @grant        none
  13. // ==/UserScript==
  14.  
  15. /*
  16.  * Introduces shortcuts to type HTML elements into Archive of our Own
  17.  * (AO3) text boxes. The shortcuts are:
  18.  *   - Ctrl b: <b></b> – bold text
  19.  *   - Ctrl d: <details></details> – a hideable element
  20.  *   - Ctrl e: <em></em> – semantic emphatic italics
  21.  *   - Ctrl i: <i></i> – italics
  22.  *   - Ctrl k: <cite></cite> – semantic title italics
  23.  *   - Ctrl l: <li></li> – list item
  24.  *   - Ctrl m: <mark></mark> – highlighting
  25.  *   - Ctrl o: <ol></ol> – ordered list
  26.  *   - Ctrl p: <p></p> – paragraph
  27.  *   - Ctrl q: <q></q> – inline quote
  28.  *   - Ctrl s: <s></s> – strikethrough
  29.  *   - Ctrl u: <u></u> – underline
  30.  *
  31.  *   - Ctrl Shift b: <blockquote></blockquote> – block quote
  32.  *   - Ctrl Shift c: <code></code> – monospace/code
  33.  *   - Ctrl Shift i: <img src="" alt="(image description here)" /> – image
  34.  *   - Ctrl Shift m: <summary></summary> – heading for a <details> element
  35.  *   - Ctrl Shift n: <br/> – forced line break
  36.  *   - Ctrl Shift s: <strong></strong> – semantic emphatic bold
  37.  *   - Ctrl Shift u: <ul></ul> – unordered list
  38.  */
  39.  
  40. function getTagMap() {
  41.   return {
  42.     'shifted': {
  43.       'b' : ['<blockquote>', '</blockquote>'],
  44.       'c' : ['<code>', '</code>'],
  45.       'i' : ['<img src="', '" alt="(image description here)" />'],
  46.       'm' : ['<summary>', '</summary>'],
  47.       'n' : ['', '<br/>'],
  48.       's' : ['<strong>', '</strong>'],
  49.       'u' : ['<ul>', '</ul>']
  50.     },
  51.     'normal': {
  52.       'b' : ['<b>', '</b>'],
  53.       'd' : ['<details>', '</details>'],
  54.       'e' : ['<em>', '</em>'],
  55.       'i' : ['<i>', '</i>'],
  56.       'k' : ['<cite>', '</cite>'],
  57.       'l' : ['<li>', '</li>'],
  58.       'm' : ['<mark>', '</mark>'],
  59.       'o' : ['<ol>', '</ol>'],
  60.       'p' : ['<p>', '</p>'],
  61.       'q' : ['<quote>', '</quote>'],
  62.       's' : ['<s>', '</s>'],
  63.       'u' : ['<u>', '</u>']
  64.     }
  65.   }
  66. }
  67.  
  68.  
  69. function localError(msg) {
  70.   console.log("(AO3 Formatting Shortcuts): " + msg);
  71. }
  72.  
  73. (function() {
  74.   'use strict';
  75.   // Insert a pair of HTML tags into the active text area, and rewind the
  76.   // cursor to sit between them.
  77.   function typeInTextarea(opening, closing, el = document.activeElement) {
  78.     const [start, end] = [el.selectionStart, el.selectionEnd];
  79.     let selected = el.value.substring(start, end);
  80.     el.setRangeText(opening + selected + closing, start, end, 'end');
  81.     el.selectionStart -= closing.length;
  82.     el.selectionEnd -= closing.length;
  83.   }
  84.  
  85.   const tagMap = getTagMap();
  86.  
  87.   function formatting(event) {
  88.     /* Separated shift key from capitalization to enable the use
  89.      * of shortcuts when users have capslock on. */
  90.     let shiftState = event.shiftKey ? 'shifted' : 'normal';
  91.     let keyPress = event.key.toLowerCase();
  92.     if (event.ctrlKey && Object.keys(tagMap[shiftState]).includes(keyPress)) {
  93.       event.preventDefault();
  94.       const tags = tagMap[shiftState][keyPress];
  95.       if (tags.includes(null) || tags.includes(undefined)) {
  96.         /* This shouldn't happen. */
  97.         localError("Problem with command key: " + keyPress);
  98.         return;
  99.       }
  100.       typeInTextarea(tags[0], tags[1]);
  101.     }
  102.   }
  103.  
  104.   document.addEventListener('keydown', formatting, false);
  105. })();