tiddlywiki 5.3.2 → 5.3.4

package/core/wiki/macros/tag-picker.tid

@@ -1,177 +1,182 @@
 title: $:/core/macros/tag-picker
-tags: $:/tags/Macro
-first-search-filter: [tags[]!is[system]search:title<userInput>sort[]]
-second-search-filter: [tags[]is[system]search:title<userInput>sort[]]
+tags: tags: $:/tags/Macro $:/tags/Global
+first-search-filter: [subfilter<tagListFilter>!is[system]search:title<userInput>sort[]]
+second-search-filter: [subfilter<tagListFilter>is[system]search:title<userInput>sort[]]
 
-\define get-tagpicker-focus-selector() [data-tiddler-title="$(currentTiddlerCSSEscaped)$"] .tc-add-tag-name input
+<!-- first-search-filter and second-search-filter fields are not used here in the code, but they are defined as parameters for keyboard-driven-input macro -->
 
-\define delete-tag-state-tiddlers() <$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/>
-
-\define add-tag-actions(actions,tagField:"tags")
 \whitespace trim
-<$set name="tag" value={{{ [<__tiddler__>get[text]] }}}>
-	<$list
-		filter="[<saveTiddler>!contains:$tagField$<tag>!match[]]"
-		variable="ignore"
-		emptyMessage="<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter='-[<tag>]'/>"
-	>
-		<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/>
-		<$transclude $variable="__actions__"/>
-	</$list>
-</$set>
-<<delete-tag-state-tiddlers>>
-<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
+
+<!-- tf.tagpicker-dropdown-id is needed if several tap-pickers are shown in one tiddler -->
+\function tf.tagpicker-dropdown-id()
+	[<qualify $:/state/popup/tags-auto-complete>]
+	[[$(saveTiddler)$-[$(tagField)$-$(tagListFilter)$]substitute[]sha256[]] +[join[/]]
 \end
 
-\define clear-tags-actions-inner()
-\whitespace trim
-<$list
-	filter="[<storeTitle>has[text]] [<newTagNameTiddler>has[text]]"
-	variable="ignore"
-	emptyMessage="<<cancel-delete-tiddler-actions 'cancel'>>"
->
+\function tf.tagpicker-dropdown-class() [<tf.tagpicker-dropdown-id>sha256[]addprefix[tc-]]
+\function tf.get-tagpicker-focus-selector() [<tf.tagpicker-dropdown-class>addprefix[.]] .tc-popup-handle +[join[ ]]
+
+<!-- clean up temporary tiddlers, so the next "pick" starts with a clean input -->
+<!-- This could probably be optimized / removed if we would use different temp-tiddlers
+	(future improvement because keeping track is comlex for humans)
+-->
+\procedure delete-tag-state-tiddlers()
+<$action-deletetiddler $filter="[<newTagNameTiddler>] [<storeTitle>] [<tagSelectionState>]"/>
+\end
+
+<!-- trigger __toggle tag__ by keyboard -->
+\procedure add-tag-actions()
+<$let tag=<<_tf.getTag>> >
+	<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter='+[toggle<tag>trim[]]'/>
+	<% if [<tag>] :intersection[<saveTiddler>get<tagField>enlist-input[]] %>
+		<!-- tag has been removed - do nothing -->
+	<% else %>
+		<<actions>>
+	<% endif %>
 	<<delete-tag-state-tiddlers>>
-</$list>
+	<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
+</$let>
 \end
+<!-- <$action-log  /> -->
 
-\define clear-tags-actions()
-\whitespace trim
-<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
-	<$list filter="[<newTagNameTiddler>get[text]!match<userInput>]" emptyMessage="<<clear-tags-actions-inner>>">
-		<$action-setfield $tiddler=<<newTagNameTiddler>> text=<<userInput>>/><$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
+<!-- ESC key removes the text from the input
+The second ESC tries to close the "draft tiddler"
+-->
+\procedure clear-tags-actions-inner()
+<% if [<storeTitle>has[text]] ~[<newTagNameTiddler>has[text]] %>
+	<<delete-tag-state-tiddlers>>
+<% else %>
+		<<cancel-delete-tiddler-actions "cancel">>
+<% endif %>
+\end
+
+<!-- triggered by keyboard only -->
+\procedure clear-tags-actions()
+<$let userInput=<<_tf.getUserInput>> >
+	<!-- this list __cannot__ be transformed to conditional IF. The list variable is used! -->
+	<$list filter="[<newTagNameTiddler>get[text]!match<userInput>]" >
+		<$list-empty>
+			<<clear-tags-actions-inner>>
+		</$list-empty>
+		<$action-setfield $tiddler=<<newTagNameTiddler>> text=<<userInput>>/>
+		<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
 	</$list>
-</$set>
+</$let>
 \end
 
-\define tag-picker-inner(actions,tagField:"tags")
-\whitespace trim
-<$vars
-	newTagNameInputTiddlerQualified=<<qualify "$:/temp/NewTagName/input">>
-	newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">>
-	fallbackTarget={{$(palette)$##tag-background}}
-	colourA={{$(palette)$##foreground}}
-	colourB={{$(palette)$##background}}
->
-	<$vars
-		storeTitle={{{ [<newTagNameInputTiddler>!match[]] ~[<newTagNameInputTiddlerQualified>] }}}
-		tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}}
-	>
-		<$vars
-			refreshTitle=<<qualify "$:/temp/NewTagName/refresh">> 
-			nonSystemTagsFilter="[tags[]!is[system]search:title<userInput>sort[]]"
-			systemTagsFilter="[tags[]is[system]search:title<userInput>sort[]]"
-		>
-			<div class="tc-edit-add-tag">
-				<div>
-					<span class="tc-add-tag-name tc-small-gap-right">
-						<$macrocall
-							$name="keyboard-driven-input"
-							tiddler=<<newTagNameTiddler>>
-							storeTitle=<<storeTitle>>
-							refreshTitle=<<refreshTitle>>
-							selectionStateTitle=<<tagSelectionState>>
-							inputAcceptActions="<$macrocall $name='add-tag-actions' actions=<<__actions__>> tagField=<<__tagField__>>/>"
-							inputCancelActions=<<clear-tags-actions>>
-							tag="input"
-							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]] }}}
-							filterMinLength={{$:/config/Tags/MinLength}}
-							cancelPopups=<<cancelPopups>>
-							configTiddlerFilter="[[$:/core/macros/tag-picker]]"
-						/>
-					</span>
-					<$button popup=<<qualify "$:/state/popup/tags-auto-complete">> 
-						class="tc-btn-invisible tc-btn-dropdown"
-						tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}}
-						aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}
-					>
-						{{$:/core/images/down-arrow}}
-					</$button>
-					<$reveal state=<<storeTitle>> type="nomatch" text="">
-						<$button class="tc-btn-invisible tc-small-gap tc-btn-dropdown"
-							tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}}
-							aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}}
-						>
-							{{$:/core/images/close-button}}<<delete-tag-state-tiddlers>>
-						</$button>
-					</$reveal>
-					<span class="tc-add-tag-button tc-small-gap-left">
-						<$set name="tag" value={{{ [<newTagNameTiddler>get[text]] }}}>
-							<$button set=<<newTagNameTiddler>> setTo="" class="">
-								<$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="[<tag>trim[]]"/>
-								<$transclude $variable="__actions__"/>
-								<$set name="currentTiddlerCSSEscaped" value={{{ [<saveTiddler>escapecss[]] }}}>
-									<<delete-tag-state-tiddlers>><$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>>/>
-								</$set>
-								{{$:/language/EditTemplate/Tags/Add/Button}}
-							</$button>
-						</$set>
-					</span>
-				</div>
-				<div class="tc-block-dropdown-wrapper">
-					<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
-						<div class="tc-block-dropdown tc-block-tags-dropdown">
-							<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
-								<$list
-									filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]"
-									emptyMessage="<div class='tc-search-results'
-								>
-									{{$:/language/Search/Search/TooShort}}</div>" variable="listItem">
-									<$list filter=<<nonSystemTagsFilter>> variable="tag">
-										<$list
-											filter="[<tag>addsuffix[-primaryList]] -[<tagSelectionState>get[text]]" 
-											emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>"
-										>
-											<$vars button-classes="tc-btn-invisible"
-												actions=<<__actions__>> 
-												tagField=<<__tagField__>>
-												currentTiddler=<<tag>>
-											>
-												{{||$:/core/ui/TagPickerTagTemplate}}
-											</$vars>
-										</$list>
-									</$list>
-								</$list>
-								<hr>
-								<$list filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]" emptyMessage="<div class='tc-search-results'>
-									{{$:/language/Search/Search/TooShort}}</div>" variable="listItem">
-									<$list filter=<<systemTagsFilter>> variable="tag">
-										<$list filter="[<tag>addsuffix[-secondaryList]] -[<tagSelectionState>get[text]]"
-											emptyMessage="<$vars button-classes='tc-btn-invisible tc-tag-button-selected' actions=<<__actions__>> tagField=<<__tagField__>> currentTiddler=<<tag>>>{{||$:/core/ui/TagPickerTagTemplate}}</$vars>"
-										>
-											<$vars button-classes="tc-btn-invisible"
-												actions=<<__actions__>>
-												tagField=<<__tagField__>>
-												currentTiddler=<<tag>>
-											>
-												{{||$:/core/ui/TagPickerTagTemplate}}
-											</$vars>
-										</$list>
-									</$list>
-								</$list>
-							</$set>
-						</div>
-					</$reveal>
-				</div>
-			</div>
-		</$vars>
-	</$vars>
-</$vars>
+<!-- similar to add-tag-actions __but__ add-only -->
+\procedure add-button-actions()
+<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="[<tag>trim[]]"/>
+<<actions>>
+<<delete-tag-state-tiddlers>>
+<$action-sendmessage $message="tm-focus-selector" $param=<<tf.get-tagpicker-focus-selector>>/>
 \end
