Fixes for JSON operators

Fixes #7096

.gitignore

@@ -4,3 +4,4 @@
 tmp/
 output/
 node_modules/
+

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.2.3
+    TW5_BUILD_VERSION=v5.2.4
 fi
 
 echo "Using TW5_BUILD_VERSION as [$TW5_BUILD_VERSION]"
@@ -233,6 +233,15 @@ node $TW5_BUILD_TIDDLYWIKI \
 	--build index \
 	|| exit 1
 
+# /editions/twitter-archivist/index.html	Twitter Archivist edition
+node $TW5_BUILD_TIDDLYWIKI \
+	./editions/twitter-archivist \
+	--verbose \
+	--load $TW5_BUILD_OUTPUT/build.tid \
+	--output $TW5_BUILD_OUTPUT/editions/twitter-archivist/ \
+	--build index \
+	|| exit 1
+
 ######################################################
 #
 # Plugin demos
@@ -450,7 +459,7 @@ node $TW5_BUILD_TIDDLYWIKI \
 	--verbose \
 	--load $TW5_BUILD_OUTPUT/build.tid \
 	--output $TW5_BUILD_OUTPUT/library/$TW5_BUILD_VERSION \
-	--build \
+	--build library\
 	|| exit 1
 
 # Delete the temporary build tiddler

bin/test.sh

@@ -9,6 +9,7 @@ node ./tiddlywiki.js \
 	--verbose \
 	--version \
 	--rendertiddler $:/core/save/all test.html text/plain \
+	--test \
 	|| exit 1
 
 echo To run the tests in a browser, open "editions/test/output/test.html"

boot/boot.js

@@ -2403,11 +2403,11 @@ $tw.boot.initStartup = function(options) {
 	$tw.utils.registerFileType("application/x-font-ttf","base64",".woff");
 	$tw.utils.registerFileType("application/font-woff2","base64",".woff2");
 	$tw.utils.registerFileType("audio/ogg","base64",".ogg");
+	$tw.utils.registerFileType("audio/mp4","base64",[".mp4",".m4a"]);
 	$tw.utils.registerFileType("video/ogg","base64",[".ogm",".ogv",".ogg"]);
 	$tw.utils.registerFileType("video/webm","base64",".webm");
 	$tw.utils.registerFileType("video/mp4","base64",".mp4");
 	$tw.utils.registerFileType("audio/mp3","base64",".mp3");
-	$tw.utils.registerFileType("audio/mp4","base64",[".mp4",".m4a"]);
 	$tw.utils.registerFileType("text/markdown","utf8",[".md",".markdown"],{deserializerType:"text/x-markdown"});
 	$tw.utils.registerFileType("text/x-markdown","utf8",[".md",".markdown"]);
 	$tw.utils.registerFileType("application/enex+xml","utf8",".enex");

core/images/layout-button.tid

@@ -0,0 +1,4 @@
+title: $:/core/images/layout-button
+tags: $:/tags/Image
+
+<svg width="22pt" height="22pt" class="tc-image-layout-button tc-image-button" viewBox="0 0 24 24" stroke-width="1" stroke="none"><path d="M0 0h24v24H0z" fill="none"/><rect x="2" y="2" width="7" height="7" rx="2"/><rect x="2" y="13" width="7" height="9" rx="2"/><rect x="12" y="2" width="10" height="20" rx="2"/></svg>

core/images/mastodon.tid

@@ -0,0 +1,6 @@
+title: $:/core/images/mastodon
+tags: $:/tags/Image
+
+<svg width="22pt" height="22pt" class="tc-image-mastodon tc-image-button" viewBox="0 0 128 128">
+  <path d="M112.716,76.735C111.231,85.764 99.411,95.646 85.836,97.561C78.757,98.559 71.787,99.476 64.355,99.073C52.201,98.415 42.61,95.646 42.61,95.646C42.61,97.044 42.683,98.374 42.829,99.619C44.409,113.79 54.723,114.639 64.493,115.035C74.354,115.434 83.134,112.163 83.134,112.163L83.539,122.695C83.539,122.695 76.642,127.071 64.355,127.875C57.58,128.315 49.167,127.674 39.369,124.61C18.118,117.965 14.463,91.202 13.904,64.048C13.733,55.985 13.839,48.383 13.839,42.024C13.839,14.257 29.238,6.118 29.238,6.118C37.002,1.905 50.326,0.134 64.177,-0L64.517,-0C78.369,0.134 91.701,1.905 99.465,6.118C99.465,6.118 114.864,14.257 114.864,42.024C114.864,42.024 115.057,62.511 112.716,76.735ZM96.7,44.179C96.7,37.307 95.219,31.847 92.245,27.807C89.177,23.767 85.16,21.696 80.174,21.696C74.403,21.696 70.034,24.316 67.146,29.556L64.337,35.118L61.529,29.556C58.64,24.316 54.271,21.696 48.501,21.696C43.514,21.696 39.497,23.767 36.43,27.807C33.455,31.847 31.974,37.307 31.974,44.179L31.974,77.8L43.249,77.8L43.249,45.167C43.249,38.288 45.699,34.796 50.599,34.796C56.017,34.796 58.733,38.938 58.733,47.128L58.733,64.99L69.941,64.99L69.941,47.128C69.941,38.938 72.657,34.796 78.075,34.796C82.975,34.796 85.425,38.288 85.425,45.167L85.425,77.8L96.7,77.8L96.7,44.179Z"/>
+</svg>

core/language/en-GB/Buttons.multids

@@ -59,6 +59,8 @@ Home/Caption: home
 Home/Hint: Open the default tiddlers
 Language/Caption: language
 Language/Hint: Choose the user interface language
+LayoutSwitcher/Hint: Open layout switcher
+LayoutSwitcher/Caption: layout
 Manager/Caption: tiddler manager
 Manager/Hint: Open tiddler manager
 More/Caption: more

core/language/en-GB/ControlPanel.multids

@@ -7,7 +7,7 @@ Appearance/Hint: Ways to customise the appearance of your TiddlyWiki.
 Basics/AnimDuration/Prompt: Animation duration
 Basics/AutoFocus/Prompt: Default focus field for new tiddlers
 Basics/Caption: Basics
-Basics/DefaultTiddlers/BottomHint: Use &#91;&#91;double square brackets&#93;&#93; for titles with spaces. Or you can choose to <$button set="$:/DefaultTiddlers" setTo="[list[$:/StoryList]]">retain story ordering</$button>
+Basics/DefaultTiddlers/BottomHint: Use &#91;&#91;double square brackets&#93;&#93; for titles with spaces. Or you can choose to {{retain story ordering||$:/snippets/retain-story-ordering-button}}
 Basics/DefaultTiddlers/Prompt: Default tiddlers
 Basics/DefaultTiddlers/TopHint: Choose which tiddlers are displayed at startup
 Basics/Language/Prompt: Hello! Current language:
@@ -90,8 +90,8 @@ Plugins/Languages/Caption: Languages
 Plugins/Languages/Hint: Language pack plugins
 Plugins/NoInfoFound/Hint: No ''"<$text text=<<currentTab>>/>"'' found
 Plugins/NotInstalled/Hint: This plugin is not currently installed
-Plugins/OpenPluginLibrary: open plugin library
-Plugins/ClosePluginLibrary: close plugin library
+Plugins/OpenPluginLibrary: Open plugin library
+Plugins/ClosePluginLibrary: Close plugin library
 Plugins/PluginWillRequireReload: (requires reload)
 Plugins/Plugins/Caption: Plugins
 Plugins/Plugins/Hint: Plugins

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

@@ -0,0 +1,18 @@
+title: $:/language/Help/commands
+description: Run commands returned from a filter
+
+Sequentially run the command tokens returned from a filter
+
+```
+--commands <filter>
+```
+
+Examples
+
+```
+--commands "[enlist{$:/build-commands-as-text}]"
+```
+
+```
+--commands "[{$:/build-commands-as-json}jsonindexes[]] :map[{$:/build-commands-as-json}jsonget<currentTiddler>]"
+```

core/modules/commands/commands.js

@@ -0,0 +1,42 @@
+/*\
+title: $:/core/modules/commands/commands.js
+type: application/javascript
+module-type: command
+
+Runs the commands returned from a filter
+
+\*/
+
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.info = {
+	name: "commands",
+	synchronous: true
+};
+
+var Command = function(params, commander) {
+	this.params = params;
+	this.commander = commander;
+};
+
+Command.prototype.execute = function() {
+	// Parse the filter
+	var filter = this.params[0];
+	if(!filter) {
+		return "No filter specified";
+	}
+	var commands = this.commander.wiki.filterTiddlers(filter)
+	if(commands.length === 0) {
+		return "No tiddlers found for filter '" + filter + "'";
+	}
+	this.commander.addCommandTokens(commands);
+	return null;
+};
+
+exports.Command = Command;
+
+})();

core/modules/editor/factory.js

@@ -298,7 +298,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	Propogate keydown events to our container for the keyboard widgets benefit
 	*/
 	EditTextWidget.prototype.propogateKeydownEvent = function(event) {
-		var newEvent = this.cloneEvent(event,["keyCode","which","metaKey","ctrlKey","altKey","shiftKey"]);
+		var newEvent = this.cloneEvent(event,["keyCode","code","which","key","metaKey","ctrlKey","altKey","shiftKey"]);
 		return !this.parentDomNode.dispatchEvent(newEvent);
 	};
 

core/modules/filters/json-ops.js

