Feature suggestion Editor Toolbar External Links and External Images button improvement

[Duarte Farrajota Ramos]

Ok, after furiously fighting with my lack of skills for quite a while I finally made it. I have absolutely no scripting skills an no programming knowledge,so I am sure this not at all the correct way to do it and there are probably lots of mistakes and inneficiencies, but please bear with me.

So after using the fantastic new 5.1.13 for a while I am absolutely loving the new WikiText toolbar it is fantastic! Two small things have been frustrating me, though: the lack of ability to easily add external links, or the lack of ability to easily add external images.
So after some fumbling around I came up with this suggestion that I would eventually like to see in a future release of TiddlyWiki allowing adding external links using the same exact toolbar button and with only a few modifications to the dropdown tiddler in parallel to internal tiddlers.

So basically I modified the default $:/core/ui/EditorToolbar/link-dropdown tiddler to include an additional button that basically lets you insert whatever search string you are using as a link URL. Normally this would be restricted to internal tiddler links from the list bellow, but this one allows pasting or introducing any URL in the text box to use as link URL.

So basically I add a define a new button as a macro and then call it later, so we end up with a link dropdown tiddler $:/core/ui/EditorToolbar/link-dropdown that looks like

\define lingo-base() $:/language/Buttons/Link/

\define link-actions()
<$action-sendmessage
    $message="tm-edit-text-operation"
    $param="make-link"
    text={{$(linkTiddler)$}}
/>

<$action-deletetiddler
    $tiddler=<<dropdown-state>>
/>

<$action-deletetiddler
    $tiddler=<<searchTiddler>>
/>

<$action-deletetiddler
    $tiddler=<<linkTiddler>>
/>
\end

\define external-link()
<$button class="tc-btn-invisible" style="width: auto; display: inline-block; background-colour: inherit;">
<$action-sendmessage $message="tm-edit-text-operation" $param="make-link" text={{$(searchTiddler)$}}
/>
{{$:/core/images/chevron-right}}
<$action-deletetiddler
    $tiddler=<<dropdown-state>>
/>

<$action-deletetiddler
    $tiddler=<<searchTiddler>>
/>

<$action-deletetiddler
    $tiddler=<<linkTiddler>>
/>
</$button>
\end


\define body(config-title)
''<<lingo Hint>>''

<$vars searchTiddler="""$config-title$/search""" linkTiddler="""$config-title$/link""" linktext="" >

<$edit-text tiddler=<<searchTiddler>> type="search" tag="input" focus="true" placeholder={{$:/language/Search/Search}} default=""/>
<$reveal tag="span" state=<<searchTiddler>> type="nomatch" text="">
<<external-link>>
<$button class="tc-btn-invisible" style="width: auto; display: inline-block; background-colour: inherit;">
<$action-setfield $tiddler=<<searchTiddler>> text="" />
{{$:/core/images/close-button}}
</$button>
</$reveal>

<$reveal tag="div" state=<<searchTiddler>> type="nomatch" text="">

<$linkcatcher actions=<<link-actions>> to=<<linkTiddler>>>

{{$:/core/ui/SearchResults}}

</$linkcatcher>

</$reveal>

</$vars>

\end

<$macrocall $name="body" config-title=<<qualify "$:/state/Link/">>/>

You can see it in action here

So eventually I'd like to do something similar for external images too, possibly combined with the existing insert image button or even as a different one, but I fear my ineptitude may get in my way. I will try it again later tonight, but it may well be far above my copy-pasting skills.

Anyway, what do you guys think, is this worth it, is it useful?
Jeremy would you consider including something vaguely like this in any future release? Perhaps even as a different button, or combined with the current ones?

[PMario]

On Tuesday, August 2, 2016 at 9:38:13 PM UTC+2, Duarte Farrajota Ramos wrote:

So eventually I'd like to do something similar for external images too, possibly combined with the existing insert image button or even as a different one, but I fear my ineptitude may get in my way. I will try it again later tonight, but it may well be far above my copy-pasting skills.

