tiddlywiki 5.1.21 → 5.2.1

package/editions/tw5.com/tiddlers/widgets/ActionPopupWidget.tid

@@ -0,0 +1,34 @@
+caption: action-popup
+created: 20200303114556528
+modified: 20210501203451387
+tags: Widgets ActionWidgets
+title: ActionPopupWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+The ''action-popup'' widget is an [[action widget|ActionWidgets]] that triggers the display of a popup defined via a state tiddler, or clears all displayed popups. ActionWidgets are used within triggering widgets such as the ButtonWidget.
+
+! Content and Attributes
+
+The ''action-popup'' widget is invisible. Any content within it is ignored.
+
+|!Attribute |!Description |
+|$state |The title of the state tiddler for the popup |
+|$coords |Optional coordinates for the handle to which popup is positioned (in the format `(x,y,w,h)`) |
+|$floating |<<.from-version "5.2.0">> Optional. Defaults to `no`. Set to `yes` to create a popup that must be closed explicitly. |
+
+<<.from-version "5.1.23">> If the ''$coords'' attribute is missing or empty then all popups are cancelled.
+
+<<.tip "Delete the state tiddler for a floating popup to close it.">>
+
+! Examples
+
+Here is an example of button that triggers the "more" button in the sidebar "Tools" tab. You may need to scroll to see the popup
+
+<$macrocall $name='wikitext-example-without-html'
+src='<$button>
+<$action-setfield $tiddler="$:/state/tab/sidebar--595412856" $value="$:/core/ui/SideBar/Tools"/>
+<$action-popup $state="$:/state/popup/more-2053862905" $coords="(0,20,0,0)"/>
+Click me!
+</$button>'/>

package/editions/tw5.com/tiddlers/widgets/ActionSendMessageWidget.tid

@@ -1,6 +1,6 @@
 caption: action-sendmessage
 created: 20141008134309742
-modified: 20150518210909583
+modified: 20211023160110220
 tags: Widgets ActionWidgets
 title: ActionSendMessageWidget
 type: text/vnd.tiddlywiki
@@ -18,6 +18,8 @@ The ''action-sendmessage'' widget is invisible. Any content within it is ignored
 |$param |Optional parameter string whose meaning is dependent on the message being sent |
 |$name |Optional name of additional parameter |
 |$value |Value for optional parameter whose name is specified in `$name` |
+|$names |<<.from-version "5.2.1">> Optional filter evaluating to a list of additional parameter names |
+|$values |<<.from-version "5.2.1">> Optional filter evaluating to a list of parameter values corresponding to the parameters names specified in `$names` |
 |//{any attributes not starting with $}// |Multiple additional, optional named parameters that are attached to the message |
 
 ! Examples

package/editions/tw5.com/tiddlers/widgets/ActionSetMultipleFieldsWidget.tid

@@ -0,0 +1,31 @@
+caption: action-setmultiplefields
+created: 20211023160110220
+modified: 20211023160110220
+tags: Widgets ActionWidgets
+title: ActionSetMultipleFieldsWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+The ''action-setmultiplefields'' widget is an [[action widget|ActionWidgets]] that assigns multiple fields to a tiddler where the names and values of the fields are specified as separate filters. ActionWidgets are used within triggering widgets such as the ButtonWidget.
+
+! Content and Attributes
+
+The ''action-setmultiplefields'' widget is invisible. Any content within it is ignored.
+
+|!Attribute |!Description |
+|$tiddler |Optional title of the tiddler to modify (defaults to the current tiddler) |
+|$fields |Optional filter evaluating to the names of a list of fields to assign. Either `$fields` or `$indexes` must be specified  |
+|$indexes |Optional filter evaluating to the names of a list of indexes to assign. Either `$fields` or `$indexes` must be specified |
+|$values |Filter evaluating to the values to be assigned to the fields or indexes |
+|$timestamp |Specifies whether the timestamp(s) of the target tiddler will be updated (''modified'' and ''modifier'', plus ''created'' and ''creator'' for newly created tiddlers). Can be "yes" (the default) or "no" |
+
+! Examples
+
+Here is an example of button that uses the data in [[Days of the Week]] to assign fields `day-Monday`, `day-Tuesday` etc. to the tiddler "HelloThere":
+
+<$macrocall $name='wikitext-example-without-html'
+src='<$button>
+<$action-setmultiplefields $tiddler="HelloThere" $fields="[list[Days of the Week]addprefix[day-]]" $values="[list[Days of the Week]]"/>
+Click me!
+</$button>'/>

package/editions/tw5.com/tiddlers/widgets/ActionWidget Execution Modes.tid

