Implementing custom rendering rule

#1

I want to create custom rule. For example, render ++some text++ as <b>some text</b> in all tiddlers within a document.

How to achieve this?

#2

Welcome @andrinho

It sounds like you want to add your own wiki text parser, of course we already have “double single quotes” that do this bolding.

Could you give us some background so that rather than go down a bespoke solution path, we may be able provide a better solution?

  • Why do you want this rather than use the existing method?
  • Do you have a source of content using the ++some text++ format?
    • What is the source, what markup etc…?

Note there are other tools that already make use of ++inserted text++ such as the markdown plugin, so the more we know about your reasoning the better we can help.

#3

Of course I need not a bolding but a more sophisticated thing.

My idea is to provide some words or phrases with corresponding images visible when a user is hovering that phrase. I’ve written a serverless function that parses google images search by a query and returns a url of the first search result. So I need to replace a text with simple markup, for example ++some text++ to a construction like <span class="tooltip" style="backround-image: url(...?q=some text)">some text</span>. I know that I could write a macro and insert its call but it’s not as easy as typing ++.

#4

If you’re on Windows, that can be done with AHK.

#5

All depends on how much work you are prepared to do, finding something similar already in TiddlyWiki is one approach, tiddlywiki already has Styles and Classes in WikiText which uses @@ something @@ to highlight etc…, this is defined in
$:/core/modules/parsers/wikiparser/rules/styleinline.js which you may be able to clone and edit.

  • Always use a copy of a wiki if doing this kind of hacking.

However;

There are other ways to obtain similar outcomes such as a macro or procedure or a transclusion, here it is only the url that comes from elsewhere. It is also relatively easy to make an editor toolbar button, try the current link button in the editor ctrl-L and paste a url, then imagine one designed to provision a macro <<image-link "some text" "url..">> where some text is the highlighted text.

I can show how to do a transclusion as well. {{sometext||image-link|url here}}

Post script;

  • In both cases you could make a batch process help you take information in a data tiddler and batch convert it as well.
#6

Thanks a lot.

I think that macro like <<image-link "some text">> would be the best solution. But how to implement a button in the editor that would convert selected some text to <<image-link "some text">>?

#7

Follow that hint of mine before, in the editor type some text and select it, then press the B button in the editor and you get ''some text'' , so this is what the bold button does.

  • Use advanced search bold and look at the shadows tab and you will see $:/core/ui/EditorToolbar/bold Open that, clone it, rename it $:/core/ui/EditorToolbar/image-link and set the prefix and suffix prameters within.
    • Because the prefix and suffix need to include double quotes, I used single quotes to delineate both.
<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="wrap-selection"
	prefix='<<image-link "'
	suffix='">>'
/>
  • Lets save and test it before we finish. New tiddler and select some text an select the second B button, it works this is <<image-link "some text">> to test
  • Now go back to $:/core/ui/EditorToolbar/image-link, remove the shortcut, and change the caption, description and icon to suit.

Now you know how to make your own editortoolbar buttons have a look here https://tiddlywiki.com/#WidgetMessage%3A%20tm-edit-text-operation to see the features available for operating on selected text.

  • Be aware however the content of such buttons can include multiple actions of any relevant type.
  • If you use the save selection Text operation you can save it in a temporary field or tiddler and access that to use in other actions.
2 Likes
#8

Thanks again.

Now when I’m hovering a mouse over a macroed text, I see an image:

image

1 Like