Merge branch 'master' into demo-alternate-store

core/modules/filters/encodings.js

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

core/modules/savers/github.js

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

core/modules/startup/windows.js

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

core/modules/utils/dom/http.js

@@ -187,7 +187,7 @@ HttpClientRequest.prototype.send = function(callback) {
 					for (var i=0; i<len; i++) {
 						binary += String.fromCharCode(bytes[i]);
 					}
-					resultVariables.data = window.btoa(binary);
+					resultVariables.data = $tw.utils.base64Encode(binary,true);
 				}
 				self.wiki.addTiddler(new $tw.Tiddler(self.wiki.getTiddler(requestTrackerTitle),{
 					status: completionCode,

core/modules/utils/utils.js

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

core/modules/widgets/image.js

@@ -58,24 +58,25 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 		if(this.wiki.isImageTiddler(this.imageSource)) {
 			var type = tiddler.fields.type,
 				text = tiddler.fields.text,
-				_canonical_uri = tiddler.fields._canonical_uri;
+				_canonical_uri = tiddler.fields._canonical_uri,
+				typeInfo = $tw.config.contentTypeInfo[type] || {},
+				deserializerType = typeInfo.deserializerType || type;
 			// If the tiddler has body text then it doesn't need to be lazily loaded
 			if(text) {
-				// Render the appropriate element for the image type
-				switch(type) {
-					case "application/pdf":
+				// Render the appropriate element for the image type by looking up the encoding in the content type info
+				var encoding = typeInfo.encoding || "utf8";
+				if (encoding === "base64") {
+					// .pdf .png .jpg etc.
+					src = "data:" + deserializerType + ";base64," + text;
+					if (deserializerType === "application/pdf") {
 						tag = "embed";
-						src = "data:application/pdf;base64," + text;
-						break;
-					case "image/svg+xml":
-						src = "data:image/svg+xml," + encodeURIComponent(text);
-						break;
-					default:
-						src = "data:" + type + ";base64," + text;
-						break;
+					}
+				} else {
+					// .svg .tid .xml etc.
+					src = "data:" + deserializerType + "," + encodeURIComponent(text);
 				}
 			} else if(_canonical_uri) {
-				switch(type) {
+				switch(deserializerType) {
 					case "application/pdf":
 						tag = "embed";
 						src = _canonical_uri;

core/ui/EditTemplate/body/default.tid

@@ -18,7 +18,7 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 	importState=<<qualify $:/state/ImportImage>> >
 <$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
 <div>
-<div class={{{ [function[edit-preview-state]match[yes]then[tc-tiddler-preview]] +[join[ ]] }}}>
+<div class={{{ [function[edit-preview-state]match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
 
 <$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
 

editions/prerelease/tiddlers/Release 5.3.2.tid

@@ -1,6 +1,6 @@
 caption: 5.3.2
-created: 20230820114855583
-modified: 20230820114855583
+created: 20231016122502955
+modified: 20231016122502955
 tags: ReleaseNotes
 title: Release 5.3.2
 type: text/vnd.tiddlywiki
@@ -59,7 +59,8 @@ Improvements to the following translations:
 
 ! Plugin Improvements
 
-* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/1be8f0a9336952d4745d2bd4f2327e353580a272">> comments plugin to use predefined palette colours
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/commit/1be8f0a9336952d4745d2bd4f2327e353580a272">> Comments Plugin to use predefined palette colours
+* <<.link-badge-improved "https://github.com/Jermolene/TiddlyWiki5/pull/7785">> Evernote Importer Plugin to support images and other attachments
 
 ! Widget Improvements
 
@@ -85,6 +86,7 @@ Improvements to the following translations:
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7712">> handling of "counter-last" variable when appending items with the ListWidget
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/6088">> upgrade download link in Firefox
 * <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7698">> refreshing of transcluded functions
+* <<.link-badge-fixed "https://github.com/Jermolene/TiddlyWiki5/pull/7789">> resizing of height of textareas in control panel
 
 ! Node.js Improvements
 

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

@@ -48,6 +48,29 @@ describe("Utility tests", function() {
 		expect($tw.utils.base64Decode($tw.utils.base64Encode(booksEmoji))).toBe(booksEmoji, "should round-trip correctly");
 	});
 
+	it("should handle base64 encoding emojis in URL-safe variant", function() {
+		var booksEmoji = "📚";
+		expect($tw.utils.base64Encode(booksEmoji, false, true)).toBe("8J-Tmg==", "if surrogate pairs are correctly treated as a single code unit then base64 should be 8J+Tmg==");
+		expect($tw.utils.base64Decode("8J-Tmg==", false, true)).toBe(booksEmoji);
+		expect($tw.utils.base64Decode($tw.utils.base64Encode(booksEmoji, false, true), false, true)).toBe(booksEmoji, "should round-trip correctly");
+	});
+
+	it("should handle base64 encoding binary data", function() {
+		var binaryData = "\xff\xfe\xfe\xff";
+		var encoded = $tw.utils.base64Encode(binaryData,true);
+		expect(encoded).toBe("//7+/w==");
+		var decoded = $tw.utils.base64Decode(encoded,true);
+		expect(decoded).toBe(binaryData, "Binary data did not round-trip correctly");
+	});
+
+	it("should handle base64 encoding binary data in URL-safe variant", function() {
+		var binaryData = "\xff\xfe\xfe\xff";
+		var encoded = $tw.utils.base64Encode(binaryData,true,true);
+		expect(encoded).toBe("__7-_w==");
+		var decoded = $tw.utils.base64Decode(encoded,true,true);
+		expect(decoded).toBe(binaryData, "Binary data did not round-trip correctly");
+	});
+
 	it("should handle stringifying a string array", function() {
 		var str = $tw.utils.stringifyList;
 		expect(str([])).toEqual("");

editions/tw5.com/tiddlers/community/Chinese Community.tid

@@ -0,0 +1,20 @@
+title: 中文社区 - Chinese Community
+tags: Community
+
+# A Chinese community tutorial program that people can edit together:
+#* Main site: [ext[https://tw-cn.netlify.app/]]
+#* Accelerated access: [ext[https://tw-cn.cpolar.top/]]
+#* Alternate: [ext[https://tiddly-wiki-chinese-tutorial.vercel.app]]
+# Tiddlywiki Chinese Chat Forum: [ext[https://talk.tidgi.fun/topic/6]]
+# Chinese translation of Tiddlywiki official website [ext[https://bramchen.github.io/tw5-docs/zh-Hans/]]
+# The best Chinese introductory tutorial for newbies [ext[https://keatonlao.github.io/tiddlywiki-xp/]]
+
+---
+
+# 大家可以一起编辑的中文社区教程项目：
+#* 主站：[ext[https://tw-cn.netlify.app/]]
+#* 加速访问：[ext[https://tw-cn.cpolar.top/]]
+#* 备用：[ext[https://tiddly-wiki-chinese-tutorial.vercel.app]]
+# 太微中文交流论坛：[ext[https://talk.tidgi.fun/topic/6]]
+# 太微官网汉化版：[ext[https://bramchen.github.io/tw5-docs/zh-Hans/]]
+# 最适合新手的中文入门教程：[ext[https://keatonlao.github.io/tiddlywiki-xp/]]

editions/tw5.com/tiddlers/community/editions/TiddlyMemo by oflg.tid

@@ -1,16 +0,0 @@
-created: 20220417010615742
-modified: 20220417011547812
-tags: [[Community Plugins]] [[Community Editions]] Resources
-title: TiddlyMemo by oflg
-type: text/vnd.tiddlywiki
-url: https://tiddlymemo.org/
-
-Lifelong knowledge, deep in the Sea of Mind.
-
-{{!!url}}
-
-~TiddlyMemo uses advanced [[Incremental Learning|https://help.supermemo.org/wiki/Incremental_learning]] concepts to make it your powerful second brain for acquiring lifelong knowledge.
-
-* [[Read Articles|https://tiddlymemo.org/#Read%20Articles]] like ~SuperMemo
-* [[Learn languages|https://tiddlymemo.org/#Learn%20languages]] like ~LingQ
-* [[Memory Notes|https://tiddlymemo.org/#Memory%20Notes]] like Anki

editions/tw5.com/tiddlers/community/editions/Tidme by oflg.tid

@@ -0,0 +1,16 @@
+created: 20220417010615742
+modified: 20231005060241771
+tags: [[Community Editions]]
+title: Tidme by oflg
+type: text/vnd.tiddlywiki
+url: https://github.com/oflg/Tidme
+
+Lifelong knowledge, deep in Mind.
+
+{{!!url}}
+
+Tidme uses advanced [[Incremental Learning|https://help.supermemo.org/wiki/Incremental_learning]] concepts to make it your powerful second brain for acquiring lifelong knowledge.
+
+* Read Articles like SuperMemo
+* Learn languages like LingQ
+* Memory Notes like Anki

editions/tw5.com/tiddlers/community/plugins/FSRS4TW by oflg.tid

@@ -0,0 +1,10 @@
+created: 20220417010615742
+modified: 20231005060241771
+tags: [[Community Plugins]]
+title: Free Spaced Repetition Scheduler for TiddlyWiki by oflg
+type: text/vnd.tiddlywiki
+url: https://github.com/open-spaced-repetition/fsrs4tw
+
+TiddlyWiki-based memory programme using advanced FSRS algorithm
+
+{{!!url}}

editions/tw5.com/tiddlers/filters/decodebase64 Operator.tid

@@ -1,6 +1,7 @@
 caption: decodebase64
 op-input: a [[selection of titles|Title Selection]]
 op-output: the input with base 64 decoding applied
+op-suffix: optional: `binary` to produce binary output, `urlsafe` for URL-safe input
 op-parameter: 
 op-parameter-name: 
 op-purpose: apply base 64 decoding to a string
@@ -11,6 +12,10 @@ from-version: 5.2.6
 
 See Mozilla Developer Network for details of [[base 64 encoding|https://developer.mozilla.org/en-US/docs/Glossary/Base64]]. TiddlyWiki uses [[library code from @nijikokun|https://gist.github.com/Nijikokun/5192472]] to handle the conversion.
 
-The input strings must be base64 encoded. The output strings are binary data.
+The input strings must be base64 encoded. The output strings are the text (or binary data) decoded from base64 format.
+
+The optional `binary` suffix, if present, changes how the input is processed. The input is normally assumed to be [[UTF-8|https://developer.mozilla.org/en-US/docs/Glossary/UTF-8]] text encoded in base64 form (such as what the <<.op "encodebase64">> operator produces), so only certain byte sequences in the input are valid. If the input is binary data encoded in base64 format (such as an image, audio file, video file, etc.), then use the optional `binary` suffix, which will allow all byte sequences. Note that the output will then be binary, ''not'' text, and should probably not be passed into further filter operators.
+
+The optional `urlsafe` suffix, if present, causes the decoder to assume that the base64 input uses `-` and `_` instead of `+` and `/` for the 62nd and 63rd characters of the base64 "alphabet", which is usually referred to as "URL-safe base64" or "bae64url".
 
 <<.operator-examples "decodebase64">>

editions/tw5.com/tiddlers/filters/encodebase64 Operator.tid

@@ -1,6 +1,7 @@
 caption: encodebase64
 op-input: a [[selection of titles|Title Selection]]
 op-output: the input with base 64 encoding applied
+op-suffix: optional: `binary` to treat input as binary data, `urlsafe` for URL-safe output
 op-parameter: 
 op-parameter-name: 
 op-purpose: apply base 64 encoding to a string
@@ -11,6 +12,10 @@ from-version: 5.2.6
 
 See Mozilla Developer Network for details of [[base 64 encoding|https://developer.mozilla.org/en-US/docs/Glossary/Base64]]. TiddlyWiki uses [[library code from @nijikokun|https://gist.github.com/Nijikokun/5192472]] to handle the conversion.
 
-The input strings are interpreted as binary data. The output strings are base64 encoded.
+The input strings are interpreted as [[UTF-8 encoded|https://developer.mozilla.org/en-US/docs/Glossary/UTF-8]] text (or binary data instead if the `binary` suffix is present). The output strings are base64 encoded.
+
+The optional `binary` suffix, if present, causes the input string to be interpreted as binary data instead of text. Normally, an extra UTF-8 encoding step will be added before the base64 output is produced, so that emojis and other Unicode characters will be encoded correctly. If the input is binary data, such as an image, audio file, video, etc., then the UTF-8 encoding step would produce incorrect results, so using the `binary` suffix causes the UTF-8 encoding step to be skipped.
+
+The optional `urlsafe` suffix, if present, will use the alternate "URL-safe" base64 encoding, where `-` and `_` are used instead of `+` and `/` respectively, allowing the result to be used in URL query parameters or filenames.
 
 <<.operator-examples "encodebase64">>

editions/tw5.com/tiddlers/hellothere/HelloThere.tid

@@ -18,6 +18,11 @@ TiddlyWiki lets you choose where to keep your data, guaranteeing that in the dec
 <$macrocall $name="flex-card" bordercolor={{!!color}} textcolor={{!!text-color}} backgroundcolor={{!!background-color}} captionField="caption" descriptionField="text"/>
 </$list>
 </div>
+<div class="tc-cards tc-small">
+<$link to="中文社区 - Chinese Community" class="tc-btn-big-green tc-card">
+中文社区 - Chinese Community
+</$link>
+</div>
 
 !! ''Find Out More''
 

editions/tw5.com/tiddlers/messages/WidgetMessage_ tm-open-window.tid

@@ -1,6 +1,6 @@
 caption: tm-open-window
 created: 20160424181447704
-modified: 20220301162140993
+modified: 20230831201518773
 tags: Messages
 title: WidgetMessage: tm-open-window
 type: text/vnd.tiddlywiki
@@ -20,10 +20,17 @@ The `tm-open-window` [[message|Messages]] opens a tiddler in a new //browser// w
 
 The `tm-open-window` message is best generated with the ActionSendMessageWidget, which in turn is triggered by a widget such as the ButtonWidget. The message is handled by the core itself.
 
-<<.tip """When used with the ActionSendMessageWidget, <<.param 'param'>> becomes <<.param '$param'>> """>>
-<<.tip """Parameters <<.param template>>, <<.param windowTitle>>, <<.param width>>, <<.param height>>, <<.param left>> and <<.param top>> require the ActionSendMessageWidget.""">>
-<<.tip """<<.from-version 5.2.2>> To close a window opened with tm-open-window use [[WidgetMessage: tm-close-window]]""">>
-<<.tip """<<.from-version 5.2.2>> To open a tiddler in more than one new window, use a unique value for <<.param windowID>>""">>
+<<.tip """When used with the ActionSendMessageWidget, <<.param 'param'>> becomes <<.param '$param'>>.<br>
+Parameters <<.param template>>, <<.param windowTitle>>, <<.param width>>, <<.param height>>, <<.param left>> and <<.param top>> require the ActionSendMessageWidget. """>>
+
+<<.tip """<<.from-version 5.2.2>>
+To close a window opened with tm-open-window use [[WidgetMessage: tm-close-window]]<br>
+To open a tiddler in more than one new window, use a unique value for <<.param windowID>>
+""">>
+
+<<.tip """<<.from-version 5.3.2>>
+If the new window is hidden by other windows, clicking the "open" button again will bring it to the foreground and set focus to the new window. This behaviour should be consistent for all browsers now
+""">>
 
 <$macrocall $name='wikitext-example-without-html'
 src="""

editions/tw5.com/tiddlers/system/tw5.com-styles.tid

@@ -147,6 +147,10 @@ type: text/vnd.tiddlywiki
 	gap: 1em;
 }
 
+.tc-cards.tc-small {
+	font-size: 0.7em;
+}
+
 .tc-cards.tc-action-card {
 	text-align: center;
 	background: none;

licenses/cla-individual.md

@@ -551,3 +551,5 @@ Eric Haberstroh, @pille1842, 2023/07/23
 BuckarooBanzay, @BuckarooBanzay, 2023/09/01
 
 Timur, @T1mL3arn, 2023/10/04
+
+Wang Ke, @Gk0Wk, 2023/10/17

package.json

@@ -32,6 +32,9 @@
     "node": ">=0.8.2"
   },
   "scripts": {
+    "dev": "node ./tiddlywiki.js ./editions/tw5.com-server --listen",
+    "test": "node ./tiddlywiki.js ./editions/test --verbose --version --build index",
+    "lint:fix": "eslint . --fix",
     "lint": "eslint ."
   }
 }

plugins/tiddlywiki/dynannotate/docs/readme.tid

@@ -23,6 +23,7 @@ The `<$dynannotate>` widget uses the selection tracker to support a popup that d
 |filter |Filter identifying the annotation tiddlers applying to this content (see below) |
 |actions |Action string to be executed when an annotation is clicked. The variable `annotationTiddler` contains the title of the tiddler corresponding to the annotation that was clicked, and the variable `modifierKey` contains "ctrl", "shift", "ctrl-shift", "normal" according to which modifier keys were pressed |
 |popup |Popup state tiddler to be used to trigger a popup when an annotation is clicked |
+|floating |Setting to `yes` makes the popup need to be closed explicitly. |
 |search |Search text to be highlighted within the widget |
 |searchDisplay |"overlay" or "snippet" (see below) |
 |searchMode |"literal" (default), "regexp", "whitespace", "words" or "some" (see below) |

plugins/tiddlywiki/dynannotate/modules/dynannotate.js

@@ -65,7 +65,7 @@ DynannotateWidget.prototype.render = function(parent,nextSibling) {
 	this.domNodes.push(this.domWrapper);
 	// Apply the selection tracker data to the DOM
 	if(!isSnippetMode) {
-		this.applySelectionTrackerData();		
+		this.applySelectionTrackerData();
 	}
 	// Render our child widgets
 	this.renderChildren(this.domContent,null);
@@ -79,7 +79,7 @@ DynannotateWidget.prototype.render = function(parent,nextSibling) {
 			// Apply annotations
 			this.applyAnnotations();
 			// Apply search overlays
-			this.applySearch();		
+			this.applySearch();
 		}
 	}
 	// Save the width of the wrapper so that we can tell when it changes
@@ -205,10 +205,11 @@ DynannotateWidget.prototype.applyAnnotations = function() {
 			if(self.hasAttribute("popup")) {
 				$tw.popup.triggerPopup({
 					domNode: domOverlay,
-					title: self.getAttribute("popup"),
+                    title: self.getAttribute("popup"),
+                    floating: self.getAttribute("floating"),
 					wiki: self.wiki
 				});
-			}			
+			}
 		};
 	};
 	// Draw the overlay for the "target" attribute
@@ -224,7 +225,7 @@ DynannotateWidget.prototype.applyAnnotations = function() {
 				className: "tc-dynannotation-annotation-overlay",
 				onclick: clickHandlerFn(null)
 			});
-		}		
+		}
 	}
 	// Draw the overlays for each annotation tiddler
 	$tw.utils.each(this.annotationTiddlers,function(title) {
@@ -361,7 +362,7 @@ DynannotateWidget.prototype.applySnippets = function() {
 			if(!merged) {
 				container = null;
 			}
-		});		
+		});
 	}
 };
 
@@ -382,7 +383,7 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
 	var childrenDidRefresh = this.refreshChildren(changedTiddlers);
 	// Reapply the selection tracker data to the DOM
 	if(changedAttributes.selection || changedAttributes.selectionPrefix || changedAttributes.selectionSuffix || changedAttributes.selectionPopup) {
-		this.applySelectionTrackerData();		
+		this.applySelectionTrackerData();
 	}
 	// Reapply the annotations if the children refreshed or the main wrapper resized
 	var wrapperWidth = this.domWrapper.offsetWidth,
@@ -390,14 +391,14 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
 		oldAnnotationTiddlers = this.annotationTiddlers;
 	this.getAnnotationTiddlers();
 	if(!isSnippetMode && (
-		childrenDidRefresh || 
-		hasResized || 
-		changedAttributes.target || 
-		changedAttributes.targetPrefix || 
-		changedAttributes.targetSuffix || 
-		changedAttributes.filter || 
-		changedAttributes.actions || 
-		changedAttributes.popup || 
+		childrenDidRefresh ||
+		hasResized ||
+		changedAttributes.target ||
+		changedAttributes.targetPrefix ||
+		changedAttributes.targetSuffix ||
+		changedAttributes.filter ||
+		changedAttributes.actions ||
+		changedAttributes.popup ||
 		!$tw.utils.isArrayEqual(oldAnnotationTiddlers,this.annotationTiddlers) ||
 		this.annotationTiddlers.find(function(title) {
 			return changedTiddlers[title];
@@ -406,23 +407,23 @@ DynannotateWidget.prototype.refresh = function(changedTiddlers) {
 		this.applyAnnotations();
 	}
 	if(!isSnippetMode && (
-		childrenDidRefresh || 
-		hasResized || 
-		changedAttributes.search || 
-		changedAttributes.searchMinLength || 
-		changedAttributes.searchClass || 
-		changedAttributes.searchMode || 
+		childrenDidRefresh ||
+		hasResized ||
+		changedAttributes.search ||
+		changedAttributes.searchMinLength ||
+		changedAttributes.searchClass ||
+		changedAttributes.searchMode ||
 		changedAttributes.searchCaseSensitive
 	)) {
 		this.applySearch();
 	}
 	if(isSnippetMode && (
-		childrenDidRefresh || 
-		hasResized || 
-		changedAttributes.search || 
-		changedAttributes.searchMinLength || 
-		changedAttributes.searchClass || 
-		changedAttributes.searchMode || 
+		childrenDidRefresh ||
+		hasResized ||
+		changedAttributes.search ||
+		changedAttributes.searchMinLength ||
+		changedAttributes.searchClass ||
+		changedAttributes.searchMode ||
 		changedAttributes.searchCaseSensitive
 	)) {
 		this.applySnippets();

themes/tiddlywiki/vanilla/base.tid

@@ -1365,6 +1365,11 @@ html body.tc-body.tc-single-tiddler-window {
 	margin-top: 8px;
 }
 
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-editor-toolbar {
+	grid-area: toolbar;
+}
+
 .tc-editor-toolbar button {
 	vertical-align: middle;
 	background-color: <<colour tiddler-controls-foreground>>;
@@ -1576,9 +1581,30 @@ html body.tc-body.tc-single-tiddler-window {
 	overflow: auto;
 }
 
-.tc-tiddler-preview-preview {
-	float: right;
-	width: 49%;
+.tc-tiddler-editor {
+	display: grid;
+}
+
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview {
+	grid-template-areas:
+		"toolbar toolbar"
+		"editor preview";
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: auto 1fr;
+}
+
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {
+	grid-template-areas:
+		"toolbar"
+		"editor";
+	grid-template-columns: 1fr;
+	grid-template-rows: auto 1fr;
+}
+
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
+	grid-area: preview;
+	overflow-wrap: anywhere;
+	word-break: normal;
 	border: 1px solid <<colour tiddler-editor-border>>;
 	margin: 4px 0 3px 3px;
 	padding: 3px 3px 3px 3px;
@@ -1593,12 +1619,15 @@ html body.tc-body.tc-single-tiddler-window {
 
 """>>
 
-.tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {
-	width: 49%;
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-edit-texteditor,
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden .tc-edit-texteditor {
+	grid-area: editor;
 }
 
-.tc-tiddler-frame .tc-tiddler-preview canvas.tc-edit-bitmapeditor {
-	max-width: 49%;
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview canvas.tc-edit-bitmapeditor,
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {
+	grid-area: editor;
+	max-width: 100%;
 }
 
 .tc-edit-fields {