Merge pull request #26 from katan/master

Creates the Jodit editor instance outside Angular scope

angular.json

@@ -0,0 +1,117 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "jodit-angular": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/jodit-angular",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [],
+            "styles": [],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "jodit-angular:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "jodit-angular:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "jodit-angular:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "styles": [],
+            "scripts": [],
+            "assets": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "jodit-angular-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "protractor.conf.js",
+            "devServerTarget": "jodit-angular:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "jodit-angular:serve:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "jodit-angular"
+}

e2e/app.e2e-spec.ts

@@ -7,8 +7,11 @@ describe('jodit-angular App', () => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it('should display Jodit html editor', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!');
+
+    // Must be exists Jodit container & workplace class styles
+    expect(page.getJoditContainer()).toBeTruthy();
+    expect(page.getJoditWorkplace()).toBeTruthy();
   });
 });

e2e/app.po.ts

@@ -5,7 +5,11 @@ export class AppPage {
     return browser.get('/');
   }
 
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
+  getJoditContainer() {
+    return element(by.css('.jodit_container'));
+  }
+
+  getJoditWorkplace() {
+    return element(by.css('.jodit_workplace'));
   }
 }

jodit-angular/jodit-angular.component.ts

@@ -13,7 +13,7 @@ import {
 
 
 declare const require: any;
-const Jodit: any = require("jodit");
+const EditorModule: any = require("jodit");
 
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -33,20 +33,19 @@ const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: Provider = {
     providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
 })
 export class JoditAngularComponent extends Events implements AfterViewInit, OnDestroy, ControlValueAccessor {
-    private elementRef: ElementRef;
 
     @Input() config: object | undefined = {};
     @Input() tagName: string = 'textarea';
     @Input() id: string | undefined;
     @Input() defaultValue: string | undefined;
 
-
-    ngZone: NgZone;
-
     element: HTMLElement;
     editor: any;
 
-    constructor(elementRef: ElementRef, ngZone: NgZone) {
+    private onChangeCallback: (_: any) => {};
+    private onTouchedCallback: () => {};
+
+    constructor(private elementRef: ElementRef, private ngZone: NgZone) {
         super();
         this.elementRef = elementRef;
         this.ngZone = ngZone;
@@ -61,8 +60,6 @@ export class JoditAngularComponent extends Events implements AfterViewInit, OnDe
         }
     }
 
-    private onChangeCallback: (_: any) => {};
-    private onTouchedCallback: () => {};
 
     get value(): string {
         if (this.editor) {
@@ -83,9 +80,12 @@ export class JoditAngularComponent extends Events implements AfterViewInit, OnDe
     ngAfterViewInit() {
         if (!this.element) {
             this.createElement();
-        }
 
-        this.editor = new Jodit(this.element, this.config);
+            // Create instance outside Angular scope
+            this.ngZone.runOutsideAngular(() => {
+                this.editor = new EditorModule.Jodit(this.element, this.config);
+            });
+        }
 
         if (this.defaultValue) {
             this.editor.value = this.defaultValue;

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
-    client:{
+    client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -43,24 +43,25 @@
   },
   "homepage": "https://github.com/jodit/jodit-angular#readme",
   "dependencies": {
-    "@angular/animations": "^7.0.1",
-    "@angular/common": "^7.0.1",
-    "@angular/compiler": "^5.0.0",
-    "@angular/core": "^7.0.1",
-    "@angular/forms": "^7.0.1",
-    "@angular/http": "^7.0.1",
-    "@angular/platform-browser": "^7.0.1",
-    "@angular/platform-browser-dynamic": "^7.0.1",
-    "@angular/router": "^7.0.1",
-    "core-js": "^2.5.7",
-    "jodit": "^3.2.13",
+    "@angular/animations": "^7.2.6",
+    "@angular/common": "^7.2.6",
+    "@angular/compiler": "^7.2.6",
+    "@angular/core": "^7.2.6",
+    "@angular/forms": "^7.2.6",
+    "@angular/http": "^7.2.6",
+    "@angular/platform-browser": "^7.2.6",
+    "@angular/platform-browser-dynamic": "^7.2.6",
+    "@angular/router": "^7.2.6",
+    "core-js": "^2.6.5",
+    "jodit": "^3.2.38",
     "rxjs": "^6.3.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "7.0.3",
-    "@angular/compiler-cli": "^5.0.0",
-    "@angular/language-service": "^7.0.1",
+    "@angular-devkit/build-angular": "^0.13.3",
+    "@angular/cli": "7.3.3",
+    "@angular/compiler-cli": "^7.2.6",
+    "@angular/language-service": "^7.2.6",
     "@types/jasmine": "^2.8.9",
     "@types/jasminewd2": "^2.0.5",
     "@types/node": "^10.12.0",

src/app/app.component.spec.ts

@@ -1,8 +1,14 @@
 import { TestBed, async } from '@angular/core/testing';
+import { JoditAngularModule } from '../../jodit-angular/public_api';
+
 import { AppComponent } from './app.component';
+
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        JoditAngularModule
+      ],
       declarations: [
         AppComponent
       ],
@@ -13,15 +19,11 @@ describe('AppComponent', () => {
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   }));
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-  it('should render title in a h1 tag', async(() => {
+  it(`should be display the Jodit html editor`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
+
+    expect(compiled.querySelector('.jodit_container')).toBeTruthy();
   }));
 });

src/tsconfig.spec.json

@@ -10,7 +10,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",