Simple HighlightWidget

Plugins
, ,
#1

Included is the code for the first version of a simple HighlightWidget. The highlighting is done with the CSS Custom Highlight API. The code is based on CSS Custom Highlight API demo.

<$highlight/> creates an input field, a clear button and a refresh button:

Screenshot 2024-10-13 at 20.52.40
Screenshot 2024-10-13 at 20.52.401942×648 50.6 KB

Typing text in the input field finds and highlights the text in the tiddlers that are currently in the story river. Whenever the story river changes (additional tiddlers, reordering, …) the refresh button must be clicked to include the changed content in the search.

The input field and the buttons can be styled, as well as the highlighting (see the included CSS).

An example:

Screenshot 2024-10-13 at 21.06.27
Screenshot 2024-10-13 at 21.06.271442×1900 345 KB

It would be useful to put the HighlightWidget in the sidebar (by adding the tag $:/tags/SideBarSegment to the highlight tiddler)

Screenshot 2024-10-13 at 20.50.42

but this currently does not work. The reason is, as far as I can tell, that the widget’s Javascript uses the story river before it has been constructed. Not being familiar with the internals of TiddlyWiki, I am not (yet?) in a position to solve this problem and would appreciate a little help.

Feedback and comments appreciated.

Disclaimer: the CSS Custom Highlight API is a recent specification and has not yet been implemented in all browsers. I have tested only in Chrome, Safari and Arc on MacOS and Quine on iPad.

HighlightWidget.js.json (4.0 KB)
highlight.css.json (498 Bytes)

(See also Search and Highlight Plugin)

3 Likes
#2

does it also work for content of tiddlers that are in edit mode? and what about some kind of navigation between matches, a la text search widgets in web browsers? I’m asking because I can’t even Ctrl-F in Tiddloid on smartphone

#3

It does work in edit mode, though I have just discovered not always. In my development wiki it does (screenshot), but in an empty wiki with only the widget, the javascript and the css it doesn’t. I need to figure out why that is.

Screenshot 2024-10-14 at 11.09.50
Screenshot 2024-10-14 at 11.09.50640×842 111 KB

Limitations currently are:

  • The algorithm for finding start and end positions is too simple: It does not find text that also contains formatting, i.e., that spans formatting tags. It does not find “this is it” in “this is italics”, while it does find “italics”.
  • It cannot be used in the sidebar.
  • There is no navigation à la cmd/ctrl-F.

For navigation I intend to add navigation buttons.
To solve the second problem (without changing the argument of querySelector) I first need to understand when and how TW instantiates widgets.

#4

The difference between my development wiki and a plain empty wiki is my use of CodeMirror plugins. Tiddlywiki edit mode uses iframes while CodeMirror does not (iframes again …), which explains the difference.