[ pre-release ] New goodies in the TiddlyWiki core

[Saq Imtiaz]

I'd like to highlight a feature that will be included in the next release of TW and is currently available via the pre-release: 

Keyboard support for the search field and the tag picker (thanks to the hard work of @BTC!). 

You can use the up and down arrow keys to select a search result or tag, and hit Enter to select it. Escape resets the search. It would be great to get some more testing and feedback on this feature, and I think it represents an opportunity to build some new interactions upon.

Pre-release:

https://tiddlywiki.com/prerelease/

I've been playing with it yesterday as part of a commitment to do some further testing before the next TW release. Under the covers it uses a new macro called keyboard-driven-input.

As part of testing the re-usability of the macro, I've made a quick ten minute hack, cloning the search tiddler from the top menu to create a simple editor with a "navigation" field with keyboard support:

https://saqimtiaz.github.io/sq-tw/floats.html#%24%3A%2Fplugins%2Fsq%2FNlite%2Feditor

The keyboard-driven-input macro is by necessity not the easiest to understand how to use, so hopefully the additional example will help.

The editor itself is an extra lite approximation of my Notation editor, but it shows how easily such UIs can be created. 

Aside (Floats):

For those that have been following the demo I posted of Floats, you can get an idea of what I have in mind for it by using the temporary "Edit in float" button on any tiddler's toolbar, which opens that tiddler in the above mentioned editor, in a draggable, resizable float:

https://saqimtiaz.github.io/sq-tw/floats.html

Now I just need to add support for easily toggling a float, as well as collapsing and docking at the edge of the screen.

Cheers,

Saq

[JD]

That is seriously cool!! I'm so excited for this!!! I found that you can actually feed an action string into it.. Sample in the tiddler $:/core/ui/SideBarSegments/search change a macro definition:

from navigation

\define input-accept-actions() <$action-navigate $to={{{ [<__tiddler__>get[text]] }}}/>

to performing the action strings stored inside the field: actions of the search result

\define input-accept-actions() <$transclude tiddler={{{  [<__tiddler__>get[text]] }}} field="actions"/>

I tested this and found it works well! Already I am itching to build something out of this on the next stable release!

-jd

[Saq Imtiaz]

@jd yes. It would be very simple to create an input that searches a set of pre-determined commands/tiddlers and on selection executes actions defined in those tiddlers.

Feel free to play/build on it with the pre-release if you feel tempted. Unless something unexpected comes up, there are no further changes expected in this area.

Another bonus addition is that the edit-text widget now can fire actions on input change.

[Mark S.]

In my ideal world you could navigate the tiddler completely by keyboard.

The problem with the new tag picker is that after you tab out of the tag field, it still remains open. In the case of a large TW file, your view of the tiddler and most of its contents is obscured.  In theory you could continue to tab into the text field, but you're tabbing blind because the open tag field is blocking half of your view. The only way to close the tag dropdown is to click into the text field.

Ideally, the tag field dropdown would close as soon as you had navigated out of the last tag field.

Also, and I know this isn't necessarily related to the current improvement, it would be good if you you could tab in a single step out of the tag field (the last blank one) and into the text field. There's no point in tabbing through all those control buttons -- they don't work without specifying a place or selection inside the text field.

Thanks!

[Saq Imtiaz]

@Mark,

Completely agreed on the editor toolbar. I've hacked mine to give all of those buttons a tabindex of -1.

Note that when you tab into the text field, it does automatically dismiss the hanging popup (new cancelPopups attribute for edit-text). The issue is, as you accurately pointed out, it should take one tab from tags input to textarea.

[Ed Heil]

On Wednesday, July 29, 2020 at 12:42:35 PM UTC-4, Saq Imtiaz wrote:

@Mark,

Completely agreed on the editor toolbar. I've hacked mine to give all of those buttons a tabindex of -1.

Note that when you tab into the text field, it does automatically dismiss the hanging popup (new cancelPopups attribute for edit-text). The issue is, as you accurately pointed out, it should take one tab from tags input to textarea.

Yeah, that would be pretty huge.  The fact that it's so onerous to get from title field to text field via keyboard nav is a big annoyance.

[Ed Heil]

