New plugin: Highlight searched text

719 views
Skip to first unread message

bimlas

unread,
Nov 11, 2019, 4:46:22 PM11/11/19
to TiddlyWiki
Nothing special, the title says the only one feature of the plugin: for example, type search text in the standard search and select one of the results, or just click outside of it (to hide the popup list): each of the words you search for will be highlighted separately in the text of the tiddlers.

https://bimlas.gitlab.io/tw5-highlight-searched-text

Ideas and suggestions are welcome.

David Gifford

unread,
Nov 11, 2019, 9:39:53 PM11/11/19
to TiddlyWiki
Great! I added this to El Toolo Mappo

Dave

Java Developer

unread,
Nov 11, 2019, 9:57:49 PM11/11/19
to tiddl...@googlegroups.com
Hi Dave,

What is El Toolo Mappo ??? First time hearing this...

Please let us know

Thanks

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/890cb0a8-cb49-4dc3-beb9-44d7772ce85e%40googlegroups.com.

Java Developer

unread,
Nov 11, 2019, 10:01:17 PM11/11/19
to TiddlyWiki
Hi,


Excellent...Awesome...Very Much helpful to get this........

few minor suggestions for your kind consideration...Attached screenshots for your kind consideration

1. Previous, Next arrows to navigate the highlighted text for quick navigation. ex: https://illustoon.com/photo/204.png

2. Search only the file name alone instead of full content...it might be already there but not sure...

3. How to tag the file with specific keyword...as i have 100 files in each language...So need to search with specific tags only....It might be already there but not sure....

Please kindly consider the options and i badly need it....

Thanks,

A Gloom

unread,
Nov 11, 2019, 11:02:14 PM11/11/19
to TiddlyWiki
What is El Toolo Mappo ??? First time hearing this...

i believe it is Tiddlywiki Toolmap - https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

David Gifford

unread,
Nov 11, 2019, 11:09:33 PM11/11/19
to tiddl...@googlegroups.com
You got it right! 

On Mon, Nov 11, 2019, 10:02 PM A Gloom <barro...@gmail.com> wrote:
What is El Toolo Mappo ??? First time hearing this...

i believe it is Tiddlywiki Toolmap - https://dynalist.io/d/zUP-nIWu2FFoXH-oM7L7d9DM

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/s3AVhRKVXcs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/19c469a3-f1be-4585-8c9e-4a2082acc858%40googlegroups.com.

TonyM

unread,
Nov 12, 2019, 1:47:37 AM11/12/19
to TiddlyWiki
Bimlas,

Like usual you have solved something no one else could for a long time. Great work.

  • What plugin do we need to install one or both in plugins?

It is so good and so essential if it is not to "heavy" I think it would make a great addition to the standard distribution.

Thanks
Tony

bimlas

unread,
Nov 12, 2019, 1:58:15 AM11/12/19
to TiddlyWiki
 Java Developer,

1. Previous, Next arrows to navigate the highlighted text for quick navigation. ex: https://illustoon.com/photo/204.png

Good idea, I'll see what I can do.
 
2. Search only the file name alone instead of full content...it might be already there but not sure...

I don't see the point. Do you think it should only highlight the results in the titles on the story river (where the notes are open)? Since only titles are shown in the search results, why would it be beneficial to highlight the same titles in the story river?
 
3. How to tag the file with specific keyword...as i have 100 files in each language...So need to search with specific tags only....It might be already there but not sure....

To learn how to add tags to your notes, read https://tiddlywiki.com/#Tagging

Otherwise, I don't think you should tag your tiddlers with keywords, because in the end it will only be chaos, use tags rather as categories (consider to read this: https://praxis.fortelabs.co/a-complete-guide-to-tagging-for-personal-knowledge-management/), and put the keywords in the text. If you don't want them to appear in the note, comment them out:

<!-- keywords to show in search results -->

Text of my note...

If you want to navigate through your notes by tags or filter by multiple tags, this plugin may be useful as well: https://bimlas.gitlab.io/tw5-locator/

bimlas

unread,
Nov 12, 2019, 2:23:47 AM11/12/19
to TiddlyWiki
TonyM,
 
Like usual you have solved something no one else could for a long time. Great work.

These sentences give me the impetus to find new solutions. Thank you for the nice words! :)

HC Haase

unread,
Nov 12, 2019, 2:43:51 AM11/12/19
to TiddlyWiki
This is great. searching (or highlighting) words is the reason why I preferred to use a browser and not desktop or mobile apps. Now I can use quinoid android app with this individual search function. This is valuable.

