Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In Etherpad, are there any shortcuts for other actions than bold, italic and underline (strike, bullet point, ...)?

Well, pretty much everything is in the title: are there any shortcuts to perform something else than making text bold, italic or underlined ? Or any plugin allowing to do so ?

According to a colleague of mine, the source code doesn't seem to contain such things, but maybe we've missed something ?

like image 713
Anto Avatar asked May 22 '12 09:05

Anto


1 Answers

Etherpad contains an embedded rich-text editor called ACE2 (originally AppJet Code Editor), that seems to be responsible for the keyboard shortcut handling.

The ace.js file that is embedded by default used to be minified and therefore hard to read in older version of Etherpad, but you can read the original source files directly in the infrastructure/ace part of the source code, from which the minified version is produced. For more info about that have, a look at ACE2's README. More recent versions (at least the etherpad.org ones) seem to include the normal ACE2 JS source.

The keyboard shortcut handling code is located in ace2_inner.js, inside the handleKeyEvent() function. Based on this, it looks like the keyboard shortcuts supported out-of-the-box are the following (on top of the browser's shortcuts like Cut/Copy/Paste):

  • Enter - special etherpad carriage return
  • Tab or Shift+Tab - indent or outdent bullet lists
  • Ctrl+Z - special etherpad undo
  • Ctrl+Y - special etherpad redo
  • Ctrl+B - bold
  • Ctrl+I - italics
  • Ctrl+U - underline
  • Ctrl+H - delete
  • Ctrl+S - Save a Revision

Nothing for strikethrough or bullet lists indeed, and nothing that looks like an easy extension mechanism for shortcuts, so you may need to get your hands dirty ;-)

If you have your own deployment of Etherpad the easiest might be to modify the source code of ACE2 to handle additional shortcuts, then re-build the ace2.js minified version (according to the instructions in the README) if needed. Here's an example of how to handle Ctrl+S shortcut for strikethrough toggle, and Ctrl+L for bullet list toggle. The strikethrough shortcut disables the builtin browser Save As... shortcut, which I find is a bonus, but if you don't like that you can always opt for another key than S.
Insert the following snippet in ace2_inner.js in between similar-looking blocks that handle other shortcuts, around line 3200:

/* Ctrl+S toggles striketrough, and prevents triggering the browser's Save dialog */
if ((!specialHandled) && isTypeForCmdKey &&
    String.fromCharCode(which).toLowerCase() == "s" &&
    (evt.metaKey ||  evt.ctrlKey)) {
  // ctrl/cmd-s (strikethrough toggle)
  fastIncorp(13); // don't ask me ;-)
  evt.preventDefault();
  toggleAttributeOnSelection('strikethrough');
  specialHandled = true;
}
if ((!specialHandled) && isTypeForCmdKey &&
    String.fromCharCode(which).toLowerCase() == "l" &&
    (evt.ctrlKey)) {
  // ctrl/cmd-L (bullet list toggle)
  fastIncorp(9); // seriously, don't ask me ;-)
  evt.preventDefault();
  doInsertUnorderedList();
  specialHandled = true;
}

If you can't rebuild the minified version you can also try to directly patch it using the minified names. Here's the minified version of the above snippet for me, though YMMV, I didn't check if the minification is stable and reuses the same shortened names every time. Search for "y" (with the quotes) to locate the minified version of handleKeyEvent() inside ace.js:

if ((!Cp)&&Cu&&String.fromCharCode(Ct).toLowerCase()=="s"&&(i.metaKey || i.ctrlKey)){G(13);\\ni.preventDefault();c("strikethrough");Cp=true;}if((!Cp)&&Cu&&String.fromCharCode(Ct).toLowerCase()=="l"&&(i.metaKey||i.ctrlKey)){G(9);\\ni.preventDefault();As();Cp=true;}

Finally, if you don't control the etherpad deployment you could perhaps implement something similar using an in-browser GreaseMonkey script that patches the default handleKeyEvent() function. As a starting point for hooking into the editor, try inspecting the window.pad* objects, such as window.padeditor. For instance select some text in the editor and try the following in the console:

> window.padeditor.ace.execCommand('bold')
> window.padeditor.ace.execCommand('insertunorderedlist') 
like image 107
odony Avatar answered Oct 21 '22 15:10

odony