Further keyboard shortcut support

[Jermolene]

We still lack several important keyboard-related features:

• Keyboard use of dropdowns
• Focus on title after creating new tiddler
• Keyboard shortcuts for tiddlers in view mode (which implies adding a "currently selected tiddler" marker)

[gernert]

Keyboard shortcuts are at the moment limited to:

• Ctrl-Enter
• Escape

Using Danielo's 'keyboard-snippets' I added Shift-Enter as a shortcut for <br> and I really love that shortcut. For me it is almost 'natural' to use this keyboard shortcut.

I think it needs to be added to the core keyboard shortcuts.

[gernert]

@Jermolene

Seen the discussion Discussion: 'Default behavior of line breaks #443 and to ease transition from TWc.

[tobibeer]

Just to make sure things don't get lost, please add to the ticket description...

• adding tags simply by hitting enter in the tag input field
  • see #1084
• hitting enter while entering a new field value adds the new field
  • then setting the focus on the new field-name input to enter another new field
  • see https://github.com/Jermolene/TiddlyWiki5/pull/1063#issuecomment-63167533

[pmario]

may be of interest: https://www.youtube.com/watch?feature=player_detailpage&v=GEqXu6xay7M#t=3455 .. 5min

[rubaboo]

+1 for #1084. Also, navigating tag suggestions list with Arrows and picking from it with Enter.

[aelocson]

Another useful addition in this area would be a keyboard shortcut that moved the focus to the search input in the sidebar.

I also instinctively find myself wanting to press Ctrl+Tab to navigate between tabs, especially when the focus is on the input in Advanced Search.

[felixhayashi]

Hi,

I just did some experiments with the keyboard widget and I discovered the following problem:

• I wanted to (1) close a modal on keypress enter and (2) dispatch a confirm message.
• I wanted to (3) close a modal on keypress escape and (4) dispatch a cancel message.

Problem is: seems like I cannot trigger two messages for one key combination.

 <$keyboard key="enter" message="tm-close-tiddler">
 <$keyboard key="enter" message="other message">
 ...
 </$keyboard>
 </$keyboard>

I tried to merge the messages into a wrapper message but close tiddler cannot be called from outside :(

It also bloats the code and it would be nice be be able to write <$keyboard key="enter" messages="m1 m2 m3 ...">

-Felix

[pmario]

slightly related: https://github.com/Jermolene/TiddlyWiki5/issues/1801#issuecomment-113529344

IMO the keyboard widget should allow us to use action widgets, similar to the button widget.

[sukima]

I know this is a long shot… Vim bindings? :grin: (one can hope, can't I?)

[Jermolene]

Vim bindings?

I know there's some bugs, but aren't Vim bindings supported by the CodeMirror plugin?

[tobibeer]

What I would very much like is the ability to move from the search input to the search results hitting the DOWN key ...however, obviously, only when the search input is non-empty.

I extracted the rest of this comment into the issue linked below...

[tgrosinger]

What I would very much like is the ability to move from the search input to the search results hitting the DOWN key ...however, obviously, only when the search input is non-empty.

And along those lines, how about pressing / to bring you into the search box? I think that is somewhat widely accepted behavior.

[pmario]

/ really? for windows users it would be \ ;)

[felixhayashi]

/ really? for windows users it would be \ ;)

I think this jump-to-searchbox-convention via / may be common in the US only since US keyboard layouts offer direct access to / (I have to admit that I am a bit jealous of that sometimes :).

[ssokolow]

It's a Vim-ism that various applications picked up.

When you're in normal mode, you type /regexp or /regexp/flags to search by regexp.

You can also type :%s/regexp/replacement/flags to do search and replace. (The initial : switches you into command mode, the % means "entire document" and the s means "substitute". Pressing Enter returns you to Normal mode.)

