Initial Commit

Fixes #7965

.github/workflows/ci.yml

@@ -5,7 +5,7 @@ on:
       - master
       - tiddlywiki-com
 env:
-  NODE_VERSION: "12"
+  NODE_VERSION: "18"
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -14,7 +14,13 @@ jobs:
       - uses: actions/setup-node@v1
         with:
           node-version: "${{ env.NODE_VERSION }}"
-      - run: "./bin/test.sh"
+      - run: "./bin/ci-test.sh"
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
   build-prerelease:
     runs-on: ubuntu-latest
     if: github.ref == 'refs/heads/master'
@@ -54,6 +60,7 @@ jobs:
       TW5_BUILD_TIDDLYWIKI: "./node_modules/tiddlywiki/tiddlywiki.js"
       TW5_BUILD_MAIN_EDITION: "./editions/tw5.com"
       TW5_BUILD_OUTPUT: "./output"
+      TW5_BUILD_ARCHIVE: "./output"
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1

.gitignore

@@ -5,4 +5,6 @@
 tmp/
 output/
 node_modules/
-
+/test-results/
+/playwright-report/
+/playwright/.cache/

bin/build-site.sh

@@ -5,7 +5,7 @@
 # Default to the current version number for building the plugin library
 
 if [  -z "$TW5_BUILD_VERSION" ]; then
-    TW5_BUILD_VERSION=v5.3.0
+    TW5_BUILD_VERSION=v5.3.3
 fi
 
 echo "Using TW5_BUILD_VERSION as [$TW5_BUILD_VERSION]"
@@ -84,10 +84,27 @@ echo -e -n "title: $:/build\ncommit: $TW5_BUILD_COMMIT\n\n$TW5_BUILD_DETAILS\n"
 
 ######################################################
 #
-# Core distribution
+# Core distributions
 #
 ######################################################
 
+# Conditionally build archive if $TW5_BUILD_ARCHIVE variable is set, otherwise do nothing
+#
+# /archive/Empty-TiddlyWiki-<version>.html	Empty archived version
+# /archive/TiddlyWiki-<version>.html		Full archived version
+
+if [ -n "$TW5_BUILD_ARCHIVE" ]; then
+
+node $TW5_BUILD_TIDDLYWIKI \
+	$TW5_BUILD_MAIN_EDITION \
+	--verbose \
+	--version \
+	--load $TW5_BUILD_OUTPUT/build.tid \
+	--output $TW5_BUILD_ARCHIVE \
+	--build archive \
+	|| exit 1
+fi
+
 # /index.html			Main site
 # /favicon.ico			Favicon for main site
 # /static.html			Static rendering of default tiddlers
@@ -95,6 +112,7 @@ echo -e -n "title: $:/build\ncommit: $TW5_BUILD_COMMIT\n\n$TW5_BUILD_DETAILS\n"
 # /static/*				Static single tiddlers
 # /static/static.css	Static stylesheet
 # /static/favicon.ico	Favicon for static pages
+
 node $TW5_BUILD_TIDDLYWIKI \
 	$TW5_BUILD_MAIN_EDITION \
 	--verbose \
@@ -104,13 +122,15 @@ node $TW5_BUILD_TIDDLYWIKI \
 	--build favicon static index \
 	|| exit 1
 
-# /empty.html			Empty
-# /empty.hta			For Internet Explorer
+# /empty.html					Empty
+# /empty.hta					For Internet Explorer
+# /empty-external-core.html		External core empty
+# /tiddlywikicore-<version>.js	Core plugin javascript
 node $TW5_BUILD_TIDDLYWIKI \
-	$TW5_BUILD_MAIN_EDITION \
+	./editions/empty \
 	--verbose \
 	--output $TW5_BUILD_OUTPUT \
-	--build empty \
+	--build empty emptyexternalcore \
 	|| exit 1
 
 
@@ -136,6 +156,28 @@ node $TW5_BUILD_TIDDLYWIKI \
 	--build index favicon static \
 	|| exit 1
 
+# /tour.html			tour edition
+node $TW5_BUILD_TIDDLYWIKI \
+	./editions/tour \
+	--verbose \
+	--output $TW5_BUILD_OUTPUT \
+	--rendertiddler $:/core/save/all tour.html text/plain \
+	|| exit 1
+
+# /dev/index.html			Developer docs
+# /dev/favicon.ico			Favicon for dev site
+# /dev/static.html			Static rendering of default tiddlers
+# /dev/alltiddlers.html		Static rendering of all tiddlers
+# /dev/static/*				Static single tiddlers
+# /dev/static/static.css	Static stylesheet
+node $TW5_BUILD_TIDDLYWIKI \
+	./editions/dev \
+	--verbose \
+	--load $TW5_BUILD_OUTPUT/build.tid \
+	--output $TW5_BUILD_OUTPUT/dev \
+	--build index favicon static \
+	|| exit 1
+
 # /share.html				Custom edition for sharing via the URL
 node $TW5_BUILD_TIDDLYWIKI \
 	./editions/share \

bin/ci-test.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+# test TiddlyWiki5 for tiddlywiki.com
+
+node ./tiddlywiki.js \
+	./editions/test \
+	--verbose \
+	--version \
+	--rendertiddler $:/core/save/all test.html text/plain \
+	--test \
+	|| exit 1
+
+npm install playwright @playwright/test
+npx playwright install chromium firefox --with-deps
+
+npx playwright test

boot/boot.js