+<!-- <$action-log /> -->
 
-\define tag-picker(actions,tagField:"tags")
-\whitespace trim
-<$vars saveTiddler=<<currentTiddler>> palette={{$:/palette}}>
-	<$list
-		filter="[<newTagNameTiddler>match[]]"
-		emptyMessage="<$macrocall $name='tag-picker-inner' actions=<<__actions__>> tagField=<<__tagField__>>/>"
+<!-- create dropdown list -->
+\procedure tag-picker-listTags(filter, suffix)
+<$let userInput=<<_tf.getUserInput>> >
+	<$list filter="[<userInput>minlength{$:/config/Tags/MinLength}limit[1]]"
+		emptyMessage="<div class='tc-search-results'>{{$:/language/Search/Search/TooShort}}</div>" variable="listItem"
 	>
-		<$set name="newTagNameTiddler" value=<<qualify "$:/temp/NewTagName">>>
-			<$macrocall $name="tag-picker-inner" actions=<<__actions__>> tagField=<<__tagField__>>/>
-		</$set>
+		<$list filter=<<filter>> variable="tag">
+			<!-- The buttonClasses filter is used to define tc-tag-button-selected state -->
+			<!-- tf.get-tagpicker-focus-selector has to be resolved for $:/core/ui/TagPickerTagTemplate,
+				othwerwise qualify in tf.tagpicker-dropdown-id causes problems -->
+			<$let currentTiddler=<<tag>>
+				button-classes=`tc-btn-invisible ${[<tag>addsuffix<suffix>] -[<tagSelectionState>get[text]] :then[[]] ~tc-tag-button-selected }$`
+				get-tagpicker-focus-selector=`${[<tf.get-tagpicker-focus-selector>]}$`
+			>
+				{{||$:/core/ui/TagPickerTagTemplate}}
+			</$let>
+		</$list>
 	</$list>