@@ -0,0 +1,49 @@
+created: 20211003094722447
+modified: 20211116193245990
+tags: Widgets
+title: ActionWidget Execution Modes
+
+<<.from-version "5.2.0">> The default behaviour of action widgets has some peculiarities that often cause confusion. There is now an improved mode that simplifies how things work, but due to BackwardsCompatibility constraints, it must be explicitly engaged in order to take advantage of it.
+
+The peculiarities relate to the way that the results of previous action widgets are available to subsequent action widgets. By default, action widgets are refreshed before each execution which ensure that they reflect the results of previous actions. However, ordinary widgets are not updated in the same way.
+
+In the following contrived example, a button triggers a series of actions that should result in the string `foo` being assigned to the ''text'' field of the tiddler ActionTestTiddler. However, it fails to produce the expected result because the `<$set>` widget is not refreshed with the new value of ActionTestTiddler after the execution of the first `<$action-setfield>` widget.
+
+
+<$macrocall $name='wikitext-example-without-html'
+src='\define actions()
+<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
+<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
+<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
+</$set>
+\end
+
+Current value of ActionTestTiddler: {{ActionTestTiddler}}
+
+<$button actions=<<actions>>>
+Click me
+</$button>'/>
+
+The new behaviour avoids these problems by refreshing all widgets before execution, not just action widgets. It is engaged by running the actions in a scope that includes the variable `tv-action-refresh-policy` set to the value `always`.  (The default value for `tv-action-refresh-policy` is `once`).
+
+The assignment can be done within an action string, or via a local variable declaration containing the widget triggering the action.
+
+<<.warning "Do not attempt to set `tv-action-refresh-policy` globally; the core will only work correctly with the default setting">>
+
+The example above works as expected with the addition of `tv-action-refresh-policy`:
+
+<$macrocall $name='wikitext-example-without-html'
+src='\define tv-action-refresh-policy() always
+
+\define actions()
+<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value="FOO"/>
+<$set name="newvalue" value={{{ [{ActionTestTiddler}lowercase[]] }}}>
+<$action-setfield $tiddler="ActionTestTiddler" $field="text" $value=<<newvalue>>/>
+</$set>
+\end
+
+Current value of ActionTestTiddler: {{ActionTestTiddler}}
+
+<$button actions=<<actions>>>
+Click me
+</$button>'/>

package/editions/tw5.com/tiddlers/widgets/ActionWidgets.tid

@@ -1,10 +1,10 @@
 created: 20141008134425548
-modified: 20160429165240169
+modified: 20211031172913375
 tags: Widgets
 title: ActionWidgets
 type: text/vnd.tiddlywiki
 
-Action widgets are a special type of widget that have no visual appearance but perform an action when triggered (such as sending a message, navigating to a tiddler, or changing the value of a tiddler). Action widgets are used in association with other widgets that trigger those actions (for example, the ButtonWidget).
+Action widgets are a special type of widget that have no visual appearance but perform an action when triggered (such as sending a message, navigating to a tiddler, or changing the value of a tiddler). Action widgets are used in association with other widgets that [[trigger those actions|TriggeringWidgets]] (for example, the ButtonWidget).
 
 The following action widgets are provided:
 
@@ -12,12 +12,12 @@ The following action widgets are provided:
 
 There are two ways to use action widgets:
 
-* Using the `actions` attribute of the triggering widget (this is the preferred way)
+* Placing them within an action string attribute (typically called `actions`) on the triggering widget (this is the preferred way)
 * Embedding the actions within the triggering widget (an older technique that is now deprecated)
 
-!! Assigning action widgets with the `actions` attribute
+!! Using action string attributes
 
-The action widgets are passed as a string to the `actions` attribute of the triggering widget. Usually, it is more convenient to use a macro to assign the action widgets to a variable. For example, here is a button that triggers two actions of sending different messages:
+The action widgets are passed as a string to the `actions` attribute of the [[triggering widget|TriggeringWidgets]]. Usually, it is more convenient to use a macro to assign the action widgets to a variable. For example, here is a button that triggers two actions of sending different messages:
 
 ```
 \define my-actions()
@@ -30,9 +30,9 @@ Click me!
 </$button>
 ```
 
-!! Assigning action widgets by embedding
+!! Directly embedding action widgets
 
-The action widgets need not be immediate children of their triggering widget, but they must be descendents of it. The actions are performed in sequence. Here is the above example rewritten to use embedding:
+The action widgets need not be immediate children of their [[triggering widget|TriggeringWidgets]], but they must be descendents of it. The actions are performed in sequence. Here is the above example rewritten to use embedding:
 
 ```
 <$button>
@@ -42,3 +42,6 @@ Click me!
 </$button>
 ```
 
+! Action Execution Modes
+
+{{ActionWidget Execution Modes}}

package/editions/tw5.com/tiddlers/widgets/BrowseWidget.tid

@@ -1,6 +1,6 @@
 caption: browse
 created: 20131024141900000
-modified: 20170718142410367
+modified: 20200421221304177
 tags: Widgets
 title: BrowseWidget
 type: text/vnd.tiddlywiki
