Angular 18 migration

ui-ngx/angular.json

@@ -233,7 +233,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "buildTarget": "thingsboard:build"
+            "browserTarget": "thingsboard:build"
           }
         },
         "lint": {

ui-ngx/package.json

@@ -44,7 +44,7 @@
     "@svgdotjs/svg.filter.js": "^3.0.8",
     "@svgdotjs/svg.js": "^3.2.4",
     "@svgdotjs/svg.panzoom.js": "^2.1.2",
-    "@tinymce/tinymce-angular": "^7.0.0",
+    "@tinymce/tinymce-angular": "^8.0.1",
     "ace-builds": "1.4.13",
     "ace-diff": "^3.0.3",
     "angular-gridster2": "~18.0.1",
@@ -100,7 +100,7 @@
     "split.js": "^1.6.5",
     "systemjs": "6.14.1",
     "tinycolor2": "^1.6.0",
-    "tinymce": "~5.10.7",
+    "tinymce": "~6.8.4",
     "tooltipster": "^4.2.8",
     "ts-transformer-keys": "^0.4.4",
     "tslib": "^2.7.0",
@@ -164,6 +164,7 @@
     "@types/react": "17.0.37",
     "@date-io/core": "1.3.7",
     "rc-virtual-list": "3.4.13",
-    "ace-builds": "1.4.13"
+    "ace-builds": "1.4.13",
+    "tinymce": "6.8.4"
   }
 }

ui-ngx/src/app/core/core.module.ts

@@ -15,7 +15,7 @@
 ///
 
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, IMAGE_CONFIG } from '@angular/common';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
@@ -101,7 +101,14 @@ import { EntityConflictInterceptor } from '@core/interceptors/entity-conflict.in
             }
         },
         WINDOW_PROVIDERS,
-        provideHttpClient(withInterceptorsFromDi())
+        provideHttpClient(withInterceptorsFromDi()),
+       {
+            provide: IMAGE_CONFIG,
+            useValue: {
+              disableImageSizeWarning: true,
+              disableImageLazyLoadWarning: true
+            }
+       }
     ] })
 export class CoreModule {
 }

ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts

@@ -84,15 +84,16 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
   tinyMceOptions: Record<string, any> = {
     base_url: '/assets/tinymce',
     suffix: '.min',
-    plugins: ['link table image imagetools code fullscreen'],
+    plugins: ['link', 'table', 'image', 'lists', 'code', 'fullscreen'],
     menubar: 'edit insert tools view format table',
-    toolbar: 'fontselect fontsizeselect | formatselect | bold italic  strikethrough  forecolor backcolor ' +
-      '| link | table | image | alignleft aligncenter alignright alignjustify  ' +
-      '| numlist bullist outdent indent  | removeformat | code | fullscreen',
+    toolbar: 'undo redo | fontfamily fontsize blocks | bold italic  strikethrough | forecolor backcolor ' +
+      '| link table image | alignleft aligncenter alignright alignjustify  ' +
+      '| numlist bullist | outdent indent  | removeformat | code | fullscreen',
     toolbar_mode: 'sliding',
     height: 400,
     autofocus: false,
-    branding: false
+    branding: false,
+    promotion: false
   };
 
   private propagateChange = null;

ui-ngx/src/app/shared/components/script-lang.component.scss

@@ -49,10 +49,15 @@
     margin-left: 2px;
     margin-right: 2px;
   }
-  .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+  .mat-button-toggle-appearance-standard {
+    .mat-button-toggle-label-content {
       line-height: 32px;
       font-size: 16px;
       font-weight: 500;
+      .mat-pseudo-checkbox {
+        display: none;
+      }
+    }
   }
   .mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
     opacity: .01;

ui-ngx/src/app/shared/models/ace/tbel/worker-tbel.js

@@ -5029,7 +5029,6 @@ var JSHINT = (function() {
     }, 20);
   }
   function nullSafeProperty(s) {
-    console.log("test " + s);
     symbol(s, 20).exps = true;
     return infix(s, function(context, left, that) {
       if (state.option.bitwise) {