How can I leverage JSON Link Data to insert them via The Editor?

,
#1

Background: the TiddlyTools MiniBrowser creates and maintains excellent JSON records for links in the format …

{
    "Title": "https://some-site.com",
    "Another Title": "file://some-file"
}

How could I leverage this to create a tool in the Editor that can lookup the entries and insert a record as a link?? like …

[[Title|https://some-site.com]]

Wondering
TT

cc: @EricShulman

#2

Give this a try:

Start by creating a tiddler (e.g., “TiddlyTools/Panels/Browser/EditorToolbar/link”), tagged with $:/tags/EditorToolbar, containing:

\import TiddlyTools/Panels/Browser

\define actions()
<$let lb="[[" rb="]]">
<$action-sendmessage $message="tm-edit-text-operation" $param="insert-text" text={{{ [<lb>] [<mark>] [[|]] [<url>] [<rb>] +[join[]] }}}/>
\end

\define folders_mark(dnd)
<$let url={{{ [<folder>getindex<mark>] }}}>
<$button class=tc-btn-invisible style="display:block;padding:0;margin:0 0.25em;" tooltip=<<url>> actions=<<actions>>>
<$text text=<<mark>>/>
</$button>
\end

\define pop()
<$let folders="$:/config/TiddlyTools/Bookmarks" find="[!match[]]" findid=<<qualify "$(popup)$/find">>>
<$button class=tc-btn-invisible tooltip={{!!caption}} popup={{{ [prefix<folders>then<findid>] }}}>&#x1F516;</$button>
<$reveal state=<<findid>> type=popup position=belowleft><<folders_find>></$reveal>
\end

<<styles>><<pop>>

add a caption field containing:

insert bookmark

add a condition field containing:

[<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]

add a description field containing:

insert a TiddlyTools MiniBrowser bookmark

That’s it. You should now have a new “insert bookmark” EditorToolbar button. When clicked, it will show the MiniBrowser’s “folders_find” interface with an input field to find matching bookmarks, and a list showing the matching bookmarks. Clicking on a bookmark inserts that bookmark’s [[Title|url]] into the tiddler being edited.

enjoy,
-e

#3

Great, thanks!

I’ll use it a few days and report back.

TT

#4

After testing on TiddlyWiki.com, I realized that my initial solution was not consistent with the standard EditorToolbar implementation methods. Here’s the new method:

Create a tiddler (e.g., “TiddlyTools/Panels/Browser/InsertBookmark”), tagged with $:/tags/EditorToolbar, with the following fields:

text

&#x1F516;

caption

insert bookmark

condition

[<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]

description

insert a TiddlyTools Minibrowser bookmark

dropdown

TiddlyTools/Panels/Browser/InsertBookmark/dropdown

Next, create another tiddler (e.g., TiddlyTools/Panels/Browser/InsertBookmark/dropdown) containing:

\import TiddlyTools/Panels/Browser

\define actions()
<$let lb="[[" rb="]]">
<$action-sendmessage $message="tm-edit-text-operation" $param="insert-text" text={{{ [<lb>] [<mark>] [[|]] [<url>] [<rb>] +[join[]] }}}/>
\end

\define folders_mark(dnd)
<$let url={{{ [<folder>getindex<mark>] }}}>
<$eventcatcher $click=<<actions>>>
<a title=<<url>> style="display:block;padding:0 0.25em;"><$text text=<<mark>>/></a>
</$eventcatcher>
\end

<$let folders="$:/config/TiddlyTools/Bookmarks" find="[!match[]]">
<<styles>><<folders_find>>

-e

#5

Thanks. It now fits the editor-bar much better!

Sidenote …

I’m still testing. But one thing (N.B. I’m not sure if it is my error of understanding or an actual issue) is I can’t get this to work.

find="[!match[⸺]]

Should I have tested that on Mother?

… but this does work without further steps …

find="[!regexp[⸺]]
used to remove “dummy” bookmark links used in my bookmark folder menus to seperate sections

Best, TT

#6

Update:

I’ve found a way to combine the EditorToolbar definition and the dropdown definition in a single tiddler.

Create a tiddler (e.g., “TiddlyTools/Panels/Browser/InsertBookmark”), tagged with $:/tags/EditorToolbar , with the following fields:

text

\import TiddlyTools/Panels/Browser

\define actions()
<$let lb="[[" rb="]]">
<$action-sendmessage $message="tm-edit-text-operation" $param="insert-text" text={{{ [<lb>] [<mark>] [[|]] [<url>] [<rb>] +[join[]] }}}/>
\end

\define folders_mark(dnd)
<$let url={{{ [<folder>getindex<mark>] }}}>
<$eventcatcher $click=<<actions>>>
<a title=<<url>> style="display:block;padding:0 0.25em;"><$text text=<<mark>>/></a>
</$eventcatcher>
\end

<$let folders="$:/config/TiddlyTools/Bookmarks" find="[!match[]]" findid=<<dropdown-state>>>
<%if [<transclusion>search[|text|]] %>&#x1F516;<% else %><<styles>><<folders_find>><% endif %>

caption

insert bookmark

condition

[<targetTiddler>!has[type]] [<targetTiddler>type[text/vnd.tiddlywiki]]

description

insert a TiddlyTools Minibrowser bookmark

dropdown

TiddlyTools/Panels/Browser/InsertBookmark

Notes:

  • The dropdown field value is now just TiddlyTools/Panels/Browser/InsertBookmark, instead of TiddlyTools/Panels/Browser/InsertBookmark/dropdown
  • findid uses the <<dropdown-state>> tiddler to hold the “find a name or URL” input. By using this transient $:/state/popup tiddler (which is created by the TWCore’s EditorToolbar handling), the input is automatically reset when the dropdown is dismissed.
  • The [<transclusion>search[|text|]] conditional is TRUE when showing the EditorToolbar button, but FALSE when showing the dropdown. This is what allows the same tiddler definition show either the button or the dropdown.

enjoy,
-e

#7

Where and however you get the link from the json you could also copy it to the clipboard to allow pasting multiple times, however I would encourage a designer of such solutions storing the result in a temporary tiddler as well allowing tiddlywiki buttons to access effectively a wiki clipboard.

as I just outlined here Is there a way to create a button to paste the clipboard to a textfield? - #2 by TW_Tones