Does conditional syntax not get wikified permanently?

I wanted to copy a prompt to the clipboard. It contained the expression below which is wrapped a button that sits in a macro because it is used twice.

Before I put the button into a macro it was rendered, in the macro the button copies the conditional syntax

\define 2clip()
<%if [{$:/temp/set/Task}match[1]] %>
Die Aufgabenstellung steht jeweils über der Aufgabe.
<%elseif [{$:/temp/set/Task}!match[1]!match[]!match[ ]] %>
Die Aufgabe ist die folgende: {{$:/temp/set/Task}}
<%else%>
Aufgabenstellung und Material habe ich ebenfalls als Photo hochgeladen.
<%endif%>

\end
\define CopyButton()
<$wikify name="clippo" text=<<2clip>> >
<$button message="tm-copy-to-clipboard" param=<<clippo>> class=tc-btn-big-green>
Kopiere den Prompt in die Zwischenablage
</$button>
</$wikify>

![[duck.ai|https://duck.ai/chat?ia=chat&duckai=1]] [[Le Chat Mistral|https://chat.mistral.ai/chat]]

\end

<<CopyButton>>

Fast fix: If take the wikifikation out of the macrodefinition and wrap it arround the <<CopyButton>>macro it works again…
But anyhow this is interesting, becaus the other stuff keeps wikified if it is in the macro…

Try using an actions=... parameter to perform the $button actions, like this:

\define CopyButton_actions()
<$wikify name="clippo" text="<<2clip>>">
<$action-sendmessage $message="tm-copy-to-clipboard" param=<<clippo>>/>
</$wikify>
\end

\define CopyButton()
<$button class=tc-btn-big-green actions="<<CopyButton_actions>>">
Kopiere den Prompt in die Zwischenablage
</$button>
...
/end

This ensures that the $wikify processing is only performed when the button is clicked, instead of when the button is initially rendered.

-e

2 Likes

Thank you @EricShulman,
but in the Moment I get one of TiddlyWiki’s red screens of death
TypeError: can't access property "length", text is undefined
when I switched to that solution - which became necessary due to another transclusion.

I guess this is my fault, because the whole prompt-generator which has evolved to be a little too complex it seems :sweat_smile: I will have to tidy up…

Here it is:

\define LeistungEntwurf() Feedback:+ Note:-
\define LeistungEndfassung() Feedback:+ Note:+
\define Feedback() Gib mir ein ehrliches Feedback zu meiner Leistung und stelle dies in Bezug zu dem für von mir angestebtem Schulabschluss zu erwartendem Wissenstand. 
\define Note() Gib mir eine Note in Zensuren von 1 (sehr gut) - 6 und begründe diese.

\define SpracheEntwurf() Korrektur:+ Schwerpunkt:+ Rechtschreibfehler:- Lernwörter:+ Klarheit:- SatzfuerSatz:0
\define SpracheEndfassung() Korrektur:+ Schwerpunkt:+ Rechtschreibfehler:- Lernwörter:+ Klarheit:- SatzfuerSatz:0
\define Korrektur() Korrigiere sprachliche Fehler (Rechtschreibung, lexikalische Fehler (falsche Worte), Grammatik, Zeichensetzung).
\define Schwerpunkt() Zeige mir, wo ich meine Sprache als Erstes verbessern sollte (z. B. Fehlertypen, Satzbau, Stil, Präzision).
\define Rechtschreibfehler() Erstelle eine Liste der falsch geschriebenen Wörter.
\define Lernwörter() Erstelle eine Liste der Wörter, die ich lernen sollte (z. B. sinnvolle Fachbegriffe, die noch fehlen, die korrekten Wörter, bei denen du lexikalische Fehler vermutest, bessere Ausdrücke und alternative Formulierungen um Wiederholungen zu vermeiden) und erkläre diese ggf. knapp.).
\define Klarheit() Sind meine Formulierungen verständlich? Gib bei Sätzen, bei denen die Bedeutung nicht klar wird, die von dir vermutete Bedeutung in klaren Sätzen wieder.
\define SatzfuerSatz() Korrigiere und verbessere meinen Text Satz für Satz. 

\define InhaltEntwurf() Aufgabe:+ Operatoren:+ Intention:+ Einleitungssatz:- Distanz:- Belege:- Struktur:+ Argumentation:- Fakten:+ Ergänzung:+
\define InhaltEndfassung() Aufgabe:+ Operatoren:+ Intention:+ Einleitungssatz:+ Distanz:+ Belege:+ Struktur:+ Argumentation:+ Fakten:+ Ergänzung:+
\define Aufgabe() Habe ich die Aufgabenstellung korrekt verstanden und umgesetzt.
\define Operatoren() Entspricht der Entwurf den in der Aufgabenstellung verwendeten Operatoren. 
\define Intention() Habe ich die Absicht des Autors erkannt und richtig dargestellt?
\define Einleitungssatz() Beginnt die Bearbeitung mit einen guten Einleitungssatz?
\define Distanz() Berücksichtige ich bei der Wiedergabe der Quelle die referierende Distanz? 
\define Belege() Sind meine meine Erkenntnisse und die historischen Bezüge gut an der Quelle belegt.
\define Struktur() Ist mein Text klar strukturiert? Gibt es Absätze oder Überleitungen, die unlogisch oder verwirrend sind?
\define Argumentation() Zeige mir, ob meine Argumentation logisch aufgebaut und nachvollziehbar ist.
\define Fakten() Sind die Fakten auf die ich mich berufe korrekt.
\define Ergänzung() Nenne mir historische Fakten und Zusammenhänge und Argumente, die ich vertiefen, ergänzen oder überarbeiten sollte.

\define checkprompt(definition, default)
<$checkbox 
  tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}}
  field="text" 
  checked="+" 
  unchecked="-" 
  default={{{ [<default>] }}}>
  <<$(definition)$>>