Anyway, what do you guys think, is this worth it, is it useful?

Well done! Looks good to me and seems to be very useful!
 

Jeremy would you consider including something vaguely like this in any future release? Perhaps even as a different button, or combined with the current ones?

Would be worth a new feature request. .. https://github.com/Jermolene/TiddlyWiki5/issues/2521 ... you can create them yourself ;)

have fun!
mario

 

[Duarte Farrajota Ramos]

Ah nice one, was wondering if one could submit the code somewhere, but you already did it, so I thank you for that.
I urge you to look at the code though, to see if it could be improved, as I said my coding skills are non-existant

Anyway I was plugging away at the external image feature, but could not do it myself. I may try again but I fear it's way above me.

[Duarte Farrajota Ramos]

It seems Jeremy liked it enough, a commit has been submitted that includes this feature :)
This also allows linking to non existing tiddlers too.

I will try again my luck with inserting external images too in the next few days. I'll post any results if I am successful.

Thanks Jeremy

[Duarte Farrajota Ramos]

After another multi-round fight and lots of sweat and tears I finally managed to make the external images button in the Editor Toolbar allow inserting external images by writing or pasting their URL.

Created a pull request here https://github.com/Jermolene/TiddlyWiki5/pull/2548
Again not sure if it is over complicated or  totally correct codewise, but could not make it work without so many macros. It may need a few language hints

Here it is in action

Ideally the text box would also allow filtering or searching the internal image tiddlers displayed in the list bellow, just like the links button dropdown currently, but I'll just leave it as a hint for Jeremy as a possible future improvement, since that is way above my skill level.

Hope you guys find this useful.

[Duarte Farrajota Ramos]

Just adding a working example as attachement

[Tobias Beer]

Hi Duarte,

Ah, I thought your input was meant for entering and referencing an external image, i.e. not a tiddler with _canonical_uri. I think I misunderstood the purpose.

If it's just meant to filter and reduce the list of available images to click, then you don't quite need to add the image tag with the literal text or when would you?

At least what would be the benefit? to get some "raw" image wikitext markup? Then I'd rather provide placeholders for classes or width, tooltips, etc...

Best wishes,

Tobias. 

[Duarte Farrajota Ramos]

The text input box is meant to insert actual external images, say from http:// url or a local media with a relative or absolute path, not internal images with _canonical_uri

Check the animated GIF in my previous post, or try it out from the attached example by creating a new tiddler and adding a new image from the toolbar button.
It just adds the image markup [img[]] around the inserted text in the dropdown

I did intend to make a filter like you describe, where the inserted text would have a double purpose. It filters the displayed images (like in the links dropdown) and can also be the URL for an external or no existent image tiddler. But that is way above my skill level, and I could not make it work, despite my best efforts.

[Tobias Beer]

Hi Duarte,

 

The text input box is meant to insert actual external images, say from http:// url or a local media with a relative or absolute path, not internal images with _canonical_uri

Ah, sorry, for some odd reason I was sure it wouldn't work that way, but this sentence clears up my misunderstanding:

If the image source is the title of an image tiddler then that tiddler is directly displayed. 

Otherwise it is interpreted as a URL and an HTML <img> tag is generated with the src attribute containing the URL.

 

I tried to check that...

Check the animated GIF in my previous post, or try it out from the attached example by creating a new tiddler and adding a new image from the toolbar button.
It just adds the image markup [img[]] around the inserted text in the dropdown

...however, the final moment was just too brief to see what's going on. ;-)

 

I did intend to make a filter like you describe, where the inserted text would have a double purpose. It filters the displayed images (like in the links dropdown) and can also be the URL for an external or no existent image tiddler. But that is way above my skill level, and I could not make it work, despite my best efforts.

No problem, once your PR is through, I be happy to extend it. Or perhaps suggest an edit in a bit...

Best wishes,

Tobias. 

[Duarte Farrajota Ramos]

Yep that sentence sums it up perfectly, could not explain it better myself. ☺