[IDEA] Some way to click on a transcluded tiddler in draft mode

[rmunn]

Is your feature request related to a problem? Please describe.
When I have a "top-level" tiddler containing several transcluded sections, and I want to edit something in one of the sections, it's actually slightly difficult. E.g., I have a TiddlyWiki containing my notes to myself, a mostly-unstructured brain dump of stuff I want to remember later. The "Webdev resources" tiddler looks like this:

!! Svelte
{{Svelte resources}}

!! Random data
{{Random data generators}}

!! Misc
* https://surge.sh/
* (more links...)

Just now I found a new Svelte-related link that I wanted to add to my "Webdev resources" tiddler, in the "Svelte" section. I opened up the "Webdev resources" tiddler for editing, and said, "Oh yeah, I split that off to a different tiddler". So now I have to type "Svelte" into the search bar in order to get to the tiddler I actually need to edit. And if in the future I split my "Svelte resources" tiddler into multiple sub-tiddlers that get transcluded in, now that's two levels of indirection from my top-level tiddler: first I'll have to type "Svelte" into the search bar, then when I go to edit "Svelte resources" I'll remember that it's really the "Svelte components" tiddler that contains the list I wanted to edit, so I'll have to type something else into the search bar.

I'd like a simpler way to get to transcluded tiddlers when I have the "top" tiddler open in draft mode.

Describe the solution you'd like
It would be nice if, when I have a tiddler open in draft mode, I could just click (or Ctrl-click) on a transclusion and get that tiddler added to the story. Ctrl-click would actually be ideal because that's what my fingers are already trained to do in VS Code: I see a function call, and I want to go to where that function is defined, so I Ctrl-click on the function name. And transcluding tiddlers is already a little bit like a function call, and will become even more like a function call once #5199 is implemented. So for developers, at least, it will feel very natural to Ctrl-click on a transclusion and be taken to the "place where that transclusion is defined".

Of course, for non-dev users (which describes the vast majority of people who use TW), it might not feel so natural to Ctrl-click on a transclusion to be taken to its definition. Which is why I'd suggest making this an option that can be turned on in the config settings, and might default to off. Developers are more likely (IMHO) than non-devs to explore the nooks and crannies of the configuration options, so feature discovery among devs probably won't be harmed much by having this option turned off by default.

