<kbd>, Superscript and Subscript, markup shortcuts

Question

About:

This script adds buttons and keyboard shortcuts that make it easy to add/remove:

• <kbd> tags
• Superscripts and subscripts
• <del> tags
• <br> tags
•  

when editing posts.

Old Screenshot ^{_{(Last 3 tags not shown)}}:

To use:

Click the button or press AltK on the keyboard and <kbd></kbd> will be inserted at the cursor.
If text is selected, it will be wrapped by the <kbd> tags instead.

Likewise for the Superscript and Subscript tags, the keyboard shortcuts are Alt↑ and Alt↓ (Up arrow and Down arrow).

The delete (semantic strikethrough) shortcut is AltX.
While breaks (<br>) are inserted via click or the AltB shortcut.
And  s use AltM.

Tags are wrapped and unwrapped the same way that other markup (Bold, Italic, etc.) is -- including how whitespace and nested tags are handled.

Update: <kbd> now wraps in word mode. So Ctrl P becomes <kbd>Ctrl</kbd> <kbd>P</kbd>, etc.
All other tags wrap normally ^{_{(unless they don't have an end tag)}}.

Download / Install:

Install the script from GitHub: Install

Requires Tampermonkey, Violentmonkey, or equivalent userscript engine.

Code:

Find the source on GitHub at: BrockA/SE-misc/Add_kbd_sup_sub_shortcuts.user.js

You may also make bug reports, pull-requests, etc. there.

---

Inspired by the question, "Markdown syntax for <kbd>foo</kbd>".

Answer 1

feature-request status-completed

Wrt the <kbd></kbd> insertion, how about this simple scenario: user has Shift+Alt+P and wants to convert it to Shift+Alt+P

Current scenario: user highlights all three keys individually and highlights them one by one. Boring! :(

Proposed scenario: user highlights the entire string (Shift+Alt+P) at once, presses Alt-K, and voila! It converts to Shift+Alt+P :D

Implementation problems: I don't think there should be any. We only need to split the text selection by - or + characters, apply formatting individually to each one of them, and give the result back.

GIF of this feature: (thanks to WELZ)

Answer 2

status-completed

---

Why not use this to add the button? It preserves the integrity of other buttons, and ensures that a button does not get added twice (for example, when in the review section, it will only add the buttons to the editors which don't have it.

//params: text: text of button
//params: callback: a function which takes id of textarea as argument(useful in review section etc when there are multiple textareas) and does the magic encoded in the button
//identify: a unique identifier (for each type of button), that ensures that buttons are not added twice
//pic: optional background pic
function addbutton(text,callback,identify,pic){
    //Callback must take id of textarea as argument.
    $.each($('.wmd-container').not(".canhasbutton"+identify),function(){
    try{
        tid=$(this).find("[id^=wmd-input]")[0].id;
        row=$(this).find("[id^=wmd-button-row]")[0];
        lastel=$(row).find(".wmd-button").not(".wmd-help-button").filter(":last");
        if(lastel.length>0){
            px=parseInt(lastel[0].style.left.replace("px",""))+25;
            //add code for background-position of span as well later
            btn='<li class="wmd-button" style="left: '+px+'px; " onclick="'+callback+'(\''+tid+'\')"><span style="background-image:url('+pic+');">'+text+'</span></li>'; //TODO: do via jQuery
            $(btn).insertAfter(lastel);
        }
        this.className+=" canhasbutton"+identify;
    }catch(e){}
    })
}

Then you add a live listener for this (you already have, it seems).

It just makes it extensible :)

Answer 3

feature-request status-completed

Can you please add in strike-through <del>text</del> and Line break <br />

Answer 4

feature-request status-planned

Can you please add in [tag:something] (to work like the other features)

The icon can just be tag

Answer 5

status-completed

I've added a fix to point 3 over here (it's forked)

It deals with <kbd>[selected text]</kbd> and [<kbd>text</kbd>], where the [] denotes selection.

It will not deal with wierd stuff like <kb[d>text</kbd>]. (Could be done using regexes)

Answer 6

bug tampermonkey status-completed

I have a slow internet, so the webpage loading circle may still keep spinning while the #wmd-input textbox has already loaded. In this case, I've noticed that if I place my cursor into the textbox before the page loads, there are two instances of the five set of buttons that get inserted into my toolbar. Here's a screenshot:

Below is the markup as seen in Chrome DevTools, notice how all .tmAdded buttons have been duplicated. Also, notice those li#wmd-spacerX that have been inserted into the markup (and that are causing those grey vertical lines in the photo above)

Answer 7

bug status-completed

The entire extension doesn't function properly in the profile editor (/users/edit/{UserID}).

I can click on all of the buttons but nothing happens. (GIF)

---

This is probably related to this.

Answer 8

There is an issue with the new Dark theme on StackOverflow site, all the custom buttons now have B button background: