build: bump to angualr 19 (#44)

.github/workflows/ci.yml

@@ -65,7 +65,7 @@ jobs:
 
       - name: build
         run: |
-          node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --base-href /ngx-tinymce/
+          node ./node_modules/@angular/cli/bin/ng build --base-href /ngx-tinymce/
           cp ./dist/browser/index.html ./dist/browser/404.html
           ls ./dist/browser
 

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
+  }
+}

.yarnrc.yml

@@ -2,4 +2,4 @@ enableImmutableInstalls: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.2.cjs

README.md

@@ -31,11 +31,11 @@ import { NgxTinymceModule } from 'ngx-tinymce';
       // Local assets
       baseURL: './assets/tinymce/',
       // or cdn
-      baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/'
-    })
-  ]
+      baseURL: '//cdnjs.cloudflare.com/ajax/libs/tinymce/5.7.1/',
+    }),
+  ],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 If the local path should be adding assets configuration in `angular.json`:
@@ -55,7 +55,6 @@ If the local path should be adding assets configuration in `angular.json`:
 ```ts
 @Component({
   template: `<tinymce />`,
-  standalone: true,
   imports: [TinymceComponent],
 })
 export class App
@@ -65,7 +64,7 @@ Globa config:
 
 ```ts
 bootstrapApplication(AppComponent, {
-  providers: [provideTinymce({baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/'})]
+  providers: [provideTinymce({ baseURL: '//cdn.tiny.cloud/1/no-api-key/tinymce/6/' })],
 });
 ```
 
@@ -76,29 +75,29 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<tinymce [(ngModel)]="html"></tinymce>`
+  template: `<tinymce [(ngModel)]="html"></tinymce>`,
 })
-export class AppComponent  {
+export class AppComponent {
   html = ``;
 }
 ```
 
 ### How to use it with:
 
-+ `angular-cli` please refer to **Installation instructions**.
-+ `stackblitz` sample available [here](https://stackblitz.com/edit/ngx-tinymce?file=app%2Fapp.component.ts).
+- `angular-cli` please refer to **Installation instructions**.
+- `stackblitz` sample available [here](https://stackblitz.com/edit/ngx-tinymce?file=app%2Fapp.component.ts).
 
 ## API
 
-| Name | Type | Default | Summary |
-|------|------|---------|---------|
-| config | `any` |  | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/) |
-| loading | `string,TemplateRef` | - | Loading status of tinymce |
-| disabled | `boolean` | `false` | Set tinymce mode is `readonly` if `true` |
-| inline | `boolean` | `false` | Inline editor |
-| delay | `number` | 0 | Delayed rendering, unit is 'millisecond' |
-| placeholder | `string` | - | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) |
-| ready | `EventEmitter<any>` | - | Tinymce ready callback |
+| Name        | Type                 | Default | Summary                                                                                                             |
+| ----------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
+| config      | `any`                |         | see [configure](https://www.tinymce.com/docs/configure/integration-and-setup/)                                      |
+| loading     | `string,TemplateRef` | -       | Loading status of tinymce                                                                                           |
+| disabled    | `boolean`            | `false` | Set tinymce mode is `readonly` if `true`                                                                            |
+| inline      | `boolean`            | `false` | Inline editor                                                                                                       |
+| delay       | `number`             | 0       | Delayed rendering, unit is 'millisecond'                                                                            |
+| placeholder | `string`             | -       | Placeholder for tinymce, **NOTE:** dependent on [tinymce-placeholder](https://github.com/mohan/tinymce-placeholder) |
+| ready       | `EventEmitter<any>`  | -       | Tinymce ready callback                                                                                              |
 
 ## Troubleshooting
 

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tinymce",
-  "version": "17.0.0",
+  "version": "19.0.0",
   "description": "Angular for tinymce",
   "keywords": [
     "angular-tinymce",

lib/src/tinymce.component.ts

@@ -13,15 +13,14 @@ import {
   Output,
   EventEmitter,
   NgZone,
-  Inject,
   SimpleChange,
-  Optional,
   booleanAttribute,
   numberAttribute,
+  inject,
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { NuLazyService } from '@ng-util/lazy';
-import { DOCUMENT, NgIf } from '@angular/common';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import type { Editor as TinyMCEEditor, RawEditorOptions } from 'tinymce';
 import { TinymceOptions } from './tinymce.options';
 
@@ -34,12 +33,21 @@ const isSSR = !(typeof document === 'object' && !!document);
   selector: 'tinymce',
   exportAs: 'tinymce',
   template: `
-    <textarea *ngIf="!inline" [attr.id]="id" [attr.placeholder]="placeholder" class="tinymce-selector"></textarea>
-    <div *ngIf="inline" [attr.id]="id"><ng-content></ng-content></div>
-    <div class="loading" *ngIf="load">
-      <ng-container *ngIf="_loading; else _loadingTpl">{{ _loading }}</ng-container>
+    @if (inline) {
+    <div [attr.id]="id"><ng-content /></div>
+    } @else {
+    <textarea [attr.id]="id" [attr.placeholder]="placeholder" class="tinymce-selector"></textarea>
+    } @if (load) {
+    <div class="loading">
+      @if (_loading) {
+      {{ _loading }}
+      } @else {
+      <ng-template [ngTemplateOutlet]="_loadingTpl" />
+      }
     </div>
+    }
   `,
+  imports: [NgTemplateOutlet],
   styles: [
     `
       tinymce .tinymce-selector {
@@ -57,10 +65,14 @@ const isSSR = !(typeof document === 'object' && !!document);
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [NgIf],
 })
 export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, ControlValueAccessor {
+  private defConfig = inject(TinymceOptions, { optional: true });
+  private lazySrv = inject(NuLazyService);
+  private ngZone = inject(NgZone);
+  private doc = inject(DOCUMENT);
+  private cd = inject(ChangeDetectorRef);
+
   private _instance?: TinyMCEEditor | null;
   private value = '';
   load = true;
@@ -92,7 +104,7 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
   }
   /** 延迟初始化 */
   @Input({ transform: numberAttribute }) delay = 0;
-  @Output() ready = new EventEmitter<TinyMCEEditor>();
+  @Output() readonly ready = new EventEmitter<TinyMCEEditor>();
 
   get instance(): TinyMCEEditor | undefined | null {
     return this._instance;
@@ -102,14 +114,6 @@ export class TinymceComponent implements AfterViewInit, OnChanges, OnDestroy, Co
     return this.doc.defaultView || window;
   }
 
-  constructor(
-    @Optional() private defConfig: TinymceOptions,
-    private lazySrv: NuLazyService,
-    private ngZone: NgZone,
-    @Inject(DOCUMENT) private doc: any,
-    private cd: ChangeDetectorRef,
-  ) {}
-
   private initDelay(): void {
     if (isSSR) {
       return;

lib/src/tinymce.spec.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NgxTinymceModule } from './tinymce.module';
 import { FormsModule } from '@angular/forms';
 import { RawEditorOptions } from 'tinymce';
+import { TinymceComponent } from './tinymce.component';
 
 const delay = (ms?: number) => new Promise((res) => setTimeout(res, ms ?? 1000));
 
@@ -13,8 +13,7 @@ describe('Component: ngx-tinymce', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TestComponent],
-      imports: [NgxTinymceModule, FormsModule],
+      imports: [TestComponent],
     }).compileComponents();
     fixture = TestBed.createComponent(TestComponent);
     context = fixture.componentInstance;
