47

About:

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

  • <kbd> tags
  • Superscripts and subscripts
  • <del> tags
  • <br> tags
  • &emsp;

when editing posts.

Old Screenshot (Last 3 tags not shown):

This script in action

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 &emsp;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>".

  • 1
    Nice work, Brock! – Mathias Bynens Apr 24 '12 at 7:10
  • I was shown an error message saying to check my browser's console, and when I did there was this message: "This version of the "StackExchange, Add kbd shortcut" script is broken and obsolete. Please uninstall it and (optionally) install the fixed and upgraded script." But what I can't figure out is how to uninstall my current version. There is nothing about it in the README file, nor is it listed with my other Firefox add-ons. I installed it long ago and don't even remember how I installed it to begin with. Can you please document the steps for uninstalling? (P.S. great add-on!) – Mentalist Feb 19 '17 at 8:16
  • @Mentalist Okay, I put a task to add such instructions in my todo list. Meanwhile, for Firefox from the Add-ons manager (Ctrl Shift A), you should see a "Userscripts" entry in the left-hand column. Click it and then you can search for kbd and use the remove button. – Brock Adams Feb 19 '17 at 8:39
  • 1
    @BrockAdams Thank you for the tip! I was looking in Extensions and that's why I didn't see it. All set now. :-) – Mentalist Feb 19 '17 at 9:01
4

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)

feature in action

10


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 :)

  • @Brock no problem. Or, if I get time today, I'll forkfix this ;-). Even better, I'll put it in the real git so that you can fork it/see diffs. – Manishearth Apr 25 '12 at 0:49
  • @Brock I have a working version used in stackapps.com/questions/3373/mathjax-buttons. This can be easily extended--add your kbd handler to the //methods section. (via window.kbd=InsertKbdTag, where InsertKbdTag is the function copied from your script), and add an entry to buttonconfig – Manishearth May 4 '12 at 3:31
  • @Brock note that it interferes with your kbd buttons, so you may want to disable it(my script). Otherwise the buttons will be useless (keyboard shortcuts won't be, though) – Manishearth May 4 '12 at 7:00
  • Finally rolled this into the script with version 2.0. – Brock Adams Feb 12 '17 at 22:17
2

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

2

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

The icon can just be

  • Running out of room for icons, and this is yet another kind of beastie, so may have to wait for version 5 (with customizable dialog). But I have wanted this for myself more than once... – Brock Adams Jun 17 '18 at 21:33
  • For now you can add in a dropdown menu titled more for the other new ones until 5 is ready. – WELZ Jun 17 '18 at 22:40
1

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)

1

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:

enter image description here

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)

enter image description here

  • This should be fixed with version 4.0. Please upgrade and recheck. – Brock Adams Jun 17 '18 at 5:39
  • You're welcome; and thanks for your help. – Brock Adams Jun 17 '18 at 5:52
1

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.

  • 1
    Well, thats annoying. Can't you be like me and never edit your profile? Seriously, I might wait until the 21st, to see if your MSE post gets results, and then address this if still needed. – Brock Adams Jan 15 at 3:07
  • @BrockAdams that's what I was thinking... wait to see if whatever fix they do/don't put forth will solve this. – WELZ Jan 15 at 3:08
  • @BrockAdams LOOK AT MY PROFILE! I EDIT IT DAILY! xD – WELZ Jan 15 at 3:09
  • But the em-space... – WELZ Jan 15 at 3:12
  • Forgot how easy the workaround could be. Should be fixed with version 4.3. – Brock Adams Jan 15 at 5:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .