From 0c60e1fa7a4dbef45907de0da4289b6a047b388f Mon Sep 17 00:00:00 2001
From: Simon Huber <huber.simon@protonmail.com>
Date: Thu, 13 Aug 2026 12:21:20 +0200
Subject: [PATCH] Add class assignment to DOM node in editors (#9965)

* Add class assignment to DOM node in editor

* Fix indentation in assignDomNodeClasses method

* Fix conditional check for changedAttributes class

* Improve class assignment in EditTextWidget

Refactor class assignment logic to avoid duplicates and handle whitespace.

* Refactor DOM class assignment in EditTextWidget

* Refactor updateDomNodeClasses for clarity and efficiency

* Add changenote for enhancement in editor refresh behavior
---
 core/modules/editor/factory.js                | 28 ++++++++++++++++++-
 .../tiddlers/releasenotes/5.5.0/#9965.tid     | 14 ++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 editions/tw5.com/tiddlers/releasenotes/5.5.0/#9965.tid

diff --git a/core/modules/editor/factory.js b/core/modules/editor/factory.js
index 7d186e1248..b500fc9247 100644
--- a/core/modules/editor/factory.js
+++ b/core/modules/editor/factory.js
@@ -210,6 +210,29 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 		this.editShowToolbar = this.wiki.getTiddlerText(ENABLE_TOOLBAR_TITLE,"yes");
 		this.editShowToolbar = (this.editShowToolbar === "yes") && !!(this.children && this.children.length > 0) && (!this.document.isTiddlyWikiFakeDom);
 	};
+	
+	EditTextWidget.prototype.updateDomNodeClasses = function() {
+		var domNodeClasses = this.engine.domNode.className.split(/\s+/).filter(Boolean),
+			oldClasses = this.editClass.split(/\s+/).filter(Boolean),
+			newClasses;
+	
+		this.editClass = this.getAttribute("class","");
+		newClasses = this.editClass.split(/\s+/).filter(Boolean);
+	
+		// Remove classes assigned from the old value of the class attribute
+		domNodeClasses = domNodeClasses.filter(function(className) {
+			return !oldClasses.includes(className);
+		});
+	
+		// Add new classes from the updated class attribute
+		domNodeClasses = domNodeClasses.concat(
+			newClasses.filter(function(className) {
+				return !domNodeClasses.includes(className);
+			})
+		);
+	
+		this.engine.domNode.className = domNodeClasses.join(" ");
+	};
 
 	/*
 	Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
@@ -217,7 +240,7 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
 			this.refreshSelf();
 			return true;
 		} else if(changedTiddlers[this.editRefreshTitle]) {
@@ -226,6 +249,9 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 			var editInfo = this.getEditInfo();
 			this.updateEditor(editInfo.value,editInfo.type);
 		}
+		if(changedAttributes["class"]) {
+			this.updateDomNodeClasses();
+		}
 		this.engine.fixHeight();
 		if(this.editShowToolbar) {
 			return this.refreshChildren(changedTiddlers);
diff --git a/editions/tw5.com/tiddlers/releasenotes/5.5.0/#9965.tid b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#9965.tid
new file mode 100644
index 0000000000..ecad671114
--- /dev/null
+++ b/editions/tw5.com/tiddlers/releasenotes/5.5.0/#9965.tid
@@ -0,0 +1,14 @@
+title: $:/changenotes/5.5.0/#9965
+created: 20260812171534862
+modified: 20260812171534862
+tags: $:/tags/ChangeNote
+change-type: enhancement
+change-category: usability
+description: Change of the class attribute of editors does no more completely refresh the widget
+release: 5.5.0
+github-links: https://github.com/TiddlyWiki/TiddlyWiki5/pull/9965
+github-contributors: BurningTreeC
+type: text/vnd.tiddlywiki
+
+This pull request changes the way editors refresh when their `class` attribute changes.
+They did refresh the widget completely. Now they just assign the new classes.