-</$vars>
+</$let>
 \end
+
+<!-- tag-picker-inner is the main function -->
+\procedure tag-picker-inner()
+<div class={{{ [[tc-edit-add-tag]] [<tf.tagpicker-dropdown-class>] +[join[ ]] }}}>
+	<div class="tc-edit-add-tag-ui">
+		<span class="tc-add-tag-name tc-small-gap-right">
+			<$macrocall	$name="keyboard-driven-input"
+				tiddler=<<newTagNameTiddler>>
+				storeTitle=<<storeTitle>>
+				refreshTitle=<<refreshTitle>>
+				selectionStateTitle=<<tagSelectionState>>
+				inputAcceptActions=<<add-tag-actions>>
+				inputCancelActions=<<clear-tags-actions>>
+				tag="input"
+				placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}}
+				focusPopup=<<tf.tagpicker-dropdown-id>>
+				class="tc-edit-texteditor tc-popup-handle"
+				tabindex=<<tabIndex>>
+				focus={{{ [{$:/config/AutoFocus}match[tags]then[true]] ~[[false]] }}}
+				filterMinLength={{$:/config/Tags/MinLength}}
+				cancelPopups=<<cancelPopups>>
+				configTiddlerFilter="[[$:/core/macros/tag-picker]]"
+			/>
+		</span>
+		<$button popup=<<tf.tagpicker-dropdown-id>> class="tc-btn-invisible tc-btn-dropdown"
+			tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}
+		>
+			{{$:/core/images/down-arrow}}
+		</$button>
+		<% if [<storeTitle>has[text]] %>
+			<$button actions=<<delete-tag-state-tiddlers>> class="tc-btn-invisible tc-small-gap tc-btn-dropdown"
+				tooltip={{$:/language/EditTemplate/Tags/ClearInput/Hint}} aria-label={{$:/language/EditTemplate/Tags/ClearInput/Caption}}
+			>
+				{{$:/core/images/close-button}}
+			</$button>
+		<% endif %>
+		<span class="tc-add-tag-button tc-small-gap-left">
+			<$let tag=<<_tf.getTag>>>
+				<$button set=<<newTagNameTiddler>> actions=<<add-button-actions>> >
+					{{$:/language/EditTemplate/Tags/Add/Button}}
+				</$button>
+			</$let>
+		</span>
+	</div>
+	<div class="tc-block-dropdown-wrapper">
+		<% if [<tf.tagpicker-dropdown-id>has[text]] %>
+			<div class="tc-block-dropdown tc-block-tags-dropdown">
+				<$macrocall $name="tag-picker-listTags" filter=<<nonSystemTagsFilter>> suffix="-primaryList" />
+				<hr>
+				<$macrocall $name="tag-picker-listTags" filter=<<systemTagsFilter>> suffix="-secondaryList" />
+			</div>
+		<% endif %>
+	</div>
+</div>
+\end
+
+<!-- prepare all variables for tag-picker keyboard handling -->
+\procedure tag-picker(actions, tagField:"tags", tiddler, tagListFilter:"[tags[]]")
+
+\function _tf.getUserInput() [<storeTitle>get[text]]
+\function _tf.getTag() [<newTagNameTiddler>get[text]]
+
+<!-- keep those variables because they may "blead" into macros using old syntax -->
+<$let
+	palette={{$:/palette}}
+	colourA={{{ [<palette>getindex[foreground]] }}}
+	colourB={{{ [<palette>getindex[background]] }}}
+	fallbackTarget={{{ [<palette>getindex[tag-background]] }}}
+
+	saveTiddler={{{ [<tiddler>is[blank]then<currentTiddler>else<tiddler>] }}}
+
+	newTagNameTiddler={{{ [[$:/temp/NewTagName]] [<tagField>!match[tags]] +[join[/]] [<qualify>] +[join[]] }}}
+	storeTitle={{{ [[$:/temp/NewTagName/input]] [<tagField>!match[tags]] +[join[/]] [<qualify>] +[join[]] }}}
+
+	newTagNameSelectionTiddlerQualified=<<qualify "$:/temp/NewTagName/selected-item">>
+	tagSelectionState={{{ [<newTagNameSelectionTiddler>!match[]] ~[<newTagNameSelectionTiddlerQualified>] }}}
+
+	refreshTitle=<<qualify "$:/temp/NewTagName/refresh">>
+
+	nonSystemTagsFilter="[subfilter<tagListFilter>!is[system]search:title<userInput>sort[]]"
+	systemTagsFilter="[subfilter<tagListFilter>is[system]search:title<userInput>sort[]]"
+
+	cancelPopups="yes"
+>
+	<$macrocall $name="tag-picker-inner"/>
+</$let>
+\end