(The syntax is modular in Vim so, for example, instead of :%, you can hit v for Visual mode (text selection), V for linewise visual, or Ctrl+V for Visual Block, select some text using any movement commands you like, then do the s/regexp... part to substitute within the selection. A common one is ggVG= which is "go to top (gg), linewise select (V), go to bottom (G), reindent selected (=)" because the reindent action is only defined for selections)

Chrome ignores it on my system, so I guess they went through with their plan to drop support for it several years ago. Mozilla made noises about following suit with Firefox "to better match desktop conventions" and I commented on the bug that, if that's the case, I look forward to them reworking their scroll-wheel tab bar behaviour to match every GUI toolkit and other browser I've ever tried. The effort seems to have fizzled out.

[felixhayashi]

It's a Vim-ism that various applications picked up.

Ah, so that's where it came from ;)

[mgroth0]

I noticed this issue is still open but hasn't been discussed here in over a year. Have there been any updates? I'm trying to add shortcuts for creating a new tiddler (command-N) and saving my wiki(command-S).

[mgroth0]

I'm trying to follow the advice given by Eric but I'm not having much luck. I followed the instructions to add if(this["accesskey"]) { domNode.setAttribute("accesskey",this["accesskey"]); } to $:/core/modules/widgets/button.js and then I added accesskey="N" to $:/core/ui/Buttons/new-tiddler. I'm not sure if this was all I had to do, but pressing N with any or no modifier keys does not do anything.

[sukima]

/ really? for windows users it would be \ ;)

\ was and still is the most stupidest character to seperate paths in a file system. It has no meaning typographically and is used in well over 80% of computer languages as an escape character. The very idea that Microsoft thought it was a good idea is just ludicrous.

In fact it makes things ten times worse because you have to escape it so in every instance of dealing with a windows filesystem you have to double escape: \\foo\\bar\\baz and if your interpolating or serializing that path in source code you could easily end up with \\\\foo\\\\bar\\\\baz.

Worse yet the use of \ in windows as a path separator has poisoned the modern culture confusing / with \.

I suppose it's also worth noting that a huge number of people are confused about the term “backslash,” no thanks to Microsoft. In MS-DOS and its successor operating systems, the backslash (\), a mirror-reversed slash, is used to separate components of a path in the filesystem—that is, to separate names of parent and child directories, and to separate a filename from the name of the directory that contains it. However, in almost all other computer contexts—and especially in URLs—the character used for that separation is a forward slash, also known simply as a slash. (Before Microsoft popularized the backslash, there was no need to say “forward” slash.)

But because many people's first exposure to computers has been a Microsoft operating system, a lot of people don't understand that the backslash is unique to MS. So I hear a lot of people try to say URLs aloud by saying things like “h t t p colon backslash backslash. . . .” And sometimes they try to type URLs that way too.

Suffice it to say: unless you're talking about the location of a file on a Windows disk, don't use backslashes. ~ http://www.kith.org/journals/neology/2011/12/a_slash_by_any_other_name.html

Sorry, this is a pet peeve of mine. I'll reign it back in. The use of a forward slash for searching started some 30 years ago when the concept of a regexp was introduced in line editors like ex or sed and popularized by languages like PERL (s/pattern/replacement/) then it became simplified in visual editors like Vi (and now by popular demand Vim). The notion has (in my experience) proliferated itself to many applications and is a popularized method to enter a search mode from one keyboard input (in contrast to two key strokes CTRLf which in my opinion was a conspiracy to make peoples hands hurt).

[ssokolow]

While I don't have a more primary citation, this article about NUL-terminated strings eliminates Microsoft's choice of \ as a path separator from the running for "The Most Expensive One-byte Mistake" because "IBM had decided to use the slash for command flags, eliminating Unix as a precedent".

...so, pending further research, I tentatively consider it IBM's fault, not Microsoft's.

[mgroth0]