Oh, I should have also said -- I tried both these lite editor things and they're both awesome.  Really cool stuff!

[Saq Imtiaz]

Scratch that. 

There is a hidden setting that is a much less intrusive way of achieving the same thing:https://tiddlywiki.com/prerelease/#Hidden%20Setting%3A%20Tab%20Index%20for%20Edit-Inputs

On Wednesday, July 29, 2020 at 8:35:07 PM UTC+2, Saq Imtiaz wrote:

Regarding being able to tab from the tag input to the body textarea in one keystroke:

I've edited the two relevant shadow tiddlers here:

https://saqimtiaz.github.io/sq-tw/floats.html

Please have a look. Can anyone think of any downsides to this? 

The buttons next to the tag input field and for the editor toolbar have a tabindex of -1. Which means they cannot be tabbed to, but would that ever be useful? 

If not, I think it is worth another PR to add this to the core.

Cheers,
Saq

[Mark S.]

That looks promising, but there's no explanation how to use it. Any idea?

Thanks!

[Mat]

Saq Imtiaz wrote:

It would be great to get some more testing and feedback on this feature, 

IMO:

• For search, the dropdown should close after selection.
• For tags, since it, after selecting a tag, automatically opens the next tag dropdown, there should be a blank alternative at top (but it can be hidden so it is not actually seen in the list). As it is now, one has to manually erase if one happens to begin to arrow down in a list. 
• In Windows, clicking Esc should close the dropdown.
• @BTC should be awarded the Nobel prize. Great work!

<:-)

[TW Tones]

Saq,

A Quick review of floats;

Looking very nice and simple, love your work.

When I publish my edit and view in new window buttons I will try and make it look similar but different.

• Opening one float replaces the other
• This is helpful but can we optionally have multiple open?
• Truth is single edit is great for visitors not familiar with tiddlywiki
• Perhaps there would be cases to make the "edit in float" button to resemble the standard edit button.
• If I close the tiddler the float closes
• Is this always desirable?
• It indicates a method to toggle
• To me the icon looks too close to the stroll/stories icon
  
• I added a few font awesome icons attached
• I think $:/images/fa5/regular/window-restore with the current edit icon in the window (overlay) would be nice 
• There is a lot of unneeded white-space below the edit field
• also This picture shows a stray "["

Thanks very much for this work

TW Tones

[Saq Imtiaz]

@Mark S: turns out its very simple once you actually it exists. I honestly feel this should be the default and not a hidden setting.

Create a tiddler called $:/config/EditTabIndex and give it a text field "1"

See https://saqimtiaz.github.io/sq-tw/floats.html#%24%3A%2Fconfig%2FEditTabIndex

[Saq Imtiaz]

@Tony this thread is about specific upcoming core features. Recommend re-reading the entirety of my original post. The editor - as previously explained - is a quick throwaway hack to illustrate how to use the keyboard-driven-macro. 

The Floats stuff is there only to show the demo interface in context and the potential usefulness of such UIs, as  well as illustrate how to set the active and highlighted values in the dropdowns from keyboard-driven-macro, using actions from outside the macro.

If you read the first post in the Floats thread, I think you will find that most of what you have mentioned either isn't applicable or already answered. If you have any further feedback at that point it would be most welcome in that thread:

https://groups.google.com/forum/#!topic/tiddlywiki/5TxOTeJOnXA

Cheers,
Saq

[Saq Imtiaz]

 @Mat

• For search, the dropdown should close after selection.

Speaking for BTC here, I believe the idea is to be able to open multiple search results quickly if so desired. I think this makes sense especially since the dropdown can easily be cancelled by hitting the Escape key. 

• For tags, since it, after selecting a tag, automatically opens the next tag dropdown, there should be a blank alternative at top (but it can be hidden so it is not actually seen in the list). As it is now, one has to manually erase if one happens to begin to arrow down in a list. 

Ctrl+A and backspace does address that.

You may find some background on the design decisions at https://github.com/Jermolene/TiddlyWiki5/pull/4458 but be prepared for a lot of reading.

 

• In Windows, clicking Esc should close the dropdown.

I assume you mean for tags? This clashes with the ability to hit Esc to cancel the editing of the tiddler. It could be done by wrapping the tagpicker in a keyboard widget. This would need some consideration but it is probably worth creating an Issue for.