package/core/wiki/macros/tag.tid

@@ -21,7 +21,9 @@ color:$(foregroundColor)$;
 >
 	<<__actions__>>
 	<$transclude tiddler=<<__icon__>>/>
-	<$view tiddler=<<__tag__>> field="title" format="text" />
+	<span class={{{ [<__tag__>is[missing]then[tc-tag-missing]else[tc-tag-exists]] }}}>
+		<$view tiddler=<<__tag__>> field="title" format="text" />
+	</span>
 </$element-tag$>
 </$let>
 \end

package/core/wiki/macros/testcase.tid

@@ -0,0 +1,10 @@
+title: $:/core/macros/testcase
+tags: $:/tags/Macro $:/tags/Global
+
+\whitespace trim
+
+\procedure testcase(tiddler)
+<$tiddler tiddler=<<tiddler>>>
+<$transclude $tiddler="$:/core/ui/TestCaseTemplate">
+</$tiddler>
+\end

package/core/wiki/tags/TestCaseActions.tid

@@ -0,0 +1,2 @@
+title: $:/tags/TestCase/Actions
+list:

package/core/wiki/tags/ViewTemplateBodyFilter.tid

@@ -1,2 +1,2 @@
 title: $:/tags/ViewTemplateBodyFilter
-list: $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/default
+list: $:/config/ViewTemplateBodyFilters/testcase $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/default

