TiddlyWiki – EditSectionPlugin Keyboard Shortcuts

Like so many of his plu­g­ins, Eric Shulman’s Edit­Sec­tion­Plu­g­in for Tid­dly­Wi­ki is quite awe­some. Espe­cial­ly in long tid­dlers it can save you a lot of scrolling and search­ing. One thing I was miss­ing, though, were the key­board short­cuts ESC to can­cel edit­ing and CTRL+ENTER to fin­ish edit­ing, like the ones you have when edit­ing the full tid­dler. So I added them.

Since the plu­g­in code is quite long, I will just post the few lines that need to be patched / added to Eric’s orig­i­nal plu­g­in. My addi­tions are shown in red. They are based on v1.8.1 of the Edit­Sec­tion­Plu­g­in.

In config.macros.editSection.createPanel add

return this.ok(ev);

In config.macros.editSection.initForm add

jQuery(form).keydown( function(eventObject) {
    if (eventObject.which == 27) { // ESC
    if (eventObject.which == 13 && eventObject.ctrlKey) { // CTRL-ENTER
if (version.extensions.TextAreaPlugin) new window.TextAreaResizer(form.content);

In .initForm a key­board event han­dler is added to pop-up (form) that fires a func­tion on every key­press, which lis­tens specif­i­cal­ly for ESC or CTRL+ENTER. When ESC is pressed, the “Can­cel” but­ton is passed to the .cancel func­tion as orig­i­nat­ing ele­ment. Same with the “Save” but­ton for CTRL-ENTER. The new line in .createpanel ini­tial­ly gives focus to the “Can­cel” but­ton (any form ele­ment would do), so that press­ing e.g. ESC works with­out hav­ing a form ele­ment first.

The code could have been more con­cise with some changes to the EditSectionTemplate, but that would require edit­ing two tid­dlers.

last posts in TiddlyWiki:

No Comments

Post a Comment

Your email is never shared.