</$checkbox><br>
\end

\define render-checkboxes(definitions)
<$list filter="[enlist<__definitions__>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <<checkprompt>>
  </$let>
</$list>
\end

\define generate-prompt(definitions)
<$list filter="[enlist<__definitions__>]" variable="item">
<$let 
  definition={{{ [<item>split[:]first[]] }}}
  default={{{ [<item>split[:]last[]else[-]] }}}
  tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}}
  current={{{ [<tiddler>get[text]else<default>] }}}
>
<$list filter="[<current>match[+]]">

*<$transclude $variable=<<definition>>/>
</$list>
</$let>
</$list>
\end
\define TaskCheckAction() <$action-setfield $tiddler="$:/temp/set/Task" text=" "/>
\define TaskUncheckAction() <$action-setfield $tiddler="$:/temp/set/Task" text=""/>
\define Ge1()
Ich brauche Unterstützung beim Verfassen eines Textes für das Fach Geschichte. Bitte überprüfe meinen Entwurf, den ich als Foto meines handschriftlichen Textes hochlade.
\end
\define Ge2()
Dein Feedback soll mir helfen, meine Fähigkeiten zu verbessern – übernimm also nicht die Arbeit für mich, sondern zeige mir, wo und wie ich mich verbessern kann.
\end

\define 2clip()
<<Ge1>>
<%if [{$:/temp/set/Task}match[1]] %>
Die Aufgabenstellung steht jeweils über der Aufgabe.
<%elseif [{$:/temp/set/Task}!match[1]!match[]!match[ ]] %>
Die Aufgabe ist die folgende: {{$:/temp/set/Task}}
<%else%>
Aufgabenstellung und Material habe ich ebenfalls als Photo hochgeladen.
<%endif%>

<$list filter="[[$:/temp/set/length]get[text]]" >
Der Text den ich verfassen will, soll ungefähr {{!!title}} handschriftliche Seiten umfassen. Berücksichtige dies beim Umfang deiner Vorschläge.
</$list>

<$list filter="[[$:/temp/set/class]get[text]]" emptyMessage="Schätze mein Niveau auf Grundlage meines Textes ein und passe">
Ich bereite mich auf {{!!title}} vor. Passe
</$list> deine Antwort dem zu erwartenden Wissensstand an und formuliere die Antwort so, dass ich diese gut umsetzen kann. 
<<Ge2>>

<$transclude $variable="generate-prompt" definitions=<<InhaltEntwurf>>/>
<$transclude $variable="generate-prompt" definitions=<<SpracheEntwurf>>/>
<$transclude $variable="generate-prompt" definitions=<<LeistungEntwurf>>/>
\end
\define PreviewPrompt()
<$transclude $variable="fold" heading="Prompt ansehen" text="""

<<<
<<2clip>>
<<<
"""/>
\end
\define switch-to-endfassung()
<$list filter="[enlist<InhaltEndfassung>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>
<$list filter="[enlist<SpracheEndfassung>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>
<$list filter="[enlist<LeistungEndfassung>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>
\end

\define switch-to-entwurf()
<$action-deletetiddler $filter="[prefix[$:/temp/set/]]"/>
<!--<$list filter="[enlist<InhaltEntwurf>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>
<$list filter="[enlist<SpracheEntwurf>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>
<$list filter="[enlist<LeistungEntwurf>]" variable="item">
  <$let 
    definition={{{ [<item>split[:]first[]] }}}
    default={{{ [<item>split[:]last[]else[-]] }}}
  >
    <$action-setfield $tiddler={{{ [[$:/temp/set/]addsuffix<definition>] }}} text=<<default>>/>
  </$let>
