Update to v4.4.0 (#555)

- Angular framework plugin upgraded - Fixed, Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') - Fixed, Random number list gets generated when copy-pasting content from MS Word - Fixed, Pasting TOC from Word does not work as expected - Fixed, oneNote: deleting bullet lists after pasting into the editor does not work as expected - Fixed, editor does not returns `fullPage` content when `fontFamilyDefaultSelection` option is used - Fixed, issue with using Froala Angular SDK in standalone component (Angular 17) when Server-Side Rendering (SSR) is enabled - Fixed, pasting list containing sub-bullet lists, the sub bullet lists are not preserved in the same order - Fixed, complex numbering and bullets alignment is not pasted correctly from MS Word inside the editor - Fixed, increasing font size does not increase's the subscript line - Fixed, problem with underline text and color change - Fixed, table with header that contains merged cells is not displayed correctly - Fixed, after clicking an image the image toolbar moves with outer scroll - Fixed, track changes: editor completely delete's characters from content when pressing backspace - Fixed, cursor position get's lost if the content is wrapped with `html.wrap` inside tables - Fixed, XSS vulnerability when pasting content into the froala editor - Fixed, Vimeo Embedded Code Includes Extra `<p>` Tag Causing Embed Failure - Fixed, inserting link with special character, the editor removes any formatting from the content. - Updated Dompurify library integration within Froala to respect the configurable options --------- Co-authored-by: AndriiMysko <[email protected]>
froala · Jan 8, 2025 · ef596eb · ef596eb
1 parent 25544ac
commit ef596eb
Show file tree

Hide file tree

Showing 12 changed files with 130 additions and 89 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:14
+FROM node:18
 
 LABEL maintainer="[email protected]"
 
@@ -11,13 +11,13 @@ COPY . /app
 WORKDIR /app/
 
 RUN apt update -y \
-    && apt install -y jq unzip wget 
+    && apt install -y jq unzip wget
 RUN echo "Dummy line"
 
 RUN echo "PackageName=$PackageName PackageVersion=$PackageVersion NexusUser=${NexusUser} NexusPassword=${NexusPassword}"
 RUN wget --no-check-certificate --user ${NexusUser}  --password ${NexusPassword} https://nexus.tools.froala-infra.com/repository/Froala-npm/${PackageName}/-/${PackageName}-${PackageVersion}.tgz
 
-RUN npm install 
+RUN npm install
 
 RUN npm run demo.build
 EXPOSE 4200

diff --git a/README.md b/README.md
@@ -72,7 +72,57 @@ cd my-app
 npm install angular-froala-wysiwyg --save
 ```
 
-- open `src/app/app.module.ts` and add
+- if you are adding Froala to an application that uses Server-side rendering, open `src/app/app.component.ts` and add
+
+```typescript
+// Import helpers to detect browser context
+import { PLATFORM_ID, Inject } from '@angular/core';
+import { isPlatformBrowser } from "@angular/common";
+// Import Angular plugin.
+import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
+...
+
+@Component({
+  ...
+  imports: [FroalaEditorModule, FroalaViewModule ... ],
+  ...
+})
+
+export class AppComponent {
+  ...
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+
+  ngOnInit() {
+    // Import Froala plugins dynamically only in the browser context
+    if (isPlatformBrowser(this.platformId)) {
+      // Import all Froala Editor plugins.
+      // @ts-ignore
+      // import('froala-editor/js/plugins.pkgd.min.js');
+
+      // Import a single Froala Editor plugin.
+      // @ts-ignore
+      // import('froala-editor/js/plugins/align.min.js');
+
+      // Import a Froala Editor language file.
+      // @ts-ignore
+      // import('froala-editor/js/languages/de.js');
+
+      // Import a third-party plugin.
+      // @ts-ignore
+      // import('froala-editor/js/third_party/font_awesome.min');
+      // @ts-ignore
+      // import('froala-editor/js/third_party/image_tui.min');
+      // @ts-ignore
+      // import('froala-editor/js/third_party/spell_checker.min';
+      // @ts-ignore
+      // import('froala-editor/js/third_party/embedly.min');
+    }
+  }
+  ...
+}
+```
+
+- alternatively, for non-SSR applications, open `src/app/app.module.ts` and add
 
 ```typescript
 // Import all Froala Editor plugins.

diff --git a/angular.json b/angular.json
@@ -63,14 +63,14 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-froala-wysiwyg-demo:build"
+            "buildTarget": "angular-froala-wysiwyg-demo:build"
           },
           "configurations": {}
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-froala-wysiwyg-demo:build"
+            "buildTarget": "angular-froala-wysiwyg-demo:build"
           }
         },
         "lint": {

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-froala-wysiwyg-base",
-  "version": "4.3.1",
-  "description": "Angular 15+ versions bindings for Froala WYSIWYG HTML rich text editor",
+  "version": "4.4.0",
+  "description": "Angular 19+ versions bindings for Froala WYSIWYG HTML rich text editor",
   "main": "bundles/angular-froala-wysiwyg.umd.js",
   "typings": "index.d.ts",
   "module": "index.js",
@@ -16,8 +16,8 @@
     "url": "https://github.com/froala/angular-froala-wysiwyg.git"
   },
   "keywords": [
-    "angular15",
-    "ng15",
+    "angular19",
+    "ng19",
     "froala",
     "html",
     "text",
@@ -35,33 +35,30 @@
   },
   "dependencies": {
     "font-awesome": "^4.7.0",
-    "froala-editor": "^4.3.1",
-    "tslib": "^2.5.0"
+    "froala-editor": "^4.4.0",
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular/cli": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/language-service": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
-    "core-js": "~2.6.11",
-    "@types/marked": "4.0.8",
-    "@types/node": "^16.13.0",
-    "@types/tapable": "^1.0.4",
-    "@types/webpack": "^5.28.0",
+    "@angular-devkit/build-angular": "^19.0.1",
+    "@angular/cli": "^19.0.1",
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/forms": "^19.0.0",
+    "@angular/language-service": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@types/node": "^18.11.9",
+    "@types/tapable": "^2.2.1",
+    "@types/webpack": "^5.28.5",
     "classlist.js": "^1.1.20150312",
-    "ng-packagr": "^15.0.0",
-    "rxjs": "^6.5.3",
-    "ts-helpers": "^1.1.1",
-    "typescript": "~4.8.2",
-    "zone.js": "~0.12.0",
-    "tsickle": "^0.46.3"
+    "ng-packagr": "^19.0.1",
+    "rxjs": "^7.8.1",
+    "ts-helpers": "^1.1.2",
+    "typescript": "~5.6.3",
+    "zone.js": "~0.15.0"
   }
