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
This commit is contained in:
Simon Huber
2026-08-13 12:21:20 +02:00
committed by GitHub
parent b40b6de3ae
commit 0c60e1fa7a
2 changed files with 41 additions and 1 deletions
+27 -1
View File
@@ -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);
@@ -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.