Make filter operater examples live-editable

[btheado]

The filter operator examples can be executed by clicking the "Try It" button. Change this button so it also converts the filter text into an $edit-text widget. This way the filter examples can be changed on-the-fly.

Some notes:

1. Every time “Try It”/“Hide” is toggled, the edit-text is reset to the original filter text. Any user modifications are lost. This seems ok to me.
2. As suggested by @saqimtiaz, I added a reset button. The reset button is only displayed after the filter text is modified.
3. Some of the examples make use of the third macro parameter to display an extra note (see https://tiddlywiki.com/#sameday%20Operator%20(Examples) for example). My code does not display the extra note after hitting the "Try It" button. Something about it didn't look right to me. Let me know if I should change it.

I used this wikitext to display all the filter operator examples so I could easily test many of them:

<$list filter="[tag[Operator Examples]]">

---

! {{!!title}}

{{!!text}}
</$list>

[saqimtiaz]

@btheado I think that a demo is needed to really be able to understand this PR. Could you upload a file somewhere and link to it please? TiddlyHost.com or Github pages would do the trick.

[btheado]

@saqimtiaz, I published a demo at http://btheado.github.io/TiddlyWiki5/filter-examples-demo.html. Two tiddlers are displayed by default. The first one has pre-loaded $:/state tiddlers to show the various UI states. The second one displays all the filter operator examples.

[pmario]

I personally would prefer it to be 100%. There are a lot of examples that are cut off ..

[saqimtiaz]

@btheado this rule is making checkboxes in other documentation examples not display properly, see https://tiddlywiki.com/#CheckboxWidget (As reported by @twMat)

input[type='search'] might be what we need here.

[btheado]

Thanks for tracking it down. Looks like @Marxsal fixed it already in #6174

[saqimtiaz]

Yes, good team work :)

[pmario]

@Jermolene This PR undoes the changes that have been added by: "Increase specificity of style doc-examples input" #6174 ... So now in https://tiddlywiki.com/prerelease/#CheckboxWidget the formatting of the checkbox widget is broken. The style that should be used is: .doc-example input[type=search] ... as defined in #6174

[saqimtiaz]

@Jermolene This PR undoes the changes that have been added by: "Increase specificity of style doc-examples input" #6174 ... So now in https://tiddlywiki.com/prerelease/#CheckboxWidget the formatting of the checkbox widget is broken. The style that should be used is: .doc-example input[type=search] ... as defined in #6174

I think the tiddlywiki-com branch just needs to be merged into master.

[pmario]

Yea, Sorry thought about this too after checking the timing

[Jermolene]

Thanks – I've just pushed an update

[pmario]

I think that's a really cool improvement! It looks good from my point of view

[Jermolene]

This is great, thanks @btheado, and thank you @saqimtiaz and @pmario

[saqimtiaz]

@Jermolene can we do some git magic and get this working in the pre-release as well?

[Jermolene]

@Jermolene can we do some git magic and get this working in the pre-release as well?

Good thinking, I've just pushed an update to "master"