cssClass label cannot be applied on the root widget because of note splits, fixes #3032

src/public/app/widgets/containers/root_container.js

@@ -1,6 +1,4 @@
 import FlexContainer from "./flex_container.js";
-import utils from "../../services/utils.js";
-import appContext from "../../services/app_context.js";
 
 export default class RootContainer extends FlexContainer {
     constructor() {
@@ -9,38 +7,4 @@ export default class RootContainer extends FlexContainer {
         this.id('root-widget');
         this.css('height', '100%');
     }
-
-    refresh() {
-        this.$widget.removeClass(); // remove all classes
-        const note = appContext.tabManager.getActiveContextNote();
-
-        if (note) {
-            this.$widget.addClass(note.getCssClass());
-
-            this.$widget.addClass(utils.getNoteTypeClass(note.type));
-            this.$widget.addClass(utils.getMimeTypeClass(note.mime));
-
-            this.$widget.toggleClass("protected", note.isProtected);
-        }
-    }
-
-    noteSwitchedEvent() {
-        this.refresh();
-    }
-
-    activeContextChangedEvent() {
-        this.refresh();
-    }
-
-    noteSwitchedAndActivatedEvent() {
-        this.refresh();
-    }
-
-    entitiesReloadedEvent({loadResults}) {
-        const note = appContext.tabManager.getActiveContextNote();
-        
-        if (note && loadResults.isNoteReloaded(note.noteId)) {
-            this.refresh();
-        }
-    }
 }

src/public/app/widgets/note_wrapper.js

@@ -1,4 +1,6 @@
 import FlexContainer from "./containers/flex_container.js";
+import utils from "../services/utils.js";
+import attributeService from "../services/attributes.js";
 
 export default class NoteWrapperWidget extends FlexContainer {
     constructor() {
@@ -33,17 +35,33 @@ export default class NoteWrapperWidget extends FlexContainer {
     }
 
     refresh() {
+        this.$widget.removeClass();
+
         const note = this.noteContext?.note;
+        if (!note) {
+            return;
+        }
 
         this.$widget.toggleClass("full-content-width",
-            ['image', 'mermaid', 'book', 'render', 'canvas', 'web-view'].includes(note?.type)
+            ['image', 'mermaid', 'book', 'render', 'canvas', 'web-view'].includes(note.type)
             || !!note?.hasLabel('fullContentWidth')
         );
+
+        this.$widget.addClass(note.getCssClass());
+
+        this.$widget.addClass(utils.getNoteTypeClass(note.type));
+        this.$widget.addClass(utils.getMimeTypeClass(note.mime));
+
+        this.$widget.toggleClass("protected", note.isProtected);
     }
 
     async entitiesReloadedEvent({loadResults}) {
-        // listening on changes of note.type
+        // listening on changes of note.type and CSS class
-        if (loadResults.isNoteReloaded(this.noteContext?.noteId)) {
+
+        const noteId = this.noteContext?.noteId;
+        if (loadResults.isNoteReloaded(noteId)
+            || loadResults.getAttributes().find(attr => attr.type === 'label' && attr.name === 'cssClass' && attributeService.isAffecting(attr, this.noteContext?.note))) {
+
             this.refresh();
         }
     }