@@ -17,7 +17,9 @@ The content of the `<$browse>` widget is ignored.
 |multiple |Set to "multiple" to select multiple file upload |
 |deserializer |<<.from-version "5.1.15">> Optional name of deserializer to be used (by default the deserializer is derived from the file extension or type) |
 |tooltip |Optional tooltip text |
-|message |Optional override of widget message to be generated. The parameter for the message will be the JavaScript object `event.target.files` |
+|accept |<<.from-version "5.1.23">> Optional comma delimited [[list of file accepted extensions|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers]] and/or MIME types |
+|message |Optional override of widget message to be generated. The files will be passed in the JavaScript object `event.target.files` |
+|param |Optional parameter to be passed with the custom message |
 
 On iPhone/iPad choosing the multiple option will remove the ability to take photographs/videos directly into TiddlyWiki.
 

package/editions/tw5.com/tiddlers/widgets/ButtonWidget.tid

@@ -1,7 +1,7 @@
 caption: button
 created: 20131024141900000
-modified: 20170406085706139
-tags: Widgets
+modified: 20211009121239795
+tags: Widgets TriggeringWidgets
 title: ButtonWidget
 type: text/vnd.tiddlywiki
 
@@ -24,17 +24,17 @@ The integrated actions are provided as a shortcut for invoking common actions. T
 The content of the `<$button>` widget is displayed within the button.
 
 |!Attribute |!Description |
-|actions |A string containing ActionWidgets to be triggered when the key combination is detected |
+|actions |A string containing ActionWidgets to be triggered when the key combination is detected. <<.from-version "5.1.23">> the <<.def "modifier">> variable lists the modifier keys that are pressed when the action is invoked. The possible modifiers are ''ctrl'', ''ctrl-alt'', ''ctrl-shift'', ''alt'', ''alt-shift'', ''shift'' and ''ctrl-alt-shift'' |
 |to |The title of the tiddler to navigate to |
 |message |The name of the [[widget message|Messages]] to send when the button is clicked |
 |param |The optional parameter to the message |
 |set |A TextReference to which a new value will be assigned |
-|setTitle |A title to which a new value will be assigned, ''without'' TextReference. Gets preferred over <<.attr state>> |
-|setField |A ''field name'' to which the new value will be assigned, if the attribute <<.attr stateTitle>> is present. Defaults to the ''text'' field |
-|setIndex |An ''index'' to which the new value will be assigned, if the attribute <<.attr stateTitle>> is present |
-|setTo |The new value to assign to the TextReference identified in the `set` attribute or the text field / the field specified through `setField` / the index specified through `setIndex` of the title given through `setTitle` |
-|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in `set` already has the value specified in `setTo`  |
-|default |Default value if `set` tiddler is missing for testing against `setTo` to determine `selectedClass` |
+|setTitle |A title to which a new value will be assigned, ''without'' TextReference. Gets preferred over <<.attr set>> |
+|setField |A ''field name'' to which the new value will be assigned, if the attribute <<.attr setTitle>> is present. Defaults to the ''text'' field |
+|setIndex |An ''index'' to which the new value will be assigned, if the attribute <<.attr setTitle>> is present |
+|setTo |The new value to assign to the TextReference identified in the `set` attribute or the text field / the field specified through <<.attr setField>> / the index specified through <<.attr setIndex>> of the title given through <<.attr setTitle>> |
+|selectedClass |An optional additional CSS class to be assigned if the popup is triggered or the tiddler specified in <<.attr set>> already has the value specified in <<.attr setTo>>  |
+|default |Default value if <<.attr set>> tiddler is missing for testing against <<.attr setTo>> to determine <<.attr selectedClass>> |
 |popup |Title of a state tiddler for a popup that is toggled when the button is clicked. See PopupMechanism for details |
 |popupTitle |Title of a state tiddler for a popup that is toggled when the button is clicked. In difference to the <<.attr popup>> attribute, ''no'' TextReference is used. See PopupMechanism for details |
 |aria-label |Optional [[Accessibility]] label |
@@ -44,10 +44,12 @@ The content of the `<$button>` widget is displayed within the button.
 |tag |An optional html tag to use instead of the default "button" |
 |dragTiddler |An optional tiddler title making the button draggable and identifying the payload tiddler. See DraggableWidget for details |
 |dragFilter |An optional filter making the button draggable and identifying the list of payload tiddlers. See DraggableWidget for details |
+|tabindex |Sets the `tabindex` attribute of the button to the given value |
+|disabled|<<.from-version "5.1.23">> Optional, disables the button if set to "yes". Defaults to "no"|
 