-}
+}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
@@ -4,8 +4,8 @@ import {FormControl, FormGroup, Validators} from '@angular/forms';
 import FroalaEditor from 'froala-editor';
 
 @Component({
-  selector: 'app-demo',
-  template: `
+    selector: 'app-demo',
+    template: `
 
     <h1>Angular adapter for the Froala WYSIWYG editor</h1>
     <div class="sample">
@@ -93,7 +93,8 @@ import FroalaEditor from 'froala-editor';
       <div  id="sample11" [froalaEditor]="options" [(froalaModel)]="content" ></div>
     </div>
 
-  `
+  `,
+    standalone: false
 })
 
 export class AppComponent implements OnInit {

diff --git a/projects/demo/src/app/froala.component.ts b/projects/demo/src/app/froala.component.ts
@@ -2,17 +2,18 @@ import { Component, forwardRef } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
 
 @Component({
-  selector: 'froala-component',
-  template: `
+    selector: 'froala-component',
+    template: `
     <textarea [froalaEditor]="config" (froalaModelChange)="onChange($event)" [(froalaModel)]="model"></textarea>
    `,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => FroalaComponent),
-      multi: true
-    }
-  ]
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FroalaComponent),
+            multi: true
+        }
+    ],
+    standalone: false
 })
 export class FroalaComponent implements ControlValueAccessor {
 

diff --git a/projects/demo/src/polyfills.ts b/projects/demo/src/polyfills.ts
@@ -1,20 +1,6 @@
 // This file includes polyfills needed by Angular 2 and is loaded before
 // the app. You can add your own extra polyfills to this file.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
+import 'zone.js';
+import 'zone.js/testing';
 
 import 'classlist.js';
diff --git a/projects/library/package.json b/projects/library/package.json
@@ -5,8 +5,8 @@
     "url": "https://github.com/froala/angular-froala-wysiwyg.git",
     "directory":"projects/library"
   },
-  "version": "4.3.1",
+  "version": "4.4.0",
   "dependencies": {
-    "froala-editor": "4.3.1"
+    "froala-editor": "4.4.0"
   }
 }
diff --git a/projects/library/src/editor/editor.directive.ts b/projects/library/src/editor/editor.directive.ts
@@ -1,18 +1,18 @@
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
-import { Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output } from '@angular/core';
-
-import FroalaEditor from 'froala-editor';
+import { Directive, ElementRef, EventEmitter, forwardRef, Input, NgZone, Output, PLATFORM_ID, Inject } from '@angular/core';
+import { isPlatformBrowser } from "@angular/common";
 
 @Directive({
-  selector: '[froalaEditor]',
-  exportAs: 'froalaEditor',
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => FroalaEditorDirective),
-      multi: true
-    }
-  ]
+    selector: '[froalaEditor]',
+    exportAs: 'froalaEditor',
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FroalaEditorDirective),
+            multi: true
+        }
+    ],
+    standalone: false
 })
 export class FroalaEditorDirective implements ControlValueAccessor {
 
@@ -38,7 +38,7 @@ export class FroalaEditorDirective implements ControlValueAccessor {
 
   private _oldModel: string = null;
 
-  constructor(el: ElementRef, private zone: NgZone) {
+  constructor(el: ElementRef, private zone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
 
     let element: any = el.nativeElement;
 
@@ -292,11 +292,13 @@ export class FroalaEditorDirective implements ControlValueAccessor {
         this._opts.events.initialized.overridden = true;
       }
 
-      // Initialize the Froala Editor.
-      this._editor = new FroalaEditor(
-        this._element,
-        this._opts
-      );
+      import('froala-editor').then(({ default: FroalaEditor }) => {
+        // Initialize the Froala Editor.
+        this._editor = new FroalaEditor(
+          this._element,
+          this._opts
+        );
+      });
     });
   }
 
@@ -371,7 +373,10 @@ export class FroalaEditorDirective implements ControlValueAccessor {
   // TODO not sure if ngOnInit is executed after @inputs
   ngAfterViewInit() {
     // check if output froalaInit is present. Maybe observers is private and should not be used?? TODO how to better test that an output directive is present.
-    this.setup();
+    // Only allow initialization in browser
+    if (isPlatformBrowser(this.platformId)) {
+      this.setup();
+    }
   }
 
   private initialized = false;

diff --git a/projects/library/src/view/view.directive.ts b/projects/library/src/view/view.directive.ts
@@ -1,7 +1,8 @@
 import { Directive, ElementRef, Renderer2, Input } from '@angular/core';
 
 @Directive({
-  selector: '[froalaView]'
+    selector: '[froalaView]',
+    standalone: false
 })
 export class FroalaViewDirective {
 

diff --git a/projects/library/tsconfig.json b/projects/library/tsconfig.json
@@ -2,8 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "declaration": true,
-    "module": "es2015",
-    "target": "es2015",
+    "module": "es2020",
+    "target": "es2020",
     "baseUrl": "./",
     "stripInternal": true,
     "emitDecoratorMetadata": true,
@@ -12,7 +12,7 @@
     "outDir": "../build",
     "rootDir": ".",
     "lib": [
-      "es2015",
+      "es2020",
       "dom"
     ],
     "skipLibCheck": true,

diff --git a/tsconfig.json b/tsconfig.json
@@ -12,7 +12,7 @@
     "emitDecoratorMetadata": true,
     "skipLibCheck": true,
     "experimentalDecorators": true,
-    "target": "es2015",
+    "target": "es2020",
     "typeRoots": [
       "node_modules/@types"
     ],