alas, i dont work in my wiki :( no matter what I search for I only get a highlight for the string "test". I use jds material theme.

any idea why?

bimlas

unread,
Nov 12, 2019, 2:53:39 AM11/12/19
to TiddlyWiki
HC Haase


This is great. searching (or highlighting) words is the reason why I preferred to use a browser and not desktop or mobile apps. 

I did not think of this application, thank you for the idea!
 
alas, i dont work in my wiki :( no matter what I search for I only get a highlight for the string "test". I use jds material theme.

any idea why?

What is the TiddlyWiki version? (you can find it on the top of $:/ControlPanel) Is there a problem with desktop or Android?

Although it does not appear to be related to the error. If it works for "test", then something else is wrong. Could you send us a screenshot of the console?
  • Open your wiki
  • Right click on the page -> Inspect element -> Switch to "Console" tab
  • Type something to the search box
  • Take a screenshot from the console

HC Haase

unread,
Nov 12, 2019, 4:43:14 AM11/12/19
to TiddlyWiki


What is the TiddlyWiki version? (you can find it on the top of $:/ControlPanel) Is there a problem with desktop or Android?

Although it does not appear to be related to the error. If it works for "test", then something else is wrong. Could you send us a screenshot of the console?
  • Open your wiki
  • Right click on the page -> Inspect element -> Switch to "Console" tab
  • Type something to the search box
  • Take a screenshot from the console

its on desktop FF 70.0.1 TW 5.1.21

HC Haase

unread,
Nov 12, 2019, 4:48:46 AM11/12/19
to TiddlyWiki

What is the TiddlyWiki version? (you can find it on the top of $:/ControlPanel) Is there a problem with desktop or Android?

Although it does not appear to be related to the error. If it works for "test", then something else is wrong. Could you send us a screenshot of the console?
  • Open your wiki
  • Right click on the page -> Inspect element -> Switch to "Console" tab
  • Type something to the search box
  • Take a screenshot from the console

If forgot to mention, that when I search for e.g. "bacon" "test" is highlighted, even though I never entered "test" in the search field

bimlas

unread,
Nov 12, 2019, 4:52:21 AM11/12/19
to TiddlyWiki
Tried out on FF 70.0.1, everything works fine.

Didn't you installed an earlier WIP version of the plugin? Search for "HighlightSearchedText" and "Mark.js" tiddlers. If these are exists, then delete them.

HC Haase

unread,
Nov 12, 2019, 5:18:48 AM11/12/19
to TiddlyWiki


tirsdag den 12. november 2019 kl. 10.52.21 UTC+1 skrev bimlas:
Tried out on FF 70.0.1, everything works fine.

Didn't you installed an earlier WIP version of the plugin? Search for "HighlightSearchedText" and "Mark.js" tiddlers. If these are exists, then delete them.

no. Just dragged from your link in top post. I dont have the above mentioned tiddlers. in the plugin there is the "$:/plugins/bimlas/highlight-searched-text/mark.js" though

bimlas

unread,
Nov 12, 2019, 5:34:23 AM11/12/19
to TiddlyWiki
HC Haase,

Please search for the term in the "filter" tab of $:/AdvancedSearch and screenshot the results:

[all[tiddlers+shadows]search["test"]] [all[tiddlers+shadows]search['test']]

HC Haase

unread,
Nov 12, 2019, 5:50:23 AM11/12/19
to TiddlyWiki
Thank you for your time!

bimlas

unread,
Nov 12, 2019, 5:53:26 AM11/12/19
to TiddlyWiki
HC Haase,

Did you find the bug?

PMario

unread,
Nov 12, 2019, 7:06:22 AM11/12/19
to tiddl...@googlegroups.com
Hi, @HC Haase

Can you check the content of the tiddler named: $:/temp/search

It is the one used by the plugin. Your theme may use a different tiddler to implement the search function.

-m

PMario

unread,
Nov 12, 2019, 7:15:16 AM11/12/19
to TiddlyWiki
On Tuesday, November 12, 2019 at 4:01:17 AM UTC+1, Java Developer wrote:
...

2. Search only the file name alone instead of full content...it might be already there but not sure...

The plugin mentioned here is "just a highlighter". It doesn't touch the search dropdown itslef.

You may consider my field-search plugin [1], that lets you add new tabs to the search dropdown. It will be possible to create a tab for "every" combination you need.

Search by title is a default. There is also an intro thread [2] and a video [3]
 
3. How to tag the file with specific keyword...

I'm not sure about this question .
 
as i have 100 files in each language...So need to search with specific tags only....

This should be doable with [1] ... BUT documentation is missing atm :)
 
have fun!
mario

PMario

unread,
Nov 12, 2019, 7:24:25 AM11/12/19
to TiddlyWiki
On Tuesday, November 12, 2019 at 7:47:37 AM UTC+1, TonyM wrote:
...
  • What plugin do we need to install one or both in plugins?
Only 1 plugin is needed. "Highlight searched text". .. The other one is there to highlight js code.
 
It is so good and so essential if it is not to "heavy" I think it would make a great addition to the standard distribution.

Not heavy. 27kByte for mark.js 3rd party library, which is MIT lizensed. So IMO no problems here.

The TW implementation itself is neglectable in size but ingenious in concept and execution ;)