</$list>-->
\end

\define toggle-entwurf-endfassung(leftLabel:"Entwurf", rightLabel:"Endfassung", activeColor:"#155FFF", bgColor:"#e0e0e0")
<style>
.ee-toggle-switch {
  position: relative;
  display: inline-flex;
  width: 240px;
  height: 50px;
  background: $bgColor$;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  font-family: sans-serif;
}
.ee-toggle-label {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s ease;
  color: #333;
  font-weight: 500;
  border: none;
  background: transparent;
}
.ee-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: $activeColor$;
  border-radius: 30px;
  transition: transform 0.3s ease;
  z-index: 1;
}
.ee-mode-entwurf .ee-toggle-slider {
  transform: translateX(0);
}
.ee-mode-endfassung .ee-toggle-slider {
  transform: translateX(100%);
}
.ee-mode-entwurf .ee-toggle-label-left,
.ee-mode-endfassung .ee-toggle-label-right {
  color: white;
}
</style>
<div class={{{ [[$:/temp/set/mode]get[text]else[entwurf]addprefix[ee-toggle-switch ee-mode-]] }}}>
  <div class="ee-toggle-slider"></div>
  <$button class="ee-toggle-label ee-toggle-label-left" actions=<<switch-to-entwurf>>>
    <$action-setfield $tiddler="$:/temp/set/mode" text="entwurf"/>
    $leftLabel$
  </$button>
  <$button class="ee-toggle-label ee-toggle-label-right" actions=<<switch-to-endfassung>>>
    <$action-setfield $tiddler="$:/temp/set/mode" text="endfassung"/>
    $rightLabel$
  </$button>
</div>
\end
\define CopyButton()
<style>
.prompt-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  color: white;
}
.prompt-btn-copy {
  background: #155FFF;
}
.prompt-btn-copy:hover {
  background: #0d4acc;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(21, 95, 255, 0.3);
}
.prompt-btn-duck {
  background: #DE5833;
}
.prompt-btn-duck:hover {
  background: #c74d2b;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(222, 88, 51, 0.3);
}
.prompt-btn-mistral {
  background: #FF7000;
}
.prompt-btn-mistral:hover {
  background: #e66500;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 112, 0, 0.3);
}
.prompt-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}
</style>