Describe alternatives you've considered
An alternative to putting the option in the config would be to make a toggleable button (i.e., one that stays on or off, like the preview pane button) in the toolbar. In the default off state, transclusions in the draft would not be clickable. If you click the button, then transclusions in the editor would be clickable and would become links to the tiddler being transcluded. (But only when Ctrl-clicked, because if #5199 is implemented it's going to become a common pattern to click in a transclusion because you want to edit its parameter(s).)

Or, since creating clickable areas inside a text field element's contents would be ... tricky... it might be better for the edit button (or config checkbox) to simply create a list in the draft template, which could live at the bottom underneath the lists of fields. That list would be a simple <<list-links>> macro call of all the tiddler titles found in transclusions in the tiddler being edited. That would probably be a lot simpler to write, HTML-wise.

[saqimtiaz]

@rmunn Here is an alternative approach:

One of the things that I think we need better support for the in the core is autocompletion of tiddler titles, whether for transclusions or links or widget attributes. Not necessarily a complete solution mind you, but at least better hooks and facilities for implementing such a feature.

This could potentially take the form of facilitating showing a popup at the position of the caret in a text area or input field. With such a facility, it would be possible to trigger showing a popup menu right underneath the text when clicking on a transclusion, with for instance a link to edit the transcluded tiddler or even a popup editor to edit that tiddler.

We already have inputActions on the text editor (see <$edit-text> docs). On could imagine onClickActions that are fired every time we click on the textarea. If these actions were provided with a variable tv-popup-coords which holds the click position (much as the <$eventcatcher> does now for events), the <$action-popup> widget could be used to show a popup at the caret position. In fact, wrapping the eventcatcher around the textarea would probably already allow this but would require editing the core viewtemplate/body tiddler. That would probably make a good prototype to test out the functionality.

[Jermolene]

Hi @rmunn @saqimtiaz

It would indeed be fantastic to have a generic ability to display dropdowns triggered by typing. It would be, of course, quite an undertaking to do this properly: we'd want it to work consistently with the CodeMirror editor and the "framed" editor, and it would need to be fully keyboard enabled. @BurningTreeC has elsewhere suggested that we may be able to do away with the iframe technique used by the framed editor and perhaps that would be worth investigating at the same time.

In the meantime, though, we could fairly simply add a new editor operation (see $:/core/modules/editor/operations/text/*.js) that extracted a tiddler title from the cursor or selection position and invoked an action string.

[linonetwo]

Hi @rmunn , just use https://github.com/Gk0Wk/TW5-CodeMirror-Enhanced , you can cmd+click on title inside [[]] or {{}} and let it open.

So maybe this issue can be closed now?

[pmario]

I would do something like this: link-to-transclusion.zip

Create a template and call it {{tiddler-to-transclude||template}}

<style>
.click-transclude:hover {
  border: 1px blue solid;
}

.click-transclude {
  border: 1px solid;
  border-color: <<color background>>;
}
</style>

<div class="click-transclude">
<$button class="tc-float-right" to=<<currentTiddler>>>click me</$button>
<$transclude mode="block"/>
</div>

[linonetwo]

@pmario you are talking about click and jump to tiddler in view mode? I am using a similar macro to achieve this: https://onetwo.ren/wiki/#%24%3A%2Fplugins%2Flinonetwo%2Fitonnote%2FMacros%2FTransclusionWithEditMe

But this will make backtransclusions filter not work. #847

So I think it is better to decorate transclusion widget somehow, to get "native link-to-transclusion"

---

Oh I see you are using it as a template, this might make it recognized by backtransclusions.

But I still hope every transclusion can have this without assigning a template.

[pmario]

But this will make backtransclusions filter not work. #847

Then IMO the PR is broken.

[pmario]

So I think it is better to decorate transclusion widget somehow, to get "native link-to-transclusion"

That's not possible. We worked hard to avoid creating unneeded elements by transclusions. Using templates with transclusions is exactly there for this purpose.

[linonetwo]

Okay, I think there is another way to achieve "click jump to transcluded tiddler", we can open section editor (via https://github.com/kookma/TW-Section or something like https://github.com/laobubu/HyperMD ), to open the edit mode, and cmd+click to jump.

[joshuafontany]

Why don't we add a new test in the Transclude Widget that checks it it is rendering within a Preview Output template: $:/core/ui/EditTemplate/body/preview/output

https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FEditTemplate%2Fbody%2Fpreview%2Foutput

\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
<$set name="tv-tiddler-preview" value="yes">

<$transclude />

</$set>

Test for variables["tv-tiddler-preview"] == "yes" and then include the back-link. Thus, it will ONLY affect performance of wiki-text rendered in a draft-preview.

OR setup another "tv-tiddler-preview" value like "verbose", and fork $:/core/ui/EditTemplate/body/preview/output into another optional choice in the dropdown.

title: $:/core/ui/EditTemplate/body/preview/verbose
caoption: {{$:/language/EditTemplate/Body/Preview/Type/Output}}
tags: $:/tags/EditPreview

\import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
<$set name="tv-tiddler-preview" value="verbose">

<$transclude />

</$set>

[linonetwo]

Another way: by using https://github.com/Gk0Wk/TW5-CodeMirror-Enhanced you can just cmd+space in the {{xxx}}, and the preview will show up in the right.

[pmario]

Why don't we add a new test in the Transclude Widget that checks it it is rendering within a Preview Output template: $:/core/ui/EditTemplate/body/preview/output

At that level of the code every additional if-statement has the potential to change the overall performance.

IMO the functionality shouldn't be limited to the preview-pane.