• @BTC should be awarded the Nobel prize. Great work!

Yes, this took a lot of hardwork and perserverance from him!

Cheers,

Saq 

[TW Tones]

Saq,

I am really trying hard to contribute whilst in the appropriate threads. It is hard to keep track of the whole and multiple threads if one is working elsewhere on tiddlywiki issues.

I am doing my best and trying to improve. I hope you see some of the content is relevant.

Sorry

TW Tones

[PMario]

On Thursday, July 30, 2020 at 2:38:05 AM UTC+2, Mat wrote:

• ... As it is now, one has to manually erase if one happens to begin to arrow down in a list.

Hi Mat.

That's right. If you use CTRL - BACKSPACE button. It will clear 1 word with 1 keyboard action. So it's pretty fast, if you are used to use the keyboard.

Most of my tags are 1 word. So it doesn't really matter.

-m

[clutterstack]

Thanks, Saq!  And@BTC. After a quick play, I am excited for the new tag picker and keyboard-driven input. Love the floats too. I can't keep up with all the momentum!

[Ed Heil]

This is a neat trick!  However, it doesn't let you tab your way past tag creation -- if you try to tab directly from title to text you get stuck on tags.  Do you know if there's any way to skip tag creation in the tab order as well?

[Mark S.]

What do you mean that it won't let you tab past tags? I can tab from title, to tags, to text using this hack/feature.

But, of course, it only works on 5.1.23 prerelease.

[Joshua Fontany]

This is excellent work. I did notice that with JsonMangler installed, the main Search box buttons and popups are Broken.

Filed as a [Bug] here:  https://github.com/joshuafontany/TW5-JsonMangler/issues/18  

Quickfix if  new `<$vars searchTiddler="$:/temp/search/input" `  is changed back to old ` <$vars searchTiddler="$:/temp/search" `

I have not dived into the new macro far enough to say why that breaks and/or fixes that bug....

Best,

Joshua F 

[Saq Imtiaz]

@joshua that is odd. Here is the underlying PR and diff:

https://github.com/Jermolene/TiddlyWiki5/pull/4725/files

[Saq Imtiaz]

Note that $:/config/EditTabIndex is now set by default to be 1 in the pre-release:

https://github.com/Jermolene/TiddlyWiki5/pull/4791

[Joshua Fontany]

Thank you Saq, this let me track down the changes to $:/core/modules/editor/factory.js that I needed to merge into my plugin's version of that tid. The current JsonMangler repo and demo wiki have been updated.

Mahalo,

Joshua Fontany

[Saq Imtiaz]

The same keyboard-driven-macro in the pre-release can also be used to drive the editor toolbar button for inserting wiki links. As a result, you can have autocompletion of a sorts for wikilinks without needing the mouse, and it works with all editors (including coremirror).

See:

https://saqimtiaz.github.io/sq-tw/floats.html#%24%3A%2Fcore%2Fui%2FEditorToolbar%2Flink-dropdown:%5B%5BDraft%20of%20'link-autocomplete'%5D%5D%20%24%3A%2Fcore%2Fui%2FEditorToolbar%2Flink-dropdown

[Saq Imtiaz]

I have been working on a modified version that places the dropdown at the caret position for a better UX when using keyboard shortcuts to drive interaction (even with the toolbar hidden):

Need to find time to iron out some rough edges.

[TW Tones]

Saq,

Sounds great. A transclusion or registered macro *1 insert would also be nice.

*1 - a database of macros, keywords and their syntax

If you also consider the work here https://groups.google.com/forum/#!topic/tiddlywikidev/Os_LCSCP_l8 we will be having to deal with some substantial feature overload in the next little while.

I do not want to discourage change, just point out we need to engage the regular posters to help promote and explain these when they are published lest they go under many peoples radar.

Exciting times continue with the tiddlywiki community improving interaction and features very quickly. Even although it does not always seem fast enough.

thanks heaps for your ongoing contributions.

Regards

Tony

[Tejasvi S Tomar]

> In my ideal world you could navigate the tiddler completely by keyboard.  

I share that vision of the ideal world as well. Till then I am using qutebrowser as a rudimentary alternative.