Add a cascade for rendering fields within the Edit Template (#6511)

* Allow the rendering of fields to be extended

This commit extends the `$:/core/ui/EditTemplate/fields` tiddler to
use a new cascade (Field Editor Cascade) to allow customizing the
rendering of the field editor.
It provides a default element for the cascade that displays the standard
EditTextWidget as a fallback. That way, the implementation is completely
backwards compatible. The `currentTiddler` and `currentField` variables
are available in the transcluded tiddler. This has the additional
benefit, that not only the `EditTextWidget` can be used. The user can
use a dropdown-list or even something completely crazy. As long as it
can be put into a tiddler that updates the field, it will be fine.

* Make `select` Tags in Fields look like the rest

This patch updates the CSS to make `tc-edit-texteditor` usable on
`select`-tags as well.

I'm not sure what `-webkit-appearance: none;` is for, but it hides the
DropDown-arrow in Chrome and makes the select-tag hard to discover. I've
changed the css to only apply it to the input tag. Maybe it can be
removed altogether.

* Add documentation for the Field Editor Cascade

core/language/en-GB/ControlPanel.multids

@@ -36,6 +36,8 @@ EditorTypes/Hint: These tiddlers determine which editor is used to edit specific
 EditorTypes/Type/Caption: Type
 EditTemplateBody/Caption: Edit Template Body
 EditTemplateBody/Hint: This rule cascade is used by the default edit template to dynamically choose the template for editing the body of a tiddler.
+FieldEditor/Caption: Field Editor
+FieldEditor/Hint: This rules cascade is used to dynamically choose the template for rendering a tiddler field based on its name. It is used within the Edit Template.
 Info/Caption: Info
 Info/Hint: Information about this TiddlyWiki
 KeyboardShortcuts/Add/Prompt: Type shortcut here
@@ -226,4 +228,4 @@ Tools/Download/Full/Caption: Download full wiki
 ViewTemplateBody/Caption: View Template Body
 ViewTemplateBody/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the body of a tiddler.
 ViewTemplateTitle/Caption: View Template Title
-ViewTemplateTitle/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the title of a tiddler.
+ViewTemplateTitle/Hint: This rule cascade is used by the default view template to dynamically choose the template for displaying the title of a tiddler.

core/ui/ControlPanel/Cascades/FieldEditor.tid

@@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/FieldEditor
+tags: $:/tags/ControlPanel/Cascades
+caption: {{$:/language/ControlPanel/FieldEditor/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/FieldEditor/
+
+<<lingo Hint>>
+
+{{$:/tags/FieldEditorFilter||$:/snippets/ListTaggedCascade}}

core/ui/EditTemplate/fieldEditor-default.tid

@@ -0,0 +1,3 @@
+title: $:/core/ui/EditTemplate/fieldEditor/default
+
+<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> default="" class="tc-edit-texteditor" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>

core/ui/EditTemplate/fields.tid

@@ -15,7 +15,7 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 \end
 
 \define new-field-actions()
-<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
+<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldNameTiddler>get[text]] :map[<newFieldValueTiddler>get<currentTiddler>] }}}/>
 <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<newFieldValueTiddler>] [<storeTitle>] [<searchListState>]"/>
 <$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/>
 \end
@@ -42,7 +42,7 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 <$button tooltip=<<lingo Fields/Add/Button/Hint>>>
 <$action-sendmessage $message="tm-add-field"
 $name=<<name>>
-$value={{{ [<newFieldValueTiddler>get[text]] }}}/>
+$value={{{ [<newFieldValueTiddler>get<name>] }}}/>
 <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<newFieldValueTiddler>] [<storeTitle>] [<searchListState>]"/>
 <<lingo Fields/Add/Button>>
 </$button>
@@ -66,7 +66,7 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
 <$text text=<<currentField>>/>:</td>
 <td class="tc-edit-field-value">
 <$keyboard key="((delete-field))" actions="""<$action-deletefield $field=<<currentField>>/><$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/></$set>""">