-''Note:'' In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to [[transclude|Transclusion in WikiText]] the value currently stored there. However, when we use a TextReference as the value of a button widget's `set` attribute, we are referencing //the storage location itself//, rather than the value stored there, so we do ''not'' use curly brackets there. //Example:// we could code a button widget that sets the `caption` field of TiddlerA to be the same as that of TiddlerB as:
+''Note:'' In almost all other cases where a TextReference is used as a widget attribute, it will be placed between curly brackets, to [[transclude|Transclusion in WikiText]] the value currently stored there. However, when we use a TextReference as the value of a button widget's <<.attr set>> attribute, we are referencing //the storage location itself//, rather than the value stored there, so we do ''not'' use curly brackets there. //Example:// we could code a button widget that sets the `caption` field of TiddlerA to be the same as that of TiddlerB as:
 
-<<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="stateTitle"/>, <$macrocall $name=".attr" _="stateField"/> and <$macrocall $name=".attr" _="stateIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]].
+<<.tip """<$macrocall $name=".from-version" version="5.1.18"/> <$macrocall $name=".attr" _="setTitle"/>, <$macrocall $name=".attr" _="setField"/> and <$macrocall $name=".attr" _="setIndex"/> attributes allow specifying Tiddler states ''directly'', without interpreting them as [[TextReferences|TextReference]].
 This is useful for edge-cases where titles may contain characters that are used to denote Tiddler fields or indices (`!!`, `##`)""">>
 
 ```

package/editions/tw5.com/tiddlers/widgets/CheckboxWidget.tid

@@ -1,7 +1,7 @@
 caption: checkbox
 created: 20131024141900000
-modified: 20190714134002652
-tags: Widgets
+modified: 20211009121239806
+tags: Widgets TriggeringWidgets
 title: CheckboxWidget
 type: text/vnd.tiddlywiki
 
@@ -29,6 +29,7 @@ The content of the `<$checkbox>` widget is displayed within an HTML `<label>` el
 |actions |<<.from-version "5.1.14">> A string containing ActionWidgets to be triggered when the status of the checkbox changes (whether it is checked or unchecked) |
 |uncheckactions |<<.from-version "5.1.16">> A string containing ActionWidgets to be triggered when the checkbox is unchecked |
 |checkactions |<<.from-version "5.1.20">> A string containing ActionWidgets to be triggered when the checkbox is checked |
+|disabled|<<.from-version "5.1.23">> Optional, disables the checkbox if set to "yes". Defaults to "no"|
 
 !! Tag Mode
 

package/editions/tw5.com/tiddlers/widgets/DraggableWidget.tid

@@ -1,7 +1,7 @@
 caption: draggable
 created: 20170406081938627
-modified: 20190118084621046
-tags: Widgets
+modified: 20211009122105437
+tags: Widgets TriggeringWidgets
 title: DraggableWidget
 type: text/vnd.tiddlywiki
 
@@ -20,6 +20,7 @@ See DragAndDropMechanism for an overview.
 |tag |Optional tag to override the default "div" element |
 |startactions |Optional action string that gets invoked when dragging ''starts'' |
 |endactions |Optional action string that gets invoked when dragging ''ends'' |
+|dragimagetype |<<.from-version "5.2.0">> Optional type of drag image: `dom` (the default) or `blank` to disable the drag image |
 
 Either or both of the ''tiddler'' and ''filter'' attributes must be specified in order for there to be a payload to drag.
 

package/editions/tw5.com/tiddlers/widgets/DroppableWidget.tid

@@ -1,7 +1,7 @@
 caption: droppable
 created: 20170406082820317
-modified: 20190118084621046
-tags: Widgets
+modified: 20211009122023265
+tags: Widgets TriggeringWidgets
 title: DroppableWidget
 type: text/vnd.tiddlywiki
 
@@ -30,6 +30,7 @@ See DragAndDropMechanism for an overview.
 |actions |Actions to be performed when items are dropped |
 |class |Optional CSS classes to assign to the draggable element. The class `tc-droppable` is added automatically, and the class `tc-dragover` is applied while an item is being dragged over the droppable element |
 |tag |Optional tag to override the default of a "div" element when the widget is rendered in block mode, or a "span" element when it is rendered in inline mode |
+|enable |<<.from-version "5.1.22">> Optional value "no" to disable the droppable functionality (defaults to "yes") |
 
 Within the action string, there are two Variables generated by the DroppableWidget:
 

package/editions/tw5.com/tiddlers/widgets/DropzoneWidget.tid

@@ -1,7 +1,7 @@
 caption: dropzone
 created: 20131024141900000
-modified: 20170712153850528
-tags: Widgets
+modified: 20211009122205481
+tags: Widgets TriggeringWidgets
 title: DropzoneWidget
 type: text/vnd.tiddlywiki
 
@@ -15,14 +15,23 @@ It sends a [[WidgetMessage: tm-import-tiddlers]] carrying a JSON representation
 
 |!Attribute |!Description |
 |deserializer |<<.from-version "5.1.15">> Optional name of deserializer to be used (by default the deserializer is derived from the file extension) |
+|enable |<<.from-version "5.1.22">> Optional value "no" to disable the dropzone functionality (defaults to "yes") |
+|class |<<.from-version "5.1.22">> Optional CSS class to be assigned to the DOM node created by the dropzone (defaults to "tc-dropzone") |
+|autoOpenOnImport |<<.from-version "5.1.23">> Optional value "no" or "yes" that can override tv-auto-open-on-import |
+|importTitle|<<.from-version "5.1.23">> Optional tiddler title to use for import process instead of ~$:/Import |
+|actions|<<.from-version "5.2.0">> Optional actions string to be invoked after the `tm-import-tiddlers` message has been sent. The variable `importTitle` provides the title of the tiddler used for the import process. |
+|contentTypesFilter |<<.from-version "5.2.0">> Optional filter that specifies the [[content types|ContentType]] accepted by the dropzone. |
+|filesOnly|<<.from-version "5.2.0">> Optional. When set to "yes", the dropzone only accepts files and not string data. Defaults to "no" |
 
-The list of available deserializers can be inspected by executing `Object.keys($tw.Wiki.tiddlerDeserializerModules).sort().join("\n")` in the browser JavaScript console.
+<<.tip """Use the `prefix` filter operator to easily accept multiple related content types. For example this filter will accept all image content types: `[prefix[image/]]`""">>
+
+<<.tip "The list of available deserializers can be seen by using the filter `[deserializers[]]` in the Filter tab in [[Advanced Search|$:/AdvancedSearch]].">>
 
 The dropzone widget displays any contained content within the dropzone.
 
 ! Display
 
-The dropzone widget creates an HTML `<div class="tc-dropzone">` to contain its content. During a drag operation the class `tc-dragover` is added. CSS is used to provide user feedback.
+The dropzone widget creates an HTML `<div class="tc-dropzone">` to contain its content. During a drag operation the class `tc-dragover` is added. CSS is used to provide user feedback. For custom styling of this state where a drag is in progress, specify a custom class name with the `class` attribute and use CSS with the selector `.myclass.tc-dragover`.
 
 ! Data types supported
 

package/editions/tw5.com/tiddlers/widgets/EditTextWidget.tid

@@ -1,6 +1,6 @@
 caption: edit-text
 created: 20131024141900000
-modified: 20151224143914772
+modified: 20211104200554064
 tags: Widgets
 title: EditTextWidget
 type: text/vnd.tiddlywiki
@@ -25,31 +25,26 @@ The content of the `<$edit-text>` widget is ignored.
 |focusPopup |Title of a state tiddler for a popup that is displayed when the editing element has focus  |
 |focus |Set to "yes" or "true" to automatically focus the editor after creation |
 |tabindex |Sets the `tabindex` attribute of the input or textarea to the given value |
+|autocomplete |<<.from-version 5.1.23>> An optional string to provide a hint to the browser how to handle autocomplete for this input |
 |tag |Overrides the generated HTML editing element tag. For a multi-line editor use `tag=textarea`. For a single-line editor use `tag=input` |
 |type |Overrides the generated HTML editing element `type` attribute |
 |size |The size of the input field (in characters) |
 |autoHeight |Either "yes" or "no" to specify whether to automatically resize `textarea` editors to fit their content (defaults to "yes") |
 |minHeight |Minimum height for automatically resized `textarea` editors, specified in CSS length units such as "px", "em" or "%" |
 |rows|Sets the rows attribute of a generated textarea |
+|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus |
+|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea.<br><<.from-version "5.2.1">> The variable `actionValue` is available to the `inputActions` and contains the value of the input field. |
+|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes |
+|disabled|<<.from-version "5.1.23">> Optional, disables the text input if set to "yes". Defaults to "no"|
+|fileDrop|<<.from-version "5.2.0">> Optional. When set to "yes" allows dropping or pasting images into the editor to import them. Defaults to "no"|
 
-! Notes
 
-One trap to be aware of is that the edit text widget //cannot be used// to edit a field of the tiddler that contains it. Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field.
+! Example
 
-Instead, place the edit text widget in a [[template|TemplateTiddlers]] that references the tiddler you want to modify.
+If you wanted to change the field //myconfig// of the tiddler //AppSettings//, you could use an EditTextWidget to edit the field, and then show the result anywhere else by using `{{AppSettings!!myconfig}}`. Note that this will create tiddler AppSettings if it doesn't already exist.
 
-For example, if you wanted the tiddler GettingStarted to edit the value of the "myconfig" field of the tiddler "AppSettings", you might do so by creating a separate tiddler "ChangeAppSettings" that contains the following:
+<$macrocall $name=".example" n="1"
+eg="""<$edit-text tiddler="AppSettings" field="myconfig"/><p/>
+Value of ''myconfig'' : {{AppSettings!!myconfig}}
+"""/>
 
-```
-<$edit-text tiddler="AppSettings" field="myconfig"/>
-```
-
-And reference the template in any other tiddler (e.g. GettingStarted) with `{{ChangeAppSettings}}`.
-
-This works when your use of the tiddler //is not// the AppSettings itself which would cause a recursion problem. In this latter case you have to save the fields to a temporary (or alternative) tiddler (sort of the reverse of above) like so:
-
-```
-<$edit-text tiddler="StoreAppSettings" field="myconfig"/>
-```
-
-In short the EditTextWidget //can not// change properties of the tiddler it is embedded in or part of. It can only change fields of //other// tiddlers. One could use ShadowTiddlers to accomplish the field storage if needed.

package/editions/tw5.com/tiddlers/widgets/EditWidget.tid

@@ -1,8 +1,9 @@
-title: EditWidget
-created: 201310241419
-modified: 20150220161220000
-tags: Widgets
 caption: edit
+created: 20131024141900000
+modified: 20211009121634055
+tags: Widgets TriggeringWidgets
+title: EditWidget
+type: text/vnd.tiddlywiki
 
 ! Introduction
 
@@ -18,3 +19,8 @@ The content of the `<$edit>` widget is ignored.
 |index |The index to edit |
 |class |A CSS class to be added the generated editing widget |
 |tabindex |Sets the `tabindex` attribute of the input or textarea to the given value |
+|autocomplete |<<.from-version 5.1.23>> An optional string to provide a hint to the browser how to handle autocomplete for this input |
+|cancelPopups |<<.from-version "5.1.23">> if set to "yes", cancels all popups when the input gets focus |
+|inputActions |<<.from-version 5.1.23>> Optional actions that are triggered every time an input event occurs within the input field or textarea |
+|refreshTitle |<<.from-version 5.1.23>> An optional tiddler title that makes the input field update whenever the specified tiddler changes |
+

package/editions/tw5.com/tiddlers/widgets/EventCatcherWidget.tid

@@ -0,0 +1,93 @@
+created: 20201123113532200
+modified: 20211031180336257
+tags: Widgets TriggeringWidgets
+title: EventCatcherWidget
+type: text/vnd.tiddlywiki
+
+! Introduction
+
+<<.from-version "5.1.23">>
+
+//This is an advanced widget intended for use by those familiar with HTML, CSS and JavaScript handling of DOM events.//
+
+The event catcher widget traps DOM-initiated Javascript events dispatched within its child content, and allows invoking a series of ActionWidgets in response to those events. 
+
+In order for the events to be trapped they must:
+
+* be of one of the events specified in the event catcher widget's `events` attribute
+* arise within a DOM node specified by the widget's `selector` attribute
+* support event bubbling
+
+Use of the event catcher widget is beneficial when using large numbers of other trigger widgets such as the ButtonWidget is causing performance problems. The workflow it enables is akin to what is referred to as "event delegation" in JavaScript parlance.
+
+! Content and Attributes
+
+The content of the `<$eventcatcher>` widget is displayed normally.
+
+|!Attribute |!Description |
+
+|selector |A CSS selector. Only events originating inside a DOM node with this selector will be trapped |
+|//{any attributes starting with $}// |<<.from-version "5.2.0">> Each attribute name (excluding the $) specifies the name of an event, and the value specifies the action string to be invoked. For example: `$click=<<clickActions>>`  |
+|tag |Optional. The HTML element the widget creates to capture the events, defaults to:<br>» `span` when parsed in inline-mode<br>» `div` when parsed in block-mode |
+|class |Optional. A CSS class name (or names) to be assigned to the widget HTML element |
+|stopPropagation |<<.from-version "5.2.0">> Optional. Set to "always" to always stop event propagation even if there are no corresponding actions to invoke, "never" to never stop event propagation, or the default value "onaction" with which event propagation is only stopped if there are corresponding actions that are invoked. |
+|events |//(deprecated – see below)// Space separated list of JavaScript events to be trapped, for example "click" or "click dblclick" |
+|actions-* |//(deprecated – see below)// Action strings to be invoked when a matching event is trapped. Each event is mapped to an action attribute name of the form <code>actions-<em>event</em></code> where <code><em>event</em></code> represents the type of the event. For example: `actions-click` or `actions-dblclick` |
+
+<<.from-version "5.2.0">> Note that the attributes `events` and `actions-*` are no longer needed. Instead you can use attributes starting with $ where the attribute name (excluding the $) specifies the name of the event and the value specifies the action string to be invoked. If any attributes with the prefix $ are present then the `types` attribute is ignored.
+
+! Variables
+
+The following variables are made available to the actions:
+
+|!Variables |!Description |
+|`dom-*` |All DOM attributes of the node matching the given selector are made available as variables, with the prefix `dom-` |
+|`modifier` |The [[modifier Variable]] contains the Modifier Key held during the event (can be "normal", "ctrl", "shift", "alt" or combinations thereof) |
+|`event-mousebutton` |The mouse button (if any) used to trigger the event (can be "left", "right" or "middle"). Note that not all event types support the mousebutton property |
+|`event-type` |The type property of the JavaScript event |
+|`event-detail-*` |Any properties in the detail attribute of the event are made available with the prefix `event-detail-` |
+|`tv-popup-coords` |A co-ordinate string that can be used with the ActionPopupWidget to trigger a popup at the DOM node matching the selector where the event originated |
+|`tv-selectednode-posx` |`x` offset position of the selected DOM node |
+|`tv-selectednode-posy` |`y` offset position of the selected DOM node  |
+|`tv-selectednode-width` |`offsetWidth` of the selected DOM node |
+|`tv-selectednode-height` |`offsetHeight` of the selected DOM node |
+|`event-fromselected-posx` |`x` position of the event relative to the selected DOM node |
+|`event-fromselected-posy` |`y` position of the event relative to the selected DOM node |
+|`event-fromcatcher-posx` |`x` position of the event relative to the event catcher DOM node |
+|`event-fromcatcher-posy` |`y` position of the event relative to the event catcher DOM node |
+|`event-fromviewport-posx` |<<.from-version "5.2.0">> `x` position of the event relative to the viewport |
+|`event-fromviewport-posy` |<<.from-version "5.2.0">> `y` position of the event relative to the viewport |
+
+! Example
+
+This example uses the ActionLogWidget and will log the `data-item-id` attribute of the clicked DOM node to the browser's JavaScript [[console|Web Developer Tools]]
+
+```
+\define clickactions()
+<$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
+\end
+
+\define contextmenu-actions()
+<$action-log item=<<dom-data-item-id>> event=<<event-type>>/>
+\end
+
+<$eventcatcher selector=".item" $click=<<clickactions>> $contextmenu=<<contextmenu-actions>> tag="div">
+
+<div class="item" data-item-id="item1">
+Click events here will be trapped
+</div>
+
+<div class="item" data-item-id="item2">
+And here too
+</div>
+
+<div data-item-id="item3">
+Not here
+</div>
+
+<div class="item" data-item-id="item4">
+And here
+</div>
+
+</$eventcatcher>
+```

package/editions/tw5.com/tiddlers/widgets/FieldMangler Widget (Examples).tid

@@ -12,3 +12,13 @@ Add tag ''example'' to this tiddler (current)<$button message="tm-add-tag" param
 Remove tag ''example'' to this tiddler (current)<$button message="tm-remove-tag" param="example">{{$:/core/images/delete-button}}</$button>
 </$fieldmangler>
 """/>
+
+
+<$macrocall $name=".example" n="2"
+eg="""
+<$fieldmangler tiddler="Hello World">
+Add tag ''example'' to the Hello World tiddler<$button message="tm-add-tag" param="example">{{$:/core/images/new-button}}</$button>
+<br>
+Remove tag ''example'' to the Hello World tiddler<$button message="tm-remove-tag" param="example">{{$:/core/images/delete-button}}</$button>
+</$fieldmangler>
+"""/>

package/editions/tw5.com/tiddlers/widgets/FieldManglerWidget.tid

@@ -1,9 +1,9 @@
+caption: fieldmangler
 created: 20131024141900000
-modified: 20150220161229000
-tags: Widgets
+modified: 20211009122821085
+tags: Widgets MessageHandlerWidgets
 title: FieldManglerWidget
 type: text/vnd.tiddlywiki
-caption: fieldmangler
 
 ! Introduction
 

package/editions/tw5.com/tiddlers/widgets/FieldsWidget.tid

@@ -25,6 +25,9 @@ The content of the `<$fields>` widget is ignored.
 |tiddler |Title of the tiddler from which the fields are to be displayed (defaults to the [[current tiddler|Current Tiddler]]) |
 |template |Text of the template (see above) |
 |exclude |Lists of fields to be excluded (defaults to "text") |
+|include |Lists of fields to be included, if the field exists. This parameter takes precedence over "exclude" |
+|sort |Sorts the fields by name (defaults to "yes"). Set to "no", if "include" order should be retained! |
+|sortReverse |Reverses the sort order|
 |stripTitlePrefix |If set to "yes" then curly bracketed prefixes are removed from titles (for example `{prefix}HelloThere` converts to `HelloThere`) |
 
 The `stripTitlePrefix` attribute is used when building TiddlyWiki Classic; see `editions/tw2` in the TiddlyWiki5 repo.

package/editions/tw5.com/tiddlers/widgets/ImportVariablesWidget.tid

@@ -37,5 +37,5 @@ So-called global macros are implemented within the main page template ([[$:/core
 <<.from-version "5.1.18">> The `\import` [[pragma|Pragma]] is an alternative syntax for using the ImportVariablesWidget. For example, the previous example could be expressed as:
 
 ```