@@ -17,9 +17,23 @@ exports["jsonget"] = function(source,operator,options) {
 	source(function(tiddler,title) {
 		var data = $tw.utils.parseJSONSafe(title,title);
 		if(data) {
-			var item = getDataItemValueAsString(data,operator.operands);
+			var items = getDataItemValueAsStrings(data,operator.operands);
+			if(items !== undefined) {
+				results.push.apply(results,items);
+			}
+		}
+	});
+	return results;
+};
+
+exports["jsonextract"] = function(source,operator,options) {
+	var results = [];
+	source(function(tiddler,title) {
+		var data = $tw.utils.parseJSONSafe(title,title);
+		if(data) {
+			var item = getDataItem(data,operator.operands);
 			if(item !== undefined) {
-				results.push(item);
+				results.push(JSON.stringify(item));
 			}
 		}
 	});
@@ -31,9 +45,9 @@ exports["jsonindexes"] = function(source,operator,options) {
 	source(function(tiddler,title) {
 		var data = $tw.utils.parseJSONSafe(title,title);
 		if(data) {
-			var item = getDataItemKeysAsStrings(data,operator.operands);
-			if(item !== undefined) {
-				results.push.apply(results,item);
+			var items = getDataItemKeysAsStrings(data,operator.operands);
+			if(items !== undefined) {
+				results.push.apply(results,items);
 			}
 		}
 	});
@@ -57,11 +71,11 @@ exports["jsontype"] = function(source,operator,options) {
 /*
 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
 */
-function getDataItemValueAsString(data,indexes) {
+function getDataItemValueAsStrings(data,indexes) {
 	// Get the item
 	var item = getDataItem(data,indexes);
-	// Return the item as a string
-	return convertDataItemValueToString(item);
+	// Return the item as a string list
+	return convertDataItemValueToStrings(item);
 }
 
 /*
@@ -77,15 +91,34 @@ function getDataItemKeysAsStrings(data,indexes) {
 /*
 Return an array of the string representation of the values of a data item, or "undefined" if the item is undefined
 */
-function convertDataItemValueToString(item) {
+function convertDataItemValueToStrings(item) {
 	// Return the item as a string
 	if(item === undefined) {
-		return item;
+		return undefined;
+	} else if(item === null) {
+		return ["null"]
+	} else if(typeof item === "object") {
+		var results = [],i,t;
+		if($tw.utils.isArray(item)) {
+			// Return all the items in arrays recursively
+			for(i=0; i<item.length; i++) {
+				t = convertDataItemValueToStrings(item[i])
+				if(t !== undefined) {
+					results.push.apply(results,t);
+				}
+			}
+		} else {
+			// Return all the values in objects recursively
+			$tw.utils.each(Object.keys(item).sort(),function(key) {
+				t = convertDataItemValueToStrings(item[key]);
+				if(t !== undefined) {
+					results.push.apply(results,t);
+				}
+			});
+		}
+		return results;
 	}
-	if(typeof item === "object") {
-		return JSON.stringify(item);
-	}
-	return item.toString();
+	return [item.toString()];
 }
 
 /*

core/modules/parsers/csvparser.js

@@ -13,6 +13,11 @@ The CSV text parser processes CSV files into a table wrapped in a scrollable wid
 "use strict";
 
 var CsvParser = function(type,text,options) {
+	// Special handler for tab-delimited files
+	if (type === 'text/tab-delimited-values' && !options.separator) {
+		options.separator = "\t";
+	}
+	
 	// Table framework
 	this.tree = [{
 		"type": "scrollable", "children": [{
@@ -24,30 +29,33 @@ var CsvParser = function(type,text,options) {
 		}]
 	}];
 	// Split the text into lines
-	var lines = text.split(/\r?\n/mg),
+	var lines = $tw.utils.parseCsvString(text, options),
 		tag = "th";
+	var maxColumns = 0;
+	$tw.utils.each(lines, function(columns) {
+		maxColumns = Math.max(columns.length, maxColumns);
+	});
+	
 	for(var line=0; line<lines.length; line++) {
-		var lineText = lines[line];
-		if(lineText) {
-			var row = {
-					"type": "element", "tag": "tr", "children": []
-				};
-			var columns = lineText.split(",");
-			for(var column=0; column<columns.length; column++) {
-				row.children.push({
-						"type": "element", "tag": tag, "children": [{
-							"type": "text",
-							"text": columns[column]
-						}]
-					});
-			}
-			tag = "td";
-			this.tree[0].children[0].children[0].children.push(row);
+		var columns = lines[line];
+		var row = {
+			"type": "element", "tag": "tr", "children": []
+		};
+		for(var column=0; column<maxColumns; column++) {
+			row.children.push({
+				"type": "element", "tag": tag, "children": [{
+					"type": "text",
+					"text": columns[column] || ''
+				}]
+			});
 		}
+		tag = "td";
+		this.tree[0].children[0].children[0].children.push(row);
 	}
 };
 
 exports["text/csv"] = CsvParser;
+exports["text/tab-delimited-values"] = CsvParser;
 
 })();
 

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

@@ -58,7 +58,7 @@ exports.parse = function() {
 	var reEnd;
 	if(this.match[3]) {
 		// If so, the end of the body is marked with \end
-		reEnd = /(\r?\n\\end[^\S\n\r]*(?:$|\r?\n))/mg;
+		reEnd = new RegExp("(\\r?\\n\\\\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/parsermode.js

@@ -0,0 +1,68 @@
+/*\
+title: $:/core/modules/parsers/wikiparser/rules/parsermode.js
+type: application/javascript
+module-type: wikirule
+
+Wiki pragma rule for parser mode specifications
+
+```
+\parsermode block
+\parsermode inline
+```
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.name = "parsermode";
+exports.types = {pragma: true};
+
+/*
+Instantiate parse rule
+*/
+exports.init = function(parser) {
+	this.parser = parser;
+	// Regexp to match
+	this.matchRegExp = /^\\parsermode[^\S\n]/mg;
+};
+
+/*
+Parse the most recent match
+*/
+exports.parse = function() {
+	// Move past the pragma invocation
+	this.parser.pos = this.matchRegExp.lastIndex;
+	// Parse whitespace delimited tokens terminated by a line break
+	var reMatch = /[^\S\n]*(\S+)|(\r?\n)/mg,
+		parserMode = undefined;
+	reMatch.lastIndex = this.parser.pos;
+	var match = reMatch.exec(this.parser.source);
+	while(match && match.index === this.parser.pos) {
+		this.parser.pos = reMatch.lastIndex;
+		// Exit if we've got the line break
+		if(match[2]) {
+			break;
+		}
+		// Process the token
+		if(match[1]) {
+			parserMode = match[1];
+		}
+		// Match the next token
+		match = reMatch.exec(this.parser.source);
+	}
+	// Process the tokens
+	if(parserMode !== undefined) {
+		if(parserMode === "block") {
+			this.parser.parseAsInline = false;
+		} else if(parserMode === "inline") {
+			this.parser.parseAsInline = true;
+		}
+	}
+	// No parse tree nodes to return
+	return [];
+};
+
+})();

core/modules/parsers/wikiparser/wikiparser.js

@@ -47,6 +47,8 @@ var WikiParser = function(type,text,options) {
 	this.sourceLength = this.source.length;
 	// Flag for ignoring whitespace
 	this.configTrimWhiteSpace = false;
+	// Parser mode
+	this.parseAsInline = options.parseAsInline;
 	// Set current parse position
 	this.pos = 0;
 	// Start with empty output
@@ -83,7 +85,7 @@ var WikiParser = function(type,text,options) {
 	// Parse any pragmas
 	var topBranch = this.parsePragmas();
 	// Parse the text into inline runs or blocks
-	if(options.parseAsInline) {
+	if(this.parseAsInline) {
 		topBranch.push.apply(topBranch,this.parseInlineRun());
 	} else {
 		topBranch.push.apply(topBranch,this.parseBlocks());

core/modules/server/routes/put-tiddler.js

@@ -30,6 +30,16 @@ exports.handler = function(request,response,state) {
 	if(fields.revision) {
 		delete fields.revision;
 	}
+	// If this is a skinny tiddler, it means the client never got the full
+	// version of the tiddler to edit. So we must preserve whatever text
+	// already exists on the server, or else we'll inadvertently delete it.
+	if(fields._is_skinny !== undefined) {
+		var tiddler = state.wiki.getTiddler(title);
+		if(tiddler) {
+			fields.text = tiddler.fields.text;
+		}
+		delete fields._is_skinny;
+	}
 	state.wiki.addTiddler(new $tw.Tiddler(fields,{title: title}));
 	var changeCount = state.wiki.getChangeCount(title).toString();
 	response.writeHead(204, "OK",{

core/modules/startup/startup.js

@@ -121,7 +121,11 @@ exports.startup = function() {
 	});
 	// Set up the syncer object if we've got a syncadaptor
 	if($tw.syncadaptor) {
-		$tw.syncer = new $tw.Syncer({wiki: $tw.wiki, syncadaptor: $tw.syncadaptor});
+		$tw.syncer = new $tw.Syncer({
+			wiki: $tw.wiki,
+			syncadaptor: $tw.syncadaptor,
+			logging: $tw.wiki.getTiddlerText('$:/config/SyncLogging', "yes") === "yes"
+		});
 	}
 	// Setup the saver handler
 	$tw.saverHandler = new $tw.SaverHandler({

core/modules/utils/csv.js

@@ -12,35 +12,113 @@ A barebones CSV parser
 /*global $tw: false */
 "use strict";
 
+var QUOTE = '"';
+
+var getCellInfo = function(text, start, length, SEPARATOR) {
+	var isCellQuoted = text.charAt(start) === QUOTE;
+	var cellStart = isCellQuoted ? start + 1 : start;
+	
+	if (text.charAt(i) === SEPARATOR) {
+		return [cellStart, cellStart, false];
+	}
+	
+	for (var i = cellStart; i < length; i++) {
+		var cellCharacter = text.charAt(i);
+		var isEOL = cellCharacter === "\n" || cellCharacter === "\r";
+		
+		if (isEOL && !isCellQuoted) {
+			return [cellStart, i, false];
+			
+		} else if (cellCharacter === SEPARATOR && !isCellQuoted) {
+			return [cellStart, i, false];
+			
+		} else if (cellCharacter === QUOTE && isCellQuoted) {
+			var nextCharacter = i + 1 < length ? text.charAt(i + 1) : '';
+			if (nextCharacter !== QUOTE) {
+				return [cellStart, i, true];
+			} else {
+				i++;
+			}
+		}
+	}
+	
+	return [cellStart, i, isCellQuoted];
+}
+	
+exports.parseCsvString = function(text, options) {
+	if (!text) {
+		return [];
+	}
+	
+	options = options || {};
+	var SEPARATOR = options.separator || ",",
+		length = text.length,
+		rows = [],
+		nextRow = [];
+		
+	for (var i = 0; i < length; i++) {
+		var cellInfo = getCellInfo(text, i, length, SEPARATOR);
+		var cellText = text.substring(cellInfo[0], cellInfo[1]);
+		if (cellInfo[2]) {
+			cellText = cellText.replace(/""/g, '"');
+			cellInfo[1]++;
+		}
+		nextRow.push(cellText);
+		
+		i = cellInfo[1];
+		
+		var character = text.charAt(i);
+		var nextCharacter = i + 1 < length ? text.charAt(i + 1) : '';
+		
+		if (character === "\r" || character === "\n") {
+			// Edge case for empty rows
+			if (nextRow.length === 1 && nextRow[0] === '') {
+				nextRow.length = 0;
+			}
+			rows.push(nextRow);
+			nextRow = [];
+			
+			if (character === "\r") {
+				var nextCharacter = i + 1 < length ? text.charAt(i + 1) : '';
+				
+				if (nextCharacter === "\n") {
+					i++;
+				}
+			}
+		}
+	}
+	
+	// Special case if last cell in last row is an empty cell
+	if (text.charAt(length - 1) === SEPARATOR) {
+		nextRow.push("");
+	}
+	
+	rows.push(nextRow);
+	
+	return rows;
+}
+
 /*
 Parse a CSV string with a header row and return an array of hashmaps.
 */
 exports.parseCsvStringWithHeader = function(text,options) {
-	options = options || {};
-	var separator = options.separator || ",",
-		rows = text.split(/\r?\n/mg).map(function(row) {
-			return $tw.utils.trim(row);
-		}).filter(function(row) {
-			return row !== "";
-		});
-	if(rows.length < 1) {
-		return "Missing header row";
-	}
-	var headings = rows[0].split(separator),
-		results = [];
-	for(var row=1; row<rows.length; row++) {
-		var columns = rows[row].split(separator),
-			columnResult = Object.create(null);
-		if(columns.length !== headings.length) {
-			return "Malformed CSV row '" + rows[row] + "'";
+	var csv = $tw.utils.parseCsvString(text, options);
+	var headers = csv[0];
+	
+	csv = csv.slice(1);
+	for (var i = 0; i < csv.length; i++) {
+		var row = csv[i];
+		var rowObject = Object.create(null);
+
+		for(var columnIndex=0; columnIndex<headers.length; columnIndex++) {
+			var columnName = headers[columnIndex];
+			if (columnName) {
+				rowObject[columnName] = $tw.utils.trim(row[columnIndex] || "");
+			}
 		}
-		for(var column=0; column<columns.length; column++) {
-			var columnName = headings[column];
-			columnResult[columnName] = $tw.utils.trim(columns[column] || "");
-		}
-		results.push(columnResult);
+		csv[i] = rowObject;
 	}
-	return results;
+	return csv;
 }
 
 })();

core/modules/utils/dom/dom.js

@@ -12,6 +12,8 @@ Various static DOM-related utility functions.
 /*global $tw: false */
 "use strict";
 
+var Popup = require("$:/core/modules/utils/dom/popup.js");
+
 /*
 Determines whether element 'a' contains element 'b'
 Code thanks to John Resig, http://ejohn.org/blog/comparing-document-position/
@@ -294,8 +296,21 @@ exports.collectDOMVariables = function(selectedNode,domNode,event) {
 		});
 		
 		if(selectedNode.offsetLeft) {
-			// Add a variable with a popup coordinate string for the selected node
-			variables["tv-popup-coords"] = "(" + selectedNode.offsetLeft + "," + selectedNode.offsetTop +"," + selectedNode.offsetWidth + "," + selectedNode.offsetHeight + ")";
+			// Add variables with a (relative and absolute) popup coordinate string for the selected node
+			var nodeRect = {
+				left: selectedNode.offsetLeft,
+				top: selectedNode.offsetTop,
+				width: selectedNode.offsetWidth,
+				height: selectedNode.offsetHeight
+			};
+			variables["tv-popup-coords"] = Popup.buildCoordinates(Popup.coordinatePrefix.csOffsetParent,nodeRect);
+
+			var absRect = $tw.utils.extend({}, nodeRect);
+			for (var currentNode = selectedNode.offsetParent; currentNode; currentNode = currentNode.offsetParent) {
+				absRect.left += currentNode.offsetLeft;
+				absRect.top += currentNode.offsetTop;
+			}
+			variables["tv-popup-abs-coords"] = Popup.buildCoordinates(Popup.coordinatePrefix.csAbsolute,absRect);
 
 			// Add variables for offset of selected node
 			variables["tv-selectednode-posx"] = selectedNode.offsetLeft.toString();

core/modules/utils/dom/modal.js

@@ -26,6 +26,8 @@ Display a modal dialogue
 	options: see below
 Options include:
 	downloadLink: Text of a big download link to include
+	event: widget event
+	variables: from event.paramObject
 */
 Modal.prototype.display = function(title,options) {
 	options = options || {};
@@ -209,6 +211,10 @@ Modal.prototype.display = function(title,options) {
 	headerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
 	bodyWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
 	footerWidgetNode.addEventListener("tm-close-tiddler",closeHandler,false);
+	// Whether to close the modal dialog when the mask (area outside the modal) is clicked
+	if(tiddler.fields && (tiddler.fields["mask-closable"] === "yes" || tiddler.fields["mask-closable"] === "true")) {
+		modalBackdrop.addEventListener("click",closeHandler,false);
+	}
 	// Set the initial styles for the message
 	$tw.utils.setStyle(modalBackdrop,[
 		{opacity: "0"}

core/modules/utils/dom/popup.js

@@ -22,6 +22,19 @@ var Popup = function(options) {
 	this.popups = []; // Array of {title:,wiki:,domNode:} objects
 };
 
+/*
+Global regular expression for parsing the location of a popup.
+This is also used by the Reveal widget.
+*/
+exports.popupLocationRegExp = /^(@?)\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/
+
+/*
+Objekt containing the available prefixes for coordinates build with the `buildCoordinates` function:
+ - csOffsetParent: Uses a coordinate system based on the offset parent (no prefix).
+ - csAbsolute: Use an absolute coordinate system (prefix "@").
+*/
+exports.coordinatePrefix = { csOffsetParent: "", csAbsolute: "@" }
+
 /*
 Trigger a popup open or closed. Parameters are in a hashmap:
 	title: title of the tiddler where the popup details are stored
@@ -136,8 +149,17 @@ Popup.prototype.show = function(options) {
 			height: options.domNode.offsetHeight
 		};
 	}
-	var popupRect = "(" + rect.left + "," + rect.top + "," + 
-				rect.width + "," + rect.height + ")";
+	if(options.absolute && options.domNode) {
+		// Walk the offsetParent chain and add the position of the offsetParents to make
+		// the position absolute to the root node of the page.
+		var currentNode = options.domNode.offsetParent;
+		while(currentNode) {
+			rect.left += currentNode.offsetLeft;
+			rect.top += currentNode.offsetTop;
+			currentNode = currentNode.offsetParent;
+		}
+	}
+	var popupRect = exports.buildCoordinates(options.absolute?exports.coordinatePrefix.csAbsolute:exports.coordinatePrefix.csOffsetParent,rect);
 	if(options.noStateReference) {
 		options.wiki.setText(options.title,"text",undefined,popupRect);
 	} else {
@@ -172,13 +194,54 @@ Popup.prototype.cancel = function(level) {
 };
 
 /*
-Returns true if the specified title and text identifies an active popup
+Returns true if the specified title and text identifies an active popup.
+This function is safe to call, even if the popup class was not initialized.
 */
-Popup.prototype.readPopupState = function(text) {
-	var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/;
-	return popupLocationRegExp.test(text);
+exports.readPopupState = function(text) {
+	return exports.popupLocationRegExp.test(text);
 };
 
+/*
+Parses a coordinate string in the format `(x,y,w,h)` or `@(x,y,z,h)` and returns
+an object containing the position, width and height. The absolute-Mark is boolean
+value that indicates the coordinate system of the coordinates. If they start with
+an `@`, `absolute` is set to true and the coordinates are relative to the root
+element. If the initial `@` is missing, they are relative to the offset parent
+element and `absoute` is false.
+This function is safe to call, even if the popup class was not initialized.
+*/
+exports.parseCoordinates = function(coordinates) {
+	var match = exports.popupLocationRegExp.exec(coordinates);
+	if(match) {
+		return {
+			absolute: (match[1] === "@"),
+			left: parseFloat(match[2]),
+			top: parseFloat(match[3]),
+			width: parseFloat(match[4]),
+			height: parseFloat(match[5])
+		};
+	} else {
+		return false;
+	}
+}
+
+/*
+Builds a coordinate string from a coordinate system identifier and an object
+containing the left, top, width and height values.
+Use constants defined in coordinatePrefix to specify a coordinate system.
+If one of the parameters is invalid for building a coordinate string `(0,0,0,0)`
+will be returned.
+This function is safe to call, even if the popup class was not initialized.
+*/
+exports.buildCoordinates = function(prefix,position) {
+	var coord = prefix + "(" + position.left + "," + position.top + "," + position.width + "," + position.height + ")";
+	if (exports.popupLocationRegExp.test(coord)) {
+		return coord;
+	} else {
+		return "(0,0,0,0)";
+	}
+}
+
 exports.Popup = Popup;
 
 })();

core/modules/utils/linked-list.js

@@ -15,10 +15,11 @@ function LinkedList() {
 
 LinkedList.prototype.clear = function() {
 	// LinkedList performs the duty of both the head and tail node
-	this.next = Object.create(null);
-	this.prev = Object.create(null);
-	this.first = undefined;
-	this.last = undefined;
+	this.next = new LLMap();
+	this.prev = new LLMap();
+	// Linked list head initially points to itself
+	this.next.set(null, null);
+	this.prev.set(null, null);
 	this.length = 0;
 };
 
@@ -41,28 +42,29 @@ Push behaves like array.push and accepts multiple string arguments. But it also
 accepts a single array argument too, to be consistent with its other methods.
 */
 LinkedList.prototype.push = function(/* values */) {
-	var values = arguments;
+	var i, values = arguments;
 	if($tw.utils.isArray(values[0])) {
 		values = values[0];
 	}
-	for(var i = 0; i < values.length; i++) {
+	for(i = 0; i < values.length; i++) {
 		_assertString(values[i]);
 	}
-	for(var i = 0; i < values.length; i++) {
+	for(i = 0; i < values.length; i++) {
 		_linkToEnd(this,values[i]);
 	}
 	return this.length;
 };
 
 LinkedList.prototype.pushTop = function(value) {
+	var t;
 	if($tw.utils.isArray(value)) {
-		for (var t=0; t<value.length; t++) {
+		for (t=0; t<value.length; t++) {
 			_assertString(value[t]);
 		}
-		for(var t=0; t<value.length; t++) {
+		for(t=0; t<value.length; t++) {
 			_removeOne(this,value[t]);
 		}
-		for(var t=0; t<value.length; t++) {
+		for(t=0; t<value.length; t++) {
 			_linkToEnd(this,value[t]);
 		}
 	} else {
@@ -74,11 +76,11 @@ LinkedList.prototype.pushTop = function(value) {
 
 LinkedList.prototype.each = function(callback) {
 	var visits = Object.create(null),
-		value = this.first;
-	while(value !== undefined) {
+		value = this.next.get(null);
+	while(value !== null) {
 		callback(value);
-		var next = this.next[value];
-		if(typeof next === "object") {
+		var next = this.next.get(value);
+		if(Array.isArray(next)) {
 			var i = visits[value] || 0;
 			visits[value] = i+1;
 			value = next[i];
@@ -105,91 +107,79 @@ LinkedList.prototype.makeTiddlerIterator = function(wiki) {
 };
 
 function _removeOne(list,value) {
-	var prevEntry = list.prev[value],
-		nextEntry = list.next[value],
+	var nextEntry = list.next.get(value);
+	if(nextEntry === undefined) {
+		return;
+	}
+	var prevEntry = list.prev.get(value),
 		prev = prevEntry,
-		next = nextEntry;
-	if(typeof nextEntry === "object") {
+		next = nextEntry,
+		ref;
+	if(Array.isArray(nextEntry)) {
 		next = nextEntry[0];
 		prev = prevEntry[0];
 	}
 	// Relink preceding element.
-	if(list.first === value) {
-		list.first = next
-	} else if(prev !== undefined) {
-		if(typeof list.next[prev] === "object") {
-			if(next === undefined) {
-				// Must have been last, and 'i' would be last element.
-				list.next[prev].pop();
-			} else {
-				var i = list.next[prev].indexOf(value);
-				list.next[prev][i] = next;
-			}
-		} else {
-			list.next[prev] = next;
-		}
+	ref = list.next.get(prev);
+	if(Array.isArray(ref)) {
+		var i = ref.indexOf(value);
+		ref[i] = next;
 	} else {
-		return;
+		list.next.set(prev,next);
 	}
+
 	// Now relink following element
-	// Check "next !== undefined" rather than "list.last === value" because
-	// we need to know if the FIRST value is the last in the list, not the last.
-	if(next !== undefined) {
-		if(typeof list.prev[next] === "object") {
-			if(prev === undefined) {
-				// Must have been first, and 'i' would be 0.
-				list.prev[next].shift();
-			} else {
-				var i = list.prev[next].indexOf(value);
-				list.prev[next][i] = prev;
-			}
-		} else {
-			list.prev[next] = prev;
-		}
+	ref = list.prev.get(next);
+	if(Array.isArray(ref)) {
+		var i = ref.indexOf(value);
+		ref[i] = prev;
 	} else {
-		list.last = prev;
+		list.prev.set(next,prev);
 	}
+
 	// Delink actual value. If it uses arrays, just remove first entries.
-	if(typeof nextEntry === "object") {
+	if(Array.isArray(nextEntry) && nextEntry.length > 1) {
 		nextEntry.shift();
 		prevEntry.shift();
 	} else {
-		list.next[value] = undefined;
-		list.prev[value] = undefined;
+		list.next.set(value,undefined);
+		list.prev.set(value,undefined);
 	}
 	list.length -= 1;
 };
 
 // Sticks the given node onto the end of the list.
 function _linkToEnd(list,value) {
-	if(list.first === undefined) {
-		list.first = value;
+	var old = list.next.get(value);
+	var last = list.prev.get(null);
+	// Does it already exists?
+	if(old !== undefined) {
+		if(!Array.isArray(old)) {
+			old = [old];
+			list.next.set(value,old);
+			list.prev.set(value,[list.prev.get(value)]);
+		}
+		old.push(null);
+		list.prev.get(value).push(last);
 	} else {
-		// Does it already exists?
-		if(list.first === value || list.prev[value] !== undefined) {
-			if(typeof list.next[value] === "string") {
-				list.next[value] = [list.next[value]];
-				list.prev[value] = [list.prev[value]];
-			} else if(typeof list.next[value] === "undefined") {
-				// list.next[value] must be undefined.
-				// Special case. List already has 1 value. It's at the end.
-				list.next[value] = [];
-				list.prev[value] = [list.prev[value]];
-			}
-			list.prev[value].push(list.last);
-			// We do NOT append a new value onto "next" list. Iteration will
-			// figure out it must point to End-of-List on its own.
-		} else {
-			list.prev[value] = list.last;
-		}
-		// Make the old last point to this new one.
-		if(typeof list.next[list.last] === "object") {
-			list.next[list.last].push(value);
-		} else {
-			list.next[list.last] = value;
-		}
+		list.next.set(value,null);
+		list.prev.set(value,last);
+	}
+	// Make the old last point to this new one.
+	if(value !== last) {
+		var array = list.next.get(last);
+		if(Array.isArray(array)) {
+			array[array.length-1] = value;
+		} else {
+			list.next.set(last,value);
+		}
+		list.prev.set(null,value);
+	} else {
+		// Edge case, the pushed value was already the last value.
+		// The second-to-last nextPtr for that value must point to itself now.
+		var array = list.next.get(last);
+		array[array.length-2] = value;
 	}
-	list.last = value;
 	list.length += 1;
 };
 
@@ -199,6 +189,20 @@ function _assertString(value) {
 	}
 };
 
+var LLMap = function() {
+	this.map = Object.create(null);
+};
+
+// Just a wrapper so our object map can also accept null.
+LLMap.prototype = {
+	set: function(key,val) {
+		(key === null) ? (this.null = val) : (this.map[key] = val);
+	},
+	get: function(key) {
+		return (key === null) ? this.null : this.map[key];
+	}
+};
+
 exports.LinkedList = LinkedList;
 
 })();

core/modules/utils/utils.js

@@ -354,6 +354,9 @@ exports.formatDateString = function(date,template) {
 	var result = "",
 		t = template,
 		matches = [
+			[/^TIMESTAMP/, function() {
+				return date.getTime();
+			}],
 			[/^0hh12/, function() {
 				return $tw.utils.pad($tw.utils.getHours12(date));
 			}],

core/modules/widgets/action-popup.js

@@ -14,6 +14,8 @@ Action widget to trigger a popup.
 
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
+var Popup = require("$:/core/modules/utils/dom/popup.js");
+
 var ActionPopupWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
@@ -57,20 +59,20 @@ Invoke the action associated with this widget
 */
 ActionPopupWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	// Trigger the popup
-	var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/,
-		match = popupLocationRegExp.exec(this.actionCoords || "");
-	if(match) {
+	var coordinates = Popup.parseCoordinates(this.actionCoords || "");
+	if(coordinates) {
 		$tw.popup.triggerPopup({
 			domNode: null,
 			domNodeRect: {
-				left: parseFloat(match[1]),
-				top: parseFloat(match[2]),
-				width: parseFloat(match[3]),
-				height: parseFloat(match[4])
+				left: coordinates.left,
+				top: coordinates.top,
+				width: coordinates.width,
+				height: coordinates.height
 			},
 			title: this.actionState,
 			wiki: this.wiki,
-			floating: this.floating
+			floating: this.floating,
+			absolute: coordinates.absolute
 		});
 	} else {
 		$tw.popup.cancel(0);

core/modules/widgets/button.js

@@ -14,6 +14,8 @@ Button widget
 
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
+var Popup = require("$:/core/modules/utils/dom/popup.js");
+
 var ButtonWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
@@ -147,7 +149,7 @@ ButtonWidget.prototype.isSelected = function() {
 
 ButtonWidget.prototype.isPoppedUp = function() {
 	var tiddler = this.popupTitle ? this.wiki.getTiddler(this.popupTitle) : this.wiki.getTiddler(this.popup);
-	var result = tiddler && tiddler.fields.text ? $tw.popup.readPopupState(tiddler.fields.text) : false;
+	var result = tiddler && tiddler.fields.text ? Popup.readPopupState(tiddler.fields.text) : false;
 	return result;
 };
 
@@ -173,6 +175,7 @@ ButtonWidget.prototype.triggerPopup = function(event) {
 	if(this.popupTitle) {
 		$tw.popup.triggerPopup({
 			domNode: this.domNodes[0],
+			absolute: (this.popupAbsCoords === "yes"),
 			title: this.popupTitle,
 			wiki: this.wiki,
 			noStateReference: true
@@ -180,6 +183,7 @@ ButtonWidget.prototype.triggerPopup = function(event) {
 	} else {
 		$tw.popup.triggerPopup({
 			domNode: this.domNodes[0],
+			absolute: (this.popupAbsCoords === "yes"),
 			title: this.popup,
 			wiki: this.wiki
 		});
@@ -223,6 +227,7 @@ ButtonWidget.prototype.execute = function() {
 	this.setField = this.getAttribute("setField");
 	this.setIndex = this.getAttribute("setIndex");
 	this.popupTitle = this.getAttribute("popupTitle");
+	this.popupAbsCoords = this.getAttribute("popupAbsCoords", "no");
 	this.tabIndex = this.getAttribute("tabindex");
 	this.isDisabled = this.getAttribute("disabled","no");
 	// Make child widgets
@@ -252,7 +257,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 */
 ButtonWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	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.setTitle || changedAttributes.setField || changedAttributes.setIndex || changedAttributes.popupTitle || changedAttributes.disabled || changedAttributes["default"]) {
+	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"]) {

core/modules/widgets/reveal.js

@@ -14,6 +14,8 @@ Reveal widget
 
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
+var Popup = require("$:/core/modules/utils/dom/popup.js");
+
 var RevealWidget = function(parseTreeNode,options) {
 	this.initialise(parseTreeNode,options);
 };
@@ -94,6 +96,13 @@ RevealWidget.prototype.positionPopup = function(domNode) {
 		left = Math.max(0,left);
 		top = Math.max(0,top);
 	}
+	if (this.popup.absolute) {
+		// Traverse the offsetParent chain and correct the offset to make it relative to the parent node.
+		for (var offsetParentDomNode = domNode.offsetParent; offsetParentDomNode; offsetParentDomNode = offsetParentDomNode.offsetParent) {
+			left -= offsetParentDomNode.offsetLeft;
+			top -= offsetParentDomNode.offsetTop;
+		}
+	}
 	domNode.style.left = left + "px";
 	domNode.style.top = top + "px";
 };
@@ -183,19 +192,11 @@ RevealWidget.prototype.compareStateText = function(state) {
 };
 
 RevealWidget.prototype.readPopupState = function(state) {
-	var popupLocationRegExp = /^\((-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+),(-?[0-9\.E]+)\)$/,
-		match = popupLocationRegExp.exec(state);
+	this.popup = Popup.parseCoordinates(state);
 	// Check if the state matches the location regexp
-	if(match) {
+	if(this.popup) {
 		// If so, we're open
 		this.isOpen = true;
-		// Get the location
-		this.popup = {
-			left: parseFloat(match[1]),
-			top: parseFloat(match[2]),
-			width: parseFloat(match[3]),
-			height: parseFloat(match[4])
-		};
 	} else {
 		// If not, we're closed
 		this.isOpen = false;

core/modules/widgets/select.js

@@ -42,6 +42,9 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
 	this.execute();
 	this.renderChildren(parent,nextSibling);
 	this.setSelectValue();
+	if(this.selectFocus == "yes") {
+		this.getSelectDomNode().focus();
+	}
 	$tw.utils.addEventListeners(this.getSelectDomNode(),[
 		{name: "change", handlerObject: this, handlerMethod: "handleChangeEvent"}
 	]);
@@ -143,6 +146,7 @@ SelectWidget.prototype.execute = function() {
 	this.selectMultiple = this.getAttribute("multiple", false);
 	this.selectSize = this.getAttribute("size");
 	this.selectTooltip = this.getAttribute("tooltip");
+	this.selectFocus = this.getAttribute("focus");
 	// Make the child widgets
 	var selectNode = {
 		type: "element",

core/templates/external-js/save-all-external-js.tid

@@ -4,5 +4,7 @@ title: $:/core/save/all-external-js
 \define saveTiddlerFilter()
 [is[tiddler]] -[prefix[$:/state/popup/]] -[prefix[$:/temp/]] -[prefix[$:/HistoryList]] -[status[pending]plugin-type[import]] -[[$:/core]] -[[$:/boot/boot.css]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] +[sort[title]] $(publishFilter)$
 \end
-\define coreURL() %24%3A%2Fcore%2Ftemplates%2Ftiddlywiki5.js
-{{$:/core/templates/tiddlywiki5-external-js.html}}
+\define defaultCoreURL() %24%3A%2Fcore%2Ftemplates%2Ftiddlywiki5.js
+<$let coreURL={{{ [[coreURL]is[variable]then<coreURL>else<defaultCoreURL>] }}}>
+	{{$:/core/templates/tiddlywiki5-external-js.html}}
+</$let>

core/templates/external-js/save-offline-external-js.tid

@@ -4,5 +4,7 @@ title: $:/core/save/offline-external-js
 \define saveTiddlerFilter()
 [is[tiddler]] -[prefix[$:/state/popup/]] -[prefix[$:/temp/]] -[prefix[$:/HistoryList]] -[status[pending]plugin-type[import]] -[[$:/core]] -[[$:/plugins/tiddlywiki/filesystem]] -[[$:/plugins/tiddlywiki/tiddlyweb]] -[[$:/boot/boot.css]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] +[sort[title]] $(publishFilter)$
 \end
-\define coreURL() tiddlywikicore-$(version)$.js
-{{$:/core/templates/tiddlywiki5-external-js.html}}
+\define defaultCoreURL() tiddlywikicore-$(version)$.js
+<$let coreURL={{{ [[coreURL]is[variable]then<coreURL>else<defaultCoreURL>] }}}>
+	{{$:/core/templates/tiddlywiki5-external-js.html}}
+</$let>

core/ui/AdvancedSearch/FilterButtons/dropdown.tid

@@ -14,8 +14,8 @@ tags: $:/tags/AdvancedSearch/FilterButton
 <$linkcatcher actions="<$action-setfield $tiddler='$:/temp/advancedsearch' text=<<navigateTo>>/><$action-setfield $tiddler='$:/temp/advancedsearch/input' text=<<navigateTo>>/><$action-setfield $tiddler='$:/temp/advancedsearch/refresh' text='yes'/><$action-sendmessage $message='tm-focus-selector' $param='.tc-advanced-search input' />">
 <div class="tc-block-dropdown-wrapper">
 <div class="tc-block-dropdown tc-edit-type-dropdown">
-<$list filter="[all[shadows+tiddlers]tag[$:/tags/Filter]]">
-<$link to={{!!filter}}><$transclude field="description"/></$link>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/Filter]!is[draft]]">
+<$link to={{!!filter}}><$let tv-wikilinks="no"><$transclude field="description"/></$let></$link>
 </$list>
 </div>
 </div>

core/ui/ControlPanel/Basics.tid

@@ -20,15 +20,16 @@ caption: {{$:/language/ControlPanel/Basics/Caption}}
 \end
 \whitespace trim
 
+|tc-max-width tc-edit-max-width|k
 |<<lingo Version/Prompt>> |''<<version>>'' |
 |<$link to="$:/SiteTitle"><<lingo Title/Prompt>></$link> |<$edit-text tiddler="$:/SiteTitle" default="" tag="input"/> |
 |<$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 tag="textarea" tiddler="$:/DefaultTiddlers" class="tc-edit-texteditor"/><br>//<<lingo DefaultTiddlers/BottomHint>>// |
+|<$link to="$:/DefaultTiddlers"><<lingo DefaultTiddlers/Prompt>></$link> |<<lingo DefaultTiddlers/TopHint>><br> <$edit class="tc-edit-texteditor" tiddler="$:/DefaultTiddlers"/><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" tag="textarea" 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=""/> |
 |<$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/Basics/retain-story-ordering-button.tid

@@ -0,0 +1,3 @@
+title: $:/snippets/retain-story-ordering-button
+
+<$button set="$:/DefaultTiddlers" setTo={{$:/config/ControlPanel/Basics/DefaultTiddlers/RetainStory}} ><<currentTiddler>></$button>

core/ui/EditTemplate.tid

@@ -1,7 +1,12 @@
 title: $:/core/ui/EditTemplate
 
-\define delete-edittemplate-state-tiddlers() <$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix<newFieldValueTiddlerPrefix>] [<newFieldNameInputTiddler>] [<newFieldNameSelectionTiddler>] [<newTagNameTiddler>] [<newTagNameInputTiddler>] [<newTagNameSelectionTiddler>] [<typeInputTiddler>] [<typeSelectionTiddler>]"/>
+\define delete-edittemplate-state-tiddlers()
+<$set name="safeNewFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
+	<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix[$:/temp/NewFieldValue]prefix<safeNewFieldValueTiddlerPrefix>] [<newFieldNameInputTiddler>] [<newFieldNameSelectionTiddler>] [<newTagNameTiddler>] [<newTagNameInputTiddler>] [<newTagNameSelectionTiddler>] [<typeInputTiddler>] [<typeSelectionTiddler>]"/>
+</$set>
+\end
 
+<!-- Beware this is duplicated from fields.tid. For details see bug #7054 -->
 \define get-field-value-tiddler-filter() [subfilter<get-field-editor-filter>sha256[16]addprefix[/]addprefix<newFieldValueTiddlerPrefix>]
 \define get-field-editor-filter() [<newFieldNameTiddler>get[text]else[]] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
 
@@ -23,7 +28,7 @@ title: $:/core/ui/EditTemplate
 <div
 	data-tiddler-title=<<currentTiddler>>
 	data-tags={{!!tags}}
-	class={{{ tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
+	class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-edit-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
 	role="region"
 	aria-label={{$:/language/EditTemplate/Caption}}>
 <$fieldmangler>

core/ui/EditTemplate/body/default.tid

@@ -19,7 +19,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 
 <$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 
-<div class="tc-tiddler-preview-preview">
+<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
 
 <$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
 

core/ui/EditTemplate/fields.tid

@@ -10,6 +10,10 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 [[hide]] -[title{$(config-title)$}]
 \end
 
+<!-- Beware this is duplicated from EditTemplate.tid. For details see bug #7054 -->
+\define get-field-value-tiddler-filter() [subfilter<get-field-editor-filter>sha256[16]addprefix[/]addprefix<newFieldValueTiddlerPrefix>]
+\define get-field-editor-filter() [<newFieldNameTiddler>get[text]else[]] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
+
 \define current-tiddler-new-field-selector()
 [data-tiddler-title="$(currentTiddlerCSSescaped)$"] .tc-edit-field-add-name-wrapper input
 \end
@@ -17,7 +21,9 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 \define new-field-actions()
 \whitespace trim
 <$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldNameTiddler>get[text]] :map[subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
-<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix<newFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
+<$set name="safeNewFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
+	<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix[$:/temp/NewFieldValue]prefix<safeNewFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
+</$set>
 <$action-sendmessage $message="tm-focus-selector" $param=<<current-tiddler-new-field-selector>>/>
 \end
 
@@ -52,7 +58,9 @@ $:/config/EditTemplateFields/Visibility/$(currentField)$
 <$action-sendmessage $message="tm-add-field"
 $name=<<name>>
 $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
-<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix<newFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
+<$set name="safeNewFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
+	<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix[$:/temp/NewFieldValue]prefix<safeNewFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
+</$set>
 <<lingo Fields/Add/Button>>
 </$button>
 </$reveal>
@@ -65,6 +73,7 @@ $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
 \end
 \whitespace trim
 
+<$set name="newFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
 <div class="tc-edit-fields">
 <table class={{{ [all[current]fields[]] :filter[lookup[$:/config/EditTemplateFields/Visibility/]!match[hide]] +[count[]!match[0]] +[then[tc-edit-fields]] ~[[tc-edit-fields tc-edit-fields-small]] }}}>
 <tbody>
@@ -148,3 +157,4 @@ $value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
 </$vars>
 </div>
 </$fieldmangler>
+</$set>

core/ui/ImportListing.tid

@@ -117,15 +117,15 @@ title: $:/core/ui/ImportListing
 		</div>
 	</td>
 </$reveal>
-<tr>
+<$reveal type="match" text="yes" state=<<previewPopupState>> tag="tr">
 <td colspan="3">
-<$reveal type="match" text="yes" state=<<previewPopupState>> tag="div">
 <$list filter="[{$:/state/importpreviewtype}has[text]]" variable="listItem" emptyMessage={{$:/core/ui/ImportPreviews/Text}}>
-<$transclude tiddler={{$:/state/importpreviewtype}}/>
+	<div>
+		<$transclude tiddler={{$:/state/importpreviewtype}}/>
+	</div>
 </$list>
-</$reveal>
 </td>
-</tr>
+</$reveal>
 </$list>
 </tbody>
 </table>

core/ui/KeyboardShortcuts/advanced-search.tid

@@ -4,6 +4,6 @@ key: ((advanced-search))
 
 \whitespace trim
 <$navigator story="$:/StoryList" history="$:/HistoryList">
-<$action-navigate $to="$:/AdvancedSearch"/>
+<$action-navigate $to="$:/AdvancedSearch" $scroll="yes"/>
 <$action-sendmessage $message="tm-focus-selector" $param="""[data-tiddler-title="$:/AdvancedSearch"] .tc-search input""" preventScroll="true"/>
 </$navigator>

core/ui/PageControls/layout.tid

@@ -0,0 +1,15 @@
+title: $:/core/ui/Buttons/layout
+tags: $:/tags/PageControls
+caption: {{$:/core/images/layout-button}} {{$:/language/Buttons/LayoutSwitcher/Caption}}
+description: {{$:/language/LayoutSwitcher/Description}}
+
+\whitespace trim
+<$button tooltip={{$:/language/Buttons/LayoutSwitcher/Hint}} aria-label={{$:/language/Buttons/LayoutSwitcher/Caption}} class=<<tv-config-toolbar-class>>>
+<$action-sendmessage $message="tm-show-switcher" switch="layout"/>
+<$list filter="[<tv-config-toolbar-icons>match[yes]]">
+{{$:/core/images/layout-button}}
+</$list>
+<$list filter="[<tv-config-toolbar-text>match[yes]]">
+<span class="tc-btn-text"><$text text={{$:/language/Buttons/LayoutSwitcher/Caption}}/></span>
+</$list>
+</$button>

core/ui/PageTemplate.tid

@@ -3,9 +3,6 @@ name: {{$:/language/PageTemplate/Name}}
 description: {{$:/language/PageTemplate/Description}}
 
 \whitespace trim
-\define containerClasses()
-tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
-\end
 \import [[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]
 
 <$vars
@@ -17,7 +14,7 @@ tc-page-container tc-page-view-$(storyviewTitle)$ tc-language-$(languageTitle)$
 	storyviewTitle={{$:/view}}
 	languageTitle={{{ [{$:/language}get[name]] }}}>
 
-<div class=<<containerClasses>>>
+<div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
 
 <$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
 

core/ui/SideBar/More.tid

@@ -3,6 +3,6 @@ tags: $:/tags/SideBar
 caption: {{$:/language/SideBar/More/Caption}}
 
 \whitespace trim
-<div class="tc-more-sidebar">
-<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" default={{$:/config/DefaultMoreSidebarTab}} state="$:/state/tab/moresidebar" class="tc-vertical tc-sidebar-tabs-more" explicitState="$:/state/tab/moresidebar-1850697562"/>
+<div class={{{ [{$:/config/ui/SideBar/More/horizontal}match[yes]then[tc-sidebar-tabs]else[tc-more-sidebar]] }}}>
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/MoreSideBar]!has[draft.of]]" default={{$:/config/DefaultMoreSidebarTab}} state="$:/state/tab/moresidebar" class={{{ [{$:/config/ui/SideBar/More/horizontal}match[yes]then[tc-sidebar-tabs-more]else[tc-vertical tc-sidebar-tabs-more]] }}} explicitState="$:/state/tab/moresidebar-1850697562"/>
 </div>

core/ui/SwitcherModal.tid

@@ -1,6 +1,7 @@
 title: $:/core/ui/SwitcherModal
 subtitle: <$text text={{{[<switch>lookup[$:/language/Switcher/Subtitle/]]}}}/>
 class: tc-modal-centered
+mask-closable: yes
 
 <$tiddler tiddler={{{[<switch>lookup[$:/config/SwitcherTargets/]]}}}>
 

core/ui/TagManager.tid

@@ -3,89 +3,101 @@ icon: $:/core/images/tag-button
 color: #bbb
 
 \define lingo-base() $:/language/TagManager/
+
 \define iconEditorTab(type)
 \whitespace trim
 <$link to=""><<lingo Icons/None>></$link>
 <$list filter="[all[shadows+tiddlers]is[image]] [all[shadows+tiddlers]tag[$:/tags/Image]] -[type[application/pdf]] +[sort[title]] +[$type$is[system]]">
-<$link to={{!!title}}>
-<$transclude/> <$view field="title"/>
-</$link>
+	<$link to={{!!title}}>
+		<$transclude/> <$view field="title"/>
+	</$link>
 </$list>
 \end
+
 \define iconEditor(title)
 \whitespace trim
 <div class="tc-drop-down-wrapper">
-<$button popupTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} class="tc-btn-invisible tc-btn-dropdown">{{$:/core/images/down-arrow}}</$button>
-<$reveal stateTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} type="popup" position="belowleft" text="" default="">
-<div class="tc-drop-down">
-<$linkcatcher actions="""<$action-setfield $tiddler=<<__title__>> icon=<<navigateTo>>/>""">
-<<iconEditorTab type:"!">>
-<hr/>
-<<iconEditorTab type:"">>
-</$linkcatcher>
-</div>
-</$reveal>
+	<$button popupTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} class="tc-btn-invisible tc-btn-dropdown">
+		{{$:/core/images/down-arrow}}
+	</$button>
+	<$reveal stateTitle={{{ [[$:/state/popup/icon/]addsuffix<__title__>] }}} type="popup" position="belowleft" text="" default="">
+		<div class="tc-drop-down">
+			<$linkcatcher actions="""<$action-setfield $tiddler=<<__title__>> icon=<<navigateTo>>/>""">
+				<<iconEditorTab type:"!">>
+				<hr/>
+				<<iconEditorTab type:"">>
+			</$linkcatcher>
+		</div>
+	</$reveal>
 </div>
 \end
+
 \define toggleButton(state)
 \whitespace trim
 <$reveal stateTitle=<<__state__>> type="match" text="closed" default="closed">
-<$button setTitle=<<__state__>> setTo="open" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
-{{$:/core/images/info-button}}
-</$button>
+	<$button setTitle=<<__state__>> setTo="open" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
+		{{$:/core/images/info-button}}
+	</$button>
 </$reveal>
 <$reveal stateTitle=<<__state__>> type="match" text="open" default="closed">
-<$button setTitle=<<__state__>> setTo="closed" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
-{{$:/core/images/info-button}}
-</$button>
+	<$button setTitle=<<__state__>> setTo="closed" class="tc-btn-invisible tc-btn-dropdown" selectedClass="tc-selected">
+		{{$:/core/images/info-button}}
+	</$button>
 </$reveal>
 \end
+
 \whitespace trim
 <table class="tc-tag-manager-table">
 <tbody>
-<tr>
-<th><<lingo Colour/Heading>></th>
-<th class="tc-tag-manager-tag"><<lingo Tag/Heading>></th>
-<th><<lingo Count/Heading>></th>
-<th><<lingo Icon/Heading>></th>
-<th><<lingo Info/Heading>></th>
-</tr>
-<$list filter="[tags[]!is[system]sort[title]]">
-<tr>
-<td><$edit-text field="color" tag="input" type="color"/></td>
-<td>{{||$:/core/ui/TagTemplate}}</td>
-<td><$count filter="[all[current]tagging[]]"/></td>
-<td>
-<$macrocall $name="iconEditor" title={{!!title}}/>
-</td>
-<td>
-<$macrocall $name="toggleButton" state={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} /> 
-</td>
-</tr>
-<tr>
-<td></td>
-<td colspan="4">
-<$reveal stateTitle={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} type="match" text="open" default="">
-<table>
-<tbody>
-<tr><td><<lingo Colour/Heading>></td><td><$edit-text field="color" tag="input" type="text" size="9"/></td></tr>
-<tr><td><<lingo Icon/Heading>></td><td><$edit-text field="icon" tag="input" size="45"/></td></tr>
-</tbody>
-</table>
-</$reveal>
-</td>
-</tr>
-</$list>
-<tr>
-<td></td>
-<td style="position:relative;">
-{{$:/core/ui/UntaggedTemplate}}
-</td>
-<td>
-<small class="tc-menu-list-count"><$count filter="[untagged[]!is[system]] -[tags[]]"/></small>
-</td>
-<td></td>
-<td></td>
-</tr>
+	<tr>
+		<th><<lingo Colour/Heading>></th>
+		<th class="tc-tag-manager-tag"><<lingo Tag/Heading>></th>
+		<th><<lingo Count/Heading>></th>
+		<th><<lingo Icon/Heading>></th>
+		<th><<lingo Info/Heading>></th>
+	</tr>
+	<$list filter="[tags[]!is[system]sort[title]]">
+		<tr>
+			<td><$edit-text field="color" tag="input" type="color"/></td>
+			<td>{{||$:/core/ui/TagTemplate}}</td>
+			<td><$count filter="[all[current]tagging[]]"/></td>
+			<td>
+				<$macrocall $name="iconEditor" title={{!!title}}/>
+			</td>
+			<td>
+				<$macrocall $name="toggleButton" state={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} />
+			</td>
+		</tr>
+		<tr>
+			<td></td>
+			<td colspan="4">
+				<$reveal stateTitle={{{ [[$:/state/tag-manager/]addsuffix<currentTiddler>] }}} type="match" text="open" default="">
+					<table>
+						<tbody>
+							<tr>
+								<td><<lingo Colour/Heading>></td>
+								<td><$edit-text field="color" tag="input" type="text" size="9"/></td>
+							</tr>
+							<tr>
+								<td><<lingo Icon/Heading>></td>
+								<td><$edit-text field="icon" tag="input" size="45"/></td>
+							</tr>
+						</tbody>
+					</table>
+				</$reveal>
+			</td>
+		</tr>
+	</$list>
+	<tr>
+		<td></td>
+		<td style="position:relative;">
+			{{$:/core/ui/UntaggedTemplate}}
+		</td>
+		<td>
+			<small class="tc-menu-list-count"><$count filter="[untagged[]!is[system]] -[tags[]]"/></small>
+		</td>
+		<td></td>
+		<td></td>
+	</tr>
 </tbody>
 </table>

core/ui/ViewTemplate.tid

@@ -7,7 +7,7 @@ $:/state/folded/$(currentTiddler)$
 \define cancel-delete-tiddler-actions(message) <$action-sendmessage $message="tm-$message$-tiddler"/>
 \import [all[shadows+tiddlers]tag[$:/tags/Macro/View]!has[draft.of]]
 <$vars storyTiddler=<<currentTiddler>> tiddlerInfoState=<<qualify "$:/state/popup/tiddler-info">>>
-<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
+<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/TiddlerTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-tiddler-frame tc-tiddler-view-frame [<currentTiddler>is[tiddler]then[tc-tiddler-exists]] [<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]] [<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]] [<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]] [<currentTiddler>is[system]then[tc-tiddler-system]] [{!!class}] [<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}} role="article">
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem">
 <$transclude tiddler=<<listItem>>/>
 </$list>

core/ui/ViewTemplate/unfold.tid

@@ -2,17 +2,21 @@ title: $:/core/ui/ViewTemplate/unfold
 tags: $:/tags/ViewTemplate
 
 \whitespace trim
-<$reveal tag="div" type="nomatch" state="$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar" text="hide">
+<div class="tc-reveal">
+<$list filter="[{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}match[show]]" variable="ignore">
 <$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
 <$button tooltip={{$:/language/Buttons/Fold/Hint}} aria-label={{$:/language/Buttons/Fold/Caption}} class="tc-fold-banner">
 <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
 {{$:/core/images/chevron-up}}
 </$button>
 </$reveal>
+</$list>
+<$list filter="[{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}match[show]] :else[<folded-state>get[text]match[hide]]" variable="ignore">
 <$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
 <$button tooltip={{$:/language/Buttons/Unfold/Hint}} aria-label={{$:/language/Buttons/Unfold/Caption}} class="tc-unfold-banner">
 <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>
 {{$:/core/images/chevron-down}}
 </$button>
 </$reveal>
-</$reveal>
+</$list>
+</div>

core/wiki/config/DefaultTiddlersRetainStory.tid

@@ -0,0 +1,3 @@
+title: $:/config/ControlPanel/Basics/DefaultTiddlers/RetainStory
+
+[list[$:/StoryList]]

core/wiki/config/PageControlButtons.multids

@@ -21,4 +21,5 @@ core/ui/Buttons/print: hide
 core/ui/Buttons/storyview: hide
 core/ui/Buttons/timestamp: hide
 core/ui/Buttons/theme: hide
+core/ui/Buttons/layout: hide
 core/ui/Buttons/unfold-all: hide

core/wiki/macros/list.tid

@@ -1,21 +1,21 @@
 title: $:/core/macros/list
 tags: $:/tags/Macro
 
-\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage)
+\define list-links(filter,type:"ul",subtype:"li",class:"",emptyMessage,field:"caption")
 \whitespace trim
-<$type$ class="$class$">
-<$list filter="$filter$" emptyMessage=<<__emptyMessage__>>>
-<$subtype$>
+<$genesis $type=<<__type__>> class=<<__class__>>>
+<$list filter=<<__filter__>> emptyMessage=<<__emptyMessage__>>>
+<$genesis $type=<<__subtype__>>>
 <$link to={{!!title}}>
 <$let tv-wikilinks="no">
-<$transclude field="caption">
+<$transclude field=<<__field__>>>
 <$view field="title"/>
 </$transclude>
 </$let>
 </$link>
-</$subtype$>
+</$genesis>
 </$list>
-</$type$>
+</$genesis>
 \end
 
 \define list-links-draggable-drop-actions()

core/wiki/macros/timeline.tid

@@ -3,14 +3,11 @@ modified: 20141212110330815
 tags: $:/tags/Macro
 title: $:/core/macros/timeline
 
-\define timeline-title()
-\whitespace trim
-<!-- Override this macro with a global macro 
-     of the same name if you need to change 
-     how titles are displayed on the timeline 
-     -->
-<$view field="title"/>
-\end
+<!-- Override one or both of the following two macros with a global or local macro of the same name 
+if you need to change how titles are displayed on a timeline -->
+
+\define timeline-title() <$view field="title"/>
+\define timeline-link() <$link to={{!!title}}><<timeline-title>></$link>
 \define timeline(limit:"100",format:"DDth MMM YYYY",subfilter:"",dateField:"modified")
 \whitespace trim
 <div class="tc-timeline">
@@ -19,7 +16,7 @@ title: $:/core/macros/timeline
 <$view field="$dateField$" format="date" template="$format$"/>
 <$list filter="[sameday:$dateField${!!$dateField$}!is[system]$subfilter$!sort[$dateField$]]">
 <div class="tc-menu-list-subitem">
-<$link to={{!!title}}><<timeline-title>></$link>
+<<timeline-link>>
 </div>
 </$list>
 </div>

core/wiki/macros/toc.tid

@@ -1,6 +1,10 @@
 title: $:/core/macros/toc
 tags: $:/tags/Macro
 
+
+\define toc-open-icon() $:/core/images/down-arrow
+\define toc-closed-icon() $:/core/images/right-arrow
+
 \define toc-caption()
 \whitespace trim
 <span class="tc-toc-caption tc-tiny-gap-left">
@@ -45,12 +49,12 @@ tags: $:/tags/Macro
     <$link to={{{ [<currentTiddler>get[target]else<currentTiddler>] }}}>
       <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/right-arrow}}
+          <$transclude tiddler=<<toc-closed-icon>> />
         </$button>
       </$reveal>
       <$reveal type="match" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/down-arrow}}
+          <$transclude tiddler=<<toc-open-icon>> />
         </$button>
       </$reveal>
       <<toc-caption>>
@@ -71,13 +75,13 @@ tags: $:/tags/Macro
     <li class=<<toc-item-class>>>
       <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/right-arrow}}
+         <$transclude tiddler=<<toc-closed-icon>> />
           <<toc-caption>>
         </$button>
       </$reveal>
       <$reveal type="match" stateTitle=<<toc-state>> text="open">
         <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-          {{$:/core/images/down-arrow}}
+          <$transclude tiddler=<<toc-open-icon>> />
           <<toc-caption>>
         </$button>
       </$reveal>
@@ -117,12 +121,12 @@ tags: $:/tags/Macro
           <$list filter="[all[current]tagging[]$sort$limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button>">
           <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
             <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-              {{$:/core/images/right-arrow}}
+            <$transclude tiddler=<<toc-closed-icon>> />
             </$button>
           </$reveal>
           <$reveal type="match" stateTitle=<<toc-state>> text="open">
             <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-              {{$:/core/images/down-arrow}}
+              <$transclude tiddler=<<toc-open-icon>> />
             </$button>
           </$reveal>
         </$list>
@@ -144,13 +148,13 @@ tags: $:/tags/Macro
       <$list filter="[all[current]tagging[]$sort$limit[1]]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button> <$view field='caption'><$view field='title'/></$view>">
         <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
           <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
-            {{$:/core/images/right-arrow}}
+            <$transclude tiddler=<<toc-closed-icon>> />
             <<toc-caption>>
           </$button>
         </$reveal>
         <$reveal type="match" stateTitle=<<toc-state>> text="open">
           <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
-            {{$:/core/images/down-arrow}}
+            <$transclude tiddler=<<toc-open-icon>> />
             <<toc-caption>>
           </$button>
         </$reveal>

core/wiki/tags/PageControls.tid

@@ -1,2 +1,2 @@
 title: $:/tags/PageControls
-list: [[$:/core/ui/Buttons/home]] [[$:/core/ui/Buttons/close-all]] [[$:/core/ui/Buttons/fold-all]] [[$:/core/ui/Buttons/unfold-all]] [[$:/core/ui/Buttons/permaview]] [[$:/core/ui/Buttons/new-tiddler]] [[$:/core/ui/Buttons/new-journal]] [[$:/core/ui/Buttons/new-image]] [[$:/core/ui/Buttons/import]] [[$:/core/ui/Buttons/export-page]] [[$:/core/ui/Buttons/control-panel]] [[$:/core/ui/Buttons/advanced-search]] [[$:/core/ui/Buttons/manager]] [[$:/core/ui/Buttons/tag-manager]] [[$:/core/ui/Buttons/language]] [[$:/core/ui/Buttons/palette]] [[$:/core/ui/Buttons/theme]] [[$:/core/ui/Buttons/storyview]] [[$:/core/ui/Buttons/encryption]] [[$:/core/ui/Buttons/timestamp]] [[$:/core/ui/Buttons/full-screen]] [[$:/core/ui/Buttons/print]] [[$:/core/ui/Buttons/save-wiki]] [[$:/core/ui/Buttons/refresh]] [[$:/core/ui/Buttons/more-page-actions]]
+list: [[$:/core/ui/Buttons/home]] [[$:/core/ui/Buttons/close-all]] [[$:/core/ui/Buttons/fold-all]] [[$:/core/ui/Buttons/unfold-all]] [[$:/core/ui/Buttons/permaview]] [[$:/core/ui/Buttons/new-tiddler]] [[$:/core/ui/Buttons/new-journal]] [[$:/core/ui/Buttons/new-image]] [[$:/core/ui/Buttons/import]] [[$:/core/ui/Buttons/export-page]] [[$:/core/ui/Buttons/control-panel]] [[$:/core/ui/Buttons/advanced-search]] [[$:/core/ui/Buttons/manager]] [[$:/core/ui/Buttons/tag-manager]] [[$:/core/ui/Buttons/language]] [[$:/core/ui/Buttons/palette]] [[$:/core/ui/Buttons/theme]] [[$:/core/ui/Buttons/layout]] [[$:/core/ui/Buttons/storyview]] [[$:/core/ui/Buttons/encryption]] [[$:/core/ui/Buttons/timestamp]] [[$:/core/ui/Buttons/full-screen]] [[$:/core/ui/Buttons/print]] [[$:/core/ui/Buttons/save-wiki]] [[$:/core/ui/Buttons/refresh]] [[$:/core/ui/Buttons/more-page-actions]]

editions/dev/tiddlers/HelloThere.tid

@@ -1,5 +1,5 @@
 created: 20190115173333457
-modified: 20190115173723915
+modified: 20221029175754753
 tags: TableOfContents
 title: HelloThere
 type: text/vnd.tiddlywiki
@@ -15,6 +15,7 @@ Welcome to the developer documentation for TiddlyWiki (https://tiddlywiki.com/).
 ** [[Using ES2016 for Writing Plugins]]
 ** [[Adding Babel Polyfill to TiddlyWiki]]
 ** [[TiddlyWiki Drag and Drop Interoperability]]
+** [[Javascript Widget Tutorial]]
 * The original developer documentation from https://tiddlywiki.com:
 ** [[TiddlyWiki for Developers]]
 ** [[TiddlyWiki Coding Style Guidelines]]

editions/dev/tiddlers/How to run a local plugin library for testing.tid

@@ -0,0 +1,42 @@
+created: 20221114225038703
+modified: 20221114230502925
+tags: howto
+title: How to run a local plugin library for testing
+type: text/vnd.tiddlywiki
+
+!! Start the Library Server
+
+The "pluginlibrary" edition contains the components needed to set up a local server for ~TiddlyWiki plugin library testing or development.
+
+The following commands will create the library files and start a test server at http://localhost:8888
+
+```
+cd /your/path/to/TiddlyWiki5/editions/pluginlibrary
+tiddlywiki --build test-server
+```
+
+!! Important
+
+''This server is read-only. Nothing is saved back to the filesystem''
+
+!! Test the Library with a Single File Wiki
+
+* Open a single file wiki and import the configuration tiddler form http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary
+* Open the ''$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+
+!! Test the Library with a Node.js Wiki
+
+* Create a new wiki with eg:
+
+<<<
+```
+cd /temp/
+tiddlywiki my-wiki --init server
+tiddlywiki my-wiki --listen
+```
+<<<
+
+* Open "my-wiki" from http://localhost:8080
+* Import the http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary tiddler into "my-wiki"
+* Open the ''$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+

editions/dev/tiddlers/javascript-widget-tutorial/Child widgets tutorial.tid

@@ -0,0 +1,140 @@
+created: 20190202160512541
+modified: 20190222231130254
+title: Child widgets tutorial
+type: text/vnd.tiddlywiki
+
+\define showTrees(wikitext)
+<table>
+<thead>
+<tr><th>wiki text</th><th>html</th><th>renders as</th></tr>
+</thead>
+<tbody>
+<tr>
+<td>`$wikitext$`</td>
+<td>
+<$wikify name=html text="""$wikitext$""" output=html mode=inline>
+<$text text=<<html>>/>
+</$wikify>
+</td>
+<td>$wikitext$</td>
+</tr>
+</tbody>
+</table>
+
+<table>
+<thead>
+<tr><th>parse tree</th><th>widget tree</th></tr>
+</thead>
+<tbody>
+<tr>
+<td style="vertical-align: text-top">
+<pre><code>
+<$wikify name=parsetree text="""$wikitext$""" output=parsetree mode=inline>
+<<parsetree>>
+</$wikify>
+</code></pre>
+</td>
+<td style="vertical-align: text-top">
+<pre><code>
+<$wikify name=widgettree text="""$wikitext$""" output=widgettree mode=inline>
+<<widgettree>>
+</$wikify>
+</code></pre>
+</td>
+</tr>
+</tbody>
+</table>
+\end
+
+! Introduction
+
+Until now the examples have covered only simple, leaf widgets, but widgets can be arranged into a hierarchy. Compared to a leaf-only widget, widget classes which support having children must contain code to instantiate the children.
+
+Not all widgets need to support having children. Widgets whose only purpose is to integrate third party javascript libraries, for example may not need it.
+
+! wiki text ⇨ parse tree ⇨ widget tree ⇨ DOM tree
+
+# [[wiki text|https://tiddlywiki.com/#WikiText]] - Users write content in tiddlers using wiki text.
+# [[parse tree|https://tiddlywiki.com/dev/#ParsingMechanism]] - A parse tree is a JSON data structure describing the wiki text. Wiki text can be converted into a parse tree using `this.wiki.parseText`.
+# ''widget tree'' - Most items in the parse tree correspond to one or more items in the widget tree. The `this.makeChildWidgets` method is used to convert the parse tree into a widget tree.
+# [[DOM tree|https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction]] - A DOM tree is a standard javascript datastructure used by browsers to display a web page. The `this.renderChildren` method is used to instantiate the widget class and then render each widget in the widget tree. If a given widget will be visible in the browser, then one or more DOM nodes will be created.
+
+!Examples
+
+!! Simple trees without nesting
+
+[[Widgets in wiki text|https://tiddlywiki.com/#Widgets%20in%20WikiText]] have a syntax similar to html (i.e. `<$list/>`). But all [[wiki markup|https://tiddlywiki.com/#WikiText]] is seen by the tiddlywiki code as widgets.
+
+Even a simple string with no special syntax will be treated as a widget. In this case a widget of type `text`:
+
+<<showTrees """hello""">>
+
+The above bare string of text is mostly just a synonym for this widget syntax:
+
+<<showTrees """<$text text=hello/>""">>
+
+Some of the details of the parseTree and widgetTree are different in the two examples, but the general structure is the same and the rendered output is the same.
+
+In these two simple examples, there is no nesting and so no child widgets are created. 
+
+!! Trees with one level of nesting
+
+This next example shows the structure for bold wiki syntax. It is still simple, but does introduce one level of nesting: `element`→`text`
+
+The wiki syntax for bold converts to the standard html element `strong`. Any standard html element is represented in tiddlywiki as a widget of type `element`:
+
+<<showTrees """''bold''""">>
+
+Another example showing one level of nesting (`link`→`text`):
+
+<<showTrees """<$link to=atiddler>link</$link>""">>
+
+!!Widgets with no DOM contribution
+Not all widgets contribute items to the DOM. The purpose of some widgets is to affect the display of descendant widgets by changing some state. The `$set` widget for example sets a variable which will be accessible to the descendant widgets:
+
+<<showTrees """<$set name=myvar value=hi/>""">>
+
+Nothing is rendered and there is no html, but the parse tree and widget tree contain information about the variable.
+
+!! Dynamic widget children using this.wiki.parseText
+
+In all the examples so far, there has been a close mapping between the nesting structure of the parse tree and the widget tree. If the item is in the parse tree, then it is in the widget tree. If the parse tree item has children, then the widget tree has the same number of children.
+
+However, there are several examples of widgets in which more levels of nesting are created dynamically during the widget rendering process
+
+The `$macrocall` widget is one example:
+
+<<showTrees """<$macrocall $name=now/>""" >>
+
+The parse tree has just a single type=$macrocall element with no children. The widget tree has that same type=$macrocall element, but it also has a child widget which wasn't in the parse tree.
+
+In all cases, the `$macrocall` widget calls the given macro and then calls `this.wiki.parseText` on the output. This results in a new parse tree which is used to make the child widgets.
+
+In this particular case, the `now` macro is called. It returns a simple string of text, so when it is parsed the result causes the creation of a single child text widget containing the current date and time.
+
+!! Widgets which do not support nesting
+
+Just as some widgets can cause widget trees to have more nesting than the parse tree, some widgets can cause widget trees to have less nesting.
+
+This happens when there is no use for the widget to have any children. The `$text` widget, for example, has no use for displaying any descendants.
+
+This behavior is accomplished by not calling the `makeChildWidgets` method. Without that method call, the child widgets are not created from the child parse tree items. For example:
+
+<$macrocall $name=showTrees wikitext="""<$text text="hi">ignored child text</$text>"""/>
+
+Since the `$text` widget does not have a call to `makeChildWidgets`, 'ignored child text' above is present in the parse tree, but not in the widget tree.
+
+!Reference
+
+|!method|!when to call|!what it does|
+|`makeChildWidgets`|directly or indirectly from `render` method|converts child parse tree items into widget tree items|
+|`renderChildren`|directly or indirectly from `render` method, after the `makeChildWidgets` call|calls the `render` method of the child widget|
+|`refreshChildren`|directly or indirectly from `refresh` method, only needed if `refreshSelf` is not called|calls the `refresh` method of of the child widgets so they can check if refresh is needed|
+|`this.wiki.parseText`|pass the output parse tree to `makeChildWidgets`|converts the given text to a parse tree...only needed for dynamically constructed parsetree|
+
+|!example call|!purpose|!widgets using this approach|
+|`this.makeChildWidgets()`|construct child widgets from the static parse tree|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc.|
+|`this.makeChildWidgets(parseTreeNodes)`|construct child widgets from a dynamic parse tree|[[$list|$:/core/modules/widgets/list.js]], [[$transclude|$:/core/modules/widgets/transclude.js]], [[$macrocall|$:/core/modules/widgets/macrocall.js]], etc|
+|`this.renderChildren(parent, nextSibling)`|when the widget adds nothing to the dom, just pass the `render` arguments through to the children|[[$set|$:/core/modules/widgets/set.js]], [[$importvariables|$:/core/modules/widgets/importvariables.js]], [[$tiddler|$:/core/modules/widgets/tiddler.js]], [[$wikify|$:/core/modules/widgets/wikify.js]], etc.|
+|`this.renderChildren(domNode, null)`|passes the dom node generated by this widget into the children|[[$link|$:/core/modules/widgets/link.js]], [[$button|$:/core/modules/widgets/button.js]], etc|
+

editions/dev/tiddlers/javascript-widget-tutorial/Do nothing widget demo.tid

@@ -0,0 +1,22 @@
+created: 20190201120100249
+modified: 20190201222600576
+tags: 
+title: Do nothing widget demo
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[donothing.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[do nothing widget]]"/>
+	<$data $tiddler=donothing.js/>
+	<$data title="do nothing widget" text="""
+```
+<$donothing/>
+```
+
+Renders as:
+
+<$donothing/>
+"""/>
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Do nothing widget tutorial.tid

@@ -0,0 +1,25 @@
+created: 20190201232102417
+modified: 20190202145547621
+tags: 
+title: Do nothing widget tutorial
+type: text/vnd.tiddlywiki
+
+In order to define a widget in a tiddler, the tiddler must satisfy these requirements:
+
+* type field is application/javascript
+* module-type field is widget
+* the text field contains the javascript code
+
+The [[donothing.js]] tiddler fulfills the requirements and its code looks like this:
+{{donothing.js}}
+That code does 2 key things:
+
+* Imports the core Widget class ([[$:/core/modules/widgets/widget.js]])
+* exports the class in an attribute with the name we want our widget to have (`donothing`)
+
+Here's what it looks like:
+{{Do nothing widget demo}}
+And it worked. No error message this time.
+
+''Exercise'': Modify [[donothing.js]] and [[Do nothing widget demo]] so the widget is named `noop` instead of `donothing`
+

editions/dev/tiddlers/javascript-widget-tutorial/Hello World demo.tid

@@ -0,0 +1,23 @@
+created: 20190201114718313
+modified: 20190201231556294
+tags: 
+title: Hello World demo
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[hello.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
+	<$data $tiddler=hello.js/>
+	<$data title="hello world widget" text="""
+```
+<$hello/>
+```
+
+Renders as:
+
+<$hello/>
+"""/>
+
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Hello World widget tutorial.tid

@@ -0,0 +1,18 @@
+created: 20190201232200698
+modified: 20190216175629825
+tags: 
+title: Hello World widget tutorial
+type: text/vnd.tiddlywiki
+
+Now let's create a widget which actually has output.
+
+When tiddlywiki encounters a widget definition like `<$hello>` it will create an object which is an instance of the class which is exported by the widget code. 
+
+In addition to creating an instance of the class, tiddlywiki will call the render method of the resulting object. The render method is expected to create a dom node which will be display in place of the widget.
+
+In the `donothing` example the core widget was exported. The core widget class doesn't have a render method which creates a dom node and that's why there is no output. Getting output requires writing a widget class which inherits from the core `Widget` class. Code in the render method of this class will display the hello world message.
+
+The [[hello.js]] tiddler has code which accomplishes that:
+{{hello.js}}
+The code for importing the core widget class remains, but now we also have code to create our own class which inherits from it. In addition an implementation of the `render` method is included. Here is the result:
+{{Hello World demo}}

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

@@ -0,0 +1,37 @@
+created: 20190202035524804
+modified: 20221029161501848
+tags: 
+title: Javascript Widget Tutorial
+type: text/vnd.tiddlywiki
+
+! Introduction
+This tutorial provides step-by-step, interactive examples of how to write code for tiddlywiki widgets. The demo javascript code can be modified without having to reload the entire wiki.
+
+Intended audience:
+
+# Those who know tiddlywiki well and know programming and javascript and want to write their own widget. I don't make any effort to explain javascript here. For that you will need other resources.
+# Those who know tiddlywiki well and don't know javascript, but want to understand more about how tiddlywiki works. You should be able to skim through and interact with the demos and learn something.
+
+!The tutorial
+*[[Undefined widget tutorial]]
+*[[Do nothing widget tutorial]]
+*[[Hello World widget tutorial]]
+*[[Widget refresh tutorial part I]]
+*[[Widget refresh tutorial part II]]
+*[[Widget refresh tutorial part III]]
+*[[Widget attributes tutorial part I]]
+*[[Widget attributes tutorial part II]]
+*[[Child widgets tutorial]]
+
+! Notes
+
+tiddlywiki doesn't support dynamically reloading javascript. If you change a javascript tiddler, then you need to save and reload  the wiki before the changes will take affect.
+
+To avoid the need for such reloads, the excellent [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] is used. This allows an inner wiki to be created from a subset of tiddlers in the outer wiki. Each time the inner wiki is refreshed, its entire wiki is reloaded and the javascript changes in the inner wiki will take affect.
+
+Without the need for reloads, a tiddlywiki instance with the [[innerwiki plugin|https://tiddlywiki.com/prerelease/plugins/tiddlywiki/innerwiki/]] installed works great as a playground for interacting with tiddlywiki javascript.
+
+! Other documentation on writing TW widgets
+
+*WidgetModules
+*[[Widgets]]

editions/dev/tiddlers/javascript-widget-tutorial/Undefined widget demo.tid

@@ -0,0 +1,18 @@
+created: 20190201212238781
+modified: 20190201213112748
+tags: 
+title: Undefined widget demo
+type: text/vnd.tiddlywiki
+
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[Undefined widget]]"/>
+	<$data title="Undefined widget" text="""
+```
+<$donothing/>
+```
+
+Renders as:
+
+<$donothing/>
+"""/>
+</$innerwiki>

editions/dev/tiddlers/javascript-widget-tutorial/Undefined widget tutorial.tid

@@ -0,0 +1,11 @@
+created: 20190201232001970
+modified: 20190202145655413
+tags: 
+title: Undefined widget tutorial
+type: text/vnd.tiddlywiki
+
+Let's start be defining a minimal widget which does nothing. It doesn't support any attributes, no child elements, and it doesn't output anything. The name of the widget will be `donothing`. If it does nothing, then how can we verify after writing the code that we accomplished anything? Well, let's see what happens when an undefined widget is referenced.
+
+{{Undefined widget demo}}
+
+Since we haven't written the code, the attempt to render the widget gives an undefined widget error. So we will know the donothing code accomplishes something if we don't get the undefined widget error when rendering.

editions/dev/tiddlers/javascript-widget-tutorial/Widget attributes demo I.tid

@@ -0,0 +1,48 @@
+created: 20190204020507195
+modified: 20190204031520013
+tags: 
+title: Widget attributes demo I
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[hello-attribute.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
+	<$data $tiddler=hello-attribute.js/>
+	<$data title="hello world widget" text="""
+```
+<$hello/>
+```
+
+Renders as:
+
+<$hello/>
+
+---
+
+```
+<$hello message="pale blue dot"/>
+```
+
+Renders as:
+
+<$hello message="pale blue dot"/>
+
+---
+
+<$edit-text focus=yes tiddler=test tag=input/>
+
+```
+<$hello message={{test!!text}}/>
+```
+
+Renders as:
+
+<$hello message={{test!!text}}/>
+
+"""/>
+
+	<$data title="test" text="Alice"/>
+
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Widget attributes demo II.tid

@@ -0,0 +1,48 @@
+created: 20190205024953535
+modified: 20190205025028737
+tags: 
+title: Widget attributes demo II
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[hello-attribute-optimized.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[hello world widget]]"/>
+	<$data $tiddler=hello-attribute-optimized.js/>
+	<$data title="hello world widget" text="""
+```
+<$hello/>
+```
+
+Renders as:
+
+<$hello/>
+
+---
+
+```
+<$hello message="pale blue dot"/>
+```
+
+Renders as:
+
+<$hello message="pale blue dot"/>
+
+---
+
+<$edit-text focus=yes tiddler=test tag=input/>
+
+```
+<$hello message={{test!!text}}/>
+```
+
+Renders as:
+
+<$hello message={{test!!text}}/>
+
+"""/>
+
+	<$data title="test" text="Alice"/>
+
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Widget attributes tutorial part I.tid

@@ -0,0 +1,50 @@
+created: 20190202035425715
+modified: 20190205023518575
+tags: 
+title: Widget attributes tutorial part I
+type: text/vnd.tiddlywiki
+
+So far none of the widgets we've implemented have had any code for handling widget attributes A vast majority of useful widgets will need to support attributes in order to make them useful.
+
+As an example, let's change the Hello World widget so it can greet not just the world, but whoever/whatever the user wants. To do that we can add support for an attribute named `what` and call it like `<$hello what="pale blue dot"/>`.
+
+The tiddlywiki widget class provides methods `computeAttributes` and `getAttribute` which can together be used by the widget code to discover what values are passed into the widget.
+
+The `computeAttributes` and `getAttribute` methods can be called like this (the second parameter to `getAttribute` will be used as the default value if the user doesn't provide that attribute in the widget call):
+
+```javascript
+this.computeAttributes();
+var message = this.getAttribute("message", "World");
+```
+
+Then the `message` variable can be used to construct the Hello XXX string:
+
+```javascript
+var textNode = this.document.createTextNode("Hello, " + message + "!");
+```
+
+The original [[hello.js]] code only implements a `render` method. The `refresh` method is not needed because the output from the widget can never be different...it will always be "Hello, World!".
+
+Even with a `message` attribute, you might think the `render` by itself is enough. After all, the value of the input parameter `message` can only be changed by modifying the wiki text which means the tiddler will be redisplayed from scratch.
+
+However, tiddlywiki has a syntax which allows parameter values to vary without modifying the wiki text. See https://tiddlywiki.com/#Widgets%20in%20WikiText for details. As one example, if the widget were called like `<$hello message={{MyTiddler!!field}}/>`, then every time the `field` field of `MyTiddler` were modified, only the `refresh` method would be called. Therefore, in order to get the widget display to update, the refresh method needs to be implemented.
+
+If the `computeAttributes` and `getAttribute` calls are placed in the `render` method then we can implement a performance unoptimized version of refresh as was done in [[Widget refresh tutorial part II]]:
+
+```javascript
+/*
+A widget with optimized performance will selectively refresh, but here we refresh always
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Regenerate and rerender the widget and
+	// replace the existing DOM node
+	this.refreshSelf();
+	return true;
+};
+```
+
+The full code can be seen at [[hello-attribute.js]] and here is the result ([[Widget attributes demo I]]):
+
+{{Widget attributes demo I}}
+
+The third example above is the only one which requires the refresh method in order to behave properly.

editions/dev/tiddlers/javascript-widget-tutorial/Widget attributes tutorial part II.tid

@@ -0,0 +1,33 @@
+created: 20190205023543910
+modified: 20190217012121130
+tags: 
+title: Widget attributes tutorial part II
+type: text/vnd.tiddlywiki
+
+This example will build on the previous one. The only modification will be to add a check to the `refresh` method. The `refreshSelf` will only be called if a change to the attributes is detected.
+
+The `computeAttributes` method returns a Javascript object containing properties for each attribute which has changed. So a check like `if (changedAttributes.attr1 || changedAttributes.attr2 || changedAttributes.attr3)` etc. can be used to detect the change.  See the refresh method in [[$:/core/modules/widgets/view.js]] for an example showing the check for multiple attributes.
+
+For this example, `message` is the only attribute implemented.
+
+```javascript
+/*
+Refresh if the attribute value changed since render
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Find which attributes have changed
+	var changedAttributes = this.computeAttributes();
+	if (changedAttributes.message) {
+		this.refreshSelf();
+		return true;
+	} else {
+		return false;
+	}
+};
+```
+
+The full code can be seen at [[hello-attribute-optimized.js]] and here is the result ([[Widget attributes demo II]]):
+
+{{Widget attributes demo II}}
+
+The visible behavior here should be identical to the unoptimized behavior of the previous tutorial.

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh demo I.tid

@@ -0,0 +1,44 @@
+created: 20190201233806976
+modified: 20221029194854112
+tags: 
+title: Widget refresh demo I
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[tiddlerfield-norefresh.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[tiddler field widget]]"/>
+	<$data title="test" text="type new text here"/>
+	<$data $tiddler=tiddlerfield-norefresh.js/>
+	<$data title="tiddler field widget" text="""
+<$edit-text focus=yes tiddler=test tag=input/>
+<$button set="!!refresh" setTo={{test}}>Force refresh</$button>
+<$list filter="[{!!refresh}]">
+
+<div>
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$tiddlerfield/>
+```
+
+Renders as:
+
+<$tiddlerfield/>
+</div>
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$view tiddler="test"/>
+```
+
+Renders as:
+
+<$view tiddler="test"/>
+</div>
+</div>
+</$list>
+"""/>
+
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh demo II.tid

@@ -0,0 +1,40 @@
+created: 20190202032354223
+modified: 20190217005540498
+tags: 
+title: Widget refresh demo II
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[tiddlerfield.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[tiddler field widget]]"/>
+	<$data title="test" text="type new text here"/>
+	<$data $tiddler=tiddlerfield.js/>
+	<$data title="tiddler field widget" text="""
+<$edit-text focus=yes tiddler=test tag=input/>
+    
+<div>
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$tiddlerfield/>
+```
+
+Renders as:
+
+<$tiddlerfield/>
+</div>
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$view tiddler="test"/>
+```
+
+Renders as:
+
+<$view tiddler="test"/>
+</div>
+"""/>
+
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh demo III.tid

@@ -0,0 +1,50 @@
+created: 20190202122928187
+modified: 20190216191939585
+tags: 
+title: Widget refresh demo III
+type: text/vnd.tiddlywiki
+
+<!-- The innerwiki doesn't refresh on its own when tiddlers on the outside change, so use the list widget to force a dependency -->
+<$list name=refresh filter=[[refreshcount.js]get[text]]>
+<$innerwiki width="600" height="400" style="width:100%;">
+	<$data title="$:/DefaultTiddlers" text="[[refresh count widget]]"/>
+	<$data title="test" text="Text field of tiddler='test'"/>
+	<$data $tiddler=refreshcount.js/>
+	<$data title="refresh count widget" text="""
+
+*<$button set="test!!test" setTo="hello">Modify a different tiddler</$button>
+*<$button set="!!test" setTo="hello">Modify this tiddler</$button>
+*<$edit-text focus=yes tiddler=test tag=input/>
+
+<div>
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$refreshcount/>
+```
+
+Renders as:
+
+<$refreshcount/>
+</div>
+
+<div style="display:inline-block;width: 49%;vertical-align: text-top;word-wrap: break-word;}">
+
+```
+<$list filter="[[test]get[text]]">
+<<currentTiddler>><br>
+<$refreshcount/>
+</$list>
+```
+
+Renders as:
+
+<$list filter="[[test]get[text]]">
+<<currentTiddler>><br>
+<$refreshcount/>
+</$list>
+"""/>
+</div>
+</div>
+</$innerwiki>
+</$list>

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh tutorial part I.tid

@@ -0,0 +1,47 @@
+created: 20190201232847949
+modified: 20221029203553291
+tags: 
+title: Widget refresh tutorial part I
+type: text/vnd.tiddlywiki
+
+But what if we want to display dynamic content? How can we display information and keep it up to date as it changes? Let's display the content of a tiddler field.
+
+The [[tiddlerfield-norefresh.js]] which defines the `tiddlerfield` widget is almost the same as [[hello.js]] except for this part:
+
+```javascript
+MyWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	var text = this.wiki.getTiddlerText("test", "<empty>")
+	var textNode = this.document.createTextNode(text);
+	parent.insertBefore(textNode,nextSibling);
+	this.domNodes.push(textNode);
+};
+```
+
+Instead of creating the text dom node from a static string, the text field of the `test` tiddler is used. This is similar to using the view widget like this:  `<$view tiddler="test"/>`
+
+Here's how it looks (see [[Widget refresh demo I]] to look at the code):
+
+{{Widget refresh demo I}}
+
+Notice if you change the text in the input box, the output from the `tiddlerfield` widget doesn't change, but the output of the `view` widget does. Only after the ''Force refresh'' button is clicked does the output of `tiddlerfield` update to match the input box contents.
+
+What's going on here? The render method of the widget code is only called by tiddlywiki core when the widget is first created. After that, it isn't called again unless the widget is completely destroyed and then created again. 
+
+The tiddlywiki ~ViewWidget has a properly written `refresh` method so typing in the input box will cause its content to update. However, the `tiddlerfield` widget does not have a `refresh` method at all. It has no way of being notified that the `test` tiddler content has changed. Its output will not change until the ''Force refresh'' button is clicked.
+
+See the next example for an implementation of the `refresh` method for the `tiddlerfield` widget.
+
+The code for the refresh button looks like this:
+
+```
+<$button set="!!refresh" setTo={{test}}>Force refresh</$button>
+```
+
+and the widgets are enclosed in a list widget like this:
+
+```
+<$list filter="[{!!refresh}]">...</$list>
+```
+
+When the button is clicked the field `refresh` in the containing tiddler is modified and it causes the children of the list widget to be created from scratch. The render method is called and the output of the `tiddlerfield` widget updates.

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh tutorial part II.tid

@@ -0,0 +1,37 @@
+created: 20190201232910076
+modified: 20190217014335419
+tags: 
+title: Widget refresh tutorial part II
+type: text/vnd.tiddlywiki
+
+This example is like [[Widget refresh tutorial part I]] except the widget output will be automatically refreshed when the tiddler field changes.
+
+[[tiddlerfield.js]] is the same as [[tiddlerfield-norefresh.js]], except this `refresh` method is added:
+
+```javascript
+/*
+A widget with optimized performance will selectively refresh, but here we refresh always
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Regenerate and rerender the widget and
+	// replace the existing DOM node
+	this.refreshSelf();
+	return true;
+};
+```
+
+The `refreshSelf` method called above is implemented by the core widget class and it takes care of cleaning the old dom node and calling the render function.
+
+Here is the result ([[Widget refresh demo II]]):
+
+{{Widget refresh demo II}}
+
+And now any typing into the input box will cause both the `tiddlerfield` and the `view` widget output to refresh immediately.
+
+Note this is a naive version of `refresh`. It unconditionally refreshes itself. This is far from optimal since the `refresh` method for all visible widgets is called every time the tiddler store changes. But the way we've defined our widget, the output ONLY depends on the tiddler titled `text`.
+
+In tiddlywiki the tiddler store is used for everything and almost any interaction will result in an update to the store. This means almost any interaction will cause the refresh method to be called. If you type into the search box, for example, the `tiddlerfield` widget will be refreshed with every keystroke.
+
+Adding and removing dom elements is a relatively expensive operation, so if someone has used the list widget to create a few hundred instances of this widget, then such tiddlywiki interactions might gain a noticable lag. Therefore, it usually makes sense to avoid modifying the dom when possible by writing a smarter `refresh` method. 
+
+''Exercise'' - change the refresh method above to only call `refreshSelf` when the `changedTiddlers` input array contains `test` as one of its entries (Hint: see the refresh method in $:/core/modules/widgets/view.js for an example).

editions/dev/tiddlers/javascript-widget-tutorial/Widget refresh tutorial part III.tid

@@ -0,0 +1,26 @@
+created: 20190202034841184
+modified: 20221029201023638
+tags: 
+title: Widget refresh tutorial part III
+type: text/vnd.tiddlywiki
+
+This tutorial is intended to demonstrate a few examples of when calls to the `refresh` method happen vs. when a widget is recreated from scratch.
+
+This is accomplished with a [[refreshcount.js]] widget which sets a counter to zero when the widget is created and increments the counter every time the `refresh` method is called. Here is the full code:
+
+{{refreshcount.js}}
+
+These are the key parts of the code from above:
+
+```javascript
+this.refreshCount = 0;
+this.document.createTextNode(this.refreshCount + " refreshes");
+this.refreshCount++;
+```
+
+In the following example (see [[Widget refresh demo III]] for the code), two instances of the `refreshcount` widget are created. One at the top level and the other inside a list widget whose filter results depend on the value in the `text` field of the `test` widget. The tiddler store can be modified in a few ways via two buttons and an input box:
+{{Widget refresh demo III}}
+
+* ''Modify a different tiddler'' - every time this button is clicked, both counters increment, indicating the `refresh` method is being called
+* ''Modify this tiddler'' - clicking this button modifies the tiddler itself. In earlier ~TiddlyWiki versions that caused both widgets to be recreated from scratch and the counters are thereby reset to zero. Since [[version 5.2.0|https://tiddlywiki.com/#Release%205.2.0]] modifying another field in this tiddler does not cause the widgets to be recreated and the counters are not reset.
+*  ''Text field of tiddler='test''' - typing text into the input box causes the counter in the standalone `refreshcount` widget to be incremented. But the other instance of the widget is embedded inside a list widget whose filter output depends on the value of the tiddler field which is being modified. This causes it to recreate its children from scratch and the counter is reset every time. So with every keystroke, the counter on the left is incremented, but the counter on the right goes to/stays at zero.

editions/dev/tiddlers/javascript-widget-tutorial/domwidget.js

@@ -0,0 +1,47 @@
+/*\
+
+Library function for creating widget using a dom creating function
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+function createDomWidget(domCreatorFunction) {
+
+	var MyWidget = function(parseTreeNode, options) {
+		this.initialise(parseTreeNode, options);
+	};
+
+	/*
+	Inherit from the base widget class
+	*/
+	MyWidget.prototype = new Widget();
+
+	/*
+	Render this widget into the DOM
+	*/
+	MyWidget.prototype.render = function(parent, nextSibling) {
+		this.parentDomNode = parent;
+		var domNode = domCreatorFunction(this.document);
+		parent.insertBefore(domNode, nextSibling);
+		this.domNodes.push(domNode);
+	};
+
+	/*
+	A widget with optimized performance will selectively refresh, but here we refresh always
+	*/
+	MyWidget.prototype.refresh = function(changedTiddlers) {
+		// Regenerate and rerender the widget and replace the existing DOM node
+		this.refreshSelf();
+		return true;
+	};
+
+	return MyWidget;
+}
+module.exports = createDomWidget;
+})();

editions/dev/tiddlers/javascript-widget-tutorial/domwidget.js.meta

@@ -0,0 +1,6 @@
+created: 20190201025244440
+modified: 20190201030708723
+module-type: library
+tags: 
+title: domwidget.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/donothing.js

@@ -0,0 +1,16 @@
+/*\
+
+Do nothing widget
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+exports.donothing = Widget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/donothing.js.meta

@@ -0,0 +1,6 @@
+created: 20190201115945945
+modified: 20190201222441271
+module-type: widget
+tags: 
+title: donothing.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/hello-attribute-optimized.js

@@ -0,0 +1,51 @@
+/*\
+
+Hello, World widget
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode, options) {
+	this.initialise(parseTreeNode, options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	var message = this.getAttribute("message", "World");
+	var textNode = this.document.createTextNode("Hello, " + message + "!");
+	parent.insertBefore(textNode, nextSibling);
+	this.domNodes.push(textNode);
+};
+
+/*
+Refresh if the attribute value changed since render
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Find which attributes have changed
+	var changedAttributes = this.computeAttributes();
+	if (changedAttributes.message) {
+		this.refreshSelf();
+		return true;
+	} else {
+		return false;
+	}
+};
+
+exports.hello = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/hello-attribute-optimized.js.meta

@@ -0,0 +1,6 @@
+created: 20190205024846183
+modified: 20190205025110882
+module-type: widget
+tags: 
+title: hello-attribute-optimized.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/hello-attribute.js

@@ -0,0 +1,47 @@
+/*\
+
+Hello, World widget
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode, options) {
+	this.initialise(parseTreeNode, options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	this.computeAttributes();
+	var message = this.getAttribute("message", "World");
+	var textNode = this.document.createTextNode("Hello, " + message + "!");
+	parent.insertBefore(textNode, nextSibling);
+	this.domNodes.push(textNode);
+};
+
+/*
+A widget with optimized performance will selectively refresh, but here we refresh always
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Regenerate and rerender the widget and
+	// replace the existing DOM node
+	this.refreshSelf();
+	return true;
+};
+
+exports.hello = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/hello-attribute.js.meta

@@ -0,0 +1,6 @@
+created: 20190204020011193
+modified: 20190204030332147
+module-type: widget
+tags: 
+title: hello-attribute.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/hello.js

@@ -0,0 +1,35 @@
+/*\
+
+Hello, World widget
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent,nextSibling) {
+	this.parentDomNode = parent;
+	var textNode = this.document.createTextNode("Hello, World!");
+	parent.insertBefore(textNode,nextSibling);
+	this.domNodes.push(textNode);
+};
+
+exports.hello = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/hello.js.meta

@@ -0,0 +1,6 @@
+created: 20190201114558816
+modified: 20190201224846870
+module-type: widget
+tags: 
+title: hello.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/refreshcount.js

@@ -0,0 +1,43 @@
+/*\
+
+widget to count the number of times this widget refreshes
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode, options) {
+	this.refreshCount = 0;
+	this.initialise(parseTreeNode, options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	var textNode = this.document.createTextNode(this.refreshCount + " refreshes");
+	parent.insertBefore(textNode, nextSibling);
+	this.domNodes.push(textNode);
+};
+
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Regenerate and rerender the widget and replace the existing DOM node
+	this.refreshCount++;
+	this.refreshSelf();
+	return true;
+};
+
+exports.refreshcount = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/refreshcount.js.meta

@@ -0,0 +1,6 @@
+created: 20190201005026324
+modified: 20190202143451303
+module-type: widget
+tags: 
+title: refreshcount.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/tiddlerfield-norefresh.js

@@ -0,0 +1,36 @@
+/*\
+
+Hello, World widget
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode, options) {
+	this.initialise(parseTreeNode, options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	var text = this.wiki.getTiddlerText("test", "<empty>")
+	var textNode = this.document.createTextNode(text);
+	parent.insertBefore(textNode, nextSibling);
+	this.domNodes.push(textNode);
+};
+
+exports.tiddlerfield = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/tiddlerfield-norefresh.js.meta

@@ -0,0 +1,6 @@
+created: 20190201233714872
+modified: 20190202030615781
+module-type: widget
+tags: 
+title: tiddlerfield-norefresh.js
+type: application/javascript

editions/dev/tiddlers/javascript-widget-tutorial/tiddlerfield.js

@@ -0,0 +1,46 @@
+/*\
+
+Hello, World widget
+
+\*/
+(function() {
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+var Widget = require("$:/core/modules/widgets/widget.js").widget;
+
+var MyWidget = function(parseTreeNode, options) {
+	this.initialise(parseTreeNode, options);
+};
+
+/*
+Inherit from the base widget class
+*/
+MyWidget.prototype = new Widget();
+
+/*
+Render this widget into the DOM
+*/
+MyWidget.prototype.render = function(parent, nextSibling) {
+	this.parentDomNode = parent;
+	var text = this.wiki.getTiddlerText("test", "<empty>")
+	var textNode = this.document.createTextNode(text);
+	parent.insertBefore(textNode, nextSibling);
+	this.domNodes.push(textNode);
+};
+
+/*
+A widget with optimized performance will selectively refresh, but here we refresh always
+*/
+MyWidget.prototype.refresh = function(changedTiddlers) {
+	// Regenerate and rerender the widget and
+	// replace the existing DOM node
+	this.refreshSelf();
+	return true;
+};
+
+exports.tiddlerfield = MyWidget;
+
+})();

editions/dev/tiddlers/javascript-widget-tutorial/tiddlerfield.js.meta

@@ -0,0 +1,6 @@
+created: 20190202032530728
+modified: 20190202032700995
+module-type: widget
+tags: 
+title: tiddlerfield.js
+type: application/javascript

editions/dev/tiddlywiki.info

@@ -5,7 +5,8 @@
 		"tiddlywiki/nodewebkitsaver",
 		"tiddlywiki/github-fork-ribbon",
 		"tiddlywiki/menubar",
-		"tiddlywiki/internals"
+		"tiddlywiki/internals",
+		"tiddlywiki/innerwiki"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

editions/pluginlibrary/tiddlers/GettingStarted.tid

@@ -0,0 +1,45 @@
+title: GettingStarted
+
+This edition contains the components needed to set up a local server for ~TiddlyWiki plugin library testing or development.
+
+!! Import Configuration
+
+Import the configuration tiddler: $:/config/LocalPluginLibrary to your "test wiki".
+
+!! Important
+
+''This server is read-only. Nothing is saved back to the filesystem''
+
+!! Start the Library Server
+
+The following commands will create the library files and start a test server at http://localhost:8888
+
+```
+cd /your/path/to/TiddlyWiki5/editions/pluginlibrary
+tiddlywiki --build test-server
+```
+
+!! Test the Library with a Single File Wiki
+
+* Open a single file wiki and import the configuration tiddler form http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary
+* Open the ''$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+
+!! Test the Library with a Node.js Wiki
+
+* Create a new wiki with eg:
+
+<<<
+```
+cd /temp/
+tiddlywiki my-wiki --init server
+tiddlywiki my-wiki --listen
+```
+<<<
+	
+* Open my-wiki from http://localhost:8080
+* Import the http://localhost:8888/#%24%3A%2Fconfig%2FLocalPluginLibrary tiddler into "my-wiki"
+* Open the ''~$:/ControlPanel : Plugins : "Get More Plugins"'' modal
+
+!! ~ControlPanel Plugin Tab
+
+{{$:/core/ui/ControlPanel/Plugins}}

editions/pluginlibrary/tiddlers/PrereleaseLocalPluginLibrary.tid

@@ -0,0 +1,6 @@
+title: $:/config/LocalPluginLibrary
+tags: $:/tags/PluginLibrary
+url: http://localhost:8888/files/local/library/tmp/index.html
+caption: Local TiddlyWiki Plugin Library Test Server
+
+A locally installed version of the plugin library //Requires a local web server to share the library//

editions/pluginlibrary/tiddlers/meta/SiteSubtitle.tid

@@ -0,0 +1,3 @@
+title: $:/SiteSubtitle
+
+<<version>>

editions/pluginlibrary/tiddlers/meta/SiteTitle.tid

@@ -0,0 +1,3 @@
+title: $:/SiteTitle
+
+Library test edition, plugin development

editions/pluginlibrary/tiddlers/system/$__themes_tiddlywiki_vanilla_options_sidebarlayout.tid

@@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/vanilla/options/sidebarlayout
+
+fluid-fixed

editions/pluginlibrary/tiddlywiki.info

@@ -4,10 +4,17 @@
 		"tiddlywiki/pluginlibrary"
 	],
 	"themes": [
+		"tiddlywiki/vanilla",
+		"tiddlywiki/snowwhite"
 	],
 	"includeWikis": [
 	],
 	"build": {
+		"test-server": [
+			"--output", "./files/local/library/tmp",
+			"--build", "library",
+			"--listen", "port=8888"
+		],
 		"library": [
 			"--makelibrary","$:/UpgradeLibrary",
    			"--savelibrarytiddlers","$:/UpgradeLibrary","[prefix[$:/]] -[[$:/plugins/tiddlywiki/upgrade]] -[[$:/plugins/tiddlywiki/translators]] -[[$:/plugins/tiddlywiki/pluginlibrary]] -[[$:/plugins/tiddlywiki/jasmine]]","recipes/library/tiddlers/","$:/UpgradeLibrary/List",

editions/prerelease/tiddlers/Release 5.2.4.tid

@@ -1,21 +1,33 @@
 caption: 5.2.4
-created: 20221017165036377
-modified: 20221017165036377
+created: 20221127133944178
+modified: 20221127133944178
 tags: ReleaseNotes
 title: Release 5.2.4
 type: text/vnd.tiddlywiki
 
 //[[See GitHub for detailed change history of this release|https://github.com/Jermolene/TiddlyWiki5/compare/v5.2.3...master]]//
 
-! Plugin Improvements
+<<.banner-credits
+	credit:"""Congratulations to [[dmikh|https://talk.tiddlywiki.org/u/dmikh]] for their winning design for the banner for this release (here is the [[competition thread|https://talk.tiddlywiki.org/t/new-release-banner-competition-for-v5-2-4/4982]] and the [[voting thread|https://talk.tiddlywiki.org/t/vote-for-the-v5-2-4-new-release-banner/5140/2]]).
+"""
+	url:"https://raw.githubusercontent.com/Jermolene/TiddlyWiki5/0dc30086e933cf2272cddb076a9fcbedad252735/editions/tw5.com/tiddlers/images/New%20Release%20Banner.png"
+>>
 
-* 
+! Major Improvements
+
+New [ext[Twitter Archivist|./editions/twitter-archivist]] plugin to import the tweets and associated media from a Twitter Archive as individual tiddlers.
+
+<<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6961">> new GenesisWidget that allows the dynamic construction of another widget, where the name and attributes of the new widget can be dynamically determined, without needing to be known in advance
+
+<<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6936">> new operators for reading and formatting JSON data: [[jsonget Operator]], [[jsonindexes Operator]], [[jsontype Operator]], [[jsonextract Operator]] and [[format Operator]]
 
 ! Translation improvement
 
 Improvements to the following translations:
 
 * Chinese
+* French
+* German
 * Polish
 * Spanish
 * Japanese
@@ -25,70 +37,101 @@ Improvements to the translation features of TiddlyWiki:
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6882">> the [[Translators Edition|Translate TiddlyWiki into your language]] to add an option to display the original English text underneath the text area
 * <<.link-badge-updated "https://github.com/Jermolene/TiddlyWiki5/pull/6933">> "delete" button text in $:/AdvancedSearch so that it is translatable
 
-! Accessibility Improvements
-
-* 
-
 ! Usability Improvements
 
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/d62a16ee464fb9984b766b48504829a1a3eb143b">> problem with long presses on tiddler links triggering a preview on iOS/iPadOS
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6910">> consistency of button and input elements across browsers
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/d825f1c875f5e46158c9c41c8c66471138c162d1">> edit preview to use the [[View Template Body Cascade]]
-* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6970">> detection of infinite recursion errors in widgets and filters
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/36896c3db8c9678c0385a561996248a6f00a45ff">> opening a tiddler in a new window to use the [[View Template Body Cascade]]
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6970">> detection of infinite recursion errors in widgets and filters
 * <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/pull/6877">> default styles for [[styled runs|Styles and Classes in WikiText]]
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6881">> upgrade wizard to make the version number more prominent
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/7042">> parsing of tiddlers containing CSV data for greater compatibility
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7076">> new page control button to summon the layout switcher
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/7084">> folded tiddlers to ensure that the unfold button is always visible
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/7072">> handling of [[Modals]] to optionally allow them to be dismissed by clicking on the background
 
 ! Widget Improvements
 
-* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6961">> new GenesisWidget that allows the dynamic construction of another widget, where the name and attributes of the new widget can be dynamically determined, without needing to be known in advance
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/127f660c91020dcbb43897d954066b31af729e74">> EditTextWidget to remove the default text "Type the text for the tiddler 'foo'"
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7081">> ''focus'' attribute to SelectWidget
+* <<.link-badge-removed "https://github.com/Jermolene/TiddlyWiki5/commit/1df4c29d73073788ba3859668112e8bb46171a6c">> restriction of the LetWidget being unable to create variables whose names begin with a dollar sign
 
 ! Filter improvements
 
-* 
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/6303">> issue with availability of variables within filter runs
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7065">> issue with removing multiple items from a linked list during filter processing
 
 ! Hackability Improvements
 
-* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6936">> new operators for reading and formatting JSON data: [[jsonget Operator]], [[jsonindexes Operator]], [[jsontype Operator]] and [[format Operator]]
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7004">> support for nested [[macro definitions|Macro Definitions in WikiText]]
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6976">> support for [[SystemTag: $:/tags/ClassFilters/TiddlerTemplate]] and [[SystemTag: $:/tags/ClassFilters/PageTemplate]] to assign dynamic CSS classes to both tiddler frames and the page template
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/commit/c5d3d4c26e8fe27f272dda004aec27d6b66c4f60">> safe mode to disable wiki store indexers
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/166a1565843878083fb1eba47c73b8e67b78400d">> safe mode to prevent globally disabling parser rules
-* <<.link-badge-removed "https://github.com/Jermolene/TiddlyWiki5/commit/1df4c29d73073788ba3859668112e8bb46171a6c">> restriction of the LetWidget being unable to create variables whose names begin with a dollar sign
 * <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/pull/6735">> keyboard shortcut handling to allow to global shortcuts to override all other shortcuts
-
+* <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/commit/965bd090a905f5756e79124b698c894f7f72ad5b">> [[list-links Macro]] to allow the rendered field to be overriden
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6913">> [[Table-of-Contents Macros]] to allow the default icons to be overridden
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6939">> ''data-tags-*'' and ''data-tiddler-title'' attributes to the edit preview area
+* <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/pull/5947">> [[timeline Macro]] to override the link template
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7043">> support for Unix epoch timestamps in [[date format strings|DateFormat]]
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7064">> the "big green download button" to use the defined palette colour
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7063">> new hidden setting [[to use horizontal tabs for the "more" sidebar tab|Hidden Setting: More Tabs Horizontal]]
+* <<.link-badge-extended "https://github.com/Jermolene/TiddlyWiki5/commit/bef11fe6a25fb849dee40c4aa4337d6a30daf0b4">> the [[external JavaScript templates|]] to allow the URL of the external script file to be configured
 
 ! Bug Fixes
 
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7099">> truncated search results on small screens
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7010">> table contents overflow on small screens
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/fb34df84ed41882c1c2a6ff54f0e908b43ef95a3">> "new image" keyboard shortcut not to assign journal tags
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/6987">> SelectWidget class to update if it uses a filter
-
-! Developer Improvements
-
-* 
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/7017">> issue with wikification within the advanced search filter dropdown
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7057">> the table in $:/Import to avoid creating hidden empty rows
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/7008">> advanced search keyboard shortcut not navigating correctly
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/issues/7083">> erroneous display of drafts within the advanced search filter dropdown
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7092">> backwards compatibility of new field editor cascade introduced in v5.2.3
 
 ! Node.js Improvements
 
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7073">> new CommandsCommand to enable command tokens to be dynamically generated from a filter
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6947">> console logging to avoid spaces and `<empty string>` message
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7014">> problem  with lazy loading deleting tiddler bodies under certian circumstances
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/344110e2890caf711ab8f3c4f4deaa7d86771231">> handling of ".mp4" file extension so that it defaults to video not audio
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/6588">> test server to the plugin library edition
+* <<.link-badge-added "https://github.com/Jermolene/TiddlyWiki5/pull/7049">> [[Hidden Setting: Sync Logging]] to control logging of sync-related messages
+* <<.link-badge-updated "https://github.com/Jermolene/TiddlyWiki5/pull/6944">> Jasmine plugin to require the explicit use of the `--test` command in order to cause the tests to be run
 
 ! Performance Improvements
 
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/commit/53d229592df76c6dd607e40be5bea4d5e063c48e">> performance of `wiki.getTiddler()`
 * <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/commit/81ac9874846b3ead275f67010fcfdb49f3d2f43c">> performance of variable prototype chain handling
-
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/6056">> performance of list handling during filter processing
 
 ! Acknowledgements
 
 [[@Jermolene|https://github.com/Jermolene]] would like to thank the contributors to this release who have generously given their time to help improve TiddlyWiki:
 
 <<.contributors """
+AnthonyMuscio
 bestony
+btheado
 BramChen
+carlo-colombo
+EvidentlyCube
+FlashSystems
 flibbles
 fu-sen
+joebordes
+hoelzro
+kookma
+linonetwo
 Marxsal
 oflg
 pmario
 rmunn
 roma0104
+saqimtiaz
+talha131
+Telumire
 tw-FRed
 twMat
 xcazin

editions/prerelease/tiddlers/system/TiddlyWiki Pre-release.tid

@@ -1,7 +1,11 @@
 title: TiddlyWiki Pre-release
 modified: 20150428204930183
 
-This is a pre-release build of TiddlyWiki, [[also available in empty form|https://tiddlywiki.com/prerelease/empty.html]]. It is provided for testing purposes. ''Please don't try to use it for anything important'' -- you should use the latest official release from https://tiddlywiki.com.
+This is a pre-release build of TiddlyWiki provided for testing and review purposes. ''Please don't try to depend on the pre-release for anything important'' -- you should use the latest official release from https://tiddlywiki.com.
+
+All of the changes in this pre-release are provisional until it is released and they become frozen by our backwards compatibility policies. This is the perfect time to raise questions or make suggestions. Please [[open a ticket at GitHub|https://github.com/Jermolene/TiddlyWiki5/issues/new/choose]] or make a post at https://talk.tiddlywiki.org/.
+
+The pre-release is also available as an [[empty wiki|https://tiddlywiki.com/prerelease/empty.html]] ready for reuse.
 
 <$list filter="[tag[ReleaseNotes]!has[released]!sort[created]]">
 <div class="tc-titlebar">

editions/test/tiddlers/tests/data/csv-cases.tid

@@ -0,0 +1,282 @@
+title: csv-cases
+type: text/plain
+description: A file containing a JSON with test CSVs as string as well as expected results
+
+[
+    {
+        "name": "Empty string",
+        "options": {},
+        "csv": "",
+        "json": [],
+        "jsonWithHeaders": []
+    },
+    {
+        "name": "Null value",
+        "options": {},
+        "csv": null,
+        "json": [],
+        "jsonWithHeaders": []
+    },
+    {
+        "name": "Simple CSV with no tricks",
+        "options": {},
+        "csv": "cell-11,cell-12,cell-13\r\ncell-21,cell-22,cell-23\r\ncell-31,cell-32,cell-33",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            ["cell-21", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "cell-21", "cell-12": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Custom separator",
+        "options": {"separator": "\t"},
+        "csv": ",cell-11,\t,cell-12,\t,cell-13,\r\n,cell-21,\t,cell-22,\t,cell-23,\r\n,cell-31,\t,cell-32,\t,cell-33,",
+        "json": [
+            [",cell-11,", ",cell-12,", ",cell-13,"],
+            [",cell-21,", ",cell-22,", ",cell-23,"],
+            [",cell-31,", ",cell-32,", ",cell-33,"]
+        ],
+        "jsonWithHeaders": [
+            {",cell-11,": ",cell-21,", ",cell-12,": ",cell-22,", ",cell-13,": ",cell-23,"},
+            {",cell-11,": ",cell-31,", ",cell-12,": ",cell-32,", ",cell-13,": ",cell-33,"}
+        ]
+    },
+    {
+        "name": "Support empty rows",
+        "options": {},
+        "csv": "cell-11,cell-12,cell-13\r\n\r\ncell-31,cell-32,cell-33",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            [],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "", "cell-12": "", "cell-13": ""},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Support empty cells",
+        "options": {},
+        "csv": "cell-11,cell-12,cell-13\r\n,,\r\ncell-31,cell-32,cell-33",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            ["", "", ""],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "", "cell-12": "", "cell-13": ""},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Support LF line endings",
+        "options": {},
+        "csv": "cell-11,cell-12,cell-13\ncell-21,cell-22,cell-23\ncell-31,cell-32,cell-33",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            ["cell-21", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "cell-21", "cell-12": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Mixed line endings",
+        "options": {},
+        "csv": "cell-11,cell-12,cell-13\ncell-21,cell-22,cell-23\r\ncell-31,cell-32,cell-33",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            ["cell-21", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "cell-21", "cell-12": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Quoted cells",
+        "options": {},
+        "csv": "cell-11,\"cell-12\",cell-13\r\n\"cell-21\",cell-22,cell-23\r\ncell-31,cell-32,\"cell-33\"",
+        "json": [
+            ["cell-11", "cell-12", "cell-13"],
+            ["cell-21", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", "cell-33"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "cell-21", "cell-12": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", "cell-12": "cell-32", "cell-13": "cell-33"}
+        ]
+    },
+    {
+        "name": "Escaped quotes in cells",
+        "options": {},
+        "csv": "cell-11,\"\"\"cell-12\"\"\",cell-13\r\n\"cell\"\"\"\"-21\",cell-22,cell-23\r\ncell-31,cell-32,\"\"\"\"\"cell\"\"\"\"-33\"\"\"\"\"",
+        "json": [
+            ["cell-11", "\"cell-12\"", "cell-13"],
+            ["cell\"\"-21", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", "\"\"cell\"\"-33\"\""]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": "cell\"\"-21", "\"cell-12\"": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", "\"cell-12\"": "cell-32", "cell-13": "\"\"cell\"\"-33\"\""}
+        ]
+    },
+    {
+        "name": "Separator in quoted cells",
+        "options": {},
+        "csv": "cell-11,\",c,e,l,l,-,1,2,\",cell-13\r\n\",c,e,l,l,-,2,1,\",cell-22,cell-23\r\ncell-31,cell-32,\",c,e,l,l,-,3,3,\"",
+        "json": [
+            ["cell-11", ",c,e,l,l,-,1,2,", "cell-13"],
+            [",c,e,l,l,-,2,1,", "cell-22", "cell-23"],
+            ["cell-31", "cell-32", ",c,e,l,l,-,3,3,"]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11": ",c,e,l,l,-,2,1,", ",c,e,l,l,-,1,2,": "cell-22", "cell-13": "cell-23"},
+            {"cell-11": "cell-31", ",c,e,l,l,-,1,2,": "cell-32", "cell-13": ",c,e,l,l,-,3,3,"}
+        ]
+    },
+    {
+        "name": "UTF-8 characters",
+        "options": {},
+        "csv": "ᑖcell-11™,°cell-12ą,ćcell-13ś\r\nżcell-21ę,łcell-22ó,Ócell-23↑\r\nŹcell-31Ż,Ącell-32Ń,Ęcell-33ę",
+        "json": [
+            ["ᑖcell-11™", "°cell-12ą", "ćcell-13ś"],
+            ["żcell-21ę", "łcell-22ó", "Ócell-23↑"],
+            ["Źcell-31Ż", "Ącell-32Ń", "Ęcell-33ę"]
+        ],
+        "jsonWithHeaders": [
+            {"ᑖcell-11™": "żcell-21ę", "°cell-12ą": "łcell-22ó", "ćcell-13ś":  "Ócell-23↑"},
+            {"ᑖcell-11™": "Źcell-31Ż", "°cell-12ą": "Ącell-32Ń", "ćcell-13ś": "Ęcell-33ę"}
+        ]
+    },
+    {
+        "name": "All in one",
+        "options": {},
+        "csv": "\"\"\",\r\n,\"\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"\"\",ҡ͟¼lj·˨Քƣйʊ͕Έӕ,😣👁🔵⛔️🌹\r\n\"\"\",\r\n,\"\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"\"\",ҡ͟¼lj·˨Քƣйʊ͕Έӕ,😣👁🔵⛔️🌹\n\"\"\",\r\n,\"\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"\"\",ҡ͟¼lj·˨Քƣйʊ͕Έӕ,😣👁🔵⛔️🌹",
+        "json": [
+            ["\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"],
+            ["\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"],
+            ["\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"]
+        ],
+        "jsonWithHeaders": [
+            {"\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"": "\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ": "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹": "😣👁🔵⛔️🌹"},
+            {"\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"": "\",\r\n,\",\r\nĄŚĆżóŁ\n\n\n\r\n,\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ": "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹": "😣👁🔵⛔️🌹"}
+        ]
+    },
+    {
+        "name": "All in one - custom separator",
+        "options": {"separator": "\t"},
+        "csv": "\"\"\"\t\r\n\t\"\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"\"\"\tҡ͟¼lj·˨Քƣйʊ͕Έӕ\t😣👁🔵⛔️🌹\r\n\"\"\"\t\r\n\t\"\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"\"\"\tҡ͟¼lj·˨Քƣйʊ͕Έӕ\t😣👁🔵⛔️🌹\n\"\"\"\t\r\n\t\"\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"\"\"\tҡ͟¼lj·˨Քƣйʊ͕Έӕ\t😣👁🔵⛔️🌹",
+        "json": [
+            ["\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"],
+            ["\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"],
+            ["\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹"]
+        ],
+        "jsonWithHeaders": [
+            {"\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"": "\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ": "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹": "😣👁🔵⛔️🌹"},
+            {"\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"": "\"\t\r\n\t\"\t\r\nĄŚĆżóŁ\n\n\n\r\n\t\"", "ҡ͟¼lj·˨Քƣйʊ͕Έӕ": "ҡ͟¼lj·˨Քƣйʊ͕Έӕ", "😣👁🔵⛔️🌹": "😣👁🔵⛔️🌹"}
+        ]
+    },
+    {
+        "name": "Edge case - only empty rows",
+        "options": {},
+        "csv": "\r\n\r\n",
+        "json": [
+            [],
+            [],
+            []
+        ],
+        "jsonWithHeaders": [
+            {},
+            {}
+        ]
+    },
+    {
+        "name": "Edge case - only empty cells",
+        "options": {},
+        "csv": ",,\r\n,,\r\n,,",
+        "json": [
+            ["", "", ""],
+            ["", "", ""],
+            ["", "", ""]
+        ],
+        "jsonWithHeaders": [
+            {},
+            {}
+        ]
+    },
+    {
+        "name": "Edge case - Newline -> Comma -> Text",
+        "options": {},
+        "csv": "A,B\r\n,C",
+        "json": [
+            ["A", "B"],
+            ["", "C"]
+        ],
+        "jsonWithHeaders": [
+            {"A": "", "B": "C"}
+        ]
+    },
+    {
+        "name": "Edge case - single comma",
+        "options": {},
+        "csv": ",",
+        "json": [
+            ["", ""]
+        ],
+        "jsonWithHeaders": []
+    },
+    {
+        "@comment": "The behavior here is undefined - the only thing that matters is it should not throw an exception, the result is free to make no sense.",
+        "name": "Edge case - quote separator",
+        "options": {"separator": "\""},
+        "csv": "cell-11,\"cell-12\",cell-13\r\n\"cell-21\",cell-22,cell-23\r\ncell-31,cell-32,\"cell-33\"",
+        "json": [
+            ["cell-11,", "cell-12", ",cell-13"],
+            ["cell-21", "cell-22,cell-23"],
+            ["cell-31,cell-32,", "cell-33", ""]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11,": "cell-21", "cell-12": "cell-22,cell-23", ",cell-13": ""},
+            {"cell-11,": "cell-31,cell-32,", "cell-12": "cell-33", ",cell-13": ""}
+        ]
+    },
+    {
+        "@comment": "The behavior here is undefined - the only thing that matters is it should not throw an exception, the result is free to make no sense.",
+        "name": "Edge case - carriage return separator",
+        "options": {"separator": "\r"},
+        "csv": "cell-11,\"cell-12\",cell-13\r\n\"cell-21\",cell-22,cell-23\r\ncell-31,cell-32,\"cell-33\"",
+        "json": [
+            ["cell-11,\"cell-12\",cell-13"],
+            ["cell-21", "cell-22,cell-23"],
+            ["cell-31,cell-32,\"cell-33\""]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11,\"cell-12\",cell-13": "cell-21" },
+            {"cell-11,\"cell-12\",cell-13": "cell-31,cell-32,\"cell-33\""}
+        ]
+    },
+    {
+        "@comment": "The behavior here is undefined - the only thing that matters is it should not throw an exception, the result is free to make no sense.",
+        "name": "Edge case - newline separator",
+        "options": {"separator": "\n"},
+        "csv": "cell-11,\"cell-12\",cell-13\r\n\"cell-21\",cell-22,cell-23\r\ncell-31,cell-32,\"cell-33\"",
+        "json": [
+            ["cell-11,\"cell-12\",cell-13"],
+            ["cell-21", "cell-22,cell-23"],
+            ["cell-31,cell-32,\"cell-33\""]
+        ],
+        "jsonWithHeaders": [
+            {"cell-11,\"cell-12\",cell-13": "cell-21" },
+            {"cell-11,\"cell-12\",cell-13": "cell-31,cell-32,\"cell-33\""}
+        ]
+    }
+]

editions/test/tiddlers/tests/data/macros/NestedMacros.tid

@@ -0,0 +1,36 @@
+title: Macros/NestedMacros
+description: Nested Macros
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+
+\define outer()
+\whitespace trim
+
+\define middle()
+\whitespace trim
+
+\define inner()
+\whitespace trim
+
+Jaguar
+
+\end inner
+
+<<inner>>
+
+\end middle
+
+<<middle>>
+
+\end outer
+
+<<outer>>
+
++
+title: ExpectedResult
+
+<p>Jaguar</p>

editions/test/tiddlers/tests/data/pragmas/Parsermode.tid

@@ -0,0 +1,36 @@
+title: Pragmas/Parsermode
+description: parsermode pragma
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+{{AlwaysInline}}
+
+{{AlwaysBlock}}
+
+{{AlwaysInline}}{{AlwaysBlock}}
+
++
+title: AlwaysInline
+
+\parsermode inline
+! Not Heading
+
+Text with ''bold''
++
+title: AlwaysBlock
+
+\parsermode block
+! Heading
+
+Text with ''bold''
++
+title: ExpectedResult
+
+! Not Heading
+
+Text with <strong>bold</strong><h1 class="">Heading</h1><p>Text with <strong>bold</strong></p><p>! Not Heading
+
+Text with <strong>bold</strong><h1 class="">Heading</h1><p>Text with <strong>bold</strong></p>
+</p>

editions/test/tiddlers/tests/modules/utils/test-csv.js

@@ -0,0 +1,33 @@
+/*\
+title: modules/utils/test-csv.js
+type: application/javascript
+tags: [[$:/tags/test-spec]]
+
+Tests the backlinks mechanism.
+
+\*/
+(function(){
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+describe('CSV Parsing', function() {
+	var tid = $tw.wiki.getTiddler('csv-cases');
+	var testCases = JSON.parse(tid.fields.text);
+	
+	$tw.utils.each(testCases, function(testCase) {
+		if (testCase.skip) {
+			return;
+		}
+		it("Test case: " + testCase.name, function() {
+			var parsedCsv = $tw.utils.parseCsvString(testCase.csv, testCase.options);
+			expect(parsedCsv).withContext("The generated CSV should match the expected one").toEqual(testCase.json);
+			
+			var parsedCsvWithHeaders = $tw.utils.parseCsvStringWithHeader(testCase.csv, testCase.options);
+			expect(parsedCsvWithHeaders).withContext("The generated CSV with headers should match the expected one").toEqual(testCase.jsonWithHeaders);
+		});
+	})
+	
+});
+
+})();