Go To Shortcut plugin - Quickly find a tiddler using keyboard

Plugins
,
#1

Brings VSCode’s/IntelliJ’s Go To… dialog into TiddlyWiki

The sales pitch

With a single keyboard shortcut open a powerful dialog that allows you to quickly find the tiddler you need:

image
image1031×804 24.1 KB
image
image1003×773 42 KB

  • No prefix — Search for tiddlers by name
  • * — Search for tiddlers by their content
  • ! — Include draft, $:/-prefixed and ignored tiddlers (!* to also search by content)
  • > — Include system tiddlers (>* to also search by content)
  • [ — Search by a specific filter
  • Results are sorted by relevance:
    • First are title-matches that begin with the input
    • Next are title-matches that match the input anywhere in the title
    • And if * prefix is used content matches will be last

And general description

I wrote this plugin because I prefer keyboard navigation and am a big fan of generic “Find everything” dialogs. This plugin is meant to be as quick to use as humanely possible - as soon as the dialog opens you have the focus on the input. You can navigate the results with the keyboard, hit enter to select the tiddler (or click it with a mouse). Everything is customizable, to a reasonable extent.

You can try the plugin here, the default shortcut is Ctrl+Shift+P.

Other noteworthy features:

  • You can control if the results are cleared between opening
  • Dialog shortcut is customizable
  • You can use your own template for displaying the results
  • You can make the dialog window fixed or fluid height depending on your preferences
  • You can customize the filters used by each prefix

Known bugs:

  • If you use a shortcut that’s already used by Framed editor/Codemirror/KeyboardWidget then those will take priority. The default Ctrl+Shift+P is used by those but I stick to it because that’s what I am used to. If/once this PR is merged and released I’ll add an option to make the shortcut a priority shortcut, thus making it always trigger everywhere.

Closing thoughts

This is my most complex work done in pure TiddlyWiki without any JS and I am very proud of how well it works. It required me to understand a few things quite intimately to avoid edge case bugs and issues. Hopefully some of you will find it useful!

10 Likes
Navigating complex tiddler relationships, a discussion for the enthusiast
#2

impressive; I’ve been building my quick find solution from the Command Palette — a command palette for TiddlyWiki, with tweaks to support multiple search types and triggered by a single key shortcut (/, also ctrl+/, shift+/ for different features using a repackaged mousetrap

3 Likes
#3

Well of course it was already invented :(.

But at least I can claim mine is written entirely in Tiddlywiki :).

1 Like
#4

Nicely done, a very good example of leveraging wikitext for keyboard driven UX.

2 Likes
#5

@Maurycy is this useable in mobile ?
If yes can you add a pagetoolbar button to access it?

#6

Unfortunately it was not intended for mobile, since the main reason for making this was to improve the speed of keyboard navigation.
I think it would work out of the box or with little changes, but I am questioning the usability of this plugin on mobile anyway, where I’d much rather just use regular search since you can’t do anything in a timely manner anyway :). (at least I can’t do anything quickly on mobile)

#7

For quick searches i am using the command palette plug-in in mobile invoked using a pagetoolbar button as shown here.

Screenshot_20221016-032724_Chrome
Screenshot_20221016-032724_Chrome1080×1943 171 KB

Since yours is entirely wikitext based, I was checking whether I can replace command palette with the one you created.

#8

Very inspiring and nicely done!
Is there a reason why you didn’t use the TW modal mechanism? I think this would be a prime application for modals…
Have a nice day
Yaisog Bonegnasher

#9

Probably the reason was at the point when I started writing the first version of this mechanism I didn’t yet know about the modal mechanism and then I didn’t even think of rewriting it :).

#10

I see, makes sense.
A nice thing about the modal is that it fades the background by default, thus focusing more on the modal itself. Also, it is anchored near the top of the viewport. I found your modal a bit too “jumpy” when the content size changed, i.e. I had to chase the input widget visually while entering text – I guess this could be changed with a few lines of CSS, though.
I found that when using a modal, I had to manually close the modal window by deleting its tiddler after clicking on a link to another tiddler inside the modal. At least in my wiki, not on tiddlywiki.org. Since the fix was so quick, I didn’t bother trying to find out why.

Have a nice day
Yaisog

#11

I agree it’s grating though I got used to it. Completely forgot, this can be customized in options though I never noticed that, for some reason, it doesn’t seem to work on the published showcase page. I’ll need to investigate it.

I am not sure I’ll be coming back to making any big changes to this plugin, I particularly like Command Palette that was linked earlier and will most likely switch to using it altogether, essentially abandoning this project. I might add an option to make the vertical position stick so it doesn’t jump around when I add palette support. But I don’t think I’ll be rewriting it to use modals.

#12

0.2.1 is out

Adds two things:

  • Uses palette colors now so it will be usable on dark palettes
  • Fixed incorrect Tiddler type on the style tiddler, which fixes the bug where certain options were not respected - most notably static/fluid height

This should be now fixed!

2 Likes
#13

0.3.0 is out

Adds two small things:

  • State for the plugin is no longer stored in $:/plugins/EvidentlyCube/GoToShortcut/Store but in $:/temp/EC-GoToShortcut/Store as it doesn’t need to be stored
  • Selected/hovered option colors are fixed to make it actually possible to see what is selected and what is not

Get it here!

I’ll be making another update to consolidate where the configuration for this plugin is but after that I think I’ll probably switch to Command Palette, mayhap fork it and maintain it for my own purposes if Souk21 is no longer interested in doing so/doesn’t have the time.

2 Likes
#14

Nice try, I also refactor the old command palette widget to ts, but its code was too long… tiddlywiki-plugins/CommandPaletteWidget.ts at master · tiddly-gittly/tiddlywiki-plugins · GitHub

Glad to see a new version. And I may re-invent a new version in the future some day, lets learn from each other.

1 Like
#15

That sounds interesting. Souk has responded to issues in github repo only once in the past one and half to two years (might be due to lack of time). It would be nice if you can fork and maintain it.

#16

I’ve been using command palette for some time now and love it. It’s become part of my workflow for sure.

I would love to see @Maurycy fork it and maintain it if Souk isn’t going to be supporting it any longer. I actually prefer the popup window of command palette at this point. It’s a more concise list and I don’t need the other detail. I also don’t care for the way the background presents as dark and not very visible. I like to see the context of what I have up when I’m searching for the next tiddler. Just my personal preferences and use case, though.

1 Like
#17

It doesn’t seem to work for me. I trigger the menu, and it comes up completely blank (unlike your demo). Does it require 5.2.2 ? (I’m on 5.2.1)

Thanks!

#18

Well would you look at that, I have it configured to require 5.2.0 but I am pretty sure I wrote it for 5.2.2 at the very least. Will need to get it checked out!