I have some more information on my problem. Firstly, I tested <a href="https://www.google.com" accesskey="h">google</a> in a tiddler and this worked fine for me, so that rules out a few potential problems. Secondly, accesskey="whatever" is not appearing in the HTML for my buttons even after making the modifications I mentioned above and restarting everything. I tested another modification in $:/core/modules/widgets/button.js by changing if(this["aria-label"]) { domNode.setAttribute("aria-label",this["aria-label"]); } to if(this["bria-label"]) { domNode.setAttribute("bria-label",this["bria-label"]); } This prevented aria-label attributes from apearing, so I know that the code is being used.

So just to show that I have made the appropriate modifications, here are the current snippets of my code.

From $:/core/modules/widgets/button.js:

if(this["aria-label"]) { domNode.setAttribute("aria-label",this["aria-label"]); } if(this["accesskey"]) { domNode.setAttribute("accesskey",this["accesskey"]); }

From $:/core/ui/Buttons/new-tiddler:

<$button message="tm-new-tiddler" accesskey="n" tooltip={{$:/language/Buttons/NewTiddler/Hint}} aria-label={{$:/language/Buttons/NewTiddler/Caption}} class=<<tv-config-toolbar-class>>> <$list filter="[<tv-config-toolbar-icons>prefix[yes]]"> {{$:/core/images/new-button}} </$list> <$list filter="[<tv-config-toolbar-text>prefix[yes]]"> <span class="tc-btn-text"><$text text={{$:/language/Buttons/NewTiddler/Caption}}/></span> </$list> </$button>

And yet while the HTML element will produce an accesskey attribute for me, the $button widget will not.

Just stumbled across this issue when looking for something that's tracking a shortcut for focusing on the search field (/ would be fantastic!) and being able to navigate dropdowns (like the search results) via the arrow keys. Just want to add my vote that, I've only been a tiddlywiki user for a few days now, but those two things are probably my number 1 feature requests as I keep trying them only to find they're not working 🙈

[diego898]

I would love to see something like the "command palette" from sublime text or the Jupyter notebook.

I figure no matter where you are, you can press cmd+shift+p and a popup search bar appears where you can type and it returns a list of matching tiddlers using fuzzy finding.

[gucce]

Please add more keyboard shortcuts! I really love how tiddlywiki works but it is frustrating having to use the mouse for everything. At the very least, there should be shortcuts for

• Create new tiddler
• Create a new journal
• Jump to search field
• Select items in a list by using the arrow keys (tags, search results, etc.)

I'd also favor a command palette like in Sublime Text (or IntelliJ, or Visual Studio Code, ...). But since this issue has been open for almost four years, I'd prefer a solution which doesn't take another four years to be implemented and I'd be happy with the basic shortcuts.

[BurningTreeC]

Hi @gucce , there's a plugin in prerelease-state at https://burningtreec.github.io/KeeBoord

You can create new tiddlers, new journals, select tiddlers in the story river, edit the selected tiddler, choose dropdown items with the down/up arrow keys (add items like tags with shift-Enter), open a search dropdown (alt-F, select search items with down/up arrows, open item with enter) , cycle through tabs (in the search-dropdown only at the moment, alt-Right / alt-Left)

[gucce]

@BurningTreeC Looks very promising, thanks for pointing it out to me. You mentioned it's in a pre-release state. Are there any known bugs? Anything that could corrupt my TiddlyWiki instance?

[BurningTreeC]

@gucce it needs the latest tiddlywiki prerelease as base, otherwise you get javascript errors and your wiki becomes unusable. I recommend trying it with an empty prerelease tiddlywiki from https://tiddlywiki.com/prerelease/#GettingStarted . If you want to give it a try in your wiki, you better make a copy, upgrade it to the prerelease (https://tiddlywiki.com/prerelease/upgrade.html) and see if it works for you. I cannot make guarantees because the plugin is changing from day to day at the moment.

[BurningTreeC]

Keyboard use of dropdowns Focus on title after creating new tiddler Keyboard shortcuts for tiddlers in view mode (which implies adding a "currently selected tiddler" marker)

We have the second and third points. The first one could be tackled, too...

