How do we Create an External Pretty Link Button

Hello forum,

I created a button and tagged the tiddler with $:/tags/EditorToolbar:

<$button>
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="wrap-selection"
    prefix="[ext[https://www.homepage.com/"
    suffix="]]"
  />
  Add Link
</$button>

When I select a text - eg. Test - and click the button, an external link will be generted:

How can the url be suppressed that I only see the link of the text - like grafik ?

Thanks,
Stefan

1 Like

Have a closer look at the External links at: Linking in Wikitext using a pretty-link

eg: [[Test|https://example.com/Text]]

My Cheatsheet Plugin, which can be installed in every wiki from a bookmark toolbar (no restart needed) could help you with that.

And how do I generate this pretty-link just by selecting a text and clicking on Add Link - button?

I think, there is no pretty-link button in the editor atm. But IMO it’s worth a feature request at GH. (I’ll create one)

There are some questions?

  1. Do you select the pretty link text and add the link - or
  2. Do you select the URL address and want to insert a new pretty link text

Question for everyone. 1) or 2)

Sorry I did not see your code.

<$action-sendmessage
	$message="tm-edit-text-operation"
	$param="wrap-selection"
	prefix="[["
	suffix="|https://www.homepage.com/]]"
	trimSelection="yes"
/>

I personally would want to get a dropdown, which allows more freedom with the URL … So the GH issue should be still valid


The How to create dynamic editor toolbar buttons tiddler contains an interactive example, which gives you an example “bold” button with all needed fields. …

I solved like this:

At the end I use always the same url like a präfix + selected text. (see my examples)
(select text and click button or better use shortcut for the button - with a dropdown I have to do a lot more clicks)

Thanks,
Stefan

Could it be smart? If the selection is identifiable as a URL, then prompt for the pretty link. Otherwise assume it’s already the final text and just needs a target added. Could this behavior even be rolled into the existing “Create wikitext link” button? (It would be a behavior change for it which I understand would be offputting, but if a URL is never selected then it would behave the same as it always has - and the current behavior isn’t friendly to anyone wanting to turn an existing URL in the text into a link, so I’d wonder if it’s ever used that way?)

I make use of the ctrl-L link button. Copy a full url to an internet destination. eg https://tiddlywiki.com/#Insert%20link

In the editor type the pretty link text and select it; eg “pretty link”,

my pretty link

Now press ctrl-L and ctrl-V to paste your url into the dialogue box, then hit enter,
The result will be

my [[pretty link|https://tiddlywiki.com/#Insert%20link]] 
  • One advantage is you can insert tiddler links the same way
  • Another is you can just ctrl-L type a “new title” and hit enter. The result will be [[new title]] which is easier than the [[*]] button, no need to select.

Try this:

<$button>
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="save-selection"
    tiddler="$:/temp/external-link"
  />
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="wrap-selection"
    prefix=`[ext[${[{$:/temp/external-link}]}$|https://www.homepage.com/`
    suffix="]]"
  />

  Add Link
</$button>

Fred

Hello Fred,

this fails:

I prefer an icon instead of a button in the toolbar:

→ error is the same:

It looks like the combination of both action-messages is the problem.
Removing the first part (writing to temp folder) → OK

Any idea to fix this?

Thanks,
Stefan

The problem may be a matter of “timing” for handling the two $action-sendmessage widgets. You need to ensure that the save-selection message is completed before the wrap-selection message is invoked.

To achieve this, try moving the $action-sendmessage widgets into separate procedures, doSave and doWrap. Then, use a combination of actions=... and “inline” messages to invoke those procedures, like this:

\procedure doSave()
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="save-selection"
    tiddler="$:/temp/external-link"
  />
\end

\procedure doWrap()
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="wrap-selection"
    prefix=`[ext[${[{$:/temp/external-link}]}$|https://www.homepage.com/`
    suffix="]]"
  />
\end

<$button actions=<<doWrap>>> Add Link <<doSave>></$button>

The “inline” <<doSave>> procedure is invoked first so that the $:/temp/external-link tiddler contents are saved. Then, after that procedure has completed, the action=<<doWrap>> is invoked and can access the saved tiddler contents.

Let me know if this helps.

-e

This is a nice function, but not the proper solution for me - at least I need always paste the url again and again…

Thanks for your input,
Stefan

I tagged the code and add the condition to bring it into the toolbar:

→ test failed:

EDIT:
I’M using TiddlyDesktop version 0.0.20

First, try this in a regular browser to see if its related to using TiddlyDesktop.

Next… and this is just a guess… try adding quotes around the action="<<doWrap>>" parameter value. This should ensure that <<doWrap>> is only being parsed when the action is triggered, and not when the $button widget is initially rendered.

-e

In browser (FF 143.0.4 (64-Bit)) same error.

→ changed code to <$button actions="<<doWrap>>"> Add Link <<doSave>></$button>
→ same error

ok… one more guess…

Maybe it has something to do with the use of the “substituted attribute value” syntax. Try using a filtered transclusion to construct the prefix=... param, like this:

\procedure doWrap()
  <$let pre="[ext[" post="|https://www.homepage.com/"
  <$action-sendmessage $message="tm-edit-text-operation"
    $param="wrap-selection"
    prefix={{{ [<pre>] [{$:/temp/external-link}] [<post>] +[join[]] }}}
    suffix="]]"
  />
  </$let>
\end

-e

→ marked text and click on icon has no effect (tested also in browser)

Is it possible to write the url instead the selected text in a tiddler?

Hi @StS

I tested proposed solution again tonight on tiddlywiki.com with Firefox and Vivaldi, and it worked flawlessly (only tested on Linux).

Here is the exported button tiddler:
MyButton.json (527 Bytes)

Can anyone test it also on Windows please?

Fred

Tested on FF/Chrome/Brave on Windows 11, and on FF Dev/Brave on Ubuntu. Works fine everywhere for me.

1 Like