package/editions/dev/tiddlers/HelloThere.tid

@@ -16,6 +16,7 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
 ** [[Adding Babel Polyfill to TiddlyWiki]]
 ** [[TiddlyWiki Drag and Drop Interoperability]]
 ** [[Javascript Widget Tutorial]]
+** [[Using TiddlyWiki as a library in another Node.js application]]
 * The original developer documentation from https://tiddlywiki.com:
 ** [[TiddlyWiki for Developers]]
 ** [[TiddlyWiki Coding Style Guidelines]]

package/editions/dev/tiddlers/javascript-widget-tutorial/Javascript Widget Tutorial.tid

@@ -1,5 +1,5 @@
 created: 20190202035524804
-modified: 20221029161501848
+modified: 20240302110658300
 tags: 
 title: Javascript Widget Tutorial
 type: text/vnd.tiddlywiki
@@ -9,21 +9,23 @@ This tutorial provides step-by-step, interactive examples of how to write code f
 
 Intended audience:
 
-# Those who know tiddlywiki well and know programming and javascript and want to write their own widget. I don't make any effort to explain javascript here. For that you will need other resources.
+# Those who know tiddlywiki well and know programming and javascript and want to write their own widget.
 # Those who know tiddlywiki well and don't know javascript, but want to understand more about how tiddlywiki works. You should be able to skim through and interact with the demos and learn something.
 
-!The tutorial
-*[[Undefined widget tutorial]]
-*[[Do nothing widget tutorial]]
-*[[Hello World widget tutorial]]
-*[[Widget refresh tutorial part I]]
-*[[Widget refresh tutorial part II]]
-*[[Widget refresh tutorial part III]]
-*[[Widget attributes tutorial part I]]
-*[[Widget attributes tutorial part II]]
-*[[Child widgets tutorial]]
+We don't make any effort to explain javascript here. For that you will need other resources, like [[MDN|https://developer.mozilla.org/en-US/docs/Web/JavaScript]].
 
-! Notes
+!! The tutorial
+* [[Undefined widget tutorial]]
+* [[Do nothing widget tutorial]]
+* [[Hello World widget tutorial]]
+* [[Widget refresh tutorial part I]]
+* [[Widget refresh tutorial part II]]
+* [[Widget refresh tutorial part III]]
+* [[Widget attributes tutorial part I]]
+* [[Widget attributes tutorial part II]]
+* [[Child widgets tutorial]]
+
+!! Notes
 
 tiddlywiki doesn't support dynamically reloading javascript. If you change a javascript tiddler, then you need to save and reload  the wiki before the changes will take affect.
 