@@ -177,6 +177,7 @@ document: defaults to current document
 eventListeners: array of event listeners (this option won't work until $tw.utils.addEventListeners() has been loaded)
 */
 $tw.utils.domMaker = function(tag,options) {
+	var options = options || {};
 	var doc = options.document || document;
 	var element = doc.createElementNS(options.namespace || "http://www.w3.org/1999/xhtml",tag);
 	if(options["class"]) {
@@ -218,9 +219,34 @@ $tw.utils.error = function(err) {
 			heading = dm("h1",{text: errHeading}),
 			prompt = dm("div",{text: promptMsg, "class": "tc-error-prompt"}),
 			message = dm("div",{text: err, "class":"tc-error-message"}),
-			button = dm("div",{children: [dm("button",{text: ( $tw.language == undefined ? "close" : $tw.language.getString("Buttons/Close/Caption") )})], "class": "tc-error-prompt"}),
-			form = dm("form",{children: [heading,prompt,message,button], "class": "tc-error-form"});
+			closeButton = dm("div",{children: [dm("button",{text: ( $tw.language == undefined ? "close" : $tw.language.getString("Buttons/Close/Caption") )})], "class": "tc-error-prompt"}),
+			downloadButton = dm("div",{children: [dm("button",{text: ( $tw.language == undefined ? "download tiddlers" : $tw.language.getString("Buttons/EmergencyDownload/Caption") )})], "class": "tc-error-prompt"}),
+			form = dm("form",{children: [heading,prompt,downloadButton,message,closeButton], "class": "tc-error-form"});
 		document.body.insertBefore(form,document.body.firstChild);
+		downloadButton.addEventListener("click",function(event) {
+			if($tw && $tw.wiki) {
+				var tiddlers = [];
+				$tw.wiki.each(function(tiddler,title) {
+					tiddlers.push(tiddler.fields);
+				});
+				var link = dm("a"),
+					text = JSON.stringify(tiddlers);
+				if(Blob !== undefined) {
+					var blob = new Blob([text], {type: "text/html"});
+					link.setAttribute("href", URL.createObjectURL(blob));
+				} else {
+					link.setAttribute("href","data:text/html," + encodeURIComponent(text));
+				}
+				link.setAttribute("download","emergency-tiddlers-" + (new Date()) + ".json");
+				document.body.appendChild(link);
+				link.click();
+				document.body.removeChild(link);
+			} else {
+				alert("Emergency tiddler download is not available");
+			}
+			event.preventDefault();
+			return false;
+		},true);
 		form.addEventListener("submit",function(event) {
 			document.body.removeChild(form);
 			event.preventDefault();
@@ -575,9 +601,8 @@ var globalCheck =[
 	"    configurable: true",
 	"  });",
 	"  if(Object.keys(__temp__).length){",
-	"    console.log(Object.keys(__temp__));",
+	"    console.log(\"Warning: Global assignment detected\",Object.keys(__temp__));",
 	"    delete Object.prototype.__temp__;",
-	"    throw \"Global assignment is not allowed within modules on node.\";",
 	"  }",
 	"  delete Object.prototype.__temp__;",
 ].join('\n');
@@ -596,11 +621,11 @@ $tw.utils.evalGlobal = function(code,context,filename,sandbox,allowGlobals) {
 	// Add the code prologue and epilogue
 	code = [
 		"(function(" + contextNames.join(",") + ") {",
-		"  (function(){\n" + code + "\n;})();",
+		"  (function(){" + code + "\n;})();\n",
 		(!$tw.browser && sandbox && !allowGlobals) ? globalCheck : "",
-		"  return exports;\n",
+		"\nreturn exports;\n",
 		"})"
-	].join("\n");
+	].join("");
 
 	// Compile the code into a function
 	var fn;
@@ -926,7 +951,7 @@ $tw.modules.execute = function(moduleName,moduleRoot) {
 				}
 			} else {
 				// line number should be included in e.stack for runtime errors
-				$tw.utils.error("Error executing boot module " + name + ": " + JSON.stringify(e) + "\n\n" + e.stack);
+				$tw.utils.error("Error executing boot module " + name + ": " + String(e) + "\n\n" + e.stack);
 			}
 		}
 	}
@@ -1150,7 +1175,7 @@ $tw.Wiki = function(options) {
 		shadowTiddlerTitles = null,
 		getShadowTiddlerTitles = function() {
 			if(!shadowTiddlerTitles) {
-				shadowTiddlerTitles = Object.keys(shadowTiddlers);
+				shadowTiddlerTitles = Object.keys(shadowTiddlers).sort(function(a,b) {return a.localeCompare(b);});
 			}
 			return shadowTiddlerTitles;
 		},
@@ -1968,10 +1993,10 @@ $tw.loadTiddlersFromSpecification = function(filepath,excludeRegExp) {
 					var value = tiddler[name];
 					switch(fieldInfo.source) {
 						case "subdirectories":
-							value = path.relative(rootPath, filename).split('/').slice(0, -1);
+							value = path.relative(rootPath, filename).split(path.sep).slice(0, -1);
 							break;
 						case "filepath":
-							value = path.relative(rootPath, filename);
+							value = path.relative(rootPath, filename).split(path.sep).join('/');
 							break;
 						case "filename":
 							value = path.basename(filename);
@@ -2439,6 +2464,7 @@ $tw.boot.initStartup = function(options) {
 	$tw.utils.registerFileType("image/svg+xml","utf8",".svg",{flags:["image"]});
 	$tw.utils.registerFileType("image/vnd.microsoft.icon","base64",".ico",{flags:["image"]});
 	$tw.utils.registerFileType("image/x-icon","base64",".ico",{flags:["image"]});
+	$tw.utils.registerFileType("application/wasm","base64",".wasm");
 	$tw.utils.registerFileType("application/font-woff","base64",".woff");
 	$tw.utils.registerFileType("application/x-font-ttf","base64",".woff");
 	$tw.utils.registerFileType("application/font-woff2","base64",".woff2");
@@ -2453,8 +2479,12 @@ $tw.boot.initStartup = function(options) {
 	$tw.utils.registerFileType("text/x-markdown","utf8",[".md",".markdown"]);
 	$tw.utils.registerFileType("application/enex+xml","utf8",".enex");
 	$tw.utils.registerFileType("application/vnd.openxmlformats-officedocument.wordprocessingml.document","base64",".docx");
+	$tw.utils.registerFileType("application/msword","base64",".doc");
 	$tw.utils.registerFileType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","base64",".xlsx");
+	$tw.utils.registerFileType("application/excel","base64",".xls");
+	$tw.utils.registerFileType("application/vnd.ms-excel","base64",".xls");
 	$tw.utils.registerFileType("application/vnd.openxmlformats-officedocument.presentationml.presentation","base64",".pptx");
+	$tw.utils.registerFileType("application/mspowerpoint","base64",".ppt");
 	$tw.utils.registerFileType("text/x-bibtex","utf8",".bib",{deserializerType:"application/x-bibtex"});
 	$tw.utils.registerFileType("application/x-bibtex","utf8",".bib");
 	$tw.utils.registerFileType("application/epub+zip","base64",".epub");
@@ -2675,6 +2705,18 @@ $tw.hooks.addHook = function(hookName,definition) {
 	}
 };
 
+/*
+Delete hooks from the hashmap
+*/
+$tw.hooks.removeHook = function(hookName,definition) {
+	if($tw.utils.hop($tw.hooks.names,hookName)) {
+		var p = $tw.hooks.names[hookName].indexOf(definition);
+		if(p !== -1) {
+			$tw.hooks.names[hookName].splice(p, 1);
+		}
+	}
+};
+
 /*
 Invoke the hook by key
 */

core/acknowledgements.tid

@@ -3,7 +3,7 @@ title: $:/Acknowledgements
 TiddlyWiki incorporates code from these fine OpenSource projects:
 
 * [[The Stanford Javascript Crypto Library|http://bitwiseshiftleft.github.io/sjcl/]]
-* [[The Jasmine JavaScript Test Framework|http://pivotal.github.io/jasmine/]]
+* [[The Jasmine JavaScript Test Framework|https://jasmine.github.io/]]
 * [[Normalize.css by Nicolas Gallagher|http://necolas.github.io/normalize.css/]]
 
 And media from these projects:

core/copyright.tid

@@ -4,7 +4,7 @@ type: text/plain
 TiddlyWiki created by Jeremy Ruston, (jeremy [at] jermolene [dot] com)
 
 Copyright (c) 2004-2007, Jeremy Ruston
-Copyright (c) 2007-2023, UnaMesa Association
+Copyright (c) 2007-2024, UnaMesa Association
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without

core/images/network-activity.tid

@@ -0,0 +1,11 @@
+title: $:/core/images/network-activity
+tags: $:/tags/Image
+
+<svg width="22pt" height="22pt" class="tc-image-network-activity tc-image-button" viewBox="0 0 128 128"><g class={{{ [{$:/state/http-requests}match[0]then[]else[tc-network-activity-background]] }}}>
+<$list filter="[{$:/state/http-requests}match[0]]" variable="ignore">
+<path d="M64.043 45.153a4.002 4.002 0 0 1 4.367 2.21l.084.188 30.403 73.4a4 4 0 0 1-7.307 3.25l-.084-.188-3.103-7.49-8.898 8.899a3.985 3.985 0 0 1-2.624 1.166l-.205.005a3.987 3.987 0 0 1-2.828-1.171l-9.849-9.848-9.847 9.848a3.985 3.985 0 0 1-2.624 1.166l-.204.005a3.987 3.987 0 0 1-2.829-1.171l-8.899-8.9-3.102 7.491a4 4 0 1 1-7.391-3.062l30.403-73.4a4.001 4.001 0 0 1 4.495-2.39l.042-.008Zm13.636 56.74-8.023 8.024 7.02 7.019 8.023-8.022-7.02-7.02Zm-27.353.008-7.019 7.019 8.016 8.016 7.019-7.02-8.016-8.015Zm13.68-13.68-8.023 8.023 8.016 8.016 8.023-8.023-8.016-8.016Zm-8.971-8.971-4.687 11.315 8.001-8.001-3.314-3.314Zm17.933.009-3.305 3.305 7.979 7.979-4.674-11.284ZM64 57.607l-5.666 13.68c.096.072.188.15.278.232l.133.126 5.261 5.262 5.262-5.262c.128-.127.261-.244.4-.35L64 57.607Zm0-34.69a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z"/>
+</$list>
+<$list filter="[{$:/state/http-requests}!match[0]]" variable="ignore">
+<path d="M109.395.952a4.002 4.002 0 0 1 3.787 2.708C117.529 11.62 120 20.753 120 30.462c0 15.186-6.044 28.96-15.858 39.047a4 4 0 1 1-6.47-4.626l-.12-.094C106.466 56.074 112 43.914 112 30.462c0-8.492-2.205-16.469-6.074-23.39l.054-.036a4 4 0 0 1 3.415-6.084Zm-90.762 0a4 4 0 0 1 3.072 6.562l.093.06A47.786 47.786 0 0 0 16 30.463c0 13.315 5.42 25.363 14.176 34.058l-.01.007a4 4 0 1 1-6.312 4.863l-.063.05C14.017 59.359 8 45.613 8 30.462c0-9.77 2.502-18.956 6.9-26.952A4.002 4.002 0 0 1 18.634.952Z"/><path d="M64.043 44.698a4.002 4.002 0 0 1 4.367 2.21l.084.188 30.403 73.4a4 4 0 0 1-7.307 3.25l-.084-.188-3.103-7.49-8.898 8.9a3.985 3.985 0 0 1-2.624 1.166l-.205.005a3.987 3.987 0 0 1-2.828-1.172l-9.849-9.848-9.847 9.848a3.985 3.985 0 0 1-2.624 1.167l-.204.005a3.987 3.987 0 0 1-2.829-1.172l-8.899-8.899-3.102 7.49a4 4 0 0 1-7.391-3.061l30.403-73.4a4.001 4.001 0 0 1 4.495-2.39l.042-.009ZM77.68 101.44l-8.023 8.023 7.02 7.019 8.023-8.022-7.02-7.02Zm-27.353.007-7.019 7.019 8.016 8.016 7.019-7.019-8.016-8.016Zm13.68-13.68-8.023 8.023 8.016 8.016 8.023-8.023-8.016-8.016Zm-8.971-8.971L50.348 90.11l8.001-8.001-3.314-3.314Zm17.933.009-3.305 3.305 7.979 7.979-4.674-11.284ZM64 57.152l-5.666 13.68c.096.073.188.15.278.232l.133.127 5.261 5.261 5.262-5.261c.128-.128.261-.244.4-.351L64 57.152ZM38.503 1.058a4 4 0 0 1 2.7 6.952l.17-.175C35.582 13.625 32 21.625 32 30.462c0 8.838 3.582 16.838 9.374 22.629a4 4 0 0 1-5.659 5.658l-.01.01C28.473 51.52 24 41.526 24 30.485 24 19.567 28.374 9.67 35.466 2.453a3.995 3.995 0 0 1 3.037-1.395ZM89.369.952c1.14 0 2.17.478 2.899 1.244l.005-.006C99.518 9.43 104 19.434 104 30.485c0 10.826-4.3 20.648-11.287 27.85a4 4 0 1 1-6.054-5.213l-.032-.032C92.418 47.299 96 39.299 96 30.462c0-8.73-3.496-16.643-9.164-22.416A4 4 0 0 1 89.368.952Zm-39.282 11.14a4 4 0 0 1 2.59 7.048l.01.009A15.95 15.95 0 0 0 48 30.462a15.95 15.95 0 0 0 4.687 11.315l-.01.01a4 4 0 1 1-5.82 5.47l.173.177A23.925 23.925 0 0 1 40 30.462a23.925 23.925 0 0 1 7.03-16.97l.01.01a3.991 3.991 0 0 1 3.047-1.41Zm27.895.07a3.99 3.99 0 0 1 2.984 1.336l.006-.005A23.925 23.925 0 0 1 88 30.463a23.92 23.92 0 0 1-6.707 16.642l-.3.305a4 4 0 1 1-5.679-5.632v-.002A15.95 15.95 0 0 0 80 30.462a15.95 15.95 0 0 0-4.685-11.312 4.012 4.012 0 0 1-1.333-2.987 4 4 0 0 1 4-4ZM64 22.463a8 8 0 1 1 0 16 8 8 0 0 1 0-16Z"/>
+</$list>
+</g></svg>

core/images/new-journal-button.tid

@@ -1,6 +1,4 @@
 title: $:/core/images/new-journal-button
 tags: $:/tags/Image
 
-<$parameters size="22pt" day=<<now "DD">>>
-<svg width=<<size>> height=<<size>> class="tc-image-new-journal-button tc-image-button" viewBox="0 0 128 128"><g fill-rule="evenodd"><path d="M102.545 112.818v11.818c0 1.306 1.086 2.364 2.425 2.364h6.06c1.34 0 2.425-1.058 2.425-2.364v-11.818h12.12c1.34 0 2.425-1.058 2.425-2.363v-5.91c0-1.305-1.085-2.363-2.424-2.363h-12.121V90.364c0-1.306-1.086-2.364-2.425-2.364h-6.06c-1.34 0-2.425 1.058-2.425 2.364v11.818h-12.12c-1.34 0-2.425 1.058-2.425 2.363v5.91c0 1.305 1.085 2.363 2.424 2.363h12.121zM60.016 4.965c-4.781-2.76-10.897-1.118-13.656 3.66L5.553 79.305A9.993 9.993 0 009.21 92.963l51.04 29.468c4.78 2.76 10.897 1.118 13.655-3.66l40.808-70.681a9.993 9.993 0 00-3.658-13.656L60.016 4.965zm-3.567 27.963a6 6 0 106-10.393 6 6 0 00-6 10.393zm31.697 17.928a6 6 0 106-10.392 6 6 0 00-6 10.392z"/><text class="tc-fill-background" font-family="Helvetica" font-size="47.172" font-weight="bold" transform="rotate(30 25.742 95.82)"><tspan x="42" y="77.485" text-anchor="middle"><$text text=<<day>>/></tspan></text></g></svg>
-</$parameters>
+<$parameters size="22pt" day=<<now "DD">>><svg width=<<size>> height=<<size>> class="tc-image-new-journal-button tc-image-button" viewBox="0 0 128 128"><g fill-rule="evenodd"><path d="M102.545 112.818v11.818c0 1.306 1.086 2.364 2.425 2.364h6.06c1.34 0 2.425-1.058 2.425-2.364v-11.818h12.12c1.34 0 2.425-1.058 2.425-2.363v-5.91c0-1.305-1.085-2.363-2.424-2.363h-12.121V90.364c0-1.306-1.086-2.364-2.425-2.364h-6.06c-1.34 0-2.425 1.058-2.425 2.364v11.818h-12.12c-1.34 0-2.425 1.058-2.425 2.363v5.91c0 1.305 1.085 2.363 2.424 2.363h12.121zM60.016 4.965c-4.781-2.76-10.897-1.118-13.656 3.66L5.553 79.305A9.993 9.993 0 009.21 92.963l51.04 29.468c4.78 2.76 10.897 1.118 13.655-3.66l40.808-70.681a9.993 9.993 0 00-3.658-13.656L60.016 4.965zm-3.567 27.963a6 6 0 106-10.393 6 6 0 00-6 10.393zm31.697 17.928a6 6 0 106-10.392 6 6 0 00-6 10.392z"/><text class="tc-fill-background" font-family="Helvetica" font-size="47.172" font-weight="bold" transform="rotate(30 25.742 95.82)"><tspan x="42" y="77.485" text-anchor="middle"><$text text=<<day>>/></tspan></text></g></svg></$parameters>

core/language/en-GB/Buttons.multids

@@ -28,6 +28,7 @@ Encryption/ClearPassword/Caption: clear password
 Encryption/ClearPassword/Hint: Clear the password and save this wiki without encryption
 Encryption/SetPassword/Caption: set password
 Encryption/SetPassword/Hint: Set a password for saving this wiki with encryption
+EmergencyDownload/Caption: download tiddlers as json
 ExportPage/Caption: export all
 ExportPage/Hint: Export all tiddlers
 ExportTiddler/Caption: export tiddler
@@ -67,6 +68,8 @@ More/Caption: more
 More/Hint: More actions
 NewHere/Caption: new here
 NewHere/Hint: Create a new tiddler tagged with this one
+NetworkActivity/Caption: network activity
+NetworkActivity/Hint: Cancel all network activity
 NewJournal/Caption: new journal
 NewJournal/Hint: Create a new journal tiddler
 NewJournalHere/Caption: new journal here

core/language/en-GB/Exporters.multids

@@ -3,4 +3,4 @@ title: $:/language/Exporters/
 StaticRiver: Static HTML
 JsonFile: JSON file
 CsvFile: CSV file
-TidFile: ".tid" file
+TidFile: TID text file

core/language/en-GB/Fields.multids

@@ -4,6 +4,7 @@ _canonical_uri: The full URI of an external image tiddler
 author: Name of the author of a plugin
 bag: The name of the bag from which a tiddler came
 caption: The text to be displayed on a tab or button
+class: The CSS class applied to a tiddler when rendering it - see [[Custom styles by user-class]].  Also used for [[Modals]]
 code-body: The view template will display the tiddler as code if set to ''yes''
 color: The CSS color value associated with a tiddler
 component: The name of the component responsible for an [[alert tiddler|AlertMechanism]]

core/language/en-GB/Help/commands.tid

@@ -10,7 +10,7 @@ Sequentially run the command tokens returned from a filter
 Examples
 
 ```
---commands "[enlist{$:/build-commands-as-text}]"
+--commands "[enlist:raw{$:/build-commands-as-text}]"
 ```
 
 ```

core/language/en-GB/Help/savewikifolder.tid

@@ -4,7 +4,7 @@ description: Saves a wiki to a new wiki folder
 <<.from-version "5.1.20">> Saves the current wiki as a wiki folder, including tiddlers, plugins and configuration:
 
 ```
---savewikifolder <wikifolderpath> [<filter>]
+--savewikifolder <wikifolderpath> [<filter>] [ [<name>=<value>] ]*
 ```
 
 * The target wiki folder must be empty or non-existent
@@ -12,8 +12,23 @@ description: Saves a wiki to a new wiki folder
 * Plugins from the official plugin library are replaced with references to those plugins in the `tiddlywiki.info` file
 * Custom plugins are unpacked into their own folder
 
+The following options are supported:
+
+* ''filter'': a filter expression that defines the tiddlers to include in the output.
+* ''explodePlugins'': defaults to "yes"
+** ''yes'' will "explode" plugins into separate tiddler files and save them to the plugin directory within the wiki folder
+** ''no'' will suppress exploding plugins into their constituent tiddler files. It will save the plugin as a single JSON tiddler in the tiddlers folder
+
+Note that both ''explodePlugins'' options will produce wiki folders that build the exact same original wiki. The difference lies in how plugins are represented in the wiki folder.
+
 A common usage is to convert a TiddlyWiki HTML file into a wiki folder:
 
 ```
 tiddlywiki --load ./mywiki.html --savewikifolder ./mywikifolder
 ```
+
+Save the plugin to the tiddlers directory of the target wiki folder:
+
+```
+tiddlywiki --load ./mywiki.html --savewikifolder ./mywikifolder explodePlugins=no
+```

core/language/en-GB/Help/server.tid

@@ -1,5 +1,5 @@
 title: $:/language/Help/server
-description: Provides an HTTP server interface to TiddlyWiki (deprecated in favour of the new listen command)
+description: (deprecated: see 'listen' command) Provides an HTTP server interface to TiddlyWiki
 
 Legacy command to serve a wiki over HTTP.
 

core/language/en-GB/Misc.multids

@@ -25,6 +25,8 @@ Encryption/RepeatPassword: Repeat password
 Encryption/PasswordNoMatch: Passwords do not match
 Encryption/SetPassword: Set password
 Error/Caption: Error
+Error/DeserializeOperator/MissingOperand: Filter Error: Missing operand for 'deserialize' operator
+Error/DeserializeOperator/UnknownDeserializer: Filter Error: Unknown deserializer provided as operand for the 'deserialize' operator
 Error/Filter: Filter error
 Error/FilterSyntax: Syntax error in filter expression
 Error/FilterRunPrefix: Filter Error: Unknown prefix for filter run

core/language/en-GB/SiteTitle.tid

@@ -1,3 +1,3 @@
 title: $:/SiteTitle
 
-My ~TiddlyWiki
+My TiddlyWiki

core/language/en-GB/Types/image_svg_xml.tid

@@ -1,5 +1,5 @@
 title: $:/language/Docs/Types/image/svg+xml
-description: Structured Vector Graphics image
+description: SVG image
 name: image/svg+xml
 group: Image
 group-sort: 1

core/language/en-GB/Types/image_x-icon.tid

@@ -1,5 +1,5 @@
 title: $:/language/Docs/Types/image/x-icon
-description: ICO format icon file
+description: ICO icon
 name: image/x-icon
 group: Image
 group-sort: 1

core/modules/commands/savetiddlers.js

@@ -46,7 +46,7 @@ Command.prototype.execute = function() {
 			type = tiddler.fields.type || "text/vnd.tiddlywiki",
 			contentTypeInfo = $tw.config.contentTypeInfo[type] || {encoding: "utf8"},
 			filename = path.resolve(pathname,$tw.utils.encodeURIComponentExtended(title));
-		fs.writeFileSync(filename,tiddler.fields.text,contentTypeInfo.encoding);
+		fs.writeFileSync(filename,tiddler.fields.text || "",contentTypeInfo.encoding);
 	});
 	return null;
 };

core/modules/commands/savewikifolder.js

@@ -5,7 +5,14 @@ module-type: command
 
 Command to save the current wiki as a wiki folder
 
---savewikifolder <wikifolderpath> [<filter>]
+--savewikifolder <wikifolderpath> [ [<name>=<value>] ]*
+
+The following options are supported:
+
+* ''filter'': a filter expression defining the tiddlers to be included in the output
+* ''explodePlugins'': set to "no" to suppress exploding plugins into their constituent shadow tiddlers (defaults to "yes")
+
+Supports backward compatibility with --savewikifolder <wikifolderpath> [<filter>] [ [<name>=<value>] ]*
 
 \*/
 (function(){
@@ -35,14 +42,28 @@ Command.prototype.execute = function() {
 	if(this.params.length < 1) {
 		return "Missing wiki folder path";
 	}
-	var wikifoldermaker = new WikiFolderMaker(this.params[0],this.params[1],this.commander);
+	var regFilter = /^[a-zA-Z0-9\.\-_]+=/g,  // dynamic parameters
+		namedParames,
+		tiddlerFilter,
+		options = {};
+	if (regFilter.test(this.params[1])) {  
+		namedParames = this.commander.extractNamedParameters(this.params.slice(1));
+		tiddlerFilter = namedParames.filter || "[all[tiddlers]]";
+	} else {
+		namedParames = this.commander.extractNamedParameters(this.params.slice(2));
+		tiddlerFilter = this.params[1];
+	}
+	tiddlerFilter = tiddlerFilter || "[all[tiddlers]]";
+	options.explodePlugins = namedParames.explodePlugins || "yes";
+	var wikifoldermaker = new WikiFolderMaker(this.params[0],tiddlerFilter,this.commander,options);
 	return wikifoldermaker.save();
 };
 
-function WikiFolderMaker(wikiFolderPath,wikiFilter,commander) {
+function WikiFolderMaker(wikiFolderPath,wikiFilter,commander,options) {
 	this.wikiFolderPath = wikiFolderPath;
-	this.wikiFilter = wikiFilter || "[all[tiddlers]]";
+	this.wikiFilter = wikiFilter;
 	this.commander = commander;
+	this.explodePlugins = options.explodePlugins;
 	this.wiki = commander.wiki;
 	this.savedPaths = []; // So that we can detect filename clashes
 }
@@ -93,10 +114,13 @@ WikiFolderMaker.prototype.save = function() {
 						self.log("Adding built-in plugin: " + libraryDetails.name);
 						newWikiInfo[libraryDetails.type] = newWikiInfo[libraryDetails.type]  || [];
 						$tw.utils.pushTop(newWikiInfo[libraryDetails.type],libraryDetails.name);
-					} else {
+					} else if(self.explodePlugins !== "no") {
 						// A custom plugin
 						self.log("Processing custom plugin: " + title);
 						self.saveCustomPlugin(tiddler);
+					} else if(self.explodePlugins === "no") {
+						self.log("Processing custom plugin to tiddlders folder: " + title);
+						self.saveTiddler("tiddlers", tiddler);
 					}
 				} else {
 					// Ordinary tiddler

core/modules/editor/engines/framed.js

@@ -60,7 +60,7 @@ function FramedEngine(options) {
 		this.domNode.value = this.value;
 	}
 	// Set the attributes
-	if(this.widget.editType) {
+	if(this.widget.editType && this.widget.editTag !== "textarea") {
 		this.domNode.setAttribute("type",this.widget.editType);
 	}
 	if(this.widget.editPlaceholder) {

core/modules/editor/engines/simple.js

@@ -34,7 +34,7 @@ function SimpleEngine(options) {
 		this.domNode.value = this.value;
 	}
 	// Set the attributes
-	if(this.widget.editType) {
+	if(this.widget.editType && this.widget.editTag !== "textarea") {
 		this.domNode.setAttribute("type",this.widget.editType);
 	}
 	if(this.widget.editPlaceholder) {

core/modules/filterrunprefixes/then.js

@@ -0,0 +1,32 @@
+/*\
+title: $:/core/modules/filterrunprefixes/then.js
+type: application/javascript
+module-type: filterrunprefix
+
+Replace results of previous runs unless empty
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter prefix function
+*/
+exports.then = function(operationSubFunction) {
+	return function(results,source,widget) {
+		if(results.length !== 0) {
+			// Only run if previous run(s) produced results
+			var thisRunResult = operationSubFunction(source,widget);
+			if(thisRunResult.length !== 0) {
+				// Replace results only if this run actually produces a result
+				results.clear();
+				results.pushTop(thisRunResult);
+			}
+		}
+	};
+};
+
+})();

core/modules/filters.js

@@ -12,6 +12,8 @@ Adds tiddler filtering methods to the $tw.Wiki object.
 /*global $tw: false */
 "use strict";
 
+var widgetClass = require("$:/core/modules/widgets/widget.js").widget;
+
 /* Maximum permitted filter recursion depth */
 var MAX_FILTER_DEPTH = 300;
 
@@ -269,7 +271,7 @@ exports.compileFilter = function(filterString) {
 						operand.value = self.getTextReference(operand.text,"",currTiddlerTitle);
 					} else if(operand.variable) {
 						var varTree = $tw.utils.parseFilterVariable(operand.text);
-						operand.value = widget.evaluateVariable(varTree.name,{params: varTree.params, source: source})[0] || "";
+						operand.value = widgetClass.evaluateVariable(widget,varTree.name,{params: varTree.params, source: source})[0] || "";
 					} else {
 						operand.value = operand.text;
 					}

core/modules/filters/all.js

@@ -28,12 +28,8 @@ function getAllFilterOperators() {
 Export our filter function
 */
 exports.all = function(source,operator,options) {
-	// Get our suboperators
-	var allFilterOperators = getAllFilterOperators();
-	// Cycle through the suboperators accumulating their results
-	var results = new $tw.utils.LinkedList(),
-		subops = operator.operand.split("+");
 	// Check for common optimisations
+	var subops = operator.operand.split("+");
 	if(subops.length === 1 && subops[0] === "") {
 		return source;
 	} else if(subops.length === 1 && subops[0] === "tiddlers") {
@@ -46,6 +42,10 @@ exports.all = function(source,operator,options) {
 		return options.wiki.eachShadowPlusTiddlers;
 	}
 	// Do it the hard way
+	// Get our suboperators
+	var allFilterOperators = getAllFilterOperators();
+	// Cycle through the suboperators accumulating their results
+	var results = new $tw.utils.LinkedList();
 	for(var t=0; t<subops.length; t++) {
 		var subop = allFilterOperators[subops[t]];
 		if(subop) {

core/modules/filters/deserialize.js

@@ -0,0 +1,39 @@
+/*\
+title: $:/core/modules/filters/deserialize.js
+type: application/javascript
+module-type: filteroperator
+Filter operator for deserializing string data into JSON representing tiddlers
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports["deserialize"] = function(source,operator,options) {
+	var results = [],
+		deserializer;
+	if(operator.operand) {
+		// Get the deserializer identified by the operand
+		deserializer = $tw.Wiki.tiddlerDeserializerModules[operator.operand];
+		if(deserializer) {
+			source(function(tiddler,title) {
+				var tiddlers;
+				try {
+					tiddlers = deserializer(title);
+				} catch(e) {
+					// Return an empty array if we could not extract any tiddlers
+					tiddlers = [];
+				}
+				results.push(JSON.stringify(tiddlers));
+			});
+		} else {
+			return [$tw.language.getString("Error/DeserializeOperator/UnknownDeserializer")];
+		}
+	} else {
+		return [$tw.language.getString("Error/DeserializeOperator/MissingOperand")];
+	}
+	return results;
+}
+
+})();

core/modules/filters/encodings.js

@@ -18,16 +18,20 @@ Export our filter functions
 
 exports.decodebase64 = function(source,operator,options) {
 	var results = [];
+	var binary = operator.suffixes && operator.suffixes.indexOf("binary") !== -1;
+	var urlsafe = operator.suffixes && operator.suffixes.indexOf("urlsafe") !== -1;
 	source(function(tiddler,title) {
-		results.push($tw.utils.base64Decode(title));
+		results.push($tw.utils.base64Decode(title,binary,urlsafe));
 	});
 	return results;
 };
 
 exports.encodebase64 = function(source,operator,options) {
 	var results = [];
+	var binary = operator.suffixes && operator.suffixes.indexOf("binary") !== -1;
+	var urlsafe = operator.suffixes && operator.suffixes.indexOf("urlsafe") !== -1;
 	source(function(tiddler,title) {
-		results.push($tw.utils.base64Encode(title));
+		results.push($tw.utils.base64Encode(title,binary,urlsafe));
 	});
 	return results;
 };

core/modules/filters/function.js

@@ -17,9 +17,13 @@ Export our filter function
 */
 exports.function = function(source,operator,options) {
 	var functionName = operator.operands[0],
-		variableInfo = options.widget && options.widget.getVariableInfo && options.widget.getVariableInfo(functionName);
+		params = [];
+	$tw.utils.each(operator.operands.slice(1),function(param) {
+		params.push({value: param});
+	});
+	var variableInfo = options.widget && options.widget.getVariableInfo && options.widget.getVariableInfo(functionName,{params: params, source: source});
 	if(variableInfo && variableInfo.srcVariable && variableInfo.srcVariable.isFunctionDefinition) {
-		return options.widget.evaluateVariable(functionName,{params: operator.operands.slice(1), source: source});
+		return variableInfo.resultList ? variableInfo.resultList : [variableInfo.text];
 	}
 	// Return the input list if the function wasn't found
 	var results = [];

core/modules/filters/json-ops.js

@@ -68,6 +68,54 @@ exports["jsontype"] = function(source,operator,options) {
 	return results;
 };
 
+exports["jsonset"] = function(source,operator,options) {
+	var suffixes = operator.suffixes || [],
+		type = suffixes[0] && suffixes[0][0],
+		indexes = operator.operands.slice(0,-1),
+		value = operator.operands[operator.operands.length - 1],
+		results = [];
+	if(operator.operands.length === 1 && operator.operands[0] === "") {
+		value = undefined; // Prevents the value from being assigned
+	}
+	switch(type) {
+		case "string":
+			// Use value unchanged
+			break;
+		case "boolean":
+			value = (value === "true" ? true : (value === "false" ? false : undefined));
+			break;
+		case "number":
+			value = $tw.utils.parseNumber(value);
+			break;
+		case "array":
+			indexes = operator.operands;
+			value = [];
+			break;
+		case "object":
+			indexes = operator.operands;
+			value = {};
+			break;
+		case "null":
+			indexes = operator.operands;
+			value = null;
+			break;
+		case "json":
+			value = $tw.utils.parseJSONSafe(value,function() {return undefined;});
+			break;
+		default:
+			// Use value unchanged
+			break;
+	}
+	source(function(tiddler,title) {
+		var data = $tw.utils.parseJSONSafe(title,title);
+		if(data) {
+			data = setDataItem(data,indexes,value);
+			results.push(JSON.stringify(data));
+		}
+	});
+	return results;
+};
+
 /*
 Given a JSON data structure and an array of index strings, return an array of the string representation of the values at the end of the index chain, or "undefined" if any of the index strings are invalid
 */
@@ -165,6 +213,18 @@ function getDataItemType(data,indexes) {
 	}
 }
 
+function getItemAtIndex(item,index) {
+	if($tw.utils.hop(item,index)) {
+		return item[index];
+	} else if($tw.utils.isArray(item)) {
+		index = $tw.utils.parseInt(index);
+		if(index < 0) { index = index + item.length };
+		return item[index]; // Will be undefined if index was out-of-bounds
+	} else {
+		return undefined;
+	}
+}
+
 /*
 Given a JSON data structure and an array of index strings, return the value at the end of the index chain, or "undefined" if any of the index strings are invalid
 */
@@ -177,7 +237,7 @@ function getDataItem(data,indexes) {
 	for(var i=0; i<indexes.length; i++) {
 		if(item !== undefined) {
 			if(item !== null && ["number","string","boolean"].indexOf(typeof item) === -1) {
-				item = item[indexes[i]];
+				item = getItemAtIndex(item,indexes[i]);
 			} else {
 				item = undefined;
 			}
@@ -186,5 +246,39 @@ function getDataItem(data,indexes) {
 	return item;
 }
 
+/*
+Given a JSON data structure, an array of index strings and a value, return the data structure with the value added at the end of the index chain. If any of the index strings are invalid then the JSON data structure is returned unmodified. If the root item is targetted then a different data object will be returned
+*/
+function setDataItem(data,indexes,value) {
+	// Ignore attempts to assign undefined
+	if(value === undefined) {
+		return data;
+	}
+	// Check for the root item
+	if(indexes.length === 0 || (indexes.length === 1 && indexes[0] === "")) {
+		return value;
+	}
+	// Traverse the JSON data structure using the index chain
+	var current = data;
+	for(var i = 0; i < indexes.length - 1; i++) {
+		current = getItemAtIndex(current,indexes[i]);
+		if(current === undefined) {
+			// Return the original JSON data structure if any of the index strings are invalid
+			return data;
+		}
+	}
+	// Add the value to the end of the index chain
+	var lastIndex = indexes[indexes.length - 1];
+	if($tw.utils.isArray(current)) {
+		lastIndex = $tw.utils.parseInt(lastIndex);
+		if(lastIndex < 0) { lastIndex = lastIndex + current.length };
+	}
+	// Only set indexes on objects and arrays
+	if(typeof current === "object") {
+		current[lastIndex] = value;
+	}
+	return data;
+}
+
 })();
 	

core/modules/filters/listops.js

@@ -58,6 +58,7 @@ Last entry/entries in list
 exports.last = function(source,operator,options) {
 	var count = $tw.utils.getInt(operator.operand,1),
 		results = [];
+	if(count === 0) return results;
 	source(function(tiddler,title) {
 		results.push(title);
 	});

core/modules/filters/substitute.js

@@ -0,0 +1,36 @@
+/*\
+title: $:/core/modules/filters/substitute.js
+type: application/javascript
+module-type: filteroperator
+
+Filter operator for substituting variables and embedded filter expressions with their corresponding values
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Export our filter function
+*/
+exports.substitute = function(source,operator,options) {
+	var results = [],
+		operands = [];
+	$tw.utils.each(operator.operands,function(operand,index){
+		operands.push({
+			name: (index + 1).toString(),
+			value: operand
+		});
+	});
+	source(function(tiddler,title) {
+		if(title) {
+			results.push(options.wiki.getSubstitutedText(title,options.widget,{substitutions:operands}));
+		}
+	});
+	return results;
+};
+
+})();
+ 

core/modules/filters/unknown.js

@@ -22,9 +22,13 @@ Export our filter function
 exports["[unknown]"] = function(source,operator,options) {
 	// Check for a user defined filter operator
 	if(operator.operator.indexOf(".") !== -1) {
-		var variableInfo = options.widget && options.widget.getVariableInfo && options.widget.getVariableInfo(operator.operator);
-		if(variableInfo && variableInfo.srcVariable && variableInfo.srcVariable.isFunctionDefinition) {
-			var list = options.widget.evaluateVariable(operator.operator,{params: operator.operands, source: source});
+		var params = [];
+		$tw.utils.each(operator.operands,function(param) {
+			params.push({value: param});
+		});	
+		var variableInfo = options.widget && options.widget.getVariableInfo && options.widget.getVariableInfo(operator.operator,{params: params, source: source});
+		if(variableInfo && variableInfo.srcVariable) {
+			var list = variableInfo.resultList ? variableInfo.resultList : [variableInfo.text];
 			if(operator.prefix === "!") {
 				var results = [];
 				source(function(tiddler,title) {

core/modules/parsers/parseutils.js

@@ -305,10 +305,11 @@ exports.parseAttribute = function(source,pos) {
 		start: pos
 	};
 	// Define our regexps
-	var reAttributeName = /([^\/\s>"'=]+)/g,
-		reUnquotedAttribute = /([^\/\s<>"'=]+)/g,
+	var reAttributeName = /([^\/\s>"'`=]+)/g,
+		reUnquotedAttribute = /([^\/\s<>"'`=]+)/g,
 		reFilteredValue = /\{\{\{([\S\s]+?)\}\}\}/g,
-		reIndirectValue = /\{\{([^\}]+)\}\}/g;
+		reIndirectValue = /\{\{([^\}]+)\}\}/g,
+		reSubstitutedValue = /(?:```([\s\S]*?)```|`([^`]|[\S\s]*?)`)/g;
 	// Skip whitespace
 	pos = $tw.utils.skipWhiteSpace(source,pos);
 	// Get the attribute name
@@ -361,8 +362,15 @@ exports.parseAttribute = function(source,pos) {
 							node.type = "macro";
 							node.value = macroInvocation;
 						} else {
-							node.type = "string";
-							node.value = "true";
+							var substitutedValue = $tw.utils.parseTokenRegExp(source,pos,reSubstitutedValue);
+							if(substitutedValue) {
+								pos = substitutedValue.end;
+								node.type = "substituted";
+								node.rawValue = substitutedValue.match[1] || substitutedValue.match[2];
+							} else {
+								node.type = "string";
+								node.value = "true";
+							}
 						}
 					}
 				}

core/modules/parsers/textparser.js

@@ -14,10 +14,12 @@ The plain text parser processes blocks of source text into a degenerate parse tr
 
 var TextParser = function(type,text,options) {
 	this.tree = [{
-		type: "codeblock",
+		type: "genesis",
 		attributes: {
-			code: {type: "string", value: text},
-			language: {type: "string", value: type}
+			$type: {name: "$type", type: "string", value: "$codeblock"},
+			code: {name: "code", type: "string", value: text},
+			language: {name: "language", type: "string", value: type},
+			$remappable: {name: "$remappable", type:"string", value: "no"}
 		}
 	}];
 	this.source = text;
@@ -32,4 +34,3 @@ exports["text/css"] = TextParser;
 exports["application/x-tiddler-dictionary"] = TextParser;
 
 })();
-

core/modules/parsers/wikiparser/rules/conditional.js

@@ -0,0 +1,120 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/conditional.js
+type: application/javascript
+module-type: wikirule
+
+Conditional shortcut syntax
+
+```
+This is a <% if [{something}] %>Elephant<% elseif [{else}] %>Pelican<% else %>Crocodile<% endif %>
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "conditional";
+exports.types = {inline: true, block: true};
+
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = /\<\%\s*if\s+/mg;
+	this.terminateIfRegExp = /\%\>/mg;
+};
+
+exports.findNextMatch = function(startPos) {
+	// Look for the next <% if shortcut
+	this.matchRegExp.lastIndex = startPos;
+	this.match = this.matchRegExp.exec(this.parser.source);
+	// If not found then return no match
+	if(!this.match) {
+		return undefined;
+	}
+	// Check for the next %>
+	this.terminateIfRegExp.lastIndex = this.match.index;
+	this.terminateIfMatch = this.terminateIfRegExp.exec(this.parser.source);
+	// If not found then return no match
+	if(!this.terminateIfMatch) {
+		return undefined;
+	}
+	// Return the position at which the construction was found
+	return this.match.index;
+};
+
+/*
+Parse the most recent match
+*/
+exports.parse = function() {
+	// Get the filter condition
+	var filterCondition = this.parser.source.substring(this.match.index + this.match[0].length,this.terminateIfMatch.index);
+	// Advance the parser position to past the %>
+	this.parser.pos = this.terminateIfMatch.index + this.terminateIfMatch[0].length;
+	// Parse the if clause
+	return this.parseIfClause(filterCondition);
+};
+
+exports.parseIfClause = function(filterCondition) {
+	// Create the list widget
+	var listWidget = {
+		type: "list",
+		tag: "$list",
+		isBlock: this.is.block,
+		children: [
+			{
+				type: "list-template",
+				tag: "$list-template"
+			},
+			{
+				type: "list-empty",
+				tag: "$list-empty"
+			}
+		]
+	};
+	$tw.utils.addAttributeToParseTreeNode(listWidget,"filter",filterCondition);
+	$tw.utils.addAttributeToParseTreeNode(listWidget,"variable","condition");
+	$tw.utils.addAttributeToParseTreeNode(listWidget,"limit","1");
+	// Check for an immediately following double linebreak
+	var hasLineBreak = !!$tw.utils.parseTokenRegExp(this.parser.source,this.parser.pos,/([^\S\n\r]*\r?\n(?:[^\S\n\r]*\r?\n|$))/g);
+	// Parse the body looking for else or endif
+	var reEndString = "\\<\\%\\s*(endif)\\s*\\%\\>|\\<\\%\\s*(else)\\s*\\%\\>|\\<\\%\\s*(elseif)\\s+([\\s\\S]+?)\\%\\>",
+		ex;
+	if(hasLineBreak) {
+		ex = this.parser.parseBlocksTerminatedExtended(reEndString);
+	} else {
+		var reEnd = new RegExp(reEndString,"mg");
+		ex = this.parser.parseInlineRunTerminatedExtended(reEnd,{eatTerminator: true});
+	}
+	// Put the body into the list template
+	listWidget.children[0].children = ex.tree;
+	// Check for an else or elseif
+	if(ex.match) {
+		if(ex.match[1] === "endif") {
+			// Nothing to do if we just found an endif
+		} else if(ex.match[2] === "else") {
+			// Check for an immediately following double linebreak
+			hasLineBreak = !!$tw.utils.parseTokenRegExp(this.parser.source,this.parser.pos,/([^\S\n\r]*\r?\n(?:[^\S\n\r]*\r?\n|$))/g);
+			// If we found an else then we need to parse the body looking for the endif
+			var reEndString = "\\<\\%\\s*(endif)\\s*\\%\\>",
+			ex;
+			if(hasLineBreak) {
+				ex = this.parser.parseBlocksTerminatedExtended(reEndString);
+			} else {
+				var reEnd = new RegExp(reEndString,"mg");
+				ex = this.parser.parseInlineRunTerminatedExtended(reEnd,{eatTerminator: true});
+			}
+			// Put the parsed content inside the list empty template
+			listWidget.children[1].children = ex.tree;
+		} else if(ex.match[3] === "elseif") {
+			// Parse the elseif clause by reusing this parser, passing the new filter condition
+			listWidget.children[1].children = this.parseIfClause(ex.match[4]);
+		}
+	}
+	// Return the parse tree node
+	return [listWidget];
+};
+
+})();

core/modules/parsers/wikiparser/rules/fnprocdef.js

@@ -35,7 +35,7 @@ Instantiate parse rule
 exports.init = function(parser) {
 	this.parser = parser;
 	// Regexp to match
-	this.matchRegExp = /^\\(function|procedure|widget)\s+([^(\s]+)\((\s*([^)]*))?\)(\s*\r?\n)?/mg;
+	this.matchRegExp = /\\(function|procedure|widget)\s+([^(\s]+)\((\s*([^)]*))?\)(\s*\r?\n)?/mg;
 };
 
 /*
@@ -49,11 +49,11 @@ exports.parse = function() {
 	if(this.match[3]) {
 		params = $tw.utils.parseParameterDefinition(this.match[4]);
 	}
-	// Is this a multiline definition?
+	// Is the remainder of the line blank after the parameter close paren?
 	var reEnd;
 	if(this.match[5]) {
-		// If so, the end of the body is marked with \end
-		reEnd = new RegExp("(\\r?\\n\\\\end[^\\S\\n\\r]*(?:" + $tw.utils.escapeRegExp(this.match[2]) + ")?(?:$|\\r?\\n))","mg");
+		// If so, it is a multiline definition and the end of the body is marked with \end
+		reEnd = new RegExp("((:?^|\\r?\\n)[^\\S\\n\\r]*\\\\end[^\\S\\n\\r]*(?:" + $tw.utils.escapeRegExp(this.match[2]) + ")?(?:$|\\r?\\n))","mg");
 	} else {
 		// Otherwise, the end of the definition is marked by the end of the line
 		reEnd = /($|\r?\n)/mg;

core/modules/parsers/wikiparser/rules/macrodef.js

@@ -54,11 +54,11 @@ exports.parse = function() {
 			paramMatch = reParam.exec(paramString);
 		}
 	}
-	// Is this a multiline definition?
+	// Is the remainder of the \define line blank after the parameter close paren?
 	var reEnd;
 	if(this.match[3]) {
-		// If so, the end of the body is marked with \end
-		reEnd = new RegExp("(\\r?\\n[^\\S\\n\\r]*\\\\end[^\\S\\n\\r]*(?:" + $tw.utils.escapeRegExp(this.match[1]) + ")?(?:$|\\r?\\n))","mg");
+		// If so, it is a multiline definition and the end of the body is marked with \end
+		reEnd = new RegExp("((?:^|\\r?\\n)[^\\S\\n\\r]*\\\\end[^\\S\\n\\r]*(?:" + $tw.utils.escapeRegExp(this.match[1]) + ")?(?:$|\\r?\\n))","mg");
 	} else {
 		// Otherwise, the end of the definition is marked by the end of the line
 		reEnd = /($|\r?\n)/mg;

core/modules/parsers/wikiparser/rules/parameters.js

@@ -26,7 +26,7 @@ Instantiate parse rule
 exports.init = function(parser) {
 	this.parser = parser;
 	// Regexp to match
-	this.matchRegExp = /^\\parameters\s*\(([^)]*)\)(\s*\r?\n)?/mg;
+	this.matchRegExp = /\\parameters\s*\(([^)]*)\)(\s*\r?\n)?/mg;
 };
 
 /*

core/modules/parsers/wikiparser/rules/wikilinkprefix.js

@@ -0,0 +1,40 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/wikilinkprefix.js
+type: application/javascript
+module-type: wikirule
+
+Wiki text inline rule for suppressed wiki links. For example:
+
+```
+~SuppressedLink
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "wikilinkprefix";
+exports.types = {inline: true};
+
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = new RegExp($tw.config.textPrimitives.unWikiLink + $tw.config.textPrimitives.wikiLink,"mg");
+};
+
+/*
+Parse the most recent match
+*/
+exports.parse = function() {
+	// Get the details of the match
+	var linkText = this.match[0];
+	// Move past the wikilink
+	this.parser.pos = this.matchRegExp.lastIndex;
+	// Return the link without unwikilink character as plain text
+	return [{type: "text", text: linkText.substr(1)}];
+};
+
+})();

core/modules/parsers/wikiparser/wikiparser.js

@@ -194,6 +194,7 @@ Parse any pragmas at the beginning of a block of parse text
 WikiParser.prototype.parsePragmas = function() {
 	var currentTreeBranch = this.tree;
 	while(true) {
+		var savedPos = this.pos;
 		// Skip whitespace
 		this.skipWhitespace();
 		// Check for the end of the text
@@ -204,6 +205,7 @@ WikiParser.prototype.parsePragmas = function() {
 		var nextMatch = this.findNextMatch(this.pragmaRules,this.pos);
 		// If not, just exit
 		if(!nextMatch || nextMatch.matchIndex !== this.pos) {
+			this.pos = savedPos;
 			break;
 		}
 		// Process the pragma rule
@@ -214,6 +216,8 @@ WikiParser.prototype.parsePragmas = function() {
 			subTree[0].children = [];
 			currentTreeBranch = subTree[0].children;
 		}
+		// Skip whitespace after the pragma
+		this.skipWhitespace();
 	}
 	return currentTreeBranch;
 };
@@ -223,7 +227,7 @@ Parse a block from the current position
 	terminatorRegExpString: optional regular expression string that identifies the end of plain paragraphs. Must not include capturing parenthesis
 */
 WikiParser.prototype.parseBlock = function(terminatorRegExpString) {
-	var terminatorRegExp = terminatorRegExpString ? new RegExp("(" + terminatorRegExpString + "|\\r?\\n\\r?\\n)","mg") : /(\r?\n\r?\n)/mg;
+	var terminatorRegExp = terminatorRegExpString ? new RegExp(terminatorRegExpString + "|\\r?\\n\\r?\\n","mg") : /(\r?\n\r?\n)/mg;
 	this.skipWhitespace();
 	if(this.pos >= this.sourceLength) {
 		return [];
@@ -264,11 +268,21 @@ WikiParser.prototype.parseBlocksUnterminated = function() {
 };
 
 /*
-Parse blocks of text until a terminating regexp is encountered
+Parse blocks of text until a terminating regexp is encountered. Wrapper for parseBlocksTerminatedExtended that just returns the parse tree
 */
 WikiParser.prototype.parseBlocksTerminated = function(terminatorRegExpString) {
-	var terminatorRegExp = new RegExp("(" + terminatorRegExpString + ")","mg"),
-		tree = [];
+	var ex = this.parseBlocksTerminatedExtended(terminatorRegExpString);
+	return ex.tree;
+};
+
+/*
+Parse blocks of text until a terminating regexp is encountered
+*/
+WikiParser.prototype.parseBlocksTerminatedExtended = function(terminatorRegExpString) {
+	var terminatorRegExp = new RegExp(terminatorRegExpString,"mg"),
+		result = {
+			tree: []
+		};
 	// Skip any whitespace
 	this.skipWhitespace();
 	//  Check if we've got the end marker
@@ -277,7 +291,7 @@ WikiParser.prototype.parseBlocksTerminated = function(terminatorRegExpString) {
 	// Parse the text into blocks
 	while(this.pos < this.sourceLength && !(match && match.index === this.pos)) {
 		var blocks = this.parseBlock(terminatorRegExpString);
-		tree.push.apply(tree,blocks);
+		result.tree.push.apply(result.tree,blocks);
 		// Skip any whitespace
 		this.skipWhitespace();
 		//  Check if we've got the end marker
@@ -286,8 +300,9 @@ WikiParser.prototype.parseBlocksTerminated = function(terminatorRegExpString) {
 	}
 	if(match && match.index === this.pos) {
 		this.pos = match.index + match[0].length;
+		result.match = match;
 	}
-	return tree;
+	return result;
 };
 
 /*
@@ -330,6 +345,11 @@ WikiParser.prototype.parseInlineRunUnterminated = function(options) {
 };
 
 WikiParser.prototype.parseInlineRunTerminated = function(terminatorRegExp,options) {
+	var ex = this.parseInlineRunTerminatedExtended(terminatorRegExp,options);
+	return ex.tree;
+};
+
+WikiParser.prototype.parseInlineRunTerminatedExtended = function(terminatorRegExp,options) {
 	options = options || {};
 	var tree = [];
 	// Find the next occurrence of the terminator
@@ -349,7 +369,10 @@ WikiParser.prototype.parseInlineRunTerminated = function(terminatorRegExp,option
 				if(options.eatTerminator) {
 					this.pos += terminatorMatch[0].length;
 				}
-				return tree;
+				return {
+					match: terminatorMatch,
+					tree: tree
+				};
 			}
 		}
 		// Process any inline rule, along with the text preceding it
@@ -373,7 +396,9 @@ WikiParser.prototype.parseInlineRunTerminated = function(terminatorRegExp,option
 		this.pushTextWidget(tree,this.source.substr(this.pos),this.pos,this.sourceLength);
 	}
 	this.pos = this.sourceLength;
-	return tree;
+	return {
+		tree: tree
+	};
 };
 
 /*

core/modules/savers/github.js

@@ -31,7 +31,7 @@ GitHubSaver.prototype.save = function(text,method,callback) {
 		headers = {
 			"Accept": "application/vnd.github.v3+json",
 			"Content-Type": "application/json;charset=UTF-8",
-			"Authorization": "Basic " + window.btoa(username + ":" + password),
+			"Authorization": "Basic " + $tw.utils.base64Encode(username + ":" + password),
 			"If-None-Match": ""
 		};
 	// Bail if we don't have everything we need

core/modules/startup/plugins.js

@@ -15,6 +15,7 @@ Startup logic concerned with managing plugins
 // Export name and synchronous status
 exports.name = "plugins";
 exports.after = ["load-modules"];
+exports.before = ["startup"];
 exports.synchronous = true;
 
 var TITLE_REQUIRE_RELOAD_DUE_TO_PLUGIN_CHANGE = "$:/status/RequireReloadDueToPluginChange";

core/modules/startup/rootwidget.js

@@ -20,6 +20,39 @@ exports.before = ["story"];
 exports.synchronous = true;
 
 exports.startup = function() {
+	// Install the HTTP client event handler
+	$tw.httpClient = new $tw.utils.HttpClient();
+	var getPropertiesWithPrefix = function(properties,prefix) {
+		var result = Object.create(null);
+		$tw.utils.each(properties,function(value,name) {
+			if(name.indexOf(prefix) === 0) {
+				result[name.substring(prefix.length)] = properties[name];
+			}
+		});
+		return result;
+	};
+	$tw.rootWidget.addEventListener("tm-http-request",function(event) {
+		var params = event.paramObject || {};
+		$tw.httpClient.initiateHttpRequest({
+			wiki: event.widget.wiki,
+			url: params.url,
+			method: params.method,
+			body: params.body,
+			binary: params.binary,
+			oncompletion: params.oncompletion,
+			onprogress: params.onprogress,
+			bindStatus: params["bind-status"],
+			bindProgress: params["bind-progress"],
+			variables: getPropertiesWithPrefix(params,"var-"),
+			headers: getPropertiesWithPrefix(params,"header-"),
+			passwordHeaders: getPropertiesWithPrefix(params,"password-header-"),
+			queryStrings: getPropertiesWithPrefix(params,"query-"),
+			passwordQueryStrings: getPropertiesWithPrefix(params,"password-query-")
+		});
+	});
+	$tw.rootWidget.addEventListener("tm-http-cancel-all-requests",function(event) {
+		$tw.httpClient.cancelAllHttpRequests();
+	});
 	// Install the modal message mechanism
 	$tw.modal = new $tw.utils.Modal($tw.wiki);
 	$tw.rootWidget.addEventListener("tm-modal",function(event) {

core/modules/startup/startup.js

@@ -27,6 +27,11 @@ exports.startup = function() {
 	if($tw.browser) {
 		$tw.browser.isIE = (/msie|trident/i.test(navigator.userAgent));
 		$tw.browser.isFirefox = !!document.mozFullScreenEnabled;
+		// 2023-07-21 Edge returns UA below. So we use "isChromeLike"
+		//'mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/114.0.0.0 safari/537.36 edg/114.0.1823.82'
+		$tw.browser.isChromeLike = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
+		$tw.browser.hasTouch = !!window.matchMedia && window.matchMedia("(pointer: coarse)").matches;
+		$tw.browser.isMobileChrome = $tw.browser.isChromeLike && $tw.browser.hasTouch;
 	}
 	// Platform detection
 	$tw.platform = {};

core/modules/startup/windows.js

@@ -40,7 +40,7 @@ exports.startup = function() {
 			variables = $tw.utils.extend({},paramObject,{currentTiddler: title, "tv-window-id": windowID});
 		// Open the window
 		var srcWindow,
-		    srcDocument;
+			srcDocument;
 		// In case that popup blockers deny opening a new window
 		try {
 			srcWindow = window.open("","external-" + windowID,"scrollbars,width=" + width + ",height=" + height + (top ? ",top=" + top : "" ) + (left ? ",left=" + left : "" )),
@@ -52,6 +52,7 @@ exports.startup = function() {
 		$tw.windows[windowID] = srcWindow;
 		// Check for reopening the same window
 		if(srcWindow.haveInitialisedWindow) {
+			srcWindow.focus();
 			return;
 		}
 		// Initialise the document

core/modules/syncer.js

@@ -24,7 +24,7 @@ Syncer.prototype.titleSyncPollingInterval = "$:/config/SyncPollingInterval";
 Syncer.prototype.titleSyncDisableLazyLoading = "$:/config/SyncDisableLazyLoading";
 Syncer.prototype.titleSavedNotification = "$:/language/Notifications/Save/Done";
 Syncer.prototype.titleSyncThrottleInterval = "$:/config/SyncThrottleInterval";
-Syncer.prototype.taskTimerInterval = 1 * 1000; // Interval for sync timer
+Syncer.prototype.taskTimerInterval = 0.25 * 1000; // Interval for sync timer
 Syncer.prototype.throttleInterval = 1 * 1000; // Defer saving tiddlers if they've changed in the last 1s...
 Syncer.prototype.errorRetryInterval = 5 * 1000; // Interval to retry after an error
 Syncer.prototype.fallbackInterval = 10 * 1000; // Unless the task is older than 10s
@@ -74,9 +74,11 @@ function Syncer(options) {
 	this.titlesHaveBeenLazyLoaded = {}; // Hashmap of titles of tiddlers that have already been lazily loaded from the server
 	// Timers
 	this.taskTimerId = null; // Timer for task dispatch
-	this.pollTimerId = null; // Timer for polling server
 	// Number of outstanding requests
 	this.numTasksInProgress = 0;
+	// True when we want to force an immediate sync from the server
+	this.forceSyncFromServer = false;
+	this.timestampLastSyncFromServer = new Date();
 	// Listen out for changes to tiddlers
 	this.wiki.addEventListener("change",function(changes) {
 		// Filter the changes to just include ones that are being synced
@@ -203,33 +205,37 @@ Syncer.prototype.readTiddlerInfo = function() {
 Checks whether the wiki is dirty (ie the window shouldn't be closed)
 */
 Syncer.prototype.isDirty = function() {
-	this.logger.log("Checking dirty status");
-	// Check tiddlers that are in the store and included in the filter function
-	var titles = this.getSyncedTiddlers();
-	for(var index=0; index<titles.length; index++) {
-		var title = titles[index],
-			tiddlerInfo = this.tiddlerInfo[title];
-		if(this.wiki.tiddlerExists(title)) {
-			if(tiddlerInfo) {
-				// If the tiddler is known on the server and has been modified locally then it needs to be saved to the server
-				if(this.wiki.getChangeCount(title) > tiddlerInfo.changeCount) {
+	var self = this;
+	function checkIsDirty() {
+		// Check tiddlers that are in the store and included in the filter function
+		var titles = self.getSyncedTiddlers();
+		for(var index=0; index<titles.length; index++) {
+			var title = titles[index],
+				tiddlerInfo = self.tiddlerInfo[title];
+			if(self.wiki.tiddlerExists(title)) {
+				if(tiddlerInfo) {
+					// If the tiddler is known on the server and has been modified locally then it needs to be saved to the server
+					if(self.wiki.getChangeCount(title) > tiddlerInfo.changeCount) {
+						return true;
+					}
+				} else {
+					// If the tiddler isn't known on the server then it needs to be saved to the server
 					return true;
 				}
-			} else {
-				// If the tiddler isn't known on the server then it needs to be saved to the server
+			}
+		}
+		// Check tiddlers that are known from the server but not currently in the store
+		titles = Object.keys(self.tiddlerInfo);
+		for(index=0; index<titles.length; index++) {
+			if(!self.wiki.tiddlerExists(titles[index])) {
+				// There must be a pending delete
 				return true;
 			}
 		}
+		return false;
 	}
-	// Check tiddlers that are known from the server but not currently in the store
-	titles = Object.keys(this.tiddlerInfo);
-	for(index=0; index<titles.length; index++) {
-		if(!this.wiki.tiddlerExists(titles[index])) {
-			// There must be a pending delete
-			return true;
-		}
-	}
-	return false;
+	var dirtyStatus = checkIsDirty();
+	return dirtyStatus;
 };
 
 /*
@@ -293,92 +299,16 @@ Syncer.prototype.getStatus = function(callback) {
 Synchronise from the server by reading the skinny tiddler list and queuing up loads for any tiddlers that we don't already have up to date
 */
 Syncer.prototype.syncFromServer = function() {
-	var self = this,
-		cancelNextSync = function() {
-			if(self.pollTimerId) {
-				clearTimeout(self.pollTimerId);
-				self.pollTimerId = null;
-			}
-		},
-		triggerNextSync = function() {
-			self.pollTimerId = setTimeout(function() {
-				self.pollTimerId = null;
-				self.syncFromServer.call(self);
-			},self.pollTimerInterval);
-		},
-		syncSystemFromServer = (self.wiki.getTiddlerText("$:/config/SyncSystemTiddlersFromServer") === "yes" ? true : false);
-	if(this.syncadaptor && this.syncadaptor.getUpdatedTiddlers) {
-		this.logger.log("Retrieving updated tiddler list");
-		cancelNextSync();
-		this.syncadaptor.getUpdatedTiddlers(self,function(err,updates) {
-			triggerNextSync();
-			if(err) {
-				self.displayError($tw.language.getString("Error/RetrievingSkinny"),err);
-				return;
-			}
-			if(updates) {
-				$tw.utils.each(updates.modifications,function(title) {
-					self.titlesToBeLoaded[title] = true;
-				});
-				$tw.utils.each(updates.deletions,function(title) {
-					if(syncSystemFromServer || !self.wiki.isSystemTiddler(title)) {
-						delete self.tiddlerInfo[title];
-						self.logger.log("Deleting tiddler missing from server:",title);
-						self.wiki.deleteTiddler(title);
-					}
-				});
-				if(updates.modifications.length > 0 || updates.deletions.length > 0) {
-					self.processTaskQueue();
-				}				
-			}
-		});
-	} else if(this.syncadaptor && this.syncadaptor.getSkinnyTiddlers) {
-		this.logger.log("Retrieving skinny tiddler list");
-		cancelNextSync();
-		this.syncadaptor.getSkinnyTiddlers(function(err,tiddlers) {
-			triggerNextSync();
-			// Check for errors
-			if(err) {
-				self.displayError($tw.language.getString("Error/RetrievingSkinny"),err);
-				return;
-			}
-			// Keep track of which tiddlers we already know about have been reported this time
-			var previousTitles = Object.keys(self.tiddlerInfo);
-			// Process each incoming tiddler
-			for(var t=0; t<tiddlers.length; t++) {
-				// Get the incoming tiddler fields, and the existing tiddler
-				var tiddlerFields = tiddlers[t],
-					incomingRevision = tiddlerFields.revision + "",
-					tiddler = self.wiki.tiddlerExists(tiddlerFields.title) && self.wiki.getTiddler(tiddlerFields.title),
-					tiddlerInfo = self.tiddlerInfo[tiddlerFields.title],
-					currRevision = tiddlerInfo ? tiddlerInfo.revision : null,
-					indexInPreviousTitles = previousTitles.indexOf(tiddlerFields.title);
-				if(indexInPreviousTitles !== -1) {
-					previousTitles.splice(indexInPreviousTitles,1);
-				}
-				// Ignore the incoming tiddler if it's the same as the revision we've already got
-				if(currRevision !== incomingRevision) {
-					// Only load the skinny version if we don't already have a fat version of the tiddler
-					if(!tiddler || tiddler.fields.text === undefined) {
-						self.storeTiddler(tiddlerFields);
-					}
-					// Do a full load of this tiddler
-					self.titlesToBeLoaded[tiddlerFields.title] = true;
-				}
-			}
-			// Delete any tiddlers that were previously reported but missing this time
-			$tw.utils.each(previousTitles,function(title) {
-				if(syncSystemFromServer || !self.wiki.isSystemTiddler(title)) {
-					delete self.tiddlerInfo[title];
-					self.logger.log("Deleting tiddler missing from server:",title);
-					self.wiki.deleteTiddler(title);
-				}
-			});
-			self.processTaskQueue();
-		});
+	if(this.canSyncFromServer()) {
+		this.forceSyncFromServer = true;
+		this.processTaskQueue();	
 	}
 };
 
+Syncer.prototype.canSyncFromServer = function() {
+	return !!this.syncadaptor.getUpdatedTiddlers || !!this.syncadaptor.getSkinnyTiddlers;
+}
+
 /*
 Force load a tiddler from the server
 */
@@ -510,7 +440,7 @@ Syncer.prototype.processTaskQueue = function() {
 				} else {
 					self.updateDirtyStatus();
 					// Process the next task
-					self.processTaskQueue.call(self);					
+					self.processTaskQueue.call(self);
 				}
 			});
 		} else {
@@ -518,31 +448,39 @@ Syncer.prototype.processTaskQueue = function() {
 			this.updateDirtyStatus();
 			// And trigger a timeout if there is a pending task
 			if(task === true) {
-				this.triggerTimeout();				
+				this.triggerTimeout(this.taskTimerInterval);
+			} else if(this.canSyncFromServer()) {
+				this.triggerTimeout(this.pollTimerInterval);
 			}
 		}
 	} else {
-		this.updateDirtyStatus();		
+		this.updateDirtyStatus();
+		this.triggerTimeout(this.taskTimerInterval);
 	}
 };
 
 Syncer.prototype.triggerTimeout = function(interval) {
 	var self = this;
-	if(!this.taskTimerId) {
-		this.taskTimerId = setTimeout(function() {
-			self.taskTimerId = null;
-			self.processTaskQueue.call(self);
-		},interval || self.taskTimerInterval);
+	if(this.taskTimerId) {
+		clearTimeout(this.taskTimerId);
 	}
+	this.taskTimerId = setTimeout(function() {
+		self.taskTimerId = null;
+		self.processTaskQueue.call(self);
+	},interval || self.taskTimerInterval);
 };
 
 /*
-Choose the next sync task. We prioritise saves, then deletes, then loads from the server
+Choose the next sync task. We prioritise saves to the server, then getting updates from the server, then deletes to the server, then loads from the server
 
-Returns either a task object, null if there's no upcoming tasks, or the boolean true if there are pending tasks that aren't yet due
+Returns either:
+* a task object
+* the boolean true if there are pending sync tasks that aren't yet due
+* null if there's no pending sync tasks (just the next poll)
 */
 Syncer.prototype.chooseNextTask = function() {
-	var thresholdLastSaved = (new Date()) - this.throttleInterval,
+	var now = new Date(),
+		thresholdLastSaved = now - this.throttleInterval,
 		havePending = null;
 	// First we look for tiddlers that have been modified locally and need saving back to the server
 	var titles = this.getSyncedTiddlers();
@@ -556,14 +494,18 @@ Syncer.prototype.chooseNextTask = function() {
 				isReadyToSave = !tiddlerInfo || !tiddlerInfo.timestampLastSaved || tiddlerInfo.timestampLastSaved < thresholdLastSaved;
 			if(hasChanged) {
 				if(isReadyToSave) {
-					return new SaveTiddlerTask(this,title); 					
+					return new SaveTiddlerTask(this,title);
 				} else {
 					havePending = true;
 				}
 			}
 		}
 	}
-	// Second, we check tiddlers that are known from the server but not currently in the store, and so need deleting on the server
+	// Second we check for an outstanding sync from server
+	if(this.forceSyncFromServer || (this.timestampLastSyncFromServer && (now.valueOf() >= (this.timestampLastSyncFromServer.valueOf() + this.pollTimerInterval)))) {
+		return new SyncFromServerTask(this);
+	}
+	// Third, we check tiddlers that are known from the server but not currently in the store, and so need deleting on the server
 	titles = Object.keys(this.tiddlerInfo);
 	for(index=0; index<titles.length; index++) {
 		title = titles[index];
@@ -573,13 +515,13 @@ Syncer.prototype.chooseNextTask = function() {
 			return new DeleteTiddlerTask(this,title);
 		}
 	}
-	// Check for tiddlers that need loading
+	// Finally, check for tiddlers that need loading
 	title = Object.keys(this.titlesToBeLoaded)[0];
 	if(title) {
 		delete this.titlesToBeLoaded[title];
 		return new LoadTiddlerTask(this,title);
 	}
-	// No tasks are ready
+	// No tasks are ready now, but might be in the future
 	return havePending;
 };
 
@@ -589,6 +531,10 @@ function SaveTiddlerTask(syncer,title) {
 	this.type = "save";
 }
 
+SaveTiddlerTask.prototype.toString = function() {
+	return "SAVE " + this.title;
+}
+
 SaveTiddlerTask.prototype.run = function(callback) {
 	var self = this,
 		changeCount = this.syncer.wiki.getChangeCount(this.title),
@@ -613,7 +559,6 @@ SaveTiddlerTask.prototype.run = function(callback) {
 			tiddlerInfo: self.syncer.tiddlerInfo[self.title]
 		});
 	} else {
-		this.syncer.logger.log(" Not Dispatching 'save' task:",this.title,"tiddler does not exist");
 		$tw.utils.nextTick(callback(null));
 	}
 };
@@ -624,6 +569,10 @@ function DeleteTiddlerTask(syncer,title) {
 	this.type = "delete";
 }
 
+DeleteTiddlerTask.prototype.toString = function() {
+	return "DELETE " + this.title;
+}
+
 DeleteTiddlerTask.prototype.run = function(callback) {
 	var self = this;
 	this.syncer.logger.log("Dispatching 'delete' task:",this.title);
@@ -647,6 +596,10 @@ function LoadTiddlerTask(syncer,title) {
 	this.type = "load";
 }
 
+LoadTiddlerTask.prototype.toString = function() {
+	return "LOAD " + this.title;
+}
+
 LoadTiddlerTask.prototype.run = function(callback) {
 	var self = this;
 	this.syncer.logger.log("Dispatching 'load' task:",this.title);
@@ -664,6 +617,91 @@ LoadTiddlerTask.prototype.run = function(callback) {
 	});
 };
 
+function SyncFromServerTask(syncer) {
+	this.syncer = syncer;
+	this.type = "syncfromserver";
+}
+
+SyncFromServerTask.prototype.toString = function() {
+	return "SYNCFROMSERVER";
+}
+
+SyncFromServerTask.prototype.run = function(callback) {
+	var self = this;
+	var syncSystemFromServer = (self.syncer.wiki.getTiddlerText("$:/config/SyncSystemTiddlersFromServer") === "yes" ? true : false);
+	var successCallback = function() {
+		self.syncer.forceSyncFromServer = false;
+		self.syncer.timestampLastSyncFromServer = new Date();
+		callback(null);
+	};
+	if(this.syncer.syncadaptor.getUpdatedTiddlers) {
+		this.syncer.syncadaptor.getUpdatedTiddlers(self.syncer,function(err,updates) {
+			if(err) {
+				self.syncer.displayError($tw.language.getString("Error/RetrievingSkinny"),err);
+				return callback(err);
+			}
+			if(updates) {
+				$tw.utils.each(updates.modifications,function(title) {
+					self.syncer.titlesToBeLoaded[title] = true;
+				});
+				$tw.utils.each(updates.deletions,function(title) {
+					if(syncSystemFromServer || !self.syncer.wiki.isSystemTiddler(title)) {
+						delete self.syncer.tiddlerInfo[title];
+						self.syncer.logger.log("Deleting tiddler missing from server:",title);
+						self.syncer.wiki.deleteTiddler(title);
+					}
+				});
+			}
+			return successCallback();
+		});
+	} else if(this.syncer.syncadaptor.getSkinnyTiddlers) {
+		this.syncer.syncadaptor.getSkinnyTiddlers(function(err,tiddlers) {
+			// Check for errors
+			if(err) {
+				self.syncer.displayError($tw.language.getString("Error/RetrievingSkinny"),err);
+				return callback(err);
+			}
+			// Keep track of which tiddlers we already know about have been reported this time
+			var previousTitles = Object.keys(self.syncer.tiddlerInfo);
+			// Process each incoming tiddler
+			for(var t=0; t<tiddlers.length; t++) {
+				// Get the incoming tiddler fields, and the existing tiddler
+				var tiddlerFields = tiddlers[t],
+					incomingRevision = tiddlerFields.revision + "",
+					tiddler = self.syncer.wiki.tiddlerExists(tiddlerFields.title) && self.syncer.wiki.getTiddler(tiddlerFields.title),
+					tiddlerInfo = self.syncer.tiddlerInfo[tiddlerFields.title],
+					currRevision = tiddlerInfo ? tiddlerInfo.revision : null,
+					indexInPreviousTitles = previousTitles.indexOf(tiddlerFields.title);
+				if(indexInPreviousTitles !== -1) {
+					previousTitles.splice(indexInPreviousTitles,1);
+				}
+				// Ignore the incoming tiddler if it's the same as the revision we've already got
+				if(currRevision !== incomingRevision) {
+					// Only load the skinny version if we don't already have a fat version of the tiddler
+					if(!tiddler || tiddler.fields.text === undefined) {
+						self.syncer.storeTiddler(tiddlerFields);
+					}
+					// Do a full load of this tiddler
+					self.syncer.titlesToBeLoaded[tiddlerFields.title] = true;
+				}
+			}
+			// Delete any tiddlers that were previously reported but missing this time
+			$tw.utils.each(previousTitles,function(title) {
+				if(syncSystemFromServer || !self.syncer.wiki.isSystemTiddler(title)) {
+					delete self.syncer.tiddlerInfo[title];
+					self.syncer.logger.log("Deleting tiddler missing from server:",title);
+					self.syncer.wiki.deleteTiddler(title);
+				}
+			});
+			self.syncer.forceSyncFromServer = false;
+			self.syncer.timestampLastSyncFromServer = new Date();
+			return successCallback();
+		});
+	} else {
+		return successCallback();
+	}
+};
+
 exports.Syncer = Syncer;
 
 })();

core/modules/utils/dom/dom.js

@@ -313,7 +313,7 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 			variables["dom-" + attribute.name] = attribute.value.toString();
 		});
 		
-		if(selectedNode.offsetLeft) {
+		if("offsetLeft" in selectedNode) {
 			// Add variables with a (relative and absolute) popup coordinate string for the selected node
 			var nodeRect = {
 				left: selectedNode.offsetLeft,
@@ -338,12 +338,12 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 		}
 	}
 	
-	if(domNode && domNode.offsetWidth) {
+	if(domNode && ("offsetWidth" in domNode)) {
 		variables["tv-widgetnode-width"] = domNode.offsetWidth.toString();
 		variables["tv-widgetnode-height"] = domNode.offsetHeight.toString();
 	}
 
-	if(event && event.clientX && event.clientY) {
+	if(event && ("clientX" in event) && ("clientY" in event)) {
 		if(selectedNode) {
 			// Add variables for event X and Y position relative to selected node
 			selectedNodeRect = selectedNode.getBoundingClientRect();

core/modules/utils/dom/dragndrop.js

@@ -80,7 +80,7 @@ exports.makeDraggable = function(options) {
 				if(dataTransfer.setDragImage) {
 					if(dragImageType === "pill") {
 						dataTransfer.setDragImage(dragImage.firstChild,-16,-16);
-					} else if (dragImageType === "blank") {
+					} else if(dragImageType === "blank") {
 						dragImage.removeChild(dragImage.firstChild);
 						dataTransfer.setDragImage(dragImage,0,0);
 					} else {
@@ -106,7 +106,9 @@ exports.makeDraggable = function(options) {
 					dataTransfer.setData("text/vnd.tiddler",jsonData);
 					dataTransfer.setData("text/plain",titleString);
 					dataTransfer.setData("text/x-moz-url","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
-				} else {
+				}
+				// If browser is Chrome-like and has a touch-input device do NOT .setData
+				if(!($tw.browser.isMobileChrome)) {
 					dataTransfer.setData("URL","data:text/vnd.tiddler," + encodeURIComponent(jsonData));
 				}
 				dataTransfer.setData("Text",titleString);

core/modules/utils/dom/http.js

@@ -3,7 +3,7 @@ title: $:/core/modules/utils/dom/http.js
 type: application/javascript
 module-type: utils
 
-Browser HTTP support
+HTTP support
 
 \*/
 (function(){
@@ -13,12 +13,220 @@ Browser HTTP support
 "use strict";
 
 /*
-A quick and dirty HTTP function; to be refactored later. Options are:
+Manage tm-http-request events. Options include:
+wiki: Reference to the wiki to be used for state tiddler tracking
+stateTrackerTitle: Title of tiddler to be used for state tiddler tracking
+*/
+function HttpClient(options) {
+	options = options || {};
+	this.nextId = 1;
+	this.wiki = options.wiki || $tw.wiki;
+	this.stateTrackerTitle = options.stateTrackerTitle || "$:/state/http-requests";
+	this.requests = []; // Array of {id: string,request: HttpClientRequest}
+	this.updateRequestTracker();
+}
+
+/*
+Return the index into this.requests[] corresponding to a given ID. Returns null if not found
+*/
+HttpClient.prototype.getRequestIndex = function(targetId) {
+	var targetIndex = null;
+	$tw.utils.each(this.requests,function(requestInfo,index) {
+		if(requestInfo.id === targetId) {
+			targetIndex = index;
+		}
+	});
+	return targetIndex;
+};
+
+/*
+Update the state tiddler that is tracking the outstanding requests
+*/
+HttpClient.prototype.updateRequestTracker = function() {
+	this.wiki.addTiddler({title: this.stateTrackerTitle, text: "" + this.requests.length});
+};
+
+HttpClient.prototype.initiateHttpRequest = function(options) {
+	var self = this,
+		id = this.nextId,
+		request = new HttpClientRequest(options);
+	this.nextId += 1;
+	this.requests.push({id: id, request: request});
+	this.updateRequestTracker();
+	request.send(function(err) {
+		var targetIndex = self.getRequestIndex(id);
+		if(targetIndex !== null) {
+			self.requests.splice(targetIndex,1);
+			self.updateRequestTracker();
+		}
+	});
+	return id;
+};
+
+HttpClient.prototype.cancelAllHttpRequests = function() {
+	var self = this;
+	if(this.requests.length > 0) {
+		for(var t=this.requests.length - 1; t--; t>=0) {
+			var requestInfo = this.requests[t];
+			requestInfo.request.cancel();
+		}	
+	}
+	this.requests = [];
+	this.updateRequestTracker();
+};
+
+HttpClient.prototype.cancelHttpRequest = function(targetId) {
+	var targetIndex = this.getRequestIndex(targetId);
+	if(targetIndex !== null) {
+		this.requests[targetIndex].request.cancel();
+		this.requests.splice(targetIndex,1);
+		this.updateRequestTracker();
+	}
+};
+
+/*
+Initiate an HTTP request. Options:
+wiki: wiki to be used for executing action strings
+url: URL for request
+method: method eg GET, POST
+body: text of request body
+binary: set to "yes" to force binary processing of response payload
+oncompletion: action string to be invoked on completion
+onprogress: action string to be invoked on progress updates
+bindStatus: optional title of tiddler to which status ("pending", "complete", "error") should be written
+bindProgress: optional title of tiddler to which the progress of the request (0 to 100) should be bound
+variables: hashmap of variable name to string value passed to action strings
+headers: hashmap of header name to header value to be sent with the request
+passwordHeaders: hashmap of header name to password store name to be sent with the request
+queryStrings: hashmap of query string parameter name to parameter value to be sent with the request
+passwordQueryStrings: hashmap of query string parameter name to password store name to be sent with the request
+*/
+function HttpClientRequest(options) {
+	var self = this;
+	console.log("Initiating an HTTP request",options)
+	this.wiki = options.wiki;
+	this.completionActions = options.oncompletion;
+	this.progressActions = options.onprogress;
+	this.bindStatus = options["bindStatus"];
+	this.bindProgress = options["bindProgress"];
+	this.method = options.method || "GET";
+	this.body = options.body || "";
+	this.binary = options.binary || "";
+	this.variables = options.variables;
+	var url = options.url;
+	$tw.utils.each(options.queryStrings,function(value,name) {
+		url = $tw.utils.setQueryStringParameter(url,name,value);
+	});
+	$tw.utils.each(options.passwordQueryStrings,function(value,name) {
+		url = $tw.utils.setQueryStringParameter(url,name,$tw.utils.getPassword(value) || "");
+	});
+	this.url = url;
+	this.requestHeaders = {};
+	$tw.utils.each(options.headers,function(value,name) {
+		self.requestHeaders[name] = value;
+	});
+	$tw.utils.each(options.passwordHeaders,function(value,name) {
+		self.requestHeaders[name] = $tw.utils.getPassword(value) || "";
+	});
+}
+
+HttpClientRequest.prototype.send = function(callback) {
+	var self = this,
+		setBinding = function(title,text) {
+			if(title) {
+				self.wiki.addTiddler(new $tw.Tiddler({title: title, text: text}));
+			}
+		};
+	if(this.url) {
+		setBinding(this.bindStatus,"pending");
+		setBinding(this.bindProgress,"0");
+		// Set the request tracker tiddler
+		var requestTrackerTitle = this.wiki.generateNewTitle("$:/temp/HttpRequest");
+		this.wiki.addTiddler({
+			title: requestTrackerTitle,
+			tags: "$:/tags/HttpRequest",
+			text: JSON.stringify({
+				url: this.url,
+				type: this.method,
+				status: "inprogress",
+				headers: this.requestHeaders,
+				data: this.body
+			})
+		});
+		this.xhr = $tw.utils.httpRequest({
+			url: this.url,
+			type: this.method,
+			headers: this.requestHeaders,
+			data: this.body,
+			returnProp: this.binary === "" ? "responseText" : "response",
+			responseType: this.binary === "" ? "text" : "arraybuffer",
+			callback: function(err,data,xhr) {
+				var hasSucceeded = xhr.status >= 200 && xhr.status < 300,
+					completionCode = hasSucceeded ? "complete" : "error",
+					headers = {};
+				$tw.utils.each(xhr.getAllResponseHeaders().split("\r\n"),function(line) {
+					var pos = line.indexOf(":");
+					if(pos !== -1) {
+						headers[line.substr(0,pos)] = line.substr(pos + 1).trim();
+					}
+				});
+				setBinding(self.bindStatus,completionCode);
+				setBinding(self.bindProgress,"100");
+				var resultVariables = {
+					status: xhr.status.toString(),
+					statusText: xhr.statusText,
+					error: (err || "").toString(),
+					data: (data || "").toString(),
+					headers: JSON.stringify(headers)
+				};
+				/* Convert data from binary to base64 */
+				if (xhr.responseType === "arraybuffer") {
+					var binary = "",
+						bytes = new Uint8Array(data),
+						len = bytes.byteLength;
+					for (var i=0; i<len; i++) {
+						binary += String.fromCharCode(bytes[i]);
+					}
+					resultVariables.data = $tw.utils.base64Encode(binary,true);
+				}
+				self.wiki.addTiddler(new $tw.Tiddler(self.wiki.getTiddler(requestTrackerTitle),{
+					status: completionCode,
+				}));
+				self.wiki.invokeActionString(self.completionActions,undefined,$tw.utils.extend({},self.variables,resultVariables),{parentWidget: $tw.rootWidget});
+				callback(hasSucceeded ? null : xhr.statusText);
+				// console.log("Back!",err,data,xhr);
+			},
+			progress: function(lengthComputable,loaded,total) {
+				if(lengthComputable) {
+					setBinding(self.bindProgress,"" + Math.floor((loaded/total) * 100))
+				}
+				self.wiki.invokeActionString(self.progressActions,undefined,{
+					lengthComputable: lengthComputable ? "yes" : "no",
+					loaded: loaded,
+					total: total
+				},{parentWidget: $tw.rootWidget});
+			}
+		});
+	}
+};
+
+HttpClientRequest.prototype.cancel = function() {
+	if(this.xhr) {
+		this.xhr.abort();
+	}
+};
+
+exports.HttpClient = HttpClient;
+
+/*
+Make an HTTP request. Options are:
 	url: URL to retrieve
 	headers: hashmap of headers to send
 	type: GET, PUT, POST etc
 	callback: function invoked with (err,data,xhr)
+	progress: optional function invoked with (lengthComputable,loaded,total)
 	returnProp: string name of the property to return as first argument of callback
+	responseType: "text" or "arraybuffer"
 */
 exports.httpRequest = function(options) {
 	var type = options.type || "GET",
@@ -71,6 +279,7 @@ exports.httpRequest = function(options) {
 			}
 		}
 	}
+	request.responseType = options.responseType || "text";
 	// Set up the state change handler
 	request.onreadystatechange = function() {
 		if(this.readyState === 4) {
@@ -80,11 +289,19 @@ exports.httpRequest = function(options) {
 				return;
 			}
 		// Something went wrong
-		options.callback($tw.language.getString("Error/XMLHttpRequest") + ": " + this.status,null,this);
+		options.callback($tw.language.getString("Error/XMLHttpRequest") + ": " + this.status,this[returnProp],this);
 		}
 	};
+	// Handle progress
+	if(options.progress) {
+		request.onprogress = function(event) {
+			console.log("Progress event",event)
+			options.progress(event.lengthComputable,event.loaded,event.total);
+		};
+	}
 	// Make the request
 	request.open(type,url,true);
+	// Headers
 	if(headers) {
 		$tw.utils.each(headers,function(header,headerTitle,object) {
 			request.setRequestHeader(headerTitle,header);
@@ -96,6 +313,7 @@ exports.httpRequest = function(options) {
 	if(!hasHeader("X-Requested-With") && !isSimpleRequest(type,headers)) {
 		request.setRequestHeader("X-Requested-With","TiddlyWiki");
 	}
+	// Send data
 	try {
 		request.send(data);
 	} catch(e) {
@@ -104,4 +322,19 @@ exports.httpRequest = function(options) {
 	return request;
 };
 
+exports.setQueryStringParameter = function(url,paramName,paramValue) {
+	var URL = $tw.browser ? window.URL : require("url").URL,
+		newUrl;
+	try {
+		newUrl = new URL(url);
+	} catch(e) {
+	}
+	if(newUrl && paramName) {
+		newUrl.searchParams.set(paramName,paramValue || "");
+		return newUrl.toString();
+	} else {
+		return url;
+	}
+};
+
 })();

core/modules/utils/fakedom.js

@@ -104,7 +104,11 @@ TW_Element.prototype.setAttribute = function(name,value) {
 	if(this.isRaw) {
 		throw "Cannot setAttribute on a raw TW_Element";
 	}
-	this.attributes[name] = value + "";
+	if(name === "style") {
+		this.style = value;
+	} else {
+		this.attributes[name] = value + "";
+	}
 };
 
 TW_Element.prototype.setAttributeNS = function(namespace,name,value) {

core/modules/utils/utils.js

@@ -819,18 +819,41 @@ exports.hashString = function(str) {
 	},0);
 };
 
+/*
+Base64 utility functions that work in either browser or Node.js
+*/
+if(typeof window !== 'undefined') {
+	exports.btoa = function(binstr) { return window.btoa(binstr); }
+	exports.atob = function(b64) { return window.atob(b64); }
+} else {
+	exports.btoa = function(binstr) {
+		return Buffer.from(binstr, 'binary').toString('base64');
+	}
+	exports.atob = function(b64) {
+		return Buffer.from(b64, 'base64').toString('binary');
+	}
+}
+
 /*
 Decode a base64 string
 */
-exports.base64Decode = function(string64) {
-	return base64utf8.base64.decode.call(base64utf8,string64);
+exports.base64Decode = function(string64,binary,urlsafe) {
+	var encoded = urlsafe ? string64.replace(/_/g,'/').replace(/-/g,'+') : string64;
+	if(binary) return exports.atob(encoded)
+	else return base64utf8.base64.decode.call(base64utf8,encoded);
 };
 
 /*
 Encode a string to base64
 */
-exports.base64Encode = function(string64) {
-	return base64utf8.base64.encode.call(base64utf8,string64);
+exports.base64Encode = function(string64,binary,urlsafe) {
+	var encoded;
+	if(binary) encoded = exports.btoa(string64);
+	else encoded = base64utf8.base64.encode.call(base64utf8,string64);
+	if(urlsafe) {
+		encoded = encoded.replace(/\+/g,'-').replace(/\//g,'_');
+	}
+	return encoded;
 };
 
 /*

core/modules/widgets/browse.js

@@ -70,6 +70,11 @@ BrowseWidget.prototype.render = function(parent,nextSibling) {
 		}
 		return false;
 	},false);
+	// Assign data- attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -95,6 +100,11 @@ BrowseWidget.prototype.execute = function() {
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 BrowseWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if($tw.utils.count(changedAttributes) > 0) {
+		this.refreshSelf();
+		return true;	
+	}
 	return false;
 };
 

core/modules/widgets/button.js

@@ -59,6 +59,11 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 		$tw.utils.pushTop(classes,"tc-popup-handle");
 	}
 	domNode.className = classes.join(" ");
+	// Assign data- attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Assign other attributes
 	if(this.style) {
 		domNode.setAttribute("style",this.style);
@@ -250,7 +255,7 @@ ButtonWidget.prototype.updateDomNodeClasses = function() {
 	//Add new classes from updated class attribute.
 	$tw.utils.pushTop(domNodeClasses,newClasses);
 	this.domNode.className = domNodeClasses.join(" ");
-}
+};
 
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
@@ -260,8 +265,15 @@ ButtonWidget.prototype.refresh = function(changedTiddlers) {
 	if(changedAttributes.actions || changedAttributes.to || changedAttributes.message || changedAttributes.param || changedAttributes.set || changedAttributes.setTo || changedAttributes.popup || changedAttributes.hover || changedAttributes.selectedClass || changedAttributes.style || changedAttributes.dragFilter || changedAttributes.dragTiddler || (this.set && changedTiddlers[this.set]) || (this.popup && changedTiddlers[this.popup]) || (this.popupTitle && changedTiddlers[this.popupTitle]) || changedAttributes.popupAbsCoords || changedAttributes.setTitle || changedAttributes.setField || changedAttributes.setIndex || changedAttributes.popupTitle || changedAttributes.disabled || changedAttributes["default"]) {
 		this.refreshSelf();
 		return true;
-	} else if(changedAttributes["class"]) {
-		this.updateDomNodeClasses();
+	} else {
+		if(changedAttributes["class"]) {
+			this.updateDomNodeClasses();
+		}
+		this.assignAttributes(this.domNodes[0],{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 	}
 	return this.refreshChildren(changedTiddlers);
 };

core/modules/widgets/checkbox.js

@@ -53,6 +53,11 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
 	this.labelDomNode.appendChild(this.inputDomNode);
 	this.spanDomNode = this.document.createElement("span");
 	this.labelDomNode.appendChild(this.spanDomNode);
+	// Assign data- attributes
+	this.assignAttributes(this.inputDomNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Add a click event handler
 	$tw.utils.addEventListeners(this.inputDomNode,[
 		{name: "change", handlerObject: this, handlerMethod: "handleChangeEvent"}
@@ -116,7 +121,7 @@ CheckboxWidget.prototype.getValue = function() {
 				} else {
 					list = $tw.utils.parseStringArray(this.checkboxDefault || "") || [];
 				}
-			} else if (this.checkboxListIndex) {
+			} else if(this.checkboxListIndex) {
 				list = $tw.utils.parseStringArray(this.wiki.extractTiddlerDataItem(tiddler,this.checkboxListIndex,this.checkboxDefault || "")) || [];
 			} else {
 				list = this.wiki.filterTiddlers(this.checkboxFilter,this) || [];
@@ -215,6 +220,8 @@ CheckboxWidget.prototype.handleChangeEvent = function(event) {
 		if($tw.utils.isArray(fieldContents)) {
 			// Make a copy so we can modify it without changing original that's refrenced elsewhere
 			listContents = fieldContents.slice(0);
+		} else if(fieldContents === undefined) {
+			listContents = [];
 		} else if(typeof fieldContents === "string") {
 			listContents = $tw.utils.parseStringArray(fieldContents);
 			// No need to copy since parseStringArray returns a fresh array, not refrenced elsewhere
@@ -323,6 +330,11 @@ CheckboxWidget.prototype.refresh = function(changedTiddlers) {
 				$tw.utils.removeClass(this.labelDomNode,"tc-checkbox-checked");
 			}
 		}
+		this.assignAttributes(this.inputDomNode,{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 		return this.refreshChildren(changedTiddlers) || refreshed;
 	}
 };
@@ -330,3 +342,4 @@ CheckboxWidget.prototype.refresh = function(changedTiddlers) {
 exports.checkbox = CheckboxWidget;
 
 })();
+	

core/modules/widgets/draggable.js

@@ -52,6 +52,11 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 		classes.push("tc-draggable");
 	}
 	domNode.setAttribute("class",classes.join(" "));
+	// Assign data- attributes and style. attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Insert the node into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -108,13 +113,19 @@ DraggableWidget.prototype.updateDomNodeClasses = function() {
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 DraggableWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes(),
-		changedAttributesCount = $tw.utils.count(changedAttributes);
-	if(changedAttributesCount === 1 && changedAttributes["class"]) {
-		this.updateDomNodeClasses();
-	} else if(changedAttributesCount > 0) {
+	var changedAttributes = this.computeAttributes();
+	if(changedAttributes.tag || changedAttributes.selector || changedAttributes.dragimagetype || changedAttributes.enable || changedAttributes.startactions || changedAttributes.endactions) {
 		this.refreshSelf();
 		return true;
+	} else {
+		if(changedAttributes["class"]) {
+			this.assignDomNodeClasses();
+		}
+		this.assignAttributes(this.domNodes[0],{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 	}
 	return this.refreshChildren(changedTiddlers);
 };

core/modules/widgets/droppable.js

@@ -42,6 +42,11 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
 	domNode = this.document.createElement(tag);
 	this.domNode = domNode;
 	this.assignDomNodeClasses();
+	// Assign data- attributes and style. attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Add event handlers
 	if(this.droppableEnable) {
 		$tw.utils.addEventListeners(domNode,[
@@ -166,8 +171,15 @@ DroppableWidget.prototype.refresh = function(changedTiddlers) {
 	if(changedAttributes.tag || changedAttributes.enable || changedAttributes.disabledClass || changedAttributes.actions || changedAttributes.effect) {
 		this.refreshSelf();
 		return true;
-	} else if(changedAttributes["class"]) {
-		this.assignDomNodeClasses();
+	} else {
+		if(changedAttributes["class"]) {
+			this.assignDomNodeClasses();
+		}
+		this.assignAttributes(this.domNodes[0],{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 	}
 	return this.refreshChildren(changedTiddlers);
 };

core/modules/widgets/edit.js

@@ -90,7 +90,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 EditWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// Refresh if an attribute has changed, or the type associated with the target tiddler has changed
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || (changedTiddlers[this.editTitle] && this.getEditorType() !== this.editorType)) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || (this.getEditorType() !== this.editorType)) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/image.js

@@ -58,24 +58,25 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 		if(this.wiki.isImageTiddler(this.imageSource)) {
 			var type = tiddler.fields.type,
 				text = tiddler.fields.text,
-				_canonical_uri = tiddler.fields._canonical_uri;
+				_canonical_uri = tiddler.fields._canonical_uri,
+				typeInfo = $tw.config.contentTypeInfo[type] || {},
+				deserializerType = typeInfo.deserializerType || type;
 			// If the tiddler has body text then it doesn't need to be lazily loaded
 			if(text) {
-				// Render the appropriate element for the image type
-				switch(type) {
-					case "application/pdf":
+				// Render the appropriate element for the image type by looking up the encoding in the content type info
+				var encoding = typeInfo.encoding || "utf8";
+				if (encoding === "base64") {
+					// .pdf .png .jpg etc.
+					src = "data:" + deserializerType + ";base64," + text;
+					if (deserializerType === "application/pdf") {
 						tag = "embed";
-						src = "data:application/pdf;base64," + text;
-						break;
-					case "image/svg+xml":
-						src = "data:image/svg+xml," + encodeURIComponent(text);
-						break;
-					default:
-						src = "data:" + type + ";base64," + text;
-						break;
+					}
+				} else {
+					// .svg .tid .xml etc.
+					src = "data:" + deserializerType + "," + encodeURIComponent(text);
 				}
 			} else if(_canonical_uri) {
-				switch(type) {
+				switch(deserializerType) {
 					case "application/pdf":
 						tag = "embed";
 						src = _canonical_uri;
@@ -99,6 +100,9 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	if(this.imageClass) {
 		domNode.setAttribute("class",this.imageClass);
 	}
+	if(this.imageUsemap) {
+	    	domNode.setAttribute("usemap",this.imageUsemap);
+	}
 	if(this.imageWidth) {
 		domNode.setAttribute("width",this.imageWidth);
 	}
@@ -138,6 +142,7 @@ ImageWidget.prototype.execute = function() {
 	this.imageWidth = this.getAttribute("width");
 	this.imageHeight = this.getAttribute("height");
 	this.imageClass = this.getAttribute("class");
+    	this.imageUsemap = this.getAttribute("usemap");
 	this.imageTooltip = this.getAttribute("tooltip");
 	this.imageAlt = this.getAttribute("alt");
 	this.lazyLoading = this.getAttribute("loading");
@@ -148,7 +153,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 ImageWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.tooltip || changedTiddlers[this.imageSource]) {
+	if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource]) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/importvariables.js

@@ -49,7 +49,7 @@ ImportVariablesWidget.prototype.execute = function(tiddlerList) {
 	this.tiddlerList = tiddlerList || this.wiki.filterTiddlers(this.filter,this);
 	// Accumulate the <$set> widgets from each tiddler
 	$tw.utils.each(this.tiddlerList,function(title) {
-		var parser = widgetPointer.wiki.parseTiddler(title,{parseAsInline:true});
+		var parser = widgetPointer.wiki.parseTiddler(title,{parseAsInline:true, configTrimWhiteSpace:true});
 		if(parser) {
 			var parseTreeNode = parser.tree[0];
 			while(parseTreeNode && ["setvariable","set","parameters"].indexOf(parseTreeNode.type) !== -1) {

core/modules/widgets/link.js

@@ -43,6 +43,11 @@ LinkWidget.prototype.render = function(parent,nextSibling) {
 	} else {
 		// Just insert the link text
 		var domNode = this.document.createElement("span");
+		// Assign data- attributes
+		this.assignAttributes(domNode,{
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 		parent.insertBefore(domNode,nextSibling);
 		this.renderChildren(domNode,null);
 		this.domNodes.push(domNode);
@@ -138,6 +143,11 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 			widget: this
 		});
 	}
+	// Assign data- attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Insert the link into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -145,6 +155,8 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 };
 
 LinkWidget.prototype.handleClickEvent = function(event) {
+	// Force an error to try out the Red Screen Of Embarrassment
+	var something = Everything;
 	// Send the click on its way as a navigate event
 	var bounds = this.domNodes[0].getBoundingClientRect();
 	this.dispatchEvent({
@@ -207,8 +219,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 LinkWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.to || changedTiddlers[this.to] || changedAttributes["aria-label"] || changedAttributes.tooltip ||
-		changedAttributes["class"] || changedAttributes.tabindex || changedAttributes.draggable || changedAttributes.tag) {
+	if($tw.utils.count(changedAttributes) > 0 || changedTiddlers[this.to]) {
 		this.refreshSelf();
 		return true;
 	}
@@ -218,3 +229,4 @@ LinkWidget.prototype.refresh = function(changedTiddlers) {
 exports.link = LinkWidget;
 
 })();
+	

core/modules/widgets/list.js

@@ -28,6 +28,18 @@ Inherit from the base widget class
 */
 ListWidget.prototype = new Widget();
 
+ListWidget.prototype.initialise = function(parseTreeNode,options) {
+	// Bail if parseTreeNode is undefined, meaning that the ListWidget constructor was called without any arguments so that it can be subclassed
+	if(parseTreeNode === undefined) {
+		return;
+	}
+	// First call parent constructor to set everything else up
+	Widget.prototype.initialise.call(this,parseTreeNode,options);
+	// Now look for <$list-template> and <$list-empty> widgets as immediate child widgets
+	// This is safe to do during initialization because parse trees never change after creation
+	this.findExplicitTemplates();
+}
+
 /*
 Render this widget into the DOM
 */
@@ -38,8 +50,8 @@ ListWidget.prototype.render = function(parent,nextSibling) {
 		$tw.modules.applyMethods("storyview",this.storyViews);
 	}
 	this.parentDomNode = parent;
-	this.computeAttributes();
-	this.execute();
+	var changedAttributes = this.computeAttributes();
+	this.execute(changedAttributes);
 	this.renderChildren(parent,nextSibling);
 	// Construct the storyview
 	var StoryView = this.storyViews[this.storyViewName];
@@ -59,7 +71,8 @@ ListWidget.prototype.render = function(parent,nextSibling) {
 /*
 Compute the internal state of the widget
 */
-ListWidget.prototype.execute = function() {
+ListWidget.prototype.execute = function(changedAttributes) {
+	var self = this;
 	// Get our attributes
 	this.template = this.getAttribute("template");
 	this.editTemplate = this.getAttribute("editTemplate");
@@ -67,6 +80,10 @@ ListWidget.prototype.execute = function() {
 	this.counterName = this.getAttribute("counter");
 	this.storyViewName = this.getAttribute("storyview");
 	this.historyTitle = this.getAttribute("history");
+	// Create join template only if needed
+	if(this.join === undefined || (changedAttributes && changedAttributes.join)) {
+		this.join = this.makeJoinTemplate();
+	}
 	// Compose the list elements
 	this.list = this.getTiddlerList();
 	var members = [],
@@ -85,18 +102,57 @@ ListWidget.prototype.execute = function() {
 	this.history = [];
 };
 
+ListWidget.prototype.findExplicitTemplates = function() {
+	var self = this;
+	this.explicitListTemplate = null;
+	this.explicitEmptyTemplate = null;
+	this.explicitJoinTemplate = null;
+	this.hasTemplateInBody = false;
+	var searchChildren = function(childNodes) {
+		var foundInlineTemplate = false;
+		$tw.utils.each(childNodes,function(node) {
+			if(node.type === "list-template") {
+				self.explicitListTemplate = node.children;
+			} else if(node.type === "list-empty") {
+				self.explicitEmptyTemplate = node.children;
+			} else if(node.type === "list-join") {
+				self.explicitJoinTemplate = node.children;
+			} else if(node.type === "element" && node.tag === "p") {
+				searchChildren(node.children);
+				foundInlineTemplate = true;
+			} else {
+				foundInlineTemplate = true;
+			}
+		});
+		return foundInlineTemplate;
+	};
+	this.hasTemplateInBody = searchChildren(this.parseTreeNode.children);
+}
+
 ListWidget.prototype.getTiddlerList = function() {
+	var limit = $tw.utils.getInt(this.getAttribute("limit",""),undefined);
 	var defaultFilter = "[!is[system]sort[title]]";
-	return this.wiki.filterTiddlers(this.getAttribute("filter",defaultFilter),this);
+	var results = this.wiki.filterTiddlers(this.getAttribute("filter",defaultFilter),this);
+	if(limit !== undefined) {
+		if(limit >= 0) {
+			results = results.slice(0,limit);
+		} else {
+			results = results.slice(limit);
+		}
+	}
+	return results;
 };
 
 ListWidget.prototype.getEmptyMessage = function() {
 	var parser,
-		emptyMessage = this.getAttribute("emptyMessage","");
-	// this.wiki.parseText() calls 
-	// new Parser(..), which should only be done, if needed, because it's heavy!
-	if (emptyMessage === "") {
-		return [];
+		emptyMessage = this.getAttribute("emptyMessage");
+	// If emptyMessage attribute is not present or empty then look for an explicit empty template
+	if(!emptyMessage) {
+		if(this.explicitEmptyTemplate) {
+			return this.explicitEmptyTemplate;
+		} else {
+			return [];
+		}
 	}
 	parser = this.wiki.parseText("text/vnd.tiddlywiki",emptyMessage,{parseAsInline: true});
 	if(parser) {
@@ -106,6 +162,24 @@ ListWidget.prototype.getEmptyMessage = function() {
 	}
 };
 
+/*
+Compose the template for a join between list items
+*/
+ListWidget.prototype.makeJoinTemplate = function() {
+	var parser,
+		join = this.getAttribute("join","");
+	if(join) {
+		parser = this.wiki.parseText("text/vnd.tiddlywiki",join,{parseAsInline:true})
+		if(parser) {
+			return parser.tree;
+		} else {
+			return [];
+		}
+	} else {
+		return this.explicitJoinTemplate; // May be null, and that's fine
+	}
+};
+
 /*
 Compose the template for a list item
 */
@@ -114,6 +188,7 @@ ListWidget.prototype.makeItemTemplate = function(title,index) {
 	var tiddler = this.wiki.getTiddler(title),
 		isDraft = tiddler && tiddler.hasField("draft.of"),
 		template = this.template,
+		join = this.join,
 		templateTree;
 	if(isDraft && this.editTemplate) {
 		template = this.editTemplate;
@@ -122,22 +197,29 @@ ListWidget.prototype.makeItemTemplate = function(title,index) {
 	if(template) {
 		templateTree = [{type: "transclude", attributes: {tiddler: {type: "string", value: template}}}];
 	} else {
+		// Check for child nodes of the list widget
 		if(this.parseTreeNode.children && this.parseTreeNode.children.length > 0) {
-			templateTree = this.parseTreeNode.children;
-		} else {
+			// Check for a <$list-item> widget
+			if(this.explicitListTemplate) {
+				templateTree = this.explicitListTemplate;
+			} else if(this.hasTemplateInBody) {
+				templateTree = this.parseTreeNode.children;
+			}
+		}
+		if(!templateTree || templateTree.length === 0) {
 			// Default template is a link to the title
 			templateTree = [{type: "element", tag: this.parseTreeNode.isBlock ? "div" : "span", children: [{type: "link", attributes: {to: {type: "string", value: title}}, children: [
-					{type: "text", text: title}
+				{type: "text", text: title}
 			]}]}];
 		}
 	}
 	// Return the list item
-	var parseTreeNode = {type: "listitem", itemTitle: title, variableName: this.variableName, children: templateTree};
+	var parseTreeNode = {type: "listitem", itemTitle: title, variableName: this.variableName, children: templateTree, join: join};
+	parseTreeNode.isLast = index === this.list.length - 1;
 	if(this.counterName) {
 		parseTreeNode.counter = (index + 1).toString();
 		parseTreeNode.counterName = this.counterName;
 		parseTreeNode.isFirst = index === 0;
-		parseTreeNode.isLast = index === this.list.length - 1;
 	}
 	return parseTreeNode;
 };
@@ -153,7 +235,7 @@ ListWidget.prototype.refresh = function(changedTiddlers) {
 		this.storyview.refreshStart(changedTiddlers,changedAttributes);
 	}
 	// Completely refresh if any of our attributes have changed
-	if(changedAttributes.filter || changedAttributes.variable || changedAttributes.counter || changedAttributes.template || changedAttributes.editTemplate || changedAttributes.emptyMessage || changedAttributes.storyview || changedAttributes.history) {
+	if(changedAttributes.filter || changedAttributes.variable || changedAttributes.counter || changedAttributes.template || changedAttributes.editTemplate || changedAttributes.join || changedAttributes.emptyMessage || changedAttributes.storyview || changedAttributes.history) {
 		this.refreshSelf();
 		result = true;
 	} else {
@@ -225,6 +307,8 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 		// If we are providing an counter variable then we must refresh the items, otherwise we can rearrange them
 		var hasRefreshed = false,t;
 		if(this.counterName) {
+			var mustRefreshOldLast = false;
+			var oldLength = this.children.length;
 			// Cycle through the list and remove and re-insert the first item that has changed, and all the remaining items
 			for(t=0; t<this.list.length; t++) {
 				if(hasRefreshed || !this.children[t] || this.children[t].parseTreeNode.itemTitle !== this.list[t]) {
@@ -232,6 +316,9 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 						this.removeListItem(t);
 					}
 					this.insertListItem(t,this.list[t]);
+					if(!hasRefreshed && t === oldLength) {
+						mustRefreshOldLast = true;
+					}
 					hasRefreshed = true;
 				} else {
 					// Refresh the item we're reusing
@@ -239,6 +326,12 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 					hasRefreshed = hasRefreshed || refreshed;
 				}
 			}
+			// If items were inserted then we must recreate the item that used to be at the last position as it is no longer last
+			if(mustRefreshOldLast && oldLength > 0) {
+				var oldLastIdx = oldLength-1;
+				this.removeListItem(oldLastIdx);
+				this.insertListItem(oldLastIdx,this.list[oldLastIdx]);
+			}
 			// If there are items to remove and we have not refreshed then recreate the item that will now be at the last position
 			if(!hasRefreshed && this.children.length > this.list.length) {
 				this.removeListItem(this.list.length-1);
@@ -246,10 +339,29 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 			}
 		} else {
 			// Cycle through the list, inserting and removing list items as needed
+			var mustRecreateLastItem = false;
+			if(this.join && this.join.length) {
+				if(this.children.length !== this.list.length) {
+						mustRecreateLastItem = true;
+				} else if(prevList[prevList.length-1] !== this.list[this.list.length-1]) {
+						mustRecreateLastItem = true;
+				}
+			}
+			var isLast = false, wasLast = false;
 			for(t=0; t<this.list.length; t++) {
+				isLast = t === this.list.length-1;
 				var index = this.findListItem(t,this.list[t]);
+				wasLast = index === this.children.length-1;
+				if(wasLast && (index !== t || this.children.length !== this.list.length)) {
+					mustRecreateLastItem = !!(this.join && this.join.length);
+				}
 				if(index === undefined) {
 					// The list item must be inserted
+					if(isLast && mustRecreateLastItem && t>0) {
+						// First re-create previosly-last item that will no longer be last
+						this.removeListItem(t-1);
+						this.insertListItem(t-1,this.list[t-1]);
+					}
 					this.insertListItem(t,this.list[t]);
 					hasRefreshed = true;
 				} else {
@@ -258,9 +370,15 @@ ListWidget.prototype.handleListChanges = function(changedTiddlers) {
 						this.removeListItem(n);
 						hasRefreshed = true;
 					}
-					// Refresh the item we're reusing
-					var refreshed = this.children[t].refresh(changedTiddlers);
-					hasRefreshed = hasRefreshed || refreshed;
+					// Refresh the item we're reusing, or recreate if necessary
+					if(mustRecreateLastItem && (isLast || wasLast)) {
+						this.removeListItem(t);
+						this.insertListItem(t,this.list[t]);
+						hasRefreshed = true;
+					} else {
+						var refreshed = this.children[t].refresh(changedTiddlers);
+						hasRefreshed = hasRefreshed || refreshed;
+					}
 				}
 			}
 		}
@@ -350,8 +468,17 @@ ListItemWidget.prototype.execute = function() {
 		this.setVariable(this.parseTreeNode.counterName + "-first",this.parseTreeNode.isFirst ? "yes" : "no");
 		this.setVariable(this.parseTreeNode.counterName + "-last",this.parseTreeNode.isLast ? "yes" : "no");
 	}
+	// Add join if needed
+	var children = this.parseTreeNode.children,
+		join = this.parseTreeNode.join;
+	if(join && join.length && !this.parseTreeNode.isLast) {
+		children = children.slice(0);
+		$tw.utils.each(join,function(joinNode) {
+			children.push(joinNode);
+		})
+	}
 	// Construct the child widgets
-	this.makeChildWidgets();
+	this.makeChildWidgets(children);
 };
 
 /*
@@ -363,4 +490,37 @@ ListItemWidget.prototype.refresh = function(changedTiddlers) {
 
 exports.listitem = ListItemWidget;
 
+/*
+Make <$list-template> and <$list-empty> widgets that do nothing
+*/
+var ListTemplateWidget = function(parseTreeNode,options) {
+	// Main initialisation inherited from widget.js
+	this.initialise(parseTreeNode,options);
+};
+ListTemplateWidget.prototype = new Widget();
+ListTemplateWidget.prototype.render = function() {}
+ListTemplateWidget.prototype.refresh = function() { return false; }
+
+exports["list-template"] = ListTemplateWidget;
+
+var ListEmptyWidget = function(parseTreeNode,options) {
+	// Main initialisation inherited from widget.js
+	this.initialise(parseTreeNode,options);
+};
+ListEmptyWidget.prototype = new Widget();
+ListEmptyWidget.prototype.render = function() {}
+ListEmptyWidget.prototype.refresh = function() { return false; }
+
+exports["list-empty"] = ListEmptyWidget;
+
+var ListJoinWidget = function(parseTreeNode,options) {
+	// Main initialisation inherited from widget.js
+	this.initialise(parseTreeNode,options);
+};
+ListJoinWidget.prototype = new Widget();
+ListJoinWidget.prototype.render = function() {}
+ListJoinWidget.prototype.refresh = function() { return false; }
+
+exports["list-join"] = ListJoinWidget;
+
 })();

core/modules/widgets/radio.js

@@ -40,6 +40,10 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	);
 	this.inputDomNode = this.document.createElement("input");
 	this.inputDomNode.setAttribute("type","radio");
+	this.assignAttributes(this.inputDomNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	if(isChecked) {
 		this.inputDomNode.checked = true;
 	}

core/modules/widgets/range.js

@@ -50,6 +50,10 @@ RangeWidget.prototype.render = function(parent,nextSibling) {
 		this.inputDomNode.setAttribute("disabled",true);
 	}
 	this.inputDomNode.value = this.getValue();
+	this.assignAttributes(this.inputDomNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Add a click event handler
 	$tw.utils.addEventListeners(this.inputDomNode,[
 		{name:"mousedown", handlerObject:this, handlerMethod:"handleMouseDownEvent"},

core/modules/widgets/scrollable.js

@@ -12,6 +12,8 @@ Scrollable widget
 /*global $tw: false */
 "use strict";
 
+var DEBOUNCE_INTERVAL = 100; // Delay after last scroll event before updating the bound tiddler
+
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var ScrollableWidget = function(parseTreeNode,options) {
@@ -171,6 +173,53 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
 	parent.insertBefore(this.outerDomNode,nextSibling);
 	this.renderChildren(this.innerDomNode,null);
 	this.domNodes.push(this.outerDomNode);
+	// If the scroll position is bound to a tiddler
+	if(this.scrollableBind) {
+		// After a delay for rendering, scroll to the bound position
+		this.updateScrollPositionFromBoundTiddler();
+		// Set up event listener
+		this.currentListener = this.listenerFunction.bind(this);
+		this.outerDomNode.addEventListener("scroll", this.currentListener);
+	}
+};
+
+ScrollableWidget.prototype.listenerFunction = function(event) {
+	self = this;
+	clearTimeout(this.timeout);
+	this.timeout = setTimeout(function() {
+		var existingTiddler = self.wiki.getTiddler(self.scrollableBind),
+			newTiddlerFields = {
+				title: self.scrollableBind,
+				"scroll-left": self.outerDomNode.scrollLeft.toString(),
+				"scroll-top": self.outerDomNode.scrollTop.toString()
+			};
+		if(!existingTiddler || (existingTiddler.fields["title"] !== newTiddlerFields["title"]) || (existingTiddler.fields["scroll-left"] !== newTiddlerFields["scroll-left"] || existingTiddler.fields["scroll-top"] !== newTiddlerFields["scroll-top"])) {
+			self.wiki.addTiddler(new $tw.Tiddler(existingTiddler,newTiddlerFields));
+		}
+	}, DEBOUNCE_INTERVAL);
+}
+
+ScrollableWidget.prototype.updateScrollPositionFromBoundTiddler = function() {
+	// Bail if we're running on the fakedom
+	if(!this.outerDomNode.scrollTo) {
+		return;
+	}
+	var tiddler = this.wiki.getTiddler(this.scrollableBind);
+	if(tiddler) {
+		var scrollLeftTo = this.outerDomNode.scrollLeft;
+		if(parseFloat(tiddler.fields["scroll-left"]).toString() === tiddler.fields["scroll-left"]) {
+			scrollLeftTo = parseFloat(tiddler.fields["scroll-left"]);
+		}
+		var scrollTopTo = this.outerDomNode.scrollTop;
+		if(parseFloat(tiddler.fields["scroll-top"]).toString() === tiddler.fields["scroll-top"]) {
+			scrollTopTo = parseFloat(tiddler.fields["scroll-top"]);
+		}
+		this.outerDomNode.scrollTo({
+			top: scrollTopTo,
+			left: scrollLeftTo,
+			behavior: "instant"
+		})
+	}
 };
 
 /*
@@ -178,6 +227,7 @@ Compute the internal state of the widget
 */
 ScrollableWidget.prototype.execute = function() {
 	// Get attributes
+	this.scrollableBind = this.getAttribute("bind");
 	this.fallthrough = this.getAttribute("fallthrough","yes");
 	this["class"] = this.getAttribute("class");
 	// Make child widgets
@@ -193,7 +243,22 @@ ScrollableWidget.prototype.refresh = function(changedTiddlers) {
 		this.refreshSelf();
 		return true;
 	}
-	return this.refreshChildren(changedTiddlers);
+	// If the bound tiddler has changed, update the eventListener and update scroll position
+	if(changedAttributes["bind"]) {
+		if(this.currentListener) {
+			this.outerDomNode.removeEventListener("scroll", this.currentListener, false);
+		}
+		this.scrollableBind = this.getAttribute("bind");
+		this.currentListener = this.listenerFunction.bind(this);
+		this.outerDomNode.addEventListener("scroll", this.currentListener);
+	}
+	// Refresh children
+	var result = this.refreshChildren(changedTiddlers);
+	// If the bound tiddler has changed, update scroll position
+	if(changedAttributes["bind"] || changedTiddlers[this.getAttribute("bind")]) {
+		this.updateScrollPositionFromBoundTiddler();
+	}
+	return result;
 };
 
 exports.scrollable = ScrollableWidget;

core/modules/widgets/select.js

@@ -40,7 +40,31 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
 	this.parentDomNode = parent;
 	this.computeAttributes();
 	this.execute();
-	this.renderChildren(parent,nextSibling);
+	//Create element
+	var domNode = this.document.createElement("select");
+	if(this.selectClass) {
+		domNode.className = this.selectClass;
+	}
+	// Assign data- attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
+	if(this.selectMultiple) {
+		domNode.setAttribute("multiple","multiple");
+	}
+	if(this.selectSize) {
+		domNode.setAttribute("size",this.selectSize);
+	}
+	if(this.selectTabindex) {
+		domNode.setAttribute("tabindex",this.selectTabindex);
+	}
+	if(this.selectTooltip) {
+		domNode.setAttribute("title",this.selectTooltip);
+	}
+	this.parentDomNode.insertBefore(domNode,nextSibling);
+	this.renderChildren(domNode,null);
+	this.domNodes.push(domNode);
 	this.setSelectValue();
 	if(this.selectFocus == "yes") {
 		this.getSelectDomNode().focus();
@@ -113,7 +137,7 @@ SelectWidget.prototype.setSelectValue = function() {
 Get the DOM node of the select element
 */
 SelectWidget.prototype.getSelectDomNode = function() {
-	return this.children[0].domNodes[0];
+	return this.domNodes[0];
 };
 
 // Return an array of the selected opion values
@@ -145,27 +169,11 @@ SelectWidget.prototype.execute = function() {
 	this.selectDefault = this.getAttribute("default");
 	this.selectMultiple = this.getAttribute("multiple", false);
 	this.selectSize = this.getAttribute("size");
+	this.selectTabindex = this.getAttribute("tabindex");
 	this.selectTooltip = this.getAttribute("tooltip");
 	this.selectFocus = this.getAttribute("focus");
 	// Make the child widgets
-	var selectNode = {
-		type: "element",
-		tag: "select",
-		children: this.parseTreeNode.children
-	};
-	if(this.selectClass) {
-		$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
-	}
-	if(this.selectMultiple) {
-		$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
-	}
-	if(this.selectSize) {
-		$tw.utils.addAttributeToParseTreeNode(selectNode,"size",this.selectSize);
-	}
-	if(this.selectTooltip) {
-		$tw.utils.addAttributeToParseTreeNode(selectNode,"title",this.selectTooltip);
-	}
-	this.makeChildWidgets([selectNode]);
+	this.makeChildWidgets();
 };
 
 /*
@@ -174,17 +182,21 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 SelectWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// If we're using a different tiddler/field/index then completely refresh ourselves
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.tabindex) {
 		this.refreshSelf();
 		return true;
-	// If the target tiddler value has changed, just update setting and refresh the children
 	} else {
 		if(changedAttributes.class) {
 			this.selectClass = this.getAttribute("class");
 			this.getSelectDomNode().setAttribute("class",this.selectClass); 
 		}
-		
+		this.assignAttributes(this.getSelectDomNode(),{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 		var childrenRefreshed = this.refreshChildren(changedTiddlers);
+		// If the target tiddler value has changed, just update setting and refresh the children
 		if(changedTiddlers[this.selectTitle] || childrenRefreshed) {
 			this.setSelectValue();
 		} 

core/modules/widgets/transclude.js

@@ -41,27 +41,43 @@ TranscludeWidget.prototype.execute = function() {
 	this.collectAttributes();
 	this.collectStringParameters();
 	this.collectSlotFillParameters();
-	// Get the parse tree nodes that we are transcluding
-	var target = this.getTransclusionTarget(),
-		parseTreeNodes = target.parseTreeNodes;
-	this.sourceText = target.text;
-	this.parserType = target.type;
-	this.parseAsInline = target.parseAsInline;
+	// Determine whether we're being used in inline or block mode
+	var parseAsInline = !this.parseTreeNode.isBlock;
+	if(this.transcludeMode === "inline") {
+		parseAsInline = true;
+	} else if(this.transcludeMode === "block") {
+		parseAsInline = false;
+	}
+	// Set 'thisTiddler'
+	this.setVariable("thisTiddler",this.transcludeTitle);
+	var parseTreeNodes, target;
 	// Process the transclusion according to the output type
 	switch(this.transcludeOutput || "text/html") {
 		case "text/html":
-			// No further processing required
+			// Return the parse tree nodes of the target
+			target = this.parseTransclusionTarget(parseAsInline);
+			this.parseAsInline = target.parseAsInline;
+			parseTreeNodes = target.parseTreeNodes;
 			break;
 		case "text/raw":
 			// Just return the raw text
-			parseTreeNodes = [{type: "text", text: this.sourceText}];
+			target = this.getTransclusionTarget();
+			parseTreeNodes = [{type: "text", text: target.text}];
 			break;
 		default:
-			// text/plain
-			var plainText = this.wiki.renderText("text/plain",this.parserType,this.sourceText,{parentWidget: this});
-			parseTreeNodes = [{type: "text", text: plainText}];
+			// "text/plain" is the plain text result of wikifying the text
+			target = this.parseTransclusionTarget(parseAsInline);
+			var widgetNode = this.wiki.makeWidget(target.parser,{
+				parentWidget: this,
+				document: $tw.fakeDocument
+			});
+			var container = $tw.fakeDocument.createElement("div");
+			widgetNode.render(container,null);
+			parseTreeNodes = [{type: "text", text: container.textContent}];
 			break;
 	}
+	this.sourceText = target.text;
+	this.parserType = target.type;
 	// Set the legacy transclusion context variables only if we're not transcluding a variable
 	if(!this.transcludeVariable) {
 		var recursionMarker = this.makeRecursionMarker();
@@ -93,6 +109,7 @@ TranscludeWidget.prototype.collectAttributes = function() {
 		this.recursionMarker = this.getAttribute("recursionMarker","yes");
 	} else {
 		this.transcludeVariable = this.getAttribute("$variable");
+		this.transcludeVariableIsFunction = false;
 		this.transcludeType = this.getAttribute("$type");
 		this.transcludeOutput = this.getAttribute("$output","text/html");
 		this.transcludeTitle = this.getAttribute("$tiddler",this.getVariable("currentTiddler"));
@@ -158,17 +175,46 @@ TranscludeWidget.prototype.collectSlotFillParameters = function() {
 };
 
 /*
-Get transcluded parse tree nodes as an object {parser:,text:,type:}
+Get transcluded details as an object {text:,type:}
 */
 TranscludeWidget.prototype.getTransclusionTarget = function() {
 	var self = this;
-	// Determine whether we're being used in inline or block mode
-	var parseAsInline = !this.parseTreeNode.isBlock;
-	if(this.transcludeMode === "inline") {
-		parseAsInline = true;
-	} else if(this.transcludeMode === "block") {
-		parseAsInline = false;
+	var text;
+	// Return the text and type of the target
+	if(this.hasAttribute("$variable")) {
+		if(this.transcludeVariable) {
+			// Transcluding a variable
+			var variableInfo = this.getVariableInfo(this.transcludeVariable,{params: this.getOrderedTransclusionParameters()});
+			this.transcludeVariableIsFunction = variableInfo.srcVariable && variableInfo.srcVariable.isFunctionDefinition;
+			text = variableInfo.text;
+			this.transcludeFunctionResult = text;
+			return {
+				text: variableInfo.text,
+				type: this.transcludeType
+			};
+		}
+	} else {
+		// Transcluding a text reference
+		var parserInfo = this.wiki.getTextReferenceParserInfo(
+						this.transcludeTitle,
+						this.transcludeField,
+						this.transcludeIndex,
+						{
+							subTiddler: this.transcludeSubTiddler,
+							defaultType: this.transcludeType
+						});
+		return {
+			text: parserInfo.text,
+			type: parserInfo.type
+		};
 	}
+};
+
+/*
+Get transcluded parse tree nodes as an object {text:,type:,parseTreeNodes:,parseAsInline:}
+*/
+TranscludeWidget.prototype.parseTransclusionTarget = function(parseAsInline) {
+	var self = this;
 	var parser;
 	// Get the parse tree
 	if(this.hasAttribute("$variable")) {
@@ -176,37 +222,24 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 			// Transcluding a variable
 			var variableInfo = this.getVariableInfo(this.transcludeVariable,{params: this.getOrderedTransclusionParameters()}),
 				srcVariable = variableInfo && variableInfo.srcVariable;
+			if(srcVariable && srcVariable.isFunctionDefinition) {
+				this.transcludeVariableIsFunction = true;
+				this.transcludeFunctionResult = (variableInfo.resultList ? variableInfo.resultList[0] : variableInfo.text) || "";
+			}
 			if(variableInfo.text) {
-				if(srcVariable.isFunctionDefinition) {
-					// Function to return parameters by name or position
-					var fnGetParam = function(name,index) {
-							// Parameter names starting with dollar must be escaped to double dollars
-							if(name.charAt(0) === "$") {
-								name = "$" + name;
-							}
-							// Look for the parameter by name
-							if(self.hasAttribute(name)) {
-								return self.getAttribute(name);
-							// Look for the parameter by index
-							} else if(self.hasAttribute(index + "")) {
-								return self.getAttribute(index + "");
-							} else {
-								return undefined;
-							}
-						},
-						result = this.evaluateVariable(this.transcludeVariable,{params: fnGetParam})[0] || "";
+				if(srcVariable && srcVariable.isFunctionDefinition) {
 					parser = {
 						tree: [{
 							type: "text",
-							text: result
+							text: this.transcludeFunctionResult
 						}],
-						source: result,
+						source: this.transcludeFunctionResult,
 						type: "text/vnd.tiddlywiki"
 					};
 					if(parseAsInline) {
 						parser.tree[0] = {
 							type: "text",
-							text: result
+							text: this.transcludeFunctionResult
 						};
 					} else {
 						parser.tree[0] = {
@@ -214,7 +247,7 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 							tag: "p",
 							children: [{
 								type: "text",
-								text: result
+								text: this.transcludeFunctionResult
 							}]
 						}
 					}
@@ -223,7 +256,7 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 					if(variableInfo.isCacheable && srcVariable[cacheKey]) {
 						parser = srcVariable[cacheKey];
 					} else {
-						parser = this.wiki.parseText(this.transcludeType,variableInfo.text || "",{parseAsInline: parseAsInline, configTrimWhiteSpace: srcVariable.configTrimWhiteSpace});
+						parser = this.wiki.parseText(this.transcludeType,variableInfo.text || "",{parseAsInline: parseAsInline, configTrimWhiteSpace: srcVariable && srcVariable.configTrimWhiteSpace});
 						if(variableInfo.isCacheable) {
 							srcVariable[cacheKey] = parser;
 						}
@@ -231,7 +264,7 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 				}
 				if(parser) {
 					// Add parameters widget for procedures and custom widgets
-					if(srcVariable.isProcedureDefinition || srcVariable.isWidgetDefinition) {
+					if(srcVariable && (srcVariable.isProcedureDefinition || srcVariable.isWidgetDefinition)) {
 						parser = {
 							tree: [
 								{
@@ -250,7 +283,7 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 							}
 							$tw.utils.addAttributeToParseTreeNode(parser.tree[0],name,param["default"])
 						});
-					} else {
+					} else if(srcVariable && !srcVariable.isFunctionDefinition) {
 						// For macros and ordinary variables, wrap the parse tree in a vars widget assigning the parameters to variables named "__paramname__"
 						parser = {
 							tree: [
@@ -281,27 +314,14 @@ TranscludeWidget.prototype.getTransclusionTarget = function() {
 							defaultType: this.transcludeType
 						});
 	}
-	// Set 'thisTiddler'
-	this.setVariable("thisTiddler",this.transcludeTitle);
 	// Return the parse tree
-	if(parser) {
-		return {
-			parser: parser,
-			parseTreeNodes: parser.tree,
-			parseAsInline: parseAsInline,
-			text: parser.source,
-			type: parser.type
-		};
-	} else {
-		// If there's no parse tree then return the missing slot value
-		return {
-			parser: null,
-			parseTreeNodes: (this.slotFillParseTrees["ts-missing"] || []),
-			parseAsInline: parseAsInline,
-			text: null,
-			type: null
-		};
-	}
+	return {
+		parser: parser,
+		parseTreeNodes: parser ? parser.tree : (this.slotFillParseTrees["ts-missing"] || []),
+		parseAsInline: parseAsInline,
+		text: parser && parser.source,
+		type: parser && parser.type
+	};
 };
 
 /*
@@ -416,12 +436,19 @@ TranscludeWidget.prototype.parserNeedsRefresh = function() {
 	return (this.sourceText === undefined || parserInfo.sourceText !== this.sourceText || parserInfo.parserType !== this.parserType)
 };
 
+TranscludeWidget.prototype.functionNeedsRefresh = function() {
+	var oldResult = this.transcludeFunctionResult;
+	var variableInfo = this.getVariableInfo(this.transcludeVariable,{params: this.getOrderedTransclusionParameters()});
+	var newResult = (variableInfo.resultList ? variableInfo.resultList[0] : variableInfo.text) || "";
+	return oldResult !== newResult;
+}
+
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 TranscludeWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(($tw.utils.count(changedAttributes) > 0) || (!this.transcludeVariable && changedTiddlers[this.transcludeTitle] && this.parserNeedsRefresh())) {
+	if(($tw.utils.count(changedAttributes) > 0) || (this.transcludeVariableIsFunction && this.functionNeedsRefresh()) || (!this.transcludeVariable && changedTiddlers[this.transcludeTitle] && this.parserNeedsRefresh())) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/widget.js

@@ -112,14 +112,18 @@ Get the prevailing value of a context variable
 name: name of variable
 options: see below
 Options include
+
 params: array of {name:, value:} for each parameter
 defaultValue: default value if the variable is not defined
+source: optional source iterator for evaluating function invocations
 allowSelfAssigned: if true, includes the current widget in the context chain instead of just the parent
 
 Returns an object with the following fields:
 
-params: array of {name:,value:} of parameters passed to wikitext variables
+params: array of {name:,value:} or {value:} of parameters to be applied
 text: text of variable, with parameters properly substituted
+resultList: result of variable evaluation as an array
+srcVariable: reference to the object defining the variable
 */
 Widget.prototype.getVariableInfo = function(name,options) {
 	options = options || {};
@@ -135,7 +139,8 @@ Widget.prototype.getVariableInfo = function(name,options) {
 	if(variable) {
 		var originalValue = variable.value,
 			value = originalValue,
-			params = [];
+			params = [],
+			resultList = [value];
 		// Only substitute parameter and variable references if this variable was defined with the \define pragma
 		if(variable.isMacroDefinition) {
 			params = self.resolveVariableParameters(variable.params,actualParams);
@@ -144,10 +149,28 @@ Widget.prototype.getVariableInfo = function(name,options) {
 				value = $tw.utils.replaceString(value,new RegExp("\\$" + $tw.utils.escapeRegExp(param.name) + "\\$","mg"),param.value);
 			});
 			value = self.substituteVariableReferences(value,options);
+			resultList = [value];
+		} else if(variable.isFunctionDefinition) {
+			// Function evaluations
+			params = self.resolveVariableParameters(variable.params,actualParams);
+			var variables = options.variables || Object.create(null);
+			// Apply default parameter values
+			$tw.utils.each(variable.params,function(param,index) {
+				if(param["default"]) {
+					variables[param.name] = param["default"];
+				}
+			});
+			// Parameters are an array of {value:} or {name:, value:} pairs
+			$tw.utils.each(params,function(param) {
+				variables[param.name] = param.value;
+			});
+			resultList = this.wiki.filterTiddlers(value,this.makeFakeWidgetWithVariables(variables),options.source);
+			value = resultList[0] || "";
 		}
 		return {
 			text: value,
 			params: params,
+			resultList: resultList,
 			srcVariable: variable,
 			isCacheable: originalValue === value
 		};
@@ -159,7 +182,7 @@ Widget.prototype.getVariableInfo = function(name,options) {
 	}
 	return {
 		text: text,
-		srcVariable: {}
+		resultList: [text]
 	};
 };
 
@@ -317,62 +340,11 @@ Widget.prototype.makeFakeWidgetWithVariables = function(variables) {
 			};
 		},
 		makeFakeWidgetWithVariables: self.makeFakeWidgetWithVariables,
-		evaluateVariable: self.evaluateVariable,
 		resolveVariableParameters: self.resolveVariableParameters,
 		wiki: self.wiki
 	};
 };
 
-/*
-Evaluate a variable and associated actual parameters and return the resulting array.
-The way that the variable is evaluated depends upon its type:
-* Functions are evaluated as parameterised filter strings
-* Macros are returned as plain text with substitution of parameters
-* Procedures and widgets are returned as plain text
-
-Options are:
-params - the actual parameters – may be one of:
-	* an array of values that may be an anonymous string value, or a {name:, value:} pair
-	* a hashmap of {name: value} pairs
-	* a function invoked with parameters (name,index) that returns a parameter value by name or position
-source - iterator for source tiddlers
-*/
-Widget.prototype.evaluateVariable = function(name,options) {
-	options = options || {};
-	var params = options.params || [];
-	// Get the details of the variable (includes processing text substitution for macros
-	var variableInfo = this.getVariableInfo(name,{params: params,defaultValue: ""});
-	// Process function parameters
-	var variables = Object.create(null);
-	if(variableInfo.srcVariable && variableInfo.srcVariable.isFunctionDefinition) {
-		// Apply default parameter values
-		$tw.utils.each(variableInfo.srcVariable.params,function(param,index) {
-			if(param["default"]) {
-				variables[param.name] = param["default"];
-			}
-		});
-		if($tw.utils.isArray(params)) {
-			// Parameters are an array of values or {name:, value:} pairs
-			$tw.utils.each(this.resolveVariableParameters(variableInfo.srcVariable.params,params),function(param) {
-				variables[param.name] = param.value;
-			});
-		} else if(typeof params === "function") {
-			// Parameters are passed via a function
-			$tw.utils.each(variableInfo.srcVariable.params,function(param,index) {
-				variables[param.name] = params(param.name,index) || param["default"] || "";
-			});
-		} else {
-			// Parameters are a hashmap
-			$tw.utils.each(params,function(value,name) {
-				variables[name] = value;
-			});
-		}
-		return this.wiki.filterTiddlers(variableInfo.text,this.makeFakeWidgetWithVariables(variables),options.source);
-	} else {
-		return [variableInfo.text];
-	}
-};
-
 /*
 Compute the current values of the attributes of the widget. Returns a hashmap of the names of the attributes that have changed.
 Options include:
@@ -406,13 +378,9 @@ Widget.prototype.computeAttribute = function(attribute) {
 		value = this.wiki.getTextReference(attribute.textReference,"",this.getVariable("currentTiddler")) || "";
 	} else if(attribute.type === "macro") {
 		var variableInfo = this.getVariableInfo(attribute.value.name,{params: attribute.value.params});
-		if(variableInfo.srcVariable && variableInfo.srcVariable.isFunctionDefinition) {
-			// It is a function definition. Go through each of the defined parameters, and make a variable with the value of the corresponding provided parameter
-			var paramArray = this.resolveVariableParameters(variableInfo.srcVariable.params,attribute.value.params);
-			value = this.evaluateVariable(attribute.value.name,{params: paramArray})[0] || "";
-		} else {
-			value = variableInfo.text;
-		}
+		value = variableInfo.text;
+	} else if(attribute.type === "substituted") {
+		value = this.wiki.getSubstitutedText(attribute.rawValue,this) || "";
 	} else { // String attribute
 		value = attribute.value;
 	}
@@ -445,16 +413,34 @@ Widget.prototype.getAttribute = function(name,defaultText) {
 };
 
 /*
-Assign the computed attributes of the widget to a domNode
+Assign the common attributes of the widget to a domNode
 options include:
-excludeEventAttributes: ignores attributes whose name begins with "on"
+sourcePrefix: prefix of attributes that are to be directly assigned (defaults to the empty string meaning all attributes)
+destPrefix: prefix to be applied to attribute names that are to be directly assigned (defaults to the emtpy string which means no prefix is added)
+changedAttributes: hashmap by attribute name of attributes to process (if missing, process all attributes)
+excludeEventAttributes: ignores attributes whose name would begin with "on"
 */
 Widget.prototype.assignAttributes = function(domNode,options) {
 	options = options || {};
-	var self = this;
+	var self = this,
+		changedAttributes = options.changedAttributes || this.attributes,
+		sourcePrefix = options.sourcePrefix || "",
+		destPrefix = options.destPrefix || "",
+		EVENT_ATTRIBUTE_PREFIX = "on";
 	var assignAttribute = function(name,value) {
+		// Process any style attributes before considering sourcePrefix and destPrefix
+		if(name.substr(0,6) === "style." && name.length > 6) {
+			domNode.style[$tw.utils.unHyphenateCss(name.substr(6))] = value;
+			return;
+		}
+		// Check if the sourcePrefix is a match
+		if(name.substr(0,sourcePrefix.length) === sourcePrefix) {
+			name = destPrefix + name.substr(sourcePrefix.length);
+		} else {
+			value = undefined;
+		}
 		// Check for excluded attribute names
-		if(options.excludeEventAttributes && name.substr(0,2) === "on") {
+		if(options.excludeEventAttributes && name.substr(0,2).toLowerCase() === EVENT_ATTRIBUTE_PREFIX) {
 			value = undefined;
 		}
 		if(value !== undefined) {
@@ -464,26 +450,24 @@ Widget.prototype.assignAttributes = function(domNode,options) {
 				namespace = "http://www.w3.org/1999/xlink";
 				name = name.substr(6);
 			}
-			// Handle styles
-			if(name.substr(0,6) === "style." && name.length > 6) {
-				domNode.style[$tw.utils.unHyphenateCss(name.substr(6))] = value;
-			} else {
-				// Setting certain attributes can cause a DOM error (eg xmlns on the svg element)
-				try {
-					domNode.setAttributeNS(namespace,name,value);
-				} catch(e) {
-				}
+			// Setting certain attributes can cause a DOM error (eg xmlns on the svg element)
+			try {
+				domNode.setAttributeNS(namespace,name,value);
+			} catch(e) {
 			}
 		}
-	}
-	// Not all parse tree nodes have the orderedAttributes property
+	};
+	// If the parse tree node has the orderedAttributes property then use that order
 	if(this.parseTreeNode.orderedAttributes) {
 		$tw.utils.each(this.parseTreeNode.orderedAttributes,function(attribute,index) {
-			assignAttribute(attribute.name,self.attributes[attribute.name]);
-		});	
+			if(attribute.name in changedAttributes) {
+				assignAttribute(attribute.name,self.getAttribute(attribute.name));
+			}
+		});
+	// Otherwise update each changed attribute irrespective of order
 	} else {
-		$tw.utils.each(Object.keys(self.attributes).sort(),function(name) {
-			assignAttribute(name,self.attributes[name]);
+		$tw.utils.each(changedAttributes,function(value,name) {
+			assignAttribute(name,self.getAttribute(name));
 		});	
 	}
 };
@@ -829,6 +813,20 @@ Widget.prototype.allowActionPropagation = function() {
 	return true;
 };
 
+/*
+Evaluate a variable with parameters. This is a static convenience method that attempts to evaluate a variable as a function, returning an array of strings
+*/
+Widget.evaluateVariable  = function(widget,name,options) {
+	var result;
+	if(widget.getVariableInfo) {
+		var variableInfo = widget.getVariableInfo(name,options);
+		result = variableInfo.resultList || [variableInfo.text];
+	} else {
+		result = [widget.getVariable(name)];
+	}
+	return result;
+};
+
 exports.widget = Widget;
 
 })();

core/modules/wiki.js

@@ -1063,6 +1063,34 @@ exports.getTextReferenceParserInfo = function(title,field,index,options) {
 	return parserInfo;
 }
 
+/*
+Parse a block of text of a specified MIME type
+	text: text on which to perform substitutions
+	widget
+	options: see below
+Options include:
+	substitutions: an optional array of substitutions
+*/
+exports.getSubstitutedText = function(text,widget,options) {
+	options = options || {};
+	text = text || "";
+	var self = this,
+		substitutions = options.substitutions || [],
+		output;
+	// Evaluate embedded filters and substitute with first result
+	output = text.replace(/\$\{([\S\s]+?)\}\$/g, function(match,filter) {
+		return self.filterTiddlers(filter,widget)[0] || "";
+	});
+	// Process any substitutions provided in options
+	$tw.utils.each(substitutions,function(substitute) {
+		output = $tw.utils.replaceString(output,new RegExp("\\$" + $tw.utils.escapeRegExp(substitute.name) + "\\$","mg"),substitute.value);
+	});
+	// Substitute any variable references with their values
+	return output.replace(/\$\(([^\)\$]+)\)\$/g, function(match,varname) {
+		return widget.getVariable(varname,{defaultValue: ""})
+	});
+};
+
 /*
 Make a widget tree for a parse tree
 parser: parser object
@@ -1259,7 +1287,7 @@ exports.search = function(text,options) {
 			console.log("Regexp error parsing /(" + text + ")/" + flags + ": ",e);
 		}
 	} else if(options.some) {
-		terms = text.trim().split(/ +/);
+		terms = text.trim().split(/[^\S\xA0]+/);
 		if(terms.length === 1 && terms[0] === "") {
 			searchTermsRegExps = null;
 		} else {
@@ -1270,7 +1298,7 @@ exports.search = function(text,options) {
 			searchTermsRegExps.push(new RegExp("(" + regExpStr + ")",flags));
 		}
 	} else { // default: words
-		terms = text.split(/ +/);
+		terms = text.split(/[^\S\xA0]+/);
 		if(terms.length === 1 && terms[0] === "") {
 			searchTermsRegExps = null;
 		} else {
@@ -1415,6 +1443,14 @@ exports.checkTiddlerText = function(title,targetText,options) {
 	return text === targetText;
 }
 
+/*
+Execute an action string without an associated context widget
+*/
+exports.invokeActionString = function(actions,event,variables,options) {
+	var widget = this.makeWidget(null,{parentWidget: options.parentWidget});
+	widget.invokeActionString(actions,null,event,variables);
+};
+
 /*
 Read an array of browser File objects, invoking callback(tiddlerFieldsArray) once they're all read
 */

core/palettes/Vanilla.tid

@@ -54,6 +54,7 @@ modal-footer-background: #f5f5f5
 modal-footer-border: #dddddd
 modal-header-border: #eeeeee
 muted-foreground: #bbb
+network-activity-foreground: #448844
 notification-background: #ffffdd
 notification-border: #999999
 page-background: #f4f4f4

core/templates/exporters/StaticRiver.tid

@@ -3,6 +3,7 @@ tags: $:/tags/Exporter
 description: {{$:/language/Exporters/StaticRiver}}
 extension: .html
 
+\define tv-config-static() yes
 \define tv-wikilink-template() #$uri_encoded$
 \define tv-config-toolbar-icons() no
 \define tv-config-toolbar-text() no

core/templates/html-json-skinny-tiddler.tid

@@ -1,4 +1,3 @@
 title: $:/core/templates/html-json-skinny-tiddler
 
-<$list filter="[<numTiddlers>compare:number:gteq[1]] ~[<counter>!match[1]]">`,`<$text text=<<newline>>/></$list>
-<$jsontiddler tiddler=<<currentTiddler>> exclude="text" escapeUnsafeScriptChars="yes"/>
+<$text text=<<join>>/><$jsontiddler tiddler=<<currentTiddler>> exclude="text" escapeUnsafeScriptChars="yes"/>

core/templates/html-json-tiddler.tid

@@ -1,3 +1,3 @@
 title: $:/core/templates/html-json-tiddler
 
-<$list filter="[<counter>!match[1]]">`,`<$text text=<<newline>>/></$list><$jsontiddler tiddler=<<currentTiddler>> escapeUnsafeScriptChars="yes"/>
+<$jsontiddler tiddler=<<currentTiddler>> escapeUnsafeScriptChars="yes"/>

core/templates/server/static.tiddler.html.tid

@@ -1,6 +1,7 @@
 title: $:/core/templates/server/static.tiddler.html
 
 \whitespace trim
+\define tv-config-static() yes
 \define tv-wikilink-template() $uri_encoded$
 \import [subfilter{$:/core/config/GlobalImportFilter}]
 <html>

core/templates/static.template.html.tid

@@ -1,6 +1,7 @@
 title: $:/core/templates/static.template.html
 type: text/vnd.tiddlywiki-html
 
+\define tv-config-static() yes
 \define tv-wikilink-template() static/$uri_doubleencoded$.html
 \define tv-config-toolbar-icons() no
 \define tv-config-toolbar-text() no

core/templates/static.tiddler.html.tid

@@ -1,6 +1,7 @@
 title: $:/core/templates/static.tiddler.html
 
 \define tv-wikilink-template() $uri_doubleencoded$.html
+\define tv-config-static() yes
 \define tv-config-toolbar-icons() no
 \define tv-config-toolbar-text() no
 \define tv-config-toolbar-class() tc-btn-invisible

core/templates/store.area.template.html.tid

@@ -6,14 +6,12 @@ title: $:/core/templates/store.area.template.html
     <$list filter="[[storeAreaFormat]is[variable]getvariable[]else[json]match[json]]">
         <!-- New-style JSON store area, with an old-style store area for compatibility with v5.1.x tooling -->
         `<script class="tiddlywiki-tiddler-store" type="application/json">[`
-            <$vars newline={{{ [charcode[10]] }}}>
+            <$let newline={{{ [charcode[10]] }}} join=`,$(newline)$`>
                 <$text text=<<newline>>/>
-                <$list filter=<<saveTiddlerFilter>> counter="counter" template="$:/core/templates/html-json-tiddler"/>
-                <$vars numTiddlers={{{ [subfilter<saveTiddlerFilter>count[]] }}}>
-                    <$list filter={{{ [<skinnySaveTiddlerFilter>] }}} counter="counter" template="$:/core/templates/html-json-skinny-tiddler"/>
-                </$vars>
+                <$list filter=<<saveTiddlerFilter>> join=<<join>> template="$:/core/templates/html-json-tiddler"/>
+                <$list filter="[subfilter<skinnySaveTiddlerFilter>]"  template="$:/core/templates/html-json-skinny-tiddler"/>
                 <$text text=<<newline>>/>
-            </$vars>
+            </$let>
         `]</script>`
         `<div id="storeArea" style="display:none;">`
         `</div>`
@@ -22,8 +20,8 @@ title: $:/core/templates/store.area.template.html
         <!-- Old-style DIV/PRE-based store area -->
         <$reveal type="nomatch" state="$:/isEncrypted" text="yes">
             `<div id="storeArea" style="display:none;">`
-                <$list filter=<<saveTiddlerFilter>> template="$:/core/templates/html-div-tiddler"/>
-                <$list filter={{{ [<skinnySaveTiddlerFilter>] }}} template="$:/core/templates/html-div-skinny-tiddler"/>
+                <$list filter={{{ [<saveTiddlerFilter>] }}} template="$:/core/templates/html-div-tiddler"/>
+                <$list filter="[subfilter<skinnySaveTiddlerFilter>]" template="$:/core/templates/html-div-skinny-tiddler"/>
             `</div>`
         </$reveal>
     </$list>

core/ui/AlertTemplate.tid

@@ -1,3 +1,4 @@
+code-body: yes
 title: $:/core/ui/AlertTemplate
 
 \whitespace trim

core/ui/ControlPanel/Basics.tid

@@ -26,10 +26,10 @@ caption: {{$:/language/ControlPanel/Basics/Caption}}
 |<$link to="$:/SiteSubtitle"><<lingo Subtitle/Prompt>></$link> |<$edit-text tiddler="$:/SiteSubtitle" default="" tag="input"/> |
 |<$link to="$:/status/UserName"><<lingo Username/Prompt>></$link> |<$edit-text tiddler="$:/status/UserName" default="" tag="input"/> |
 |<$link to="$:/config/AnimationDuration"><<lingo AnimDuration/Prompt>></$link> |<$edit-text tiddler="$:/config/AnimationDuration" default="" tag="input"/> |
-|<$link to="$:/DefaultTiddlers"><<lingo DefaultTiddlers/Prompt>></$link> |<<lingo DefaultTiddlers/TopHint>><br> <$edit class="tc-edit-texteditor" tiddler="$:/DefaultTiddlers"/><br>//<<lingo DefaultTiddlers/BottomHint>>// |
+|<$link to="$:/DefaultTiddlers"><<lingo DefaultTiddlers/Prompt>></$link> |<<lingo DefaultTiddlers/TopHint>><br> <$edit class="tc-edit-texteditor" tiddler="$:/DefaultTiddlers" autoHeight="yes"/><br>//<<lingo DefaultTiddlers/BottomHint>>// |
 |<$link to="$:/language/DefaultNewTiddlerTitle"><<lingo NewTiddler/Title/Prompt>></$link> |<$edit-text tiddler="$:/language/DefaultNewTiddlerTitle" default="" tag="input"/> |
 |<$link to="$:/config/NewJournal/Title"><<lingo NewJournal/Title/Prompt>></$link> |<$edit-text tiddler="$:/config/NewJournal/Title" default="" tag="input"/> |
-|<$link to="$:/config/NewJournal/Text"><<lingo NewJournal/Text/Prompt>></$link> |<$edit tiddler="$:/config/NewJournal/Text" class="tc-edit-texteditor" default=""/> |
+|<$link to="$:/config/NewJournal/Text"><<lingo NewJournal/Text/Prompt>></$link> |<$edit tiddler="$:/config/NewJournal/Text" class="tc-edit-texteditor" default="" autoHeight="yes"/> |
 |<$link to="$:/config/NewTiddler/Tags"><<lingo NewTiddler/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewTiddler/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
 |<$link to="$:/config/NewJournal/Tags"><<lingo NewJournal/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewJournal/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
 |<$link to="$:/config/AutoFocus"><<lingo AutoFocus/Prompt>></$link> |{{$:/snippets/minifocusswitcher}} |

core/ui/ControlPanel/Settings.tid

@@ -2,18 +2,6 @@ title: $:/core/ui/ControlPanel/Settings
 tags: $:/tags/ControlPanel
 caption: {{$:/language/ControlPanel/Settings/Caption}}
 
-\define lingo-base() $:/language/ControlPanel/Settings/
-
-<<lingo Hint>>
-
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Settings]]">
-
-<div style="border-top:1px solid #eee;">
-
-!! <$link><$transclude field="caption"/></$link>
-
-<$transclude/>
-
-</div>
-
-</$list>
+<div class="tc-control-panel">
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/SettingsTab]!has[draft.of]]" default="$:/core/ui/ControlPanel/Settings/TiddlyWiki" explicitState="$:/state/tab--697582678"/>
+</div>

core/ui/ControlPanel/TiddlyWiki.tid

@@ -1,6 +1,7 @@
 title: $:/core/ui/ControlPanel/Settings/TiddlyWiki
 tags: $:/tags/ControlPanel/SettingsTab
 caption: TiddlyWiki
+list-before:
 
 \define lingo-base() $:/language/ControlPanel/Settings/
 

core/ui/EditTemplate.tid

@@ -1,3 +1,4 @@
+code-body: yes
 title: $:/core/ui/EditTemplate
 
 \define delete-edittemplate-state-tiddlers()

core/ui/EditTemplate/body/default.tid

@@ -10,15 +10,17 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 
 \whitespace trim
 <$let
-	edit-preview-state={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualify "$:/state/showeditpreview">] }}}
+	editPreviewStateTiddler={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualify "$:/state/showeditpreview">] }}}
 	importTitle=<<qualify $:/ImportImage>>
 	importState=<<qualify $:/state/ImportImage>> >
 <$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
-<$reveal stateTitle=<<edit-preview-state>> type="match" text="yes" tag="div">
-<div class="tc-tiddler-preview">
+<div>
+<div class={{{ [<editPreviewStateTiddler>get[text]match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
 
 <$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 
+<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
+
 <div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
 
 <$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
@@ -29,13 +31,12 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 
 </div>
 
+</$list>
+
 </div>
-</$reveal>
 
-<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes" tag="div">
+</div>
 
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
-
-</$reveal>
 </$dropzone>
+
 </$let>

core/ui/EditTemplate/fields.tid

@@ -54,7 +54,7 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 \whitespace trim
 <$vars name={{{ [<newFieldNameTiddler>get[text]] }}}>
 <$reveal type="nomatch" text="" default=<<name>>>
-<$button tooltip=<<lingo Fields/Add/Button/Hint>>>
+<$button tooltip={{$:/language/EditTemplate/Fields/Add/Button/Hint}}>
 <$action-sendmessage $message="tm-add-field"
 $name=<<name>>
 $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
@@ -89,7 +89,7 @@ $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
 </td>
 <td class="tc-edit-field-remove">
 <$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}>
-<$action-deletefield $field=<<currentField>>/><$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/></$set>
+<$action-deletefield $field=<<currentField>>/>
 {{$:/core/images/delete-button}}
 </$button>
 </td>

core/ui/EditTemplate/tags.tid

@@ -14,8 +14,8 @@ color:$(foregroundColor)$;
 \define tag-body-inner(colour,fallbackTarget,colourA,colourB,icon,tagField:"tags")
 \whitespace trim
 <$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
-<span style=<<tag-styles>> class="tc-tag-label tc-tag-list-item tc-small-gap-right">
-<$transclude tiddler="""$icon$"""/><$view field="title" format="text" />
+<span style=<<tag-styles>> class="tc-tag-label tc-tag-list-item tc-small-gap-right" data-tag-title=<<currentTiddler>>>
+<$transclude tiddler="""$icon$"""/><$view field="title" format="text"/>
 <$button class="tc-btn-invisible tc-remove-tag-button" style=<<tag-styles>>><$action-listops $tiddler=<<saveTiddler>> $field=<<__tagField__>> $subfilter="-[{!!title}]"/>{{$:/core/images/close-button}}</$button>
 </span>
 </$vars>

core/ui/EditTemplate/type.tid

@@ -10,7 +10,7 @@ first-search-filter: [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]sort[d
 <em class="tc-edit tc-small-gap-right"><<lingo Type/Prompt>></em>
 <div class="tc-type-selector-dropdown-wrapper">
 <div class="tc-type-selector"><$fieldmangler>
-<$macrocall $name="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
+<$macrocall $name="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] ~[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
 </$fieldmangler></div>
 
 <div class="tc-block-dropdown-wrapper">

core/ui/EditorToolbar/link-dropdown.tid

@@ -18,7 +18,7 @@ title: $:/core/ui/EditorToolbar/link-dropdown
 
 \define external-link()
 \whitespace trim
-<$button class="tc-btn-invisible" style="width: auto; display: inline-block; background-colour: inherit;" actions=<<add-link-actions>>>
+<$button class="tc-btn-invisible tc-btn-mini" style="width: auto; display: inline-block; background-colour: inherit;" actions=<<add-link-actions>>>
 {{$:/core/images/chevron-right}}
 </$button>
 \end
@@ -45,7 +45,7 @@ title: $:/core/ui/EditorToolbar/link-dropdown
 <$reveal tag="span" state=<<storeTitle>> type="nomatch" text="">
 <<external-link>>
 &#32;
-<$button class="tc-btn-invisible" style="width: auto; display: inline-block; background-colour: inherit;">
+<$button class="tc-btn-invisible tc-btn-mini" style="width: auto; display: inline-block; background-colour: inherit;">
 <<cancel-search-actions>><$set name="cssEscapedTitle" value={{{ [<storyTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<get-focus-selector>>/></$set>
 {{$:/core/images/close-button}}
 </$button>

core/ui/EditorToolbar/preview.tid

@@ -9,11 +9,8 @@ button-classes: tc-text-editor-toolbar-item-start-group
 shortcuts: ((preview))
 
 \whitespace trim
-<$reveal state=<<edit-preview-state>> type="match" text="yes" tag="span">
-{{$:/core/images/preview-open}}
-<$action-setfield $tiddler=<<edit-preview-state>> $value="no"/>
-</$reveal>
-<$reveal state=<<edit-preview-state>> type="nomatch" text="yes" tag="span">
-{{$:/core/images/preview-closed}}
-<$action-setfield $tiddler=<<edit-preview-state>> $value="yes"/>
-</$reveal>
+<span>
+	<$transclude $tiddler={{{ [<editPreviewStateTiddler>get[text]match[yes]then[$:/core/images/preview-open]else[$:/core/images/preview-closed]] }}} />
+</span>
+<$action-setfield $tiddler=<<editPreviewStateTiddler>> $value={{{ [<editPreviewStateTiddler>get[text]toggle[yes],[no]] }}} />
+<$action-sendmessage $message="tm-edit-text-operation" $param="focus-editor"/>

core/ui/ImportPreviews/Text.tid

@@ -1,5 +1,6 @@
 title: $:/core/ui/ImportPreviews/Text
 tags: $:/tags/ImportPreview
 caption: {{$:/language/Import/Listing/Preview/Text}}
+code-body: yes
 
 <$transclude tiddler=<<currentTiddler>> subtiddler=<<payloadTiddler>> mode="block"/>

core/ui/MoreSideBar/Tags.tid

@@ -3,15 +3,14 @@ tags: $:/tags/MoreSideBar
 caption: {{$:/language/SideBar/Tags/Caption}}
 
 \whitespace trim
-
 <$let tv-config-toolbar-icons="yes" tv-config-toolbar-text="yes" tv-config-toolbar-class="">
 	<div class="tc-tiny-v-gap-bottom">
-    	{{$:/core/ui/Buttons/tag-manager}}
+		{{$:/core/ui/Buttons/tag-manager}}
 	</div>
 </$let>
 <$list filter={{$:/core/Filters/AllTags!!filter}}>
 	<div class="tc-tiny-v-gap-bottom">
-    	<$transclude tiddler="$:/core/ui/TagTemplate"/>
+		<$transclude tiddler="$:/core/ui/TagTemplate"/>
 	</div>
 </$list>
 <hr class="tc-untagged-separator">

core/ui/PageControls/network-activity.tid

@@ -0,0 +1,16 @@
+title: $:/core/ui/Buttons/network-activity
+tags: $:/tags/PageControls
+caption: {{$:/core/images/network-activity}} {{$:/language/Buttons/NetworkActivity/Caption}}
+description: {{$:/language/Buttons/NetworkActivity/Hint}}
+
+\whitespace trim
+<$button message="tm-http-cancel-all-requests" tooltip={{$:/language/Buttons/NetworkActivity/Hint}} aria-label={{$:/language/Buttons/NetworkActivity/Caption}} class=<<tv-config-toolbar-class>>>
+<$list filter="[<tv-config-toolbar-icons>match[yes]]">
+{{$:/core/images/network-activity}}
+</$list>
+<$list filter="[<tv-config-toolbar-text>match[yes]]">
+<span class="tc-btn-text">
+<$text text={{$:/language/Buttons/NetworkActivity/Caption}}/>
+</span>
+</$list>
+</$button>

core/ui/PageStylesheet.tid

@@ -1,4 +1,5 @@
 title: $:/core/ui/PageStylesheet
+code-body: yes
 
 \import [subfilter{$:/core/config/GlobalImportFilter}]
 \whitespace trim

core/ui/PageTemplate.tid

@@ -2,6 +2,7 @@ title: $:/core/ui/PageTemplate
 name: {{$:/language/PageTemplate/Name}}
 description: {{$:/language/PageTemplate/Description}}
 icon: $:/core/images/layout-button
+code-body: yes
 
 \whitespace trim
 \import [subfilter{$:/core/config/GlobalImportFilter}]
@@ -19,7 +20,7 @@ icon: $:/core/images/layout-button
 
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
 
-<$dropzone enable=<<tv-enable-drag-and-drop>>>
+<$dropzone enable=<<tv-enable-drag-and-drop>> class="tc-dropzone tc-page-container-inner">
 
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
 

core/ui/RootTemplate.tid

@@ -1,4 +1,5 @@
 title: $:/core/ui/RootTemplate
+code-body: yes
 
 <$transclude tiddler={{{ [{$:/layout}has[text]] ~[[$:/core/ui/PageTemplate]] }}} mode="inline"/>
 

core/ui/StoryTiddlerTemplate.tid

@@ -1,3 +1,4 @@
 title: $:/core/ui/StoryTiddlerTemplate
+code-body: yes
 
 <$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/StoryTiddlerTemplateFilter]!is[draft]get[text]] :and[has[title]else[$:/core/ui/ViewTemplate]] }}} />

core/ui/TagPickerTagTemplate.tid

@@ -2,22 +2,29 @@ title: $:/core/ui/TagPickerTagTemplate
 
 \whitespace trim
 <$button class=<<button-classes>> tag="a" tooltip={{$:/language/EditTemplate/Tags/Add/Button/Hint}}>
-<$list filter="[<saveTiddler>minlength[1]]">
-<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="[<tag>]"/>
-</$list>
-<$set name="currentTiddlerCSSEscaped" value={{{ [<saveTiddler>escapecss[]] }}}>
-<$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>> preventScroll="true"/>
-</$set>
-<<delete-tag-state-tiddlers>>
-<$list filter="[<refreshTitle>minlength[1]]">
-<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
-</$list>
-<<actions>>
-<$set name="backgroundColor" value={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}>
-<$wikify name="foregroundColor" text="""<$macrocall $name="contrastcolour" target=<<backgroundColor>> fallbackTarget=<<fallbackTarget>> colourA=<<colourA>> colourB=<<colourB>>/>""">
-<span class="tc-tag-label tc-btn-invisible" style=<<tag-pill-styles>>>
-{{||$:/core/ui/TiddlerIcon}}<$view field="title" format="text"/>
-</span>
-</$wikify>
-</$set>
+	<$list filter="[<saveTiddler>minlength[1]]">
+		<$action-listops $tiddler=<<saveTiddler>> $field=<<tagField>> $subfilter="[<tag>]"/>
+	</$list>
+	<$set name="currentTiddlerCSSEscaped" value={{{ [<saveTiddler>escapecss[]] }}}>
+		<$action-sendmessage $message="tm-focus-selector" $param=<<get-tagpicker-focus-selector>> preventScroll="true"/>
+	</$set>
+	<<delete-tag-state-tiddlers>>
+	<$list filter="[<refreshTitle>minlength[1]]">
+		<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
+	</$list>
+	<<actions>>
+	<$set name="backgroundColor"
+		value={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
+	>
+		<$wikify name="foregroundColor"
+			text="""<$macrocall $name="contrastcolour" target=<<backgroundColor>> fallbackTarget=<<fallbackTarget>> colourA=<<colourA>> colourB=<<colourB>>/>"""
+		>
+			<span class="tc-tag-label tc-btn-invisible"
+				style=<<tag-pill-styles>>
+				data-tag-title=<<currentTiddler>>
+			>
+				{{||$:/core/ui/TiddlerIcon}}<$view field="title" format="text"/>
+			</span>
+		</$wikify>
+	</$set>
 </$button>

core/ui/TagTemplate.tid

@@ -3,16 +3,23 @@ title: $:/core/ui/TagTemplate
 \whitespace trim
 <span class="tc-tag-list-item" data-tag-title=<<currentTiddler>>>
 <$set name="transclusion" value=<<currentTiddler>>>
-<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}} colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
-<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
-<$set name="tv-show-missing-links" value="yes">
-<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
-</$set>
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem"> 
-<$transclude tiddler=<<listItem>>/> 
-</$list>
-<hr>
-<$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>
-</$reveal>
+	<$macrocall $name="tag-pill-body"
+		tag=<<currentTiddler>>
+		icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
+		colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
+		palette={{$:/palette}}
+		element-tag="$button"
+		element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter="[all[current]tagging[]]" tag='span'"""
+	/>
+	<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
+		<$set name="tv-show-missing-links" value="yes">
+			<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
+		</$set>
+		<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem"> 
+			<$transclude tiddler=<<listItem>>/> 
+		</$list>
+		<hr>
+		<$macrocall $name="list-tagged-draggable" tag=<<currentTiddler>>/>
+	</$reveal>
 </$set>
 </span>

core/ui/ViewTemplate.tid

@@ -1,4 +1,5 @@
 title: $:/core/ui/ViewTemplate
+code-body: yes
 
 \whitespace trim
 \define folded-state()

core/ui/ViewTemplate/body/default.tid

@@ -1,4 +1,5 @@
 title: $:/core/ui/ViewTemplate/body/default
+code-body: yes
 
 <$transclude>
 

core/ui/ViewTemplate/subtitle.tid

@@ -4,11 +4,8 @@ tags: $:/tags/ViewTemplate
 \whitespace trim
 <$reveal type="nomatch" stateTitle=<<folded-state>> text="hide" tag="div" retain="yes" animate="yes">
 <div class="tc-subtitle">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate/Subtitle]!has[draft.of]]" variable="subtitleTiddler" counter="indexSubtitleTiddler">
-<$list filter="[<indexSubtitleTiddler-first>match[no]]" variable="ignore">
-&nbsp;
-</$list>
-<$transclude tiddler=<<subtitleTiddler>> mode="inline"/>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate/Subtitle]!has[draft.of]]" variable="subtitleTiddler">
+<$transclude tiddler=<<subtitleTiddler>> mode="inline"/><$list-join>&nbsp;</$list-join>
 </$list>
 </div>
 </$reveal>