feat: enhance text input validation and toast notifications for size limits

Author: deltork

packages/studio-web/src/app/upload/upload.component.ts

@@ -63,6 +63,7 @@ export class UploadComponent implements OnDestroy, OnInit {
   maxTxtSizeKB = 40;
   // Max .readalong XML text size: text * 5 is a rough heuristic; the XML is much bloated from the text.
   maxRasSizeKB = 200;
+  currentToast: number;
   @ViewChild("textInputElement") textInputElement: ElementRef;
   @Output() stepChange = new EventEmitter<any[]>();
 
@@ -88,9 +89,9 @@ export class UploadComponent implements OnDestroy, OnInit {
     this.studioService.$textInput
       .pipe(takeUntil(this.unsubscribe$))
       .subscribe((textString) => {
-        this.uploadService.$currentText.next(textString);
         //provides user with warning if text size is above limit
-        this.checkIsTextSizeBelowLimit();
+        if (this.checkIsTextSizeBelowLimit())
+          this.uploadService.$currentText.next(textString);
       });
     this.ssjsService.modelLoaded
       .pipe(takeUntil(this.unsubscribe$))
@@ -329,7 +330,10 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
     if (this.studioService.$textInput.value) {
       const inputLength = this.studioService.$textInput.value.length;
       if (inputLength > this.maxTxtSizeKB * 1024) {
-        this.toastr.error(
+        if (this.currentToast) {
+          this.toastr.clear(this.currentToast);
+        }
+        this.currentToast = this.toastr.error(
           $localize`Text too large. ` +
             $localize`Max size: ` +
             this.maxTxtSizeKB +
@@ -339,7 +343,7 @@ Please check it to make sure all words are spelled out completely, e.g. write "4
             $localize` KB.`,
           $localize`Sorry!`,
           { timeOut: 15000 },
-        );
+        ).toastId;
         return false;
       }
     }