From 989947b99a385c6c917946373480d67dadd3528b Mon Sep 17 00:00:00 2001
From: btheado <brian.theado@gmail.com>
Date: Mon, 25 Oct 2021 11:35:57 -0400
Subject: [PATCH] Make filter operater examples live-editable (#6139)

* Make filter operator examples easily editable

* Add 'Reset' button to filter operator examples

* Only display the reset button when filter has changed

* Introduce '.doc-example input' class rather than re-use tc-advanced-search to make input wider

* Grab focus for the filter text box

* Fix firefox ctrl-z/undo issue by replacing list widget with filter transclusion

* Replace spaced indent with tabs to make it consistent with the other code
---
 editions/tw5.com/tiddlers/system/doc-styles.tid |  3 +++
 .../tw5.com/tiddlers/system/operator-macros.tid | 17 ++++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/editions/tw5.com/tiddlers/system/doc-styles.tid b/editions/tw5.com/tiddlers/system/doc-styles.tid
index 2e33a266c..35b955105 100644
--- a/editions/tw5.com/tiddlers/system/doc-styles.tid
+++ b/editions/tw5.com/tiddlers/system/doc-styles.tid
@@ -110,6 +110,9 @@ td svg {
 	padding-bottom: 0;
 	margin-top: 0.2em;
 }
+.doc-example input {
+  width: 60%;
+}
 .doc-example pre:first-child {
 	margin-top: 0;
 }
diff --git a/editions/tw5.com/tiddlers/system/operator-macros.tid b/editions/tw5.com/tiddlers/system/operator-macros.tid
index df917402b..477968945 100644
--- a/editions/tw5.com/tiddlers/system/operator-macros.tid
+++ b/editions/tw5.com/tiddlers/system/operator-macros.tid
@@ -5,22 +5,29 @@ tags: $:/tags/Macro
 
 \define .operator-examples(op,text:"Examples") <$link to="$op$ Operator (Examples)">$text$</$link>
 
+\define .operator-example-tryit-actions() <$action-setfield $tiddler=<<.state>> text="show" filter=<<__eg__>>/>
 \define .operator-example(n,eg,ie)
 <div class="doc-example">
-`$eg$`
-<$macrocall $name=".if" cond="""$ie$""" then="""<dd>&rarr; $ie$</dd>"""/>
 <$list filter="[title<.state-prefix>addsuffix{!!title}addsuffix[/]addsuffix[$n$]]" variable=".state">
 <$reveal state=<<.state>> type="nomatch" text="show">
+	`$eg$`
+	<$macrocall $name=".if" cond="""$ie$""" then="""<dd>&rarr; $ie$</dd>"""/>
 	<dl>
-	<dd><$button set=<<.state>> setTo="show">Try it</$button></dd>
+	<dd><$button actions=<<.operator-example-tryit-actions>>>Try it</$button></dd>
 	</dl>
 </$reveal>
 <$reveal state=<<.state>> type="match" text="show">
+	<$edit-text tiddler=<<.state>> field="filter" tag="input" type=search focus="true"/>
 	<dl>
-	<dd><$button set=<<.state>> setTo="">Hide</$button></dd>
+	<dd>
+	<$button set=<<.state>> setTo="">Hide</$button>
+	<$reveal stateTitle=<<.state>> stateField="filter" type="nomatch" text=<<__eg__>>>
+		<$button actions=<<.operator-example-tryit-actions>>>Reset</$button>
+	</$reveal>
+	</dd>
 	</dl>
 	<blockquote class="doc-example-result">
-	<ul><$list filter="""$eg$""" emptyMessage="(empty)">
+	<ul><$list filter={{{[<.state>get[filter]]}}} emptyMessage="(empty)">
 	<li><$link><$view field="title"/></$link></li>
 	</$list></ul>
 	</blockquote>