I wanted to see what I could come up with for this. I’m not much of a user of editor buttons, generally writing wikitext directly without them. But it was something to learn. And I made reasonable progress; it may be enough for you.
But it is not plain wikitext. It uses a JS module. There are many here who would find that a real problem. I’m hoping one of them could answer how to do this without descending to JS.
You can test it by downloading the following, dragging it onto a wiki, and reloading – JS modules require a reload before working: CustomEditorButtonAndAction.json (2.6 KB)
Building a button and action
This involves three tiddlers:
-
One is simply a link icon found on https://morosanuae.github.io/tw-icons/.
-
Then there is a button created following the How to create dynamic editor toolbar buttons tutorial.
title: $:/_/my/core/ui/EditorToolbar/inhalt-link
tags: $:/tags/EditorToolbar
caption: Inhalt Link
condition: [<targetTiddler>!has[type]] [<targetTiddler>get[type]prefix[text/vnd.tiddlywiki]]
description: Add Inhalt Link
icon: $:/images/google-material-design/content/sharp/24px/link
<$action-sendmessage
$message="tm-edit-text-operation"
$param="inhalt-link"
/>
The condition here is probably naive. It’s what was in the tutorial. But this should probably also work for Markdown tiddlers, and perhaps others. That’s left as an exercise for the reader.
-
That custom-link text operation does not exist, though. We have to build it. Looking through the options in WidgetMessage: tm-edit-text-operation, none of them quite fit. But wrap-selection and make-link are close, so I cloned the simpler one, make-link, and modified it to this:
title: $:/_/my/core/modules/editor/operations/text/inhalt-link.js
type: application/javascript
module-type: texteditoroperation
/*\
title: $:/core/modules/editor/operations/text/inhalt-link.js
type: application/javascript
module-type: texteditoroperation
Text editor operation to make a specific custom link
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
exports["custom-link"] = function(event,operation) {
operation.replacement = '<a class="vers" href="https://www.MyWebsite/inhalt/' + encodeURIComponent(operation.selection) + '">' + operation.selection+ '</a>';
operation.cutStart = operation.selStart;
operation.cutEnd = operation.selEnd;
operation.newSelStart = operation.selStart + operation.replacement.length;
operation.newSelEnd = operation.newSelStart;
};
})();
The only non-boilerplate line here is this:
operation.replacement = '<a class="vers" href="https://www.MyWebsite/inhalt/' +
encodeURIComponent(operation.selection) + '">' + operation.selection+ '</a>';
which should be fairly clear, once it’s understood that encodeURIComponent is a built-in JS function to turn, say, Test 1,2.3 into the URL-safe Test%201%2C2.3
When these are imported and the wiki reloaded, you can test it simply by editing a tiddler, selecting the text you want to wrap and clicking on the new button. (It will be at the end of the row of buttons.)
Adding Keyboard shortcut
I followed the instructions for creating keyboard shortcuts, and that added three more simple tiddlers:
title: $:/config/ShortcutInfo/inhalt-link
Insert Inhalt link
title: $:/config/shortcuts-mac/inhalt-link
meta-shift-Z
title: $:/config/shortcuts-not-mac/inhalt-link
ctrl-shift-Z
And then the appropriate keystroke for your system will run the same action, wrapping your text as the styled link.
Not done
-
The button examples use an extra level of indirection for their text. This is used for overrides, and—I believe—for internationalization. I didn’t bother with that here. If this is for something to be distributed, it would make sense to do so.
-
I didn’t do anything about placing this button in the appropriate position in the toolbar. I imagine the mechanism is relatively simple, but there look to be groups of buttons, so it may not be as trivial as placing this in the right spot in a list or using list-before or list-after. It’s bedtime, and I’m too tired to investigate.
-
The biggest issue is that this requires a JS tiddler. It seems like there should be a simple way to do what you want without one. Perhaps one of the more experienced community members can offer something.