In my keeboord plugin experiments i added two new attributes to widgets that create popups, openactions and closeactions. I also have an action-popup widget to use within keyboard shortcuts.

The openactions allow activating shortcuts and the closeaction deactivate them. the closeactions are stored in $tw.popup.popups so that they don't get lost. A beforeunload task assures that closeactions are triggered if we close the page with an open popup

[Jermolene]

Hi @BurningTreeC that's interesting, can you point to the code?

How are you handling the onbeforeunload stuff? Widgets should only be setting event handlers on the elements they create.

[BurningTreeC]

See this modified button widget: https://github.com/BurningTreeC/KeeBoord/blob/f5b695668a1f9b4e71783cc6adaf286a06c84649/BurningTreeC/KeeBoord/files/modules/widgets/button.js#L196

It passes the openactions and closeactions to $tw.popup where $tw.popup.show stores the actions to dispatch them when the popup gets cancelled (shown)

https://github.com/BurningTreeC/KeeBoord/blob/f5b695668a1f9b4e71783cc6adaf286a06c84649/BurningTreeC/KeeBoord/files/modules/utils/dom/popup.js#L113

The onbeforeunload stuff isn't handled within a widget. It just needs to cancel all popups, because popup.cancel triggers all closeactions. I add the UnloadTask in a startup module:

https://github.com/BurningTreeC/KeeBoord/blob/f5b695668a1f9b4e71783cc6adaf286a06c84649/BurningTreeC/KeeBoord/files/modules/startup/navigation-tracker.js#L382

[BurningTreeC]

Another feature we could add is selecting dropdown-entries

You can try the tags-dropdown at https://burningtreec.github.io/KeeBoord

the edit-text widget saves the user-input to a second state-tiddler which is used to filter the dropdown-items. navigating up/down through the item-list sets the other state-tiddler to the item-title, so that the input field shows that title, but the dropdown-sorting doesn't change because it's filtered through state-tiddler 2

[BurningTreeC]

Hi all,

To the currently selected tiddler marker,

It can be implemented pretty easily now. I've created some macros for it ... they filter the actions of the cancel-tiddler, close-tiddler and delete-tiddler buttons and set the current-tiddler field of "$:/HistoryList" according to the next/previous tiddler in the story-river if the tiddler resulting from the button-action doesn't stay in the river

That allows to mark the tiddler stored in the current-tiddler field through css (#3546 - escapecss filter to help)

Then we can perform actions on it using keyboard shortcuts

[Jermolene]

Hi @BurningTreeC we need a better name than "currently selected tiddler" because of the existing "currentTiddler" usage. Perhaps clearer to say "FocusTiddler" to mean "the tiddler in the story river that contains the currently focused element"?

Anyhow, whatever we call it, it feels like maybe the navigator widget should be responsible for updating it?

[BurningTreeC]

Anyhow, whatever we call it, it feels like maybe the navigator widget should be responsible for updating it?

That would definetly be the best

[BurningTreeC]

What's missing for this is a "currently selected tiddler" marker

[BurningTreeC]

@Jermolene - we've now had a long time to think about the currently selected tiddler ... do you have an idea how to approach it the best way?

[Jermolene]

Hi @BurningTreeC I'd be inclined to get v5.1.23 out before we work on this area because I think it may take us some iterations to get things right, particularly thinking about the need to play nicely with browser focus handling.

[BurningTreeC]

Hi @Jermolene , that's OK, thanks for answering!

[pmario]

@Jermolene .. I think this one can be closed too.

The only point open from the OP is:

• Keyboard shortcuts for tiddlers in view mode (which implies adding a "currently selected tiddler" marker)

But there are newer issues and may be PRs that also discuss this topic. eg: https://github.com/Jermolene/TiddlyWiki5/issues/4782

[pmario]

@Jermolene ... bump to close this issue see my comment from https://github.com/Jermolene/TiddlyWiki5/issues/980#issuecomment-1040385491

[Jermolene]

Thanks @pmario