-<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
+<$transclude tiddler={{{ [<currentField>] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} />
 </$keyboard>
 </td>
 <td class="tc-edit-field-remove">
@@ -126,16 +126,18 @@ $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
 </div>
 </$reveal>
 </div>
+<$let currentTiddler=<<newFieldValueTiddler>> currentField={{{ [<newFieldNameTiddler>get[text]] }}}>
 <span class="tc-edit-field-add-value tc-small-gap-right">
 <$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}>
 <$keyboard key="((add-field))" actions=<<new-field-actions>>>
-<$edit-text tiddler=<<newFieldValueTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
+<$transclude tiddler={{{ [<currentField>] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} />
 </$keyboard>
 </$set>
 </span>
 <span class="tc-edit-field-add-button">
 <$macrocall $name="new-field"/>
 </span>
+</$let>
 </$vars>
 </div>
 </$fieldmangler>

core/wiki/config/FieldEditorFilters.multids

@@ -0,0 +1,4 @@
+title: $:/config/FieldEditorFilters/
+tags: $:/tags/FieldEditorFilter
+
+default: [[$:/core/ui/EditTemplate/fieldEditor/default]]

editions/tw5.com/tiddlers/concepts/Cascades.tid

@@ -39,6 +39,7 @@ The TiddlyWiki core uses cascades to choose the following elements:
 |[[View Template Title Cascade]] |The template used to display the title of a particular tiddler (used by the default view template to display the tiddler title) |
 |[[View Template Body Cascade]] |The template used to display the view mode body of a particular tiddler (used by the default view template to display the tiddler body) |
 |[[Edit Template Body Cascade]] |The template used to display the edit mode body of a particular tiddler (used by the default edit template to display the tiddler body editor) |
+|[[Field Editor Cascade]] |The template used to display the edit mode of a tiddler field (used by the default edit template to display the field editor) |
 
 You can see the current settings for each cascade in $:/ControlPanel under the ''Info'' -> ''Advanced'' -> ''Cascades'' tab.
 

editions/tw5.com/tiddlers/concepts/Customizing EditTemplate Field Rendering.tid

@@ -0,0 +1,31 @@
+created: 20220305183700000
+modified: 20220305183700000
+tags: Concepts
+title: Customizing EditTemplate field rendering
+type: text/vnd.tiddlywiki
+
+When editing a tiddler the [[EditTemplate|$:/core/ui/EditTemplate/fields]] normally renders fields as simple input boxes. To modify this behaviour, the [[cascade mechanism|Cascades]] can be used. Via the [[Field Editor Cascade|Field Editor Cascade]] the name of the tiddler used for rendering the field editor can be specified. The content of this tiddler is transcluded to represent the content of the field.
+
+To modify the appearance of all fields whose name ends with `-date` create a new tiddler and add the `$:/tags/FieldEditorFilter` tag to it. Add a `list-before` field and assign the value `$:/config/FieldEditorFilters/default`. Now you have to put the filter for the cascade into the tiddler's text field: `[regexp[-date$]then[$:/config/EditTemplateFields/Templates/dates]]`. This will transclude the tiddler named `$:/config/EditTemplateFields/Templates/dates` to render the input elements for all fields with names matching the regular expression.
+
+The variables `currentTiddler` and `currentField` are set to pass information about the tiddler and field that are edited to the transcluded tiddler.
+
+For example, a tiddler containing the following WikiText would render the field as an HTML input element of the type `date`. This will show a date picker for the fields on all modern browsers:
+
+```
+<$edit-text tiddler=<<currentTiddler>> field=<<currentField>> type="date" class="tc-edit-texteditor" placeholder="Set your date" tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
+```
+
+The `tabindex` and `cancelPopups` attributes make sure the HTML input element behaves exactly the default elements provided by TiddlyWiki.
+
+Not only the `EditTextWidget` can be used. A tiddler containing the following WikiText will render the field as a drop-down-list that allows the user to select the name of a tiddler. The name of the selected tiddler will be stored in the field.
+
+```
+<$select tiddler=<<currentTiddler>> field=<<currentField>> class="tc-edit-texteditor" cancelPopups="yes">
+    <$list filter='[all[tiddlers]sort[title]]'>
+        <option value=<<currentTiddler>>><$view field='title'/></option>
+    </$list>
+</$select>
+```
+
+The class `tc-edit-texteditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation.

editions/tw5.com/tiddlers/concepts/Field Editor Cascade.tid

@@ -0,0 +1,17 @@
+created: 20220305173931551
+modified: 20220305173931551
+tags: Cascades
+title: Field Editor Cascade
+type: text/vnd.tiddlywiki
+
+The field editor cascade is a [[cascade|Cascades]] used to choose a template for rendering the field editor within the [[EditTemplate|$:/core/ui/EditTemplate/fields]].
+
+The default field editor cascade only contains one element:
+
+# Use the tiddler $:/core/ui/EditTemplate/fieldEditor/default to render the field
+
+See [[Customizing EditTemplate field rendering]] for more details.
+
+You can see the current settings for the field editor cascade in $:/ControlPanel under the ''Info'' -> ''Advanced'' -> ''Cascades''  -> ''Field Editor'' tab.
+
+<<list-links "[tag[Tiddler Field Editor Cascade]]">>

themes/tiddlywiki/snowwhite/base.tid

@@ -36,7 +36,8 @@ tags: [[$:/tags/Stylesheet]]
 	<<filter "drop-shadow(0px -1px 2px rgba(0,0,0,0.25))">>
 }
 
-.tc-tiddler-frame input.tc-edit-texteditor {
+.tc-tiddler-frame input.tc-edit-texteditor,
+.tc-tiddler-frame select.tc-edit-texteditor {
 	<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
 }
 

themes/tiddlywiki/vanilla/base.tid

@@ -1197,15 +1197,22 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-frame input.tc-edit-texteditor,
 .tc-tiddler-frame textarea.tc-edit-texteditor,
-.tc-tiddler-frame iframe.tc-edit-texteditor {
+.tc-tiddler-frame iframe.tc-edit-texteditor,
+.tc-tiddler-frame select.tc-edit-texteditor {
 	padding: 3px 3px 3px 3px;
 	border: 1px solid <<colour tiddler-editor-border>>;
 	line-height: 1.3em;
-	-webkit-appearance: none;
 	font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
 }
 
 .tc-tiddler-frame input.tc-edit-texteditor,
+.tc-tiddler-frame textarea.tc-edit-texteditor,
+.tc-tiddler-frame iframe.tc-edit-texteditor {
+	-webkit-appearance: none;
+}
+
+.tc-tiddler-frame input.tc-edit-texteditor,
+.tc-tiddler-frame select.tc-edit-texteditor,
 .tc-tiddler-frame textarea.tc-edit-texteditor {
 	background-color: <<colour tiddler-editor-background>>;
 }