## TiddlyWiki – EditSectionPlugin Keyboard Shortcuts

Like so many of his plugins, Eric Shulman’s EditSectionPlugin for TiddlyWiki is quite awesome. Especially in long tiddlers it can save you a lot of scrolling and searching. One thing I was missing, though, were the keyboard shortcuts ESC to cancel editing and CTRL+ENTER to finish editing, like the ones you have when editing the full tiddler. So I added them.

Since the plugin code is quite long, I will just post the few lines that need to be patched / added to Eric’s original plugin. My additions are shown in red. They are based on v1.8.1 of the EditSectionPlugin.

In config.macros.editSection.createPanel add

this.showPanel(p,here,ev);
jQuery(f).find("INPUT[value=cancel]").focus();
return this.ok(ev);


In config.macros.editSection.initForm add

form.content.value=store.getTiddlerText(tid,'');
jQuery(form).keydown( function(eventObject) {
if (eventObject.which == 27) { // ESC
config.macros.editSection.cancel(jQuery(this).find("INPUT[value=cancel]").get(0),eventObject);
}
if (eventObject.which == 13 && eventObject.ctrlKey) { // CTRL-ENTER
config.macros.editSection.saveForm(jQuery(this).find("INPUT[value=save]").get(0),eventObject);
}
});
if (version.extensions.TextAreaPlugin) new window.TextAreaResizer(form.content);


In .initForm a keyboard event handler is added to pop-up (form) that fires a function on every keypress, which listens specifically for ESC or CTRL+ENTER. When ESC is pressed, the “Cancel” button is passed to the .cancel function as originating element. Same with the “Save” button for CTRL-ENTER. The new line in .createpanel initially gives focus to the “Cancel” button (any form element would do), so that pressing e.g. ESC works without having a form element first.

The code could have been more concise with some changes to the EditSectionTemplate, but that would require editing two tiddlers.

last posts in TiddlyWiki: