EditTemplate optimizations (#4104)

#4093 and #4100 are bundled in this PR

* qualified state-tiddlers for the tags input and fieldname + fieldvalue inputs
* newTagName, newFieldNameTiddler and newFieldValueTiddler variables defined in EditTemplate (all qualified through `qualify` macro)
* save-tiddler-actions macro in the EditTemplate (reused by the save-tiddler button)
* enter (configurable) in the fieldvalue field adds the field and sets focus to the next fieldname input

Edit:

* storyview="pop" for fields list

core/language/en-GB/EditTemplate.multids

@@ -8,7 +8,7 @@ Field/Remove/Hint: Remove field
 Field/Dropdown/Caption: field list
 Field/Dropdown/Hint: Show field list
 Fields/Add/Button: add
-Fields/Add/Button/Hint: add field
+Fields/Add/Button/Hint: Add the new field to the tiddler
 Fields/Add/Name/Placeholder: field name
 Fields/Add/Prompt: Add a new field:
 Fields/Add/Value/Placeholder: field value

core/ui/EditTemplate.tid

@@ -1,11 +1,11 @@
 title: $:/core/ui/EditTemplate
 
-\define actions()
-<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>
-<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
-<$action-sendmessage $message="tm-add-field" $name={{$:/temp/newfieldname}} $value={{$:/temp/newfieldvalue}}/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldname"/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldvalue"/>
+\define save-tiddler-actions()
+<$action-sendmessage $message="tm-add-tag" $param={{{ [<newTagNameTiddler>get[text]] }}}/>
+<$action-deletetiddler $tiddler=<<newTagNameTiddler>>/>
+<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
+<$action-deletetiddler $tiddler=<<newFieldNameTiddler>>/>
+<$action-deletetiddler $tiddler=<<newFieldValueTiddler>>/>
 <$action-sendmessage $message="tm-save-tiddler"/>
 \end
 \define frame-classes()
@@ -13,9 +13,9 @@ tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerCl
 \end
 <div class=<<frame-classes>> data-tiddler-title=<<currentTiddler>>>
 <$fieldmangler>
-<$set name="storyTiddler" value=<<currentTiddler>>>
+<$vars storyTiddler=<<currentTiddler>> newTagNameTiddler=<<qualify "$:/temp/NewTagName">> newFieldNameTiddler=<<qualify "$:/temp/NewFieldName">> newFieldValueTiddler=<<qualify "$:/temp/NewFieldValue">>>
 <$keyboard key="((cancel-edit-tiddler))" message="tm-cancel-tiddler">
-<$keyboard key="((save-tiddler))" actions=<<actions>>>
+<$keyboard key="((save-tiddler))" actions=<<save-tiddler-actions>>>
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/EditTemplate]!has[draft.of]]" variable="listItem">
 <$set name="tv-config-toolbar-class" filter="[<tv-config-toolbar-class>] [<listItem>encodeuricomponent[]addprefix[tc-btn-]]">
 <$transclude tiddler=<<listItem>>/>
@@ -23,6 +23,6 @@ tc-tiddler-frame tc-tiddler-edit-frame $(missingTiddlerClass)$ $(shadowTiddlerCl
 </$list>
 </$keyboard>
 </$keyboard>
-</$set>
+</$vars>
 </$fieldmangler>
 </div>

core/ui/EditTemplate/fields.tid

@@ -10,15 +10,26 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 [[hide]] -[title{$(config-title)$}]
 \end
 
+\define current-tiddler-new-field-selector()
+[data-tiddler-title="$(currentTiddlerCSSescaped)$"] .tc-edit-field-add-name input
+\end
+
+\define new-field-actions()
+<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}}/>
+<$action-deletetiddler $tiddler=<<newFieldNameTiddler>>/>
+<$action-deletetiddler $tiddler=<<newFieldValueTiddler>>/>
+<$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/>
+\end
+
 \define new-field()
-<$vars name={{$:/temp/newfieldname}}>
+<$vars name={{{ [<newFieldNameTiddler>get[text]] }}}>
 <$reveal type="nomatch" text="" default=<<name>>>
 <$button tooltip=<<lingo Fields/Add/Button/Hint>>>
 <$action-sendmessage $message="tm-add-field"
 $name=<<name>>
-$value={{$:/temp/newfieldvalue}}/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldname"/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldvalue"/>
+$value={{{ [<newFieldValueTiddler>get[text]] }}}/>
+<$action-deletetiddler $tiddler=<<newFieldNameTiddler>>/>
+<$action-deletetiddler $tiddler=<<newFieldValueTiddler>>/>
 <<lingo Fields/Add/Button>>
 </$button>
 </$reveal>
@@ -67,11 +78,12 @@ $value={{$:/temp/newfieldvalue}}/>
 <$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="">
 <div class="tc-block-dropdown tc-edit-type-dropdown">
 <$set name="tv-show-missing-links" value="yes">
-<$linkcatcher to="$:/temp/newfieldname">
+<$linkcatcher to=<<newFieldNameTiddler>>>
 <div class="tc-dropdown-item">
 <<lingo Fields/Add/Dropdown/User>>
 </div>
-<$list filter="[!is[shadow]!is[system]fields[]search:title{$:/temp/newfieldname}sort[]] -created -creator -draft.of -draft.title -modified -modifier -tags -text -title -type"  variable="currentField">
+<$set name="newFieldName" value={{{ [<newFieldNameTiddler>get[text]] }}}>
+<$list filter="[!is[shadow]!is[system]fields[]search:title<newFieldName>sort[]] -created -creator -draft.of -draft.title -modified -modifier -tags -text -title -type"  variable="currentField">
 <$link to=<<currentField>>>
 <$text text=<<currentField>>/>
 </$link>
@@ -79,17 +91,22 @@ $value={{$:/temp/newfieldvalue}}/>
 <div class="tc-dropdown-item">
 <<lingo Fields/Add/Dropdown/System>>
 </div>
-<$list filter="[fields[]search:title{$:/temp/newfieldname}sort[]] -[!is[shadow]!is[system]fields[]]" variable="currentField">
+<$list filter="[fields[]search:title<newFieldName>sort[]] -[!is[shadow]!is[system]fields[]]" variable="currentField">
 <$link to=<<currentField>>>
 <$text text=<<currentField>>/>
 </$link>
 </$list>
+</$set>
 </$linkcatcher>
 </$set>
 </div>
 </$reveal>
 <span class="tc-edit-field-add-value">
-<$edit-text tiddler="$:/temp/newfieldvalue" tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Value/Placeholder}} class="tc-edit-texteditor" tabindex={{$:/config/EditTabIndex}}/>
+<$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}}/>
+</$keyboard>
+</$set>
 </span>&nbsp;
 <span class="tc-edit-field-add-button">
 <$macrocall $name="new-field"/>

core/ui/EditToolbar/save.tid

@@ -3,13 +3,9 @@ tags: $:/tags/EditToolbar
 caption: {{$:/core/images/done-button}} {{$:/language/Buttons/Save/Caption}}
 description: {{$:/language/Buttons/Save/Hint}}
 
+\define save-tiddler-button()
 <$fieldmangler><$button tooltip={{$:/language/Buttons/Save/Hint}} aria-label={{$:/language/Buttons/Save/Caption}} class=<<tv-config-toolbar-class>>>
-<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>
-<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
-<$action-sendmessage $message="tm-add-field" $name={{$:/temp/newfieldname}} $value={{$:/temp/newfieldvalue}}/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldname"/>
-<$action-deletetiddler $tiddler="$:/temp/newfieldvalue"/>
-<$action-sendmessage $message="tm-save-tiddler"/>
+<<save-tiddler-actions>>
 <$list filter="[<tv-config-toolbar-icons>match[yes]]">
 {{$:/core/images/done-button}}
 </$list>
