I’m new to plugin development and JS in TW and I can’t seem to find a ton on it, so sorry if this is obvious.
I want my plugin to register a toolbar button that calls a js function from my plugin. I actually can’t find anything on this, and I’m wondering if I have the wrong search terms? (I know how to make the button and bundle it, the question is about calling the js with it)
Is it an editor toolbar-button or is it somewhere else?
It’s a “view” toolbar I think. The one top of the sidebar. But I get that part. It’s the js side I don’t know.
Yea, but there is a difference how to create js-functions according how they are used.
For the editor toolbar there is a module-type: texteditoroperation that will allow you to use a lot of pre-built functionality, like keyboard shortcut handling and so on, without a single line of code.
The sidebar buttons usually are defined using the button-widget, which calls action-widgets when clicked.
So, probably the easiest way to get everything going in the TW way, will be a custom action widget. … BUT … It depends what you want to do.
Can you be more specific what your plugin does? and
What the new button should do?
I’m writing a program to export my tiddlywiki in a specific pdf format. It’s something that can’t be done properly in wikitext, so I have to move to JS. I want to have a button that calls my script to do the exporting.
So you want to convert some tiddlers into a page-like HTML output and give that to a PDF library. Is that right?
Basically, but I’m formatting it somewhat strangely, so I really can’t just feed a tiddler into the print as pdf and hope it will work.
Sorry I’m unable to make sense of “it” in the quoted text.
As I wrote there are many ways to use external libraries with TW. If you can not tell, which PDF library you want to use, I’m unable to tell, how it should be used, since I do not know the API. … Sorry.
Here’s more details about the inner working of TW, which probably won’t help too much
I plan to use jsPDF. I’m also using modern which should handle the including libs part for me. I understand how to write the code from the JS side, but I don’t know how to get that code to run from a TW button. That’s what I need help with.
You have two options:
A good starting point would be to write an action widget that accepts the input, transforms and outputs it. With long running processes, this will freeze the UI. Action widgets run when triggered, for example by a button click when inside the $button widget.
Look at some of the core action-* widgets and adapt one of them:
The invokeAction method is what runs when the widget is triggered.
What’s my other option? I guess it’s the best way to go about it, but I didn’t want to make a standard widget because running it on render would end very badly. I guess an action widget might work better.
The other option is to send a Widget Message up the widget tree and have a listener attached to the root widget that handles the message and does the rendering.
Ok, I think an action widget is my best bet. I had forgot about those and only remembered normal widgets
I made many js buttons by direct editing $:/core/modules/saver-handler.js
for example I wrote up() js function to scroll to the top of the page.
$tw.rootWidget.addEventListener("tm-up", function(event) {up()});
to make button with this function I use
<$button message="tm-up" tooltip="scroll up" class="tc-btn-invisible upbutton">
up
</$button>
js function we can write in $:/boot/bootprefix.js or I make my own
function up() {
//your code
}
and put it to the main template
Yes, use $tw.rootWidget.addEventListener with message button is a good solution, I also found it work in GitHub - Souk21/TW-commandpalette: A command palette for TiddlyWiki. Demo: https://souk21.github.io/TW-commandpalette/
and GitHub - tiddly-gittly/tw-command-palette: Command palette Chinese translated