have fun!
mario



@TiddlyTweeter

unread,
Nov 12, 2019, 7:26:00 AM11/12/19
to TiddlyWiki
Quick comment ... Bimlas this is really excellent! Huge potential!

Early days. I'm testing. 

Immediately I got wondering about how to integrate this very nice "visual marking" approach with existing tools.

For instance ...

PMario wrote: 
The plugin mentioned here is "just a highlighter". It doesn't touch the search dropdown itslef. 

You may consider my field-search plugin [1], that lets you add new tabs to the search dropdown. It will be possible to create a tab for "every" combination you need. 

I'd add that it could be VERY interesting to explore whether it might integrate with Tiddler Commander's "Search & Replace"? That would finally give a visual way to s-n-r in TW.   

I'll comment more later.

Very best wishes 
TT


HC Haase

unread,
Nov 12, 2019, 8:53:30 AM11/12/19
to TiddlyWiki


tirsdag den 12. november 2019 kl. 11.53.26 UTC+1 skrev bimlas:
HC Haase,

Did you find the bug?

no.. Just appreciate the effort. it seems that GG hid the screenshot 

HC Haase

unread,
Nov 12, 2019, 9:10:22 AM11/12/19
to TiddlyWiki
Can you check the content of the tiddler named: $:/temp/search

thanks @PMario. In that tiddler it do say test.However I cant modify it or delete it (it reappear after reload). I noticed, that the modification date is the same as when I installed bimlas' locator plugin, so I suspect it has something to do with that.

Java Developer

unread,
Nov 12, 2019, 10:45:09 AM11/12/19
to tiddl...@googlegroups.com
Hi Bimlas,

Thanks and i agree and see what you can do for #1 alone and ignore the rest

1. Previous, Next arrows to navigate the highlighted text for quick navigation. ex: https://illustoon.com/photo/204.png

Good idea, I'll see what I can do.

Thanks again.


--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/7fd8be3f-ee20-4cee-8418-b5116971a625%40googlegroups.com.

Jan

unread,
Nov 12, 2019, 4:27:31 PM11/12/19
to tiddl...@googlegroups.com
Hi Bimblas,
great little tool!
Thanks!
Jan
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

bimlas

unread,
Nov 12, 2019, 4:31:36 PM11/12/19
to TiddlyWiki
I think I fixed the bug, please check the "settings/SETTINGS" tab of the latest version.

TonyM

unread,
Nov 12, 2019, 6:43:39 PM11/12/19
to TiddlyWiki
Bimlas,

I love it. If I understand correctly the plugin works by simply highlighting on screen that found in the temp search tiddler, is that correct? This is a brilliant Idea and very elegant. 

As is common with your work it inspires me to imagine more possibilities. 

I wonder if a macro 
<<highlight-on-page "text" "colour/class">>
or
<$macrocall $name=highlight-on-page text={{text!!reference}} css="colour/class">>

Would be a practical addition to annotate the screen. For example highlighting placeholder text in edit fields green would indicate where to enter values and as soon as the placeholder text is overwritten the highlight disappears.

Of course we could already do something similar by changing the settings value and changing its content I am just wondering if its functionality can be generalised more.

Love your work

Thanks
Tony

HC Haase

unread,
Nov 13, 2019, 5:15:16 AM11/13/19
to TiddlyWiki


tirsdag den 12. november 2019 kl. 22.31.36 UTC+1 skrev bimlas:
I think I fixed the bug, please check the "settings/SETTINGS" tab of the latest version.