@@ -31,7 +33,11 @@ To avoid the need for such reloads, the excellent [[innerwiki plugin|https://tid
 
 Without the need for reloads, a tiddlywiki instance with the [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] installed works great as a playground for interacting with tiddlywiki javascript.
 
-! Other documentation on writing TW widgets
+!! Other documentation on writing TW widgets
+
+* WidgetModules
+* [[Widgets]]
+
+!! Full API doc
 
-*WidgetModules
-*[[Widgets]]
+[[Github Pages of TW5-Typed|https://tiddly-gittly.github.io/TW5-Typed/api/classes/modules_widgets.widget]]

package/editions/dev/tiddlers/new/Using ES2016 for Writing Plugins.tid

@@ -1,5 +1,5 @@
-modified: 20160305222940000
 created: 20160111034749658
+modified: 20240302110735646
 title: Using ES2016 for Writing Plugins
 type: text/vnd.tiddlywiki
 
@@ -7,7 +7,15 @@ With the advent of ES2015 (also known as ES6) and the availability of [[Babel.js
 
 Please understand how the PluginMechanism works since this is all about writing a plugin using Babel to compile the output that will be included in the final TiddlyWiki (for example [[TiddlyWiki on Node.js]]).
 
-!! Installing and Configuring Babel
+!! Use a framework
+
+It is recommended to use develop toolkit managed by community. For example, 
+
+# [[Modern.TiddlyDev|https://tiddly-gittly.github.io/Modern.TiddlyDev/]]
+
+They are known as "~JavaScript Meta-Framework". With them, you can start developing in a few minutes, without hours of configuration and debugging the build steps.
+
+!! Installing and Configuring Babel by yourself
 
 You can install Babel using
 
@@ -33,7 +41,9 @@ Inside your plugin project edit the file `.babelrc` and enter the following:
 
 <<.tip "I found it easier to manage my plugins as if they were ''npm'' modules complete with a `package.json` that compiles the output via `npm run build`. See [[npm-scripts documentation|https://docs.npmjs.com/misc/scripts]] for details.">>
 
-!! Compiling the Output
+Another benefit of using such a "Meta-Framework" is that you can easily maintain your configuration, you will find it difficult to upgrade those config files after several months.
+
+!!! Compiling the Output
 
 Pick a folder to store the ES2015 JavaScript and a folder to output the TiddlyWiki ready JavaScript. In this example I will use `src` and `lib` respectively. With Babel installed and working I can compile all the JavaScript in the `src` folder to the `lib` folder by running this command:
 
@@ -43,7 +53,7 @@ $ babel src -d lib
 
 <<.warning "Babel will //not// copy over non-JavaScript files. It is up to the developer to include all the supporting files themselves. Babel only converts the ~JavaScript files (ending in `.js`) from the `src` folder to the `lib` folder.">>
 
-!! Imports and Exports
+!!! Imports and Exports
 
 In a plugin written pre-ES2015 one would `require` a module through TiddlyWiki like so:
 
@@ -71,7 +81,7 @@ export { MyWidget as mywidget };
 
 It is important to understand that in ES2016 the ''default'' export is not supported in TiddlyWiki. This is mostly because the core code expects specific properties to be attached to the `exports` variable. Bable's `export` conversion plays well with this //except// with the default export.
 
-!! Classes
+!!! Classes
 
 In the example of a widget ES2016 plays well with class inheritance. To contrast the typical Widget definition would look something like this:
 
@@ -104,7 +114,7 @@ class NameWidget extends Widget {
 }
 ```
 
-!!! Non Class Modules
+!!!! Non Class Modules
 
 For non class modules you can use the `export` keyword. Here is a simple [[Startup Module|ModuleType]]:
 
@@ -122,11 +132,11 @@ export const params = {};
 export function run() {…}
 ```
 
-!! Polyfills
+!!! Polyfills
 
 ES2015 comes with some features that are part of the JavaScript core objects. These are not supported by all browsers. To use these features in [[most browsers|BrowserCompatibility]] you will need a <<.def "polyfill">>. Babel has a polyfill package that you can include. See [[Adding Babel Polyfill to TiddlyWiki]] for how to accomplish this.
 
-!! Example
+!!! Example
 
 Here is an example ES2015 plugin/widget that will show the time and update it:
 

package/editions/dev/tiddlers/new/Using TiddlyWiki as a library.tid

@@ -0,0 +1,5 @@
+title: Using TiddlyWiki as a library in another Node.js application
+
+Node.js applications can include TiddlyWiki as a library so that they can use wikitext rendering.
+
+See the demo at https://github.com/Jermolene/TiddlyWiki5DemoApp

package/editions/dev/tiddlers/system/$__themes_tiddlywiki_vanilla_options_sidebarlayout.tid

@@ -0,0 +1,6 @@
+created: 20240311150859344
+modified: 20240311150859344
+title: $:/themes/tiddlywiki/vanilla/options/sidebarlayout
+type: text/vnd.tiddlywiki
+
+fluid-fixed

package/editions/full/tiddlywiki.info

@@ -47,6 +47,7 @@
 		"it-IT",
 		"ja-JP",
 		"ko-KR",
+		"mk-MK",
 		"nl-NL",
 		"pa-IN",
 		"pt-PT",

package/editions/geospatialdemo/tiddlers/DefaultTiddlers.tid

@@ -0,0 +1,4 @@
+title: $:/DefaultTiddlers
+
+HelloThere
+$:/plugins/tiddlywiki/geospatial

package/editions/geospatialdemo/tiddlers/Features.tid

@@ -0,0 +1,14 @@
+title: GeoFeatures
+tags: $:/tags/GeospatialDemo
+
+This is a list of all the tiddlers containing ~GeoJSON feature collections in this wiki (identified by the tag <<tag "$:/tags/GeoFeature">>). A ~GeoJSON feature collection is a list of features, each of which consists of a geometry and associated metadata.
+
+<ul>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/GeoFeature]sort[caption]]">
+<li>
+<$link>
+<$transclude field="caption"><$view field="title"/></$view>
+</$link>
+</li>
+</$list>
+</ul>

package/editions/geospatialdemo/tiddlers/Flickr Demo.tid

@@ -0,0 +1,27 @@
+title: Flickr Demo
+caption: Flickr
+tags: $:/tags/GeospatialDemo
+
+! Retrieve Geotagged Flickr Photos
+
+This demo will not work until you have set a Flickr API key in the [[Geospatial plugin settings|$:/plugins/tiddlywiki/geospatial/settings]].
+
+<$button>
+<$macrocall $name="flickr-get-album-items" albumID={{$:/config/flickr-param/album-id}}/>
+Get Flickr album
+</$button> <$edit-text tiddler="$:/config/flickr-param/album-id" tag="input"/> (parameter should be an album ID, e.g. 72157630297432522)
+
+<$button>
+<$macrocall $name="flickr-get-interesting-items"/>
+Get Flickr interesting items
+</$button>
+
+<$button>
+<$macrocall $name="flickr-get-photos-of-user-items" userID={{$:/config/flickr-param/user-id}}/>
+Get Flickr photos of user
+</$button> <$edit-text tiddler="$:/config/flickr-param/user-id" tag="input"/> (parameter should be a user ID, e.g. 35468148136@N01)
+
+<$button>
+<$macrocall $name="flickr-get-group-items" groupID={{$:/config/flickr-param/group-id}}/>
+Get Flickr group
+</$button> <$edit-text tiddler="$:/config/flickr-param/group-id" tag="input"/> (parameter should be an group ID, e.g. 22075379@N00)

package/editions/geospatialdemo/tiddlers/Geospatial Plugin Logo.png.meta

@@ -0,0 +1,2 @@
+title: Geospatial Plugin Logo
+type: image/png

package/editions/geospatialdemo/tiddlers/HelloThere.tid

@@ -0,0 +1,37 @@
+title: HelloThere
+
+//The latest build of the Geospatial Plugin can be found at:// https://tiddlywiki5-git-geospatial-plugin-jermolene.vercel.app/plugins/tiddlywiki/geospatial/index.html
+
+!! Introduction
+
+{{$:/plugins/tiddlywiki/geospatial/readme}}
+
+!! Prerequisites
+
+This demo requires that the API keys needed to access external services be obtained by the end user and manually configured. These keys are stored in the browser and so only need to be set up once. See the ''Settings'' tab of [[the plugin|$:/plugins/tiddlywiki/geospatial]] for details.
+
+!! Demos
+
+* Visit the ~GeoFeatures and ~GeoMarkers tabs to see the data loaded into this wiki
+* Click on a link to a layer or marker to open the corresponding tiddler that includes a map
+* Use the Flickr tab to retrieve geotagged photographs from Flickr
+* Visit a ~GeoMarker tiddler and use the "Call ~TravelTime" button to calculate an isochrone from that location using the ~TravelTime API
+
+! Map Showing All Features and Markers
+
+<$geomap
+	state=<<qualify "$:/state/demo-map">>
+	startPosition="bounds"
+>
+	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoBaseLayer]]">
+		<$geobaselayer title=<<currentTiddler>>/>
+	</$list>
+	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoMarker]]">
+		<$geolayer lat={{!!lat}} long={{!!long}} alt={{!!alt}} color={{!!color}} name={{!!caption}}/>
+	</$list>
+	<$list filter="[all[tiddlers+shadows]tag[$:/tags/GeoFeature]]">
+		<$geolayer json={{!!text}} color={{!!color}} name={{!!caption}}/>
+	</$list>
+</$geomap>
+
+<<tabs tabsList:"[all[tiddlers+shadows]tag[$:/tags/GeospatialDemo]]" default:"GeoMarkers">>