Using Find-in-page plugin with open all details elements

Merry Christmas to me! And maybe you!

I just came up with something cool! I discovered the find-in-page highlighting plugin today (https://tiddlywiki-find-in-page-plugin.tiddlyhost.com/). And I managed to combine it with a custom list item template with details elements added for search results, and “open and close all details elements” in the search results window.

What it does: allows you to turn on the highlighter feature with Ctrl + F, search all tiddlers for a search string, then Ctrl + G to highlight search results, then open all of the details slider with the click of a button and see the highlights in all the contents.

Try it at @D New Testament

In the search tab in the story river, Ctrl + F, Search for Socrates in the search tab, Ctrl + G, and click the down arrow button in the search results.

The only hiccup is that sometimes the search results move over to the sidebar and are not highlighted there. To fix it, just click in the search window of the search tab again, and the results will move back over there and be highlighted.

This experiment meant editing three shadow tiddlers. So if anyone is interested in using it or turning it into a plugin, they would need to figure out how to do it without editing that tiddler. But for reference, here are the tiddlers in that file that I used to create this feature:

$:/.giffmex/.Stylesheet/Details (css so the details summary turns bold on open)
$:/.giffmex/ui/ListItemTemplateDetails (list results show up as sliders)
$:/.giffmex/ViewToolbar/Deslizadores (the bar with the open and close details buttons)
$:/widgets/action-showdetails.js (makes the viewtoolbar buttons work)
$:/.giffmex/Stylesheet/noblue (css for the viewtoolbarbuttons)

$:/core/ui/SideBarSegments/search (added caption for use in tab)
$:/core/ui/DefaultSearchResultList (changed list item template)
$:/themes/tiddlywiki/vanilla (I softened the highlight color globally)

$:/plugins/ahanniga/find-in-page-plugin (the highlighting plugin)
$:/plugins/ahanniga/find-in-page/css (I softened the highlight color in the plugin)

3 Likes