From 664aeca9303936c7d607cf20aff47bd36c8cc5ef Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 27 Feb 2026 19:15:11 +0200
Subject: [PATCH] UI: Fixed rule chain note after review

---
 .../rulechain/add-note-dialog.component.html  |  4 +--
 ...t.html => rule-note-editor.component.html} |  0
 ...onent.ts => rule-note-editor.component.ts} | 12 ++++-----
 .../rulechain/rulechain-page.component.html   |  4 +--
 .../rulechain/rulechain-page.component.ts     | 27 +++++++++++--------
 .../pages/rulechain/rulechain-page.module.ts  |  4 +--
 6 files changed, 28 insertions(+), 23 deletions(-)
 rename ui-ngx/src/app/modules/home/pages/rulechain/{rule-note.component.html => rule-note-editor.component.html} (100%)
 rename ui-ngx/src/app/modules/home/pages/rulechain/{rule-note.component.ts => rule-note-editor.component.ts} (82%)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
index 5c98e69cd8..6359e32ff1 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/add-note-dialog.component.html
@@ -23,8 +23,8 @@
   </button>
 </mat-toolbar>
 <div mat-dialog-content>
-  <tb-rule-note #tbRuleNote [note]="data">
-  </tb-rule-note>
+  <tb-rule-note-editor #tbRuleNote [note]="data">
+  </tb-rule-note-editor>
 </div>
 <div mat-dialog-actions class="flex items-center justify-end">
   <button mat-button color="primary" type="button" (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-note.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-note-editor.component.html
similarity index 100%
rename from ui-ngx/src/app/modules/home/pages/rulechain/rule-note.component.html
rename to ui-ngx/src/app/modules/home/pages/rulechain/rule-note-editor.component.html
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-note.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rule-note-editor.component.ts
similarity index 82%
rename from ui-ngx/src/app/modules/home/pages/rulechain/rule-note.component.ts
rename to ui-ngx/src/app/modules/home/pages/rulechain/rule-note-editor.component.ts
index 37dceb3c03..c0b94fd8d7 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-note.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-note-editor.component.ts
@@ -15,15 +15,15 @@
 ///
 
 import { Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { FormBuilder } from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import { FcRuleNote } from '@shared/models/rule-node.models';
 
 @Component({
-    selector: 'tb-rule-note',
-    templateUrl: './rule-note.component.html',
+    selector: 'tb-rule-note-editor',
+    templateUrl: './rule-note-editor.component.html',
     standalone: false
 })
-export class RuleNoteComponent implements OnChanges {
+export class RuleNoteEditorComponent implements OnChanges {
 
   @Input()
   note: FcRuleNote;
@@ -31,10 +31,10 @@ export class RuleNoteComponent implements OnChanges {
   private fb = inject(FormBuilder)
 
   noteForm = this.fb.group({
-    content: [''],
+    content: ['', Validators.maxLength(65536)],
     backgroundColor: ['#FFF9C4'],
     applyDefaultMarkdownStyle: [true],
-    markdownCss: ['']
+    markdownCss: ['', Validators.maxLength(65536)]
   });
 
   ngOnChanges(changes: SimpleChanges): void {
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
index 849084fee9..f2ab70e559 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html
@@ -167,10 +167,10 @@
                             (toggleDetailsEditMode)="onRevertNoteEdit()"
                             (applyDetails)="saveNote()"
                             [theForm]="tbRuleNote.noteForm">
-            <tb-rule-note #tbRuleNote
+            <tb-rule-note-editor #tbRuleNote
                           [note]="editingNote"
                           class="flex-1">
-            </tb-rule-note>
+            </tb-rule-note-editor>
           </tb-details-panel>
         </mat-drawer>
         <mat-drawer-content class="tb-rulechain-graph-content">
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
index f76fe391ee..ee0f1fd72f 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts
@@ -81,10 +81,10 @@ import { RuleChainService } from '@core/http/rule-chain.service';
 import { NEVER, Observable, of, ReplaySubject, skip, startWith, Subject, throwError } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, mergeMap, takeUntil, tap } from 'rxjs/operators';
 import { ISearchableComponent } from '../../models/searchable-component.models';
-import { deepClone, isDefinedAndNotNull } from '@core/utils';
+import { deepClone, guid, isDefinedAndNotNull } from '@core/utils';
 import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-details.component';
 import { RuleNodeLinkComponent } from './rule-node-link.component';
-import { RuleNoteComponent } from './rule-note.component';
+import { RuleNoteEditorComponent } from './rule-note-editor.component';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { ItemBufferService, RuleNodeConnection } from '@core/services/item-buffer.service';
@@ -162,7 +162,7 @@ export class RuleChainPageComponent extends PageComponent
 
   @ViewChild('tbRuleNode') ruleNodeComponent: RuleNodeDetailsComponent;
   @ViewChild('tbRuleNodeLink') ruleNodeLinkComponent: RuleNodeLinkComponent;
-  @ViewChild('tbRuleNote') ruleNoteComponent: RuleNoteComponent;
+  @ViewChild('tbRuleNote') ruleNoteComponent: RuleNoteEditorComponent;
 
   editingRuleNodeLink: FcRuleEdge = null;
   isEditingRuleNodeLink = false;
@@ -170,7 +170,7 @@ export class RuleChainPageComponent extends PageComponent
 
   editingNote: FcRuleNote = null;
   isEditingNote = false;
-  editingNoteIndex = -1;
+  editingNoteId: string = null;
 
   hotKeys: Hotkey[] = [];
 
@@ -1306,7 +1306,7 @@ export class RuleChainPageComponent extends PageComponent
           this.ruleChainModel.notes = [];
         }
         ruleChainObjects.notes.forEach((note) => {
-          note.id = 'rule-chain-note-' + Date.now();
+          note.id = guid();
           this.ruleChainModel.notes.push(note);
           this.ruleChainCanvas.modelService.notes.select(note);
         });
@@ -1343,7 +1343,7 @@ export class RuleChainPageComponent extends PageComponent
           y = scrollParent.scrollTop() + scrollParent.height() / 2;
         }
         const note: FcRuleNote = {
-          id: 'rule-chain-note-' + Date.now(),
+          id: guid(),
           x,
           y,
           width: 200,
@@ -1364,7 +1364,10 @@ export class RuleChainPageComponent extends PageComponent
       headerClass: 'tb-rulechain-header',
       icon: 'sticky_note_2',
       title: this.translate.instant('rulechain.note'),
-      subtitle: note.content.length > 24 ? note.content.substring(0, 24) + '…' : note.content,
+      subtitle: (() => {
+        const plain = (note.content || '').replace(/[#*_`>\[\]!\\~]/g, '').trim();
+        return plain.length > 24 ? plain.substring(0, 24) + '…' : plain;
+      })(),
       menuItems: []
     };
     if (!note.readonly) {
@@ -1411,14 +1414,15 @@ export class RuleChainPageComponent extends PageComponent
     this.isEditingRuleNodeLink = false;
     this.editingRuleNodeLink = null;
     this.isEditingNote = true;
-    this.editingNoteIndex = this.ruleChainModel.notes.indexOf(note);
+    this.editingNoteId = note.id;
     this.editingNote = deepClone(note);
   }
 
   saveNote(): void {
     this.ruleNoteComponent.noteForm.markAsPristine();
     Object.assign(this.editingNote, this.ruleNoteComponent.noteForm.value);
-    this.ruleChainModel.notes[this.editingNoteIndex] = this.editingNote;
+    const idx = this.ruleChainModel.notes.findIndex(n => n.id === this.editingNoteId);
+    this.ruleChainModel.notes[idx] = this.editingNote;
     this.editingNote = deepClone(this.editingNote);
     this.isDirty = true;
     this.onModelChanged();
@@ -1426,13 +1430,14 @@ export class RuleChainPageComponent extends PageComponent
 
   onRevertNoteEdit(): void {
     this.ruleNoteComponent.noteForm.markAsPristine();
-    const note = this.ruleChainModel.notes[this.editingNoteIndex];
+    const note = this.ruleChainModel.notes.find(n => n.id === this.editingNoteId);
     this.editingNote = deepClone(note);
   }
 
   onEditNoteClosed(): void {
     this.editingNote = null;
     this.isEditingNote = false;
+    this.editingNoteId = null;
   }
 
   onDetailsDrawerClosed() {
@@ -2165,7 +2170,7 @@ export class CreateNestedRuleChainDialogComponent extends DialogComponent<Create
 })
 export class AddNoteDialogComponent extends DialogComponent<AddNoteDialogComponent, Partial<FcRuleNote>> {
 
-  @ViewChild('tbRuleNote') ruleNoteComponent: RuleNoteComponent;
+  @ViewChild('tbRuleNote') ruleNoteComponent: RuleNoteEditorComponent;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts
index 813306321b..473d022b08 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.module.ts
@@ -34,13 +34,13 @@ import { RuleNodeDetailsComponent } from '@home/pages/rulechain/rule-node-detail
 import { RuleNodeConfigComponent } from '@home/pages/rulechain/rule-node-config.component';
 import { LinkLabelsComponent } from '@home/pages/rulechain/link-labels.component';
 import { RuleNodeLinkComponent } from '@home/pages/rulechain/rule-node-link.component';
-import { RuleNoteComponent } from '@home/pages/rulechain/rule-note.component';
+import { RuleNoteEditorComponent } from '@home/pages/rulechain/rule-note-editor.component';
 
 @NgModule({
   declarations: [
     RuleChainPageComponent,
     RuleNodeDetailsComponent,
-    RuleNoteComponent,
+    RuleNoteEditorComponent,
     LinkLabelsComponent,
     RuleNodeLinkComponent,
     RuleNodeConfigComponent,