@@ -31,6 +30,7 @@ describe('Component: ngx-tinymce', () => {
 @Component({
   selector: 'app-tinymce-test',
   template: '<tinymce [(ngModel)]="value" [config]="config" (ready)="onReady()" />',
+  imports: [FormsModule, TinymceComponent],
 })
 class TestComponent {
   value = `<h1>a</h1>`;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tinymce",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Angular for tinymce",
   "keywords": [
     "angular-tinymce",
@@ -27,42 +27,43 @@
     "release:next": "npm run build && cd publish && npm publish --access public --tag next"
   },
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "@ng-util/lazy": "^18.0.0",
-    "bootstrap": "^5.3.2",
-    "ngx-highlight-js": "^18.0.0",
+    "@angular/animations": "^19.0.0",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@ng-util/lazy": "^19.0.0",
+    "bootstrap": "^5.3.3",
+    "ngx-highlight-js": "^19.0.0",
     "rxjs": "~7.8.0",
-    "tinymce": "^7.1.2",
+    "tinymce": "^7.5.1",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.3"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.4",
-    "@angular-eslint/builder": "^18.0.0",
-    "@angular-eslint/eslint-plugin": "^18.0.0",
-    "@angular-eslint/eslint-plugin-template": "^18.0.0",
-    "@angular-eslint/schematics": "^18.0.0",
-    "@angular-eslint/template-parser": "^18.0.0",
-    "@angular/cli": "^18.0.4",
-    "@angular/compiler-cli": "^18.0.0",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular-eslint/builder": "^18.4.1",
+    "@angular-eslint/eslint-plugin": "^18.4.1",
+    "@angular-eslint/eslint-plugin-template": "^18.4.1",
+    "@angular-eslint/schematics": "^18.4.1",
+    "@angular-eslint/template-parser": "^18.4.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
-    "@typescript-eslint/eslint-plugin": "^7.13.0",
-    "@typescript-eslint/parser": "^7.13.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "eslint": "^8.53.0",
-    "jasmine-core": "~5.1.0",
+    "jasmine-core": "~5.4.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "ng-packagr": "^18.0.0",
-    "typescript": "~5.4.2"
-  }
+    "ng-packagr": "^19.0.1",
+    "typescript": "~5.6.2"
+  },
+  "packageManager": "[email protected]"
 }

src/app/app.component.ts

@@ -35,7 +35,6 @@ import { RouterLink, RouterOutlet } from '@angular/router';
     <div style="margin-top: 16px;"><router-outlet></router-outlet></div>
   `,
   encapsulation: ViewEncapsulation.None,
-  standalone: true,
   imports: [RouterOutlet, RouterLink],
 })
 export class AppComponent {}

src/app/home/home.component.ts

@@ -7,7 +7,6 @@ import { TinymceComponent } from 'lib';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
-  standalone: true,
   imports: [FormsModule, HighlightJsDirective, TinymceComponent],
 })
 export class HomeComponent {

src/app/inline/inline.component.ts

@@ -7,7 +7,6 @@ import { TinymceComponent } from 'lib';
 @Component({
   selector: 'app-inline',
   templateUrl: './inline.component.html',
-  standalone: true,
   imports: [FormsModule, HighlightJsDirective, TinymceComponent],
 })
 export class InlineComponent {

src/app/other/other.component.ts

@@ -7,7 +7,6 @@ import { TinymceComponent } from 'lib';
   selector: 'app-other',
   templateUrl: './other.component.html',
   styleUrls: ['./other.component.less'],
-  standalone: true,
   imports: [FormsModule, HighlightJsDirective, TinymceComponent],
 })
 export class OtherComponent {