Update to v4.1.0 (#526)

 - Support for Angular 15 and Ivy
 - Fixed, pasting rich content in safari does not work as expected
 - Fixed, empty paragraphs getting created when merging cells if the table is wrapped using `html.wrap`
 - Fixed, table row with `display: none` style applied does not get's counted
 - Fixed, TypeError: Cannot read properties of undefined (reading 'which')
 - Fixed, font size does not work when `contenteditable="false"` is used
 - Fixed, errors while dragging a `div` block tries to drop in its own container
 - Fixed, editor content scrolls up while pressing backspace in `iframe` mode
 - Fixed, incorrect behavior on iPad safari when backspacing on korean text
 - Fixed, Toolbar Sizes / Responsiveness is not relative to editor width
 - Fixed, viewport jumps to top when toggling between fullScreen
 - Fixed, text overlapping on emoticons
 - Fixed, inconsistent API for uploading files
 - Fixed, adding new row does not work with table header
 - Fixed, the toolbarBottom on mobile devices
 - Fixed, markdown UI breaks when enabling the iframe option
 - Fixed, accessibility features are not working for special character
 - Fixed, accessibility features are not working for emoticons
 - Fixed, hovering over the toolbar buttons generates lot of errors in console
 - Fixed, font formatting gets reset after inserting a table
 - Fixed, spacing and number lists are not respected when pasting from MS Word
 - Updated thirdparty plugins in examples
 - Fixed, editor freezes when pasting a large content
 - Fixed, support typescript definitions
 - Fixed, image alignment does not work as expected inside existing Iframe

---------

Co-authored-by: Japnit Singh <japnit.singhahluwalia@accolitedigital.com>
Co-authored-by: jyothigayathri <jyothi.potti@accolitedigital.com>

Author: 3 people

README.md

@@ -4,7 +4,7 @@
 [![npm](https://img.shields.io/npm/dm/angular-froala-wysiwyg.svg)](https://www.npmjs.com/package/angular-froala-wysiwyg)
 [![npm](https://img.shields.io/npm/l/angular-froala-wysiwyg.svg)](https://www.npmjs.com/package/angular-froala-wysiwyg)
 
->Angular 4 to Angular 9 bindings for Froala WYSIWYG Editor.
+>Angular 15+ versions bindings for Froala WYSIWYG Editor.
 
 ![WYSIWYG HTML Editor](https://raw.githubusercontent.com/froala/wysiwyg-editor/v2/editor.jpg)
 
@@ -38,6 +38,12 @@ You will need CSS styles
 <link href="node_modules/froala-editor/css/froala_editor.pkgd.min.css" rel="stylesheet">
 ```
 
+>Note :  In case you want to use font-awesome icons , you can use them by installing it.
+- Run ` npm install font-awesome ` 
+- Or in `index.hml` add given cdn  
+ `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">`
+
+
 ## Update editor instructions
 
 ```bash

angular.json

@@ -24,6 +24,11 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "allowedCommonJsDependencies":[
+              "froala-editor",
+              "core-js",
+              "zone.js"
+          ],
             "outputPath": "dist-demo",
             "index": "projects/demo/src/index.html",
             "main": "projects/demo/src/main.ts",
@@ -83,11 +88,11 @@
       "projectType": "application"
     }
   },
-  "defaultProject": "angular-froala-wysiwyg-demo",
+  
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "",
-      "styleext": "css"
+      "style": "css"
     },
     "@schematics/angular:directive": {
       "prefix": ""

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-froala-wysiwyg-base",
-  "version": "4.0.19",
-  "description": "Angular 4, 5, 6, 7, 8, 9, 10, 11 and 12 bindings for Froala WYSIWYG HTML rich text editor",
+  "version": "4.1.0",
+  "description": "Angular 15+ versions bindings for Froala WYSIWYG HTML rich text editor",
   "main": "bundles/angular-froala-wysiwyg.umd.js",
   "typings": "index.d.ts",
   "module": "index.js",
@@ -16,24 +16,8 @@
     "url": "https://github.com/froala/angular-froala-wysiwyg.git"
   },
   "keywords": [
-    "angular4",
-    "angular5",
-    "angular6",
-    "angular7",
-    "angular8",
-    "angular9",
-    "angular10",
-    "angular11",
-    "angular12",
-    "ng4",
-    "ng5",
-    "ng6",
-    "ng7",
-    "ng8",
-    "ng9",
-    "ng10",
-    "ng11",
-    "ng12",
+    "angular15",
+    "ng15",
     "froala",
     "html",
     "text",
@@ -51,33 +35,33 @@
   },
   "dependencies": {
     "font-awesome": "^4.7.0",
-    "froala-editor": "^4.0.19",
-    "tslib": "^2.0.0"
+    "froala-editor": "^4.1.0",
+    "tslib": "^2.5.0"
   },
   "peerDependencies": {},
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.12",
-    "@angular/cli": "^11.2.12",
-    "@angular/common": "^11.2.13",
-    "@angular/compiler": "^11.2.13",
-    "@angular/compiler-cli": "^11.2.13",
-    "@angular/core": "^11.2.13",
-    "@angular/forms": "^11.2.13",
-    "@angular/language-service": "^11.2.13",
-    "@angular/platform-browser": "^11.2.13",
-    "@angular/platform-browser-dynamic": "^11.2.13",
-    "@angular/router": "^11.2.13",
-    "core-js": "^2.6.11",
-    "@types/marked": "0.0.28",
-    "@types/node": "7.0.0",
+    "@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": "^4.39.5",
+    "@types/webpack": "^5.28.0",
     "classlist.js": "^1.1.20150312",
-    "ng-packagr": "^11.2.4",
+    "ng-packagr": "^15.0.0",
     "rxjs": "^6.5.3",
     "ts-helpers": "^1.1.1",
-    "typescript": "4.0.5",
-    "zone.js": "~0.10.3",
-    "tsickle": "^0.39.1"
+    "typescript": "~4.8.2",
+    "zone.js": "~0.12.0",
+    "tsickle": "^0.46.3"
   }
 }

projects/demo/src/app/app.component.ts

@@ -66,7 +66,7 @@ import FroalaEditor from 'froala-editor';
       <form [formGroup]="form" (ngSubmit)="onSubmit()">
         <div *ngIf="formModel.invalid"> Name is too short. </div>
         <h3>Textarea with formControlName and froalaModel</h3>
-        <textarea id="sample9-1" [froalaEditor] formControlName="formModel" [(froalaModel)]="formControls.formModel"></textarea>
+        <textarea id="sample9-1" [froalaEditor] formControlName="formModel" [(froalaModel)]="form.formModel"></textarea>
         <h4>Rendered Content:</h4>
         <div [froalaView]="form.value.formModel"></div>
         <h3>Textarea only with formControlName</h3>
@@ -127,6 +127,10 @@ export class AppComponent implements OnInit {
     }
   }
   public myTitle: string;
+  onBlurMethod()
+  {
+    console.log(this.myTitle);
+  }
 
 
   // Sample 2 model
@@ -187,7 +191,7 @@ export class AppComponent implements OnInit {
   formControls = {
     formModel: new FormControl('Hello World', Validators.minLength(2)),
   };
-  form = new FormGroup(this.formControls);
+  form:any = new FormGroup(this.formControls);
   get formModel(): any { return this.form.get('formModel'); }
   onSubmit(): void {
     console.log(this.form.value);

projects/demo/tsconfig.json

@@ -11,7 +11,7 @@
     ],
     "module": "esnext",
     "moduleResolution": "node",
-    "target": "es2015",
+    "target": "ES2022",
     "baseUrl": ".",
     "sourceMap": true,
     "typeRoots": [

projects/library/ng-package.json

@@ -2,7 +2,7 @@
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../dist",
   "deleteDestPath": true,
-  "whitelistedNonPeerDependencies": [
+  "allowedNonPeerDependencies": [
     "froala-editor"
   ],
   "lib": {

projects/library/package.json

@@ -1,7 +1,12 @@
 {
   "name": "angular-froala-wysiwyg",
-  "version": "4.0.19",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/froala/angular-froala-wysiwyg.git",
+    "directory":"projects/library"
+  },
+  "version": "4.1.0",
   "dependencies": {
-    "froala-editor": "4.0.19"
+    "froala-editor": "4.1.0"
   }
 }

projects/library/src/editor/editor.directive.ts

@@ -52,14 +52,17 @@ export class FroalaEditorDirective implements ControlValueAccessor {
   }
 
   // Begin ControlValueAccesor methods.
-  onChange = (_) => {
+  onChange = (_: any) => {
   };
   onTouched = () => {
   };
 
   // Form model content changed.
   writeValue(content: any): void {
     this.updateEditor(content);
+    if(content){
+      this.setup();
+    }
   }
 
   registerOnChange(fn: (_: any) => void): void {
@@ -131,12 +134,29 @@ export class FroalaEditorDirective implements ControlValueAccessor {
     this.updateEditor(content);
   }
 
-  // Update editor with model contents.
-  private updateEditor(content: any) {
-    if (JSON.stringify(this._oldModel) == JSON.stringify(content)) {
-      return;
-    }
-
+  private stringify(obj) {
+    let cache = [];
+    let str = JSON.stringify(obj, function(key, value) {
+      if (typeof value === "object" && value !== null) {
+        if (cache.indexOf(value) !== -1) {
+          // Circular reference found, discard key
+          return;
+        }
+        // Store value in our collection
+        cache.push(value);
+      }
+      return value;
+    });
+    cache = null; // reset the cache
+    return str;
+  }
+  
+    // Update editor with model contents.
+    private updateEditor(content: any) {
+      if (this.stringify(this._oldModel) == this.stringify(content)) {
+        return;
+      }
+     
     if (!this._hasSpecialTag) {
       this._oldModel = content;
     } else {
@@ -351,6 +371,15 @@ 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();
+  }
+
+  private initialized = false;
+  private setup() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
     if (!this.froalaInit.observers.length) {
       this.createEditor();
     } else {

projects/library/tsconfig.json

@@ -19,7 +19,7 @@
     "types": []
   },
   "angularCompilerOptions": {
-    "enableIvy": false,
+    "compilationMode": "partial",
     "annotateForClosureCompiler": true,
     "strictMetadataEmit": true,
     "skipTemplateCodegen": true,