Thank you bimlas.. this is a nice solution, however it cant find my search tiddler :( this is wired

(I found out that my wiki was not saving anything from around when I first installed the plugin, that was also why I could not delete the$:/temp/search tiddler. I weirdly I fixed it by making a copy of the file, overwrite the original file with the copy, open that a new in the browser. I have no idea why it worked or why it stooped saving tho)

bimlas

unread,
Nov 13, 2019, 6:50:48 AM11/13/19
to TiddlyWiki
HC Haase,
 
Thank you bimlas.. this is a nice solution, however it cant find my search tiddler :( this is wired 

Sorry, I was probably ambiguous in the description of the plugin (can anyone translate the text for me to make it clearer?): "find-my-search-tiddler" should be typed in the search box (where you usually search your notes), the plugin settings (where "$:/temp/search" was originally used) should be set to the address displayed (which is "$:/config/bimlas..." in the screenshot).

bimlas

unread,
Nov 13, 2019, 7:06:09 AM11/13/19
to TiddlyWiki
If you are interested in finding a "find-in-page" please follow the developments here. Ideas and comments are welcome!

HC Haase

unread,
Nov 13, 2019, 7:48:01 AM11/13/19
to TiddlyWiki
Thank you so much bimlas! works well now.

here is a proposal for the wording:

To find the tiddler that stores the search string, make a search for find-my-search-tiddler in your standard search field (e.g. in the sidebar). The tiddler will be shown bellow.

@TiddlyTweeter

unread,
Nov 14, 2019, 1:29:49 PM11/14/19
to TiddlyWiki
Ciao bimlas

Very useful tool!

I notice that Mark.js has powerful search filtering, including regular expressions (https://markjs.io/configurator.html).

Not sure how difficult it would be to include some of those?

Just thoughts. As is the tool is useful! Tx!

Best wishes
TT

bimlas

unread,
Nov 14, 2019, 5:59:36 PM11/14/19
to TiddlyWiki
Dear all,

About the "jump to next/previous match" feature: Sorry, it takes some more time to do: basically I'm done, but it has compatibility issues and I don't like to release until everything works.

Javascript developers, please help: I tested the current version (demo is here, do not use it in real wikis, work in progress, etc.) on an old browser which is my phone's default (Samsung Browser 3.3 on Android), thus I think it may be an issue for others too.

Whenever I want to jump between results, it always jumps to the first or last result (just the opposite end of the search direction).

I am sure this is a problem with the code of the action-widget, or that the value of window.outerHeight (the height of the visible area) is incorrect in my browser (I also tried to query with window.innerHeight) or the value of this.previousMatch may not be stored.

Anyone familiar with Javascript (and specifically TiddlyWiki) programming could look at which instruction is incompatible with old browsers? You may have found a clear mistake in it that did not occur to me.

My other request would be to give it a try and play with it for a while to find out more errors.

bimlas

unread,
Nov 16, 2019, 4:39:03 AM11/16/19
to TiddlyWiki
Does anyone received my last message about the "jump to next/previous match" feature?

@TiddlyTweeter

unread,
Nov 16, 2019, 4:44:50 AM11/16/19
to TiddlyWiki
Yes. TT

Java Developer

unread,
Nov 16, 2019, 9:56:35 PM11/16/19
to tiddl...@googlegroups.com
Hi Bimlas,

It's nothing but awesome....Find In Page works fine great in PC.....Great...

Is it possible to have 1 more option ....Find In Any page...So that next and Previous will move on to next file or next tiddler where the match is found.......Currently it ends with the same page......If it is possible and quick, please consider it

Thanks a lot for all your efforts......

On Sat, Nov 16, 2019 at 3:09 PM bimlas <bimba....@gmail.com> wrote:
Does anyone received my last message about the "jump to next/previous match" feature?

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

bimlas

unread,
Nov 18, 2019, 3:59:56 AM11/18/19
to TiddlyWiki
New release: "Find in page" toolbar

I managed to implement the "jump to next / previous" feature, which can be conveniently used on a smart phone (tested on Android). Unfortunately, as far as I know, it doesn't work properly with its JD Material theme. :(

Further comments, bug reports, ideas are welcome!

Java Developer

unread,
Nov 18, 2019, 11:07:11 AM11/18/19
to tiddl...@googlegroups.com, bimba....@gmail.com
Hi Bimlas,

It's nothing but awesome....Find In Page works fine great in PC.....Great...

Is it possible to have 1 more option ....Find In Any page...So that next and Previous will move on to next file or next tiddler where the match is found.......Currently it ends with the same page......If it is possible and quick, please consider it

Also, number of matches on each tiddler in the brackets would be awesome.....

Thanks a lot for all your efforts......
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

bimlas

unread,
Nov 19, 2019, 2:37:13 AM11/19/19
to TiddlyWiki
New release: Add counter of matches

HC Haase

unread,
Nov 19, 2019, 5:39:53 AM11/19/19
to TiddlyWiki
You are awesome!
alas you are right, the jump to dont work in jds material theme :(
I would guess that the theme could be modified to show more in the search bar.. maybe @JD could give us a hint :)

HC Haase

unread,
Dec 4, 2019, 5:00:35 AM12/4/19
to TiddlyWiki
Interestingly I just discovered, that it woks on mobile with the material theme - but a bit different than expected (see screenshots). There is a small bug in this however, to close the search bar again I have to press the magnifying glass, however it is too to far down the corner and to small to hit with my fingers, so I can't close it. this is a minor thing however.




bimlas

unread,
Feb 13, 2020, 2:46:44 AM2/13/20
to TiddlyWiki
New release: 0.4.0
  • Search was performed inside CodeMirror texteditor which caused RSOD:
    Uncaught IndexSizeError: Failed to execute 'setEnd' on 'Range': The offset 281 is larger than the node's length (5).
  • Add option to change toolbar height and position

bimlas

unread,
Feb 13, 2020, 2:49:20 AM2/13/20
to TiddlyWiki
HCHaase,

Interestingly I just discovered, that it woks on mobile with the material theme - but a bit different than expected (see screenshots).

This is the intended operation - if you don't need the search engine, you can close it to avoid obscuring the text.

Please try the latest release, including a workaround. 

TonyM

unread,
Feb 13, 2020, 5:26:58 AM2/13/20
to TiddlyWiki
Bimlas,

Thanks so much for this, it is fantastic when writing complex macros and wiki text, to find, highlight and modify a variable name and its references for example.

I would like to see a method to bulk open the searched tiddlers so we can then see the exact text. I will possibly make it myself using a tiddler with the $:/tags/AdvancedSearch

I have developed a small set of standards I would like to introduce to the standard search such as allowing a system-caption on system tiddlers to be searched for and listed even when contained in a system tiddler. Thus for example simply typing highlight in the standard search would find $:/plugins/bimlas/highlight-searched-text if the plugin had a system-caption of Highlight searched text. This would allow people to find the plugin they just installed with a simple search, which is not possible give the standard search leaves out system tiddlers.

Regards
Tony

HC Haase

unread,
Feb 13, 2020, 2:21:29 PM2/13/20
to TiddlyWiki
I tried it.. The placement settings (work around) made it easy to adapt to my setup. Perfect
thank you

bimlas

unread,
Feb 14, 2020, 4:25:10 AM2/14/20
to TiddlyWiki
TonyM,
 
Thanks so much for this, it is fantastic when writing complex macros and wiki text, to find, highlight and modify a variable name and its references for example.

Nope, cannot use for modification, see PMario's comment: https://groups.google.com/d/msg/tiddlywiki/s3AVhRKVXcs/JT8RV1vhAQAJ
 
I would like to see a method to bulk open the searched tiddlers so we can then see the exact text. I will possibly make it myself using a tiddler with the $:/tags/AdvancedSearch

This is the job of the "search tab" because it knows what the results are. For example, the results of standard search and Locator may be different, so I can't place a single button that opens the results because I don't know what are the results exactly.
 
I have developed a small set of standards I would like to introduce to the standard search such as allowing a system-caption on system tiddlers to be searched for and listed even when contained in a system tiddler. Thus for example simply typing highlight in the standard search would find $:/plugins/bimlas/highlight-searched-text if the plugin had a system-caption of Highlight searched text. This would allow people to find the plugin they just installed with a simple search, which is not possible give the standard search leaves out system tiddlers.

Sorry, but I don't quite understand. Are you asking me to set a caption for the plugin itself? Do I understand right? Okay, I'll do it. 

bimlas

unread,
Mar 26, 2021, 5:08:28 AM3/26/21
to TiddlyWiki
New release!
  • Add option to disable automatic highlighting
  • Fixed a bug that could have caused RSOD in some cases
  • Hide toolbar on printing
Reply all
Reply to author
Forward
0 new messages