Just out of general curiousity, would it be possible to filter for html elements that have been given specific css classes, as if they were tiddlers being filtered by tags?
For example, lets say I have written a tiddler about computers, and chosen to highlight a specific section of that text using @@.highlight hello there@@ and once the filter is created, it generates a list of each instance with that CSS class?
I think this could be really useful for several usecases, such as transcluding specific classed sections of text within a tiddler ah-la [tag[Groceries]css:class[food]] would result in things like âbroccoli garlic poptartsâ etc. from a grocery list tiddler, and then wrapped to render as bulletpoints or even to link to the tiddlers they were from, which could be useful for quoting some text if it was recording dialogue within the tiddler, i.e. âJim said (âNot with my hammerâ)[Tiddler About Jimâs Tools]â etc. etc.
Interesting question. I have no idea how to do this in wikitext, although we could certainly do it in JS, perhaps with a TreeWalker. But my question is what would you expect back from this? A list of DOM nodes is not going to work with other TW tools, and a list of arbitrary strings, such as the text content of each node, doesnât seem all that useful.
Edit, on rereading, perhaps a list of strings would be what you want. Hmmm. The technique Iâm imagining would only work on ones active in the StoryList. Is that acceptable? Or are you trying to get all of them?
Well, my orginal idea would probably be all instances in TWâs DOM. it would be like searching the whole .html file in VSCode or another text editor using the find & replace (on windows, ctrl + F, in case I am referring to the wrong thing by name).
I believe Logseq does something similarâŚ? I barely know anything about it unfortunately, Iâve been trying to look into how Obsidian and Logseq and other apps work in similar ways to TW.
Anyways, I digressed; Treewalker? hm. time for reading on my part then, Iâm not familiar with them (yet!)
Note, though, that there is no real DOM for most tiddlers not currently rendered (except in the trivial sense that the JSON string representing all the tiddlers is stored inside a <script> tag.) While I mentioned the story river, itâs really the entire rendered HTML that we could search. But non-rendered tiddlers would not be covered by this technique.
With enough parsing work, we might be able to do this by using search over all the tiddlers. But it would be tricky, and trying to perfect it for all use-cases is doomed to failure.
Hm⌠well if it is really that impractical to implement then I see no reason to try to make something work that isnât going to function to the full concept. But it is still a fun idea to think about.
Using the search function in TW is an interesting point though. I am curious if it would be possible to piggy back off itâs ability to search for text. Iâm going to look into how it works
Yes, thatâs where we could make real progress. And my âdoomed to failureâ is overstated (although I love that StackOverflow answer!) We canât parse general HTML with plain regexes, but we could still write a parser with more sophisticated tools than plain regex.
The thing is, DOM methods would give us a straightforward method of finding elements with a given class, but unless we call the rendering tools first, we donât have a DOM to traverse. Plain text methods would be much, much harder.
Yes, I donât think thatâs very useful:
title: Silly Example
One of those stupid summer camp rhymes about food comes back to haunt me far too often:
> "I like <span class="yellow food">bananas</span>, <span class="food">coconuts</span>, and
> <span class="delicious food">grapes</span>.
> "I like <span class="yellow food">bananas</span>, <span class="food">coconuts</span>, and
> <span class="delicious food">grapes</span>.
> "I like <span class="yellow food">bananas</span>, <span class="food">coconuts</span>, and
> <span class="delicious food">grapes</span>.
> That's why they call me Tarzan of the Apes!
It's not really about food, of course. It's just using various different types of food
stereotypically associated with...
And then for this tiddler:
findContext(25)('food')(input)
would yield:
[
'summer camp rhymes about food comes back to haunt me f',
'like <span class="yellow food">bananas</span>, <span c',
'nas</span>, <span class="food">coconuts</span>, and\n>',
'> <span class="delicious food">grapes</span>. \n> "I li',
'like <span class="yellow food">bananas</span>, <span c',
'nas</span>, <span class="food">coconuts</span>, and \n>',
'> <span class="delicious food">grapes</span>. \n> "I li',
'like <span class="yellow food">bananas</span>, <span c',
'nas</span>, <span class="food">coconuts</span>, and \n>',
'> <span class="delicious food">grapes</span>. \n> That's',
'!\n\nIt\'s not really about food, of course. It\'s just u',
'rious different types of food \nstereotypically associa'
]
The first result and the last two donât belong, as they are not tags, and the others are not really capturing the tags, just the whole HTML text. Thatâs why I think rendering: all the way to the DOM â or perhaps only as far as TWâs syntax tree â is necessary.
But I am intrigued by your first two snippets. Could you expand on them a bit?
Sure, this one is closest to what youâre asking for:
<<quotable tagname>>
While it doesnât support specifying a class, it does allow fishing out every occurrence of elements called âtagnameâ. For example, letâs say you haveâŚ
<about-mars>
Stuff about Mars.
</about-mars>
<p>Stuff about something else...</p>
<about-mars>
More stuff about Mars.
</about-mars>
And in another tiddlerâŚ
<about-mars>
Even more stuff about Mars.
</about-mars>
So, no matter which tiddler they are in, the quotable macro will pull out and renderâŚ
Stuff about Mars.
More stuff about Mars.
Even more stuff about Mars.
I am not really sure what you try to achieve. â You describe a solution, that should achieve something.
This paragraph describes a goal: âIt generates a list of each instance for that CSS classâ. ⌠But it assumes that assigning a class to text can be found by TW.
It can for exactly that usecase. Search for @@.higlight in the search input and you will get every tiddler, that contains this TW markup. â But thatâs probably not what you want to achieve.
So again. Can you describe what you really want? â Not how you think it can be implemented.
So what I had in mind was a way to build a filter that looks through your tiddlywiki and finds any HTML elements that have a specific class. whatever is in that element or that element itself if it is a button or something, is then listed.
so for instance, it wouldnât function like, [css:class[banana]] showing any tiddlers with an element that has .banana, but only that element, and whatever is inside it.
or in other words:
<p>
<details>
<summary>Hello There</summary>
<p>This is not a fruit,</p>
<p class="banana"> This is a fruit!</p>
<p>This is a paragraph.</p>
</details>
</p>
{{{ [css:class[banana]] }}}
Which shows:
<p class="banana"> This is a fruit!</p>
Does this help? I will think of other ways of elaborating in the mean time. It would be like transcluding snippets of text, rather than whole tiddlers.
As Scott pointed out. There only is HTML on the page that you see at any time. If you close a tiddler in the story river itâs HTML is gone. Converting wikitext into HTML is very heavy weight in terms of CPU cycles.
So the fastest way is, to search the wikitext. Thatâs probably what CodaCoder uses for the âquotableâ macro.
The reason why we can list backlinks fast is, that we keep tiddlers parse-tree in an internal cache and create a backlinks-index. The index only needs to be created once when it is used the very first time or a tiddler is modified. Processing time for backlinks grows linear with the number of tiddlers in the wiki.
The links-operator is relatively fast, because most of the time it only needs to evaluate a small list of tiddlers. As far as I know, the links list needs to be recreated every time the operator is requested.
Long story short. At the moment TiddlyWiki has no low level utilities to achieve what you suggest with the âclassâ indicator.
Searching for classes in the HTML DOM with JavaScript is easy, but only if all the tiddlers would be visible at the same time.