@@ -17,3 +13,5 @@ description: {{$:/language/Buttons/Save/Hint}}
 <span class="tc-btn-text"><$text text={{$:/language/Buttons/Save/Caption}}/></span>
 </$list>
 </$button></$fieldmangler>
+\end
+<<save-tiddler-button>>

core/wiki/config/ShortcutInfo.multids

@@ -1,5 +1,6 @@
 title: $:/config/ShortcutInfo/
 
+add-field: {{$:/language/EditTemplate/Fields/Add/Button/Hint}}
 advanced-search: {{$:/language/Buttons/AdvancedSearch/Hint}}
 bold: {{$:/language/Buttons/Bold/Hint}}
 cancel-edit-tiddler: {{$:/language/Buttons/Cancel/Hint}}

core/wiki/config/shortcuts/shortcuts.multids

@@ -1,5 +1,6 @@
 title: $:/config/shortcuts/
 
+add-field: enter
 advanced-search: ctrl-shift-A
 cancel-edit-tiddler: escape
 excise: ctrl-E

core/wiki/macros/tag-picker.tid

@@ -2,14 +2,14 @@ title: $:/core/macros/tag-picker
 tags: $:/tags/Macro
 
 \define add-tag-actions()
-<$action-sendmessage $message="tm-add-tag" $param={{$:/temp/NewTagName}}/>
-<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
+<$action-sendmessage $message="tm-add-tag" $param={{{ [<newTagNameTiddler>get[text]] }}}/>
+<$action-deletetiddler $tiddler=<<newTagNameTiddler>>/>
 \end
 
 \define tag-button()
 <$button class="tc-btn-invisible" tag="a" tooltip={{$:/language/EditTemplate/Tags/Add/Button/Hint}}>
 <$action-sendmessage $message="tm-add-tag" $param=<<tag>>/>
-<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
+<$action-deletetiddler $tiddler=<<newTagNameTiddler>>/>
 <$macrocall $name="tag-pill" tag=<<tag>>/>
 </$button>
 \end
@@ -18,13 +18,13 @@ tags: $:/tags/Macro
 <div class="tc-edit-add-tag">
 <span class="tc-add-tag-name">
 <$keyboard key="ENTER" actions=<<add-tag-actions>>>
-<$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle" tabindex=<<tabIndex>> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}/>
+<$edit-text tiddler=<<newTagNameTiddler>> tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle" tabindex=<<tabIndex>> focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}/>
 </$keyboard>
 </span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
-<$set name="tag" value={{$:/temp/NewTagName}}>
+<$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}>
 <$button set="$:/temp/NewTagName" setTo="" class="">
 <<add-tag-actions>>
-<$action-deletetiddler $tiddler="$:/temp/NewTagName"/>
+<$action-deletetiddler $tiddler=<<newTagNameTiddler>>/>
 {{$:/language/EditTemplate/Tags/Add/Button}}
 </$button>
 </$set>
@@ -33,15 +33,17 @@ tags: $:/tags/Macro
 <div class="tc-block-dropdown-wrapper">
 <$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
 <div class="tc-block-dropdown">
-<$list filter="[{$:/temp/NewTagName}minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
-<$list filter="[tags[]!is[system]search:title{$:/temp/NewTagName}sort[]]" variable="tag">
+<$set name="newTagName" value={{{ [<newTagNameTiddler>get[text]] }}}>
+<$list filter="[<newTagName>minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
+<$list filter="[tags[]!is[system]search:title<newTagName>sort[]]" variable="tag">
 <<tag-button>>
 </$list></$list>
 <hr>
-<$list filter="[{$:/temp/NewTagName}minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
-<$list filter="[tags[]is[system]search:title{$:/temp/NewTagName}sort[]]" variable="tag">
+<$list filter="[<newTagName>minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="""<div class="tc-search-results">{{$:/language/Search/Search/TooShort}}</div>""" variable="listItem">
+<$list filter="[tags[]is[system]search:title<newTagName>sort[]]" variable="tag">
 <<tag-button>>
 </$list></$list>
+</$set>
 </div>
 </$reveal>
 </div>