<div class="prompt-buttons">
  <$button class="prompt-btn prompt-btn-copy" message="tm-copy-to-clipboard" param=<<clippo>>>
    {{$:/core/images/copy-clipboard}}
    Prompt kopieren
  </$button>
  
  <$button class="prompt-btn prompt-btn-duck">
    <$action-sendmessage $message="tm-copy-to-clipboard" $param=<<clippo>>/>
    <$action-sendmessage $message="tm-open-external-window" $param="https://duck.ai/chat?ia=chat&duckai=1"/>
    [img width=32 [https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/duckduckgo-icon.png]] Duck.ai öffnen
  </$button>
  
  <$button class="prompt-btn prompt-btn-mistral">
    <$action-sendmessage $message="tm-copy-to-clipboard" $param=<<clippo>>/>
    [img width=32 [https://mistral.ai/static/branding/m/m-rainbow.svg]] <$action-sendmessage $message="tm-open-external-window" $param="https://chat.mistral.ai/chat"/>
    Le Chat öffnen
  </$button>
</div>
\end

<<toggle-entwurf-endfassung "Entwurf" "Ausarbeitung" "#FF5722" "#f0f0f0">>

<$wikify name="clippo" text=<<2clip>> >
<<CopyButton>>
<<Ge1>>
<br>
<$checkbox filter="[{$:/temp/set/Task}match[]] [{$:/temp/set/Task}match[ ]]" tiddler="$:/temp/set/Task" field="text" checked="" uncheckactions=<<TaskUncheckAction>> checkactions=<<TaskUncheckAction>> default=""> Aufgabenstellung und Material habe ich ebenfalls als Photo hochgeladen.</$checkbox>
<br>
<$checkbox tiddler="$:/temp/set/Task" field="text" checked="1" unchecked="" default="closed"> Die Aufgabenstellung steht jeweils über der Aufgabe.</$checkbox>
<br>
<$checkbox filter="[{$:/temp/set/Task}!match[1]!match[ ]!match[]]" checked={{{ [[$:/temp/set/Task]get[text]!match[1]] }}} checkactions=<<TaskCheckAction>> uncheckactions=<<TaskCheckAction>> > Die Aufgabenstellung möchte ich hier hineinkopieren</$checkbox>
<$list filter="[{$:/temp/set/Task}!match[1]!match[]]">
<$eventcatcher
   $focusin="""<$action-setfield $tiddler="$:/temp/set/Task" draft.of="yes"/>"""
   $focusout="""<$action-deletefield $tiddler="$:/temp/set/Task" draft.of/>""">
<div class="aiinputtask">
<$edit-text tiddler="$:/temp/set/Task" class="aiinputtask" />
</div>
</$eventcatcher>
<style>
.aiinputtask {width:100%;heigth:40px;overflow:scroll}
</style>
</$list>
<br>
Der Text den ich verfassen will, soll ungefähr <$select tiddler="$:/temp/set/length" default="">
<option value="">auswählen</option>
<$list filter="0,5 1 1,5 2 3 4 5 6 7 8 9 10">
<option>{{!!title}}</option>
</$list>
<option value="">keine Angabe</option>
</$select> Seiten handschriftlichen Text umfassen
<br>
Ich bereite mich auf <$select tiddler="$:/temp/set/class" default="">
<option value="">auswählen</option>
<$list filter="[[den ESA]] [[den MSA]] [[das Abitur]]">
<option>{{!!title}}</option>
</$list>
<option value="">keine Angabe</option>
</$select> vor. Passe deine Antwort meinem Wissensstand an. 
<br>
<<Ge2>>

<h3>Inhaltliche Aspekte</h3>
<$transclude $variable="render-checkboxes" definitions=<<InhaltEntwurf>>/>
<h3>Sprachliche Korrekturen</h3>
<$transclude $variable="render-checkboxes" definitions=<<SpracheEntwurf>>/>
<h3>Feedback</h3>
<$transclude $variable="render-checkboxes" definitions=<<LeistungEntwurf>>/>

<<PreviewPrompt>>
<<CopyButton>>
</$wikify>

@EricShulman , I found one mistake and could silence the RSOD: param needs a $ in the ActionSendMessageWidget.

But the wikifikation of conditional syntax still does not work with this construction.

RSODs should never happen. So it would be nice, if you could provide a minimal test case at GitHub. So we can fix it.

I think this might be due to the Version of my wiki which is 5.3.1

5.3.8 this does not cause a RSOD:

\define CopyButton_actions()
<$wikify name="clippo" text=<<2clip>>>
<$action-sendmessage $message="tm-copy-to-clipboard" param=<<clippo>>/>
</$wikify>
\end

\define CopyButton()
<$button class=tc-btn-big-green actions=<<CopyButton_actions>>>
Kopiere den Prompt in die Zwischenablage
</$button>

\end
<<CopyButton>>

The wikification Problem of conditional syntax is a problem seperate from the RSOD

OK. Did verify it. No problem with v5.3.8 and v5.4.0-pre.

Try wrapping the $button actions and the $wikify text param in quotes:

<$button class=tc-btn-big-green actions="<<CopyButton_actions>>">
<$wikify name="clippo" text="<<2clip>>">

I’m not sure if this will make a difference, but it might help to prevent those macro calls from being evaluated “too early” (i.e., when rendered vs when clicked).

-e

1 Like

See: https://tiddlywiki.com/#Conditional%20Shortcut%20Syntax

Conditional syntax was introduced with v5.3.2 … So it can’t work with your wiki.

Yes… but the wiki I worked with when I encountered the problem is Version 5.3.6.

1 Like

Would there be any difference between "<<CopyButton_actions>>" and <<CopyButton_actions>> to my knowledge just having =<<CopyButton_actions>> is sufficient to have the actions rendered on click, rather than on rendering the button?

Also a note that if an %if is inside a button I believe it will be rendered, or what I call Evaluated (as you cant see it) when rendering the button. However it is fine in the macro referred to through the actions parameter. %if is a nice way to handle the modifier keys.

modifier keys that are pressed when the action is invoked. The possible modifiers are ctrl, ctrl-alt, ctrl-shift, alt, alt-shift, shift and ctrl-alt-shift

Of course one thing about actions, they remain invisible, as they do not in themselves generate output, except once triggered, although you can use the ActionLogWidget to pass variables to the browser console.

Note:
I do feel we need to document an explanation of the render and evaluation process in general to assist users and designers have a conceptual framework on which to place what they learn.

Functions are an example of something that is evaluated even before widgets and some macros are “dynamically rendered”. Other than the wikify widget, can anyone name any other methods to do this? Perhaps we can argue the %if/%else does this with its filters?

1 Like