mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-07-08 13:04:21 +00:00
73a9625b81
* Fix field edit bug
This fixes the field edit bug mentioned in
https://talk.tiddlywiki.org/t/possible-field-editing-bug-in-5-2-2/2884 .
* Revert "Fix visual regression in #6511"
This reverts commit c920960942.
* Add new class `tc-edit-fieldeditor`
This class must be added to input and select elements that are used as
field editors. This class reduces the line height of the input element
if it is displayed within the `tc-edit-fields` part of the edit
template.
This allows the same input and select elements to be used for editing
and adding fields.
* Add the new class `tc-edit-field` to the docs
The example in `Customizing EditTemplate Field Rendering` now uses the
new CSS classes.
31 lines
2.4 KiB
Plaintext
31 lines
2.4 KiB
Plaintext
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 tc-edit-fieldeditor" 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 tc-edit-fieldeditor" cancelPopups="yes">
|
|
<$list filter='[all[tiddlers]sort[title]]'>
|
|
<option value=<<currentTiddler>>><$view field='title'/></option>
|
|
</$list>
|
|
</$select>
|
|
```
|
|
|
|
The classes `tc-edit-texteditor` and `tc-edit-fieldeditor` should be used to style the `input` and `select` elements to match the theme of the TiddlyWiki installation. |