-\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]
+\import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
 ```

package/editions/tw5.com/tiddlers/widgets/JSONTiddlerWidget.tid

@@ -0,0 +1,22 @@
+title: JSONTiddlerWidget
+created: 20210630100923398
+modified: 20210630100923398
+tags: Widgets
+caption: jsontiddler
+
+! Introduction
+
+The jsontiddler widget renders the fields of a tiddler to display as a JSON object. The fields of the tiddler can be customised or excluded.
+
+The jsontiddler widget is used in system templates to generate JSON representations of tiddlers for saving.
+
+! Content and Attributes
+
+The content of the `<$jsontiddler>` widget is ignored.
+
+|!Attribute |!Description |
+|tiddler |Optional title of the tiddler from which the fields are to be displayed |
+|exclude |Optional space separated list of fields to be excluded |
+|escapeUnsafeScriptChars |If set to "yes" then the `<` character will be escaped to the equivalent `\u003C` encoding |
+|//{any attributes starting with $}// |Each attribute name (without the leading `$`) specifies a field to be modified with the attribute value providing the value to assign to the field  |
+

package/editions/tw5.com/tiddlers/widgets/Keyboard Codes.tid

@@ -0,0 +1,27 @@
+created: 20210427090945829
+modified: 20210525103712235
+tags: KeyboardWidget
+title: Keyboard Codes
+type: text/vnd.tiddlywiki
+
+This is a list of all the key codes supported by the KeyboardWidget:
+
+<kbd>cancel</kbd>, <kbd>help</kbd>, <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>clear</kbd>, <kbd>return</kbd>, <kbd>enter</kbd>, <kbd>pause</kbd>, <kbd>escape</kbd>, <kbd>space</kbd>, 
+<kbd>page_up</kbd>, <kbd>page_down</kbd>, <kbd>end</kbd>, <kbd>home</kbd>, <kbd>left</kbd>, <kbd>up</kbd>, <kbd>right</kbd>, <kbd>down</kbd>, <kbd>printscreen</kbd>, <kbd>insert</kbd>, <kbd>delete</kbd>
+
+<kbd>0</kbd>, <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>, <kbd>5</kbd>, <kbd>6</kbd>, <kbd>7</kbd>, <kbd>8</kbd>, <kbd>9</kbd>
+
+<kbd>a</kbd>, <kbd>b</kbd>, <kbd>c</kbd>, <kbd>d</kbd>, <kbd>e</kbd>, <kbd>f</kbd>, <kbd>g</kbd>, <kbd>h</kbd>, <kbd>i</kbd>, <kbd>j</kbd>, <kbd>k</kbd>, <kbd>l</kbd>, <kbd>m</kbd>, <kbd>n</kbd>, <kbd>o</kbd>, <kbd>p</kbd>, <kbd>q</kbd>, <kbd>r</kbd>, <kbd>s</kbd>, <kbd>t</kbd>, <kbd>u</kbd>, <kbd>v</kbd>, <kbd>w</kbd>, <kbd>x</kbd>, <kbd>y</kbd>, <kbd>z</kbd>
+
+<kbd>numpad0</kbd>, <kbd>numpad1</kbd>, <kbd>numpad2</kbd>, <kbd>numpad3</kbd>, <kbd>numpad4</kbd>, <kbd>numpad5</kbd>, <kbd>numpad6</kbd>, <kbd>numpad7</kbd>, <kbd>numpad8</kbd>, <kbd>numpad9</kbd>
+
+<kbd>multiply</kbd>, <kbd>add</kbd>, <kbd>separator</kbd>, <kbd>subtract</kbd>, <kbd>decimal</kbd>, <kbd>divide</kbd>
+
+<kbd>f1</kbd>,  <kbd>f2</kbd>,  <kbd>f3</kbd>,  <kbd>f4</kbd>,  <kbd>f5</kbd>,  <kbd>f6</kbd>,  <kbd>f7</kbd>,  <kbd>f8</kbd>,  <kbd>f9</kbd>,  <kbd>f10</kbd>, <kbd>f11</kbd>, <kbd>f12</kbd><br/>
+<kbd>f13</kbd>, <kbd>f14</kbd>, <kbd>f15</kbd>, <kbd>f16</kbd>, <kbd>f17</kbd>, <kbd>f18</kbd>, <kbd>f19</kbd>, <kbd>f20</kbd>, <kbd>f21</kbd>, <kbd>f22</kbd>, <kbd>f23</kbd>, <kbd>f24</kbd>
+
+<kbd>firefoxsemicolon</kbd>, <kbd>firefoxequals</kbd>, <kbd>firefoxminus</kbd>
+
+<kbd>semicolon</kbd>, <kbd>equals</kbd>, <kbd>comma</kbd>, <kbd>dash</kbd>, <kbd>period</kbd>, <kbd>slash</kbd>, <kbd>backquote</kbd>, <kbd>openbracket</kbd>, <kbd>backslash</kbd>, <kbd>closebracket</kbd>, <kbd>quote</kbd>
+
+<kbd>shift</kbd>, <kbd>ctrl</kbd>, <kbd>alt</kbd>, <kbd>meta</kbd>