How to extend existed widget (e.g. add copy button to codeblock)?

[linonetwo]

We have two separate plugin that modified codeblock widget (result of markdown codeblock syntax). We dont want to use macro to generate modified codeblock widget each eime.

Also, I want to add an edit source button to the transclude widget, if it is used to transclude a user tiddler instead of a system tiddler.

Do you know what is the correct way to extend tw core built in widgets?

[pmario]

Also, I want to add an edit source button to the transclude widget,

The transclude widget doesn't create a DOM element by design. So by default there is no clickable element that could be used to create an "open xxx" link. There is a discussion at Talk https://talk.tiddlywiki.org/t/is-there-a-way-to-make-the-transclude-collapse/1176/6?u=pmario ... where Eric shows a possibility to "fold" a transclusion. A similar approach can be used to create an "edit transclusion" button. ....

IMO this is plugin territory and not part of the core.

[pmario]

We have two separate plugin that modified codeblock widget (result of markdown codeblock syntax). We dont want to use macro to generate modified codeblock widget each eime.

TLDR;

The intro of the custom-markup plugin can be found at: https://talk.tiddlywiki.org/t/intro-the-custom-markup-plugin-beta/1219?u=pmario Especially the Videos are important, since the docs is relatively sparse atm.

Feedback: https://talk.tiddlywiki.org/c/plugins/custom-markup/14
Issues: https://github.com/wikilabs/plugins/issues

---

I did create the "experimental" custom-makup plugin for exactly that purpose to be used with tiddlywiki syntax. ... I wanted to have a possibility to write code block eg: like this:

°clip line 1
line 2
line 3
----

some standard text text

Where the full code that is involved looks like this:

<!-- The following part can be globally defined -->
\define .clip(code)
\whitespace trim
<div class="doc-example">
	<$macrocall $name="copy-to-clipboard-above-right" src=<<__code__>>/>
	<pre><code><$text text=<<__code__>>/></code></pre>
\end

\custom approx="clip" _element="$macrocall" $name=".clip" _srcName="code" 

<!-- END global definition -->

°clip line 1
line 2
line 3
----

some standard text text

Examples are: https://wikilabs.github.io/editions/custom-markup/#test-.clip-macro:test-.clip-macro%20.example-macro

[Jermolene]

Thanks @linonetwo

We have two separate plugin that modified codeblock widget (result of markdown codeblock syntax). We dont want to use macro to generate modified codeblock widget each eime.

I think you are referring to the highlight.js plugin, which overwrites the core <$codeblock> widget?

That mechanism is indeed not very flexible or extensible.

We could re-engineer the codeblock widget to have some extensibility hooks. For example, the codeblock widget could use the hook mechanism to allow plugins to modify the generate HTML of the widget, and the highlight plugin could use that mechanism.

Also, I want to add an edit source button to the transclude widget, if it is used to transclude a user tiddler instead of a system tiddler.

As @pmario points out, the transclude widget doesn't generate any DOM nodes at present. If it did generate DOM elements then there would be a problem with broken HTML nesting rules. Nonetheless, in most cases things would mostly work.

Do you know what is the correct way to extend tw core built in widgets?

I don't think there is the possibility of a single universal mechanism. Instead, widgets need to be constructed to be explicitly extensible.

As an aside, I've been exploring for a while a related idea for replacing widgets: to be able to locally map a specific widget invocation into a macro invocation. For example:

\define my-replacement-transclude-widget(body,tiddler,subtiddler,field,index,mode,recursionMarker)
<div class="my-transclusion-frame">
<$button message="tm-edit-tiddler" param=<<__tiddler__>>>
edit
</$button>
<$transclude tiddler=<<__tiddler__>> tiddler=<<__tiddler__>> subtiddler=<<__subtiddler__>> field=<<__field__>> index=<<__index__>> mode=<<__mode__>> recursionMarker=<<__recursionMarker__>>>
$body$
</$transclude>
</div>
\end

<$redefine-widget name="transclude" with=<<my-replacement-transclude-widget>>>
...
<$transclude tiddler="foo"/>
...
</$redefine-widget>