From 231c80da32eece7f5ff60560bfbb63360c8c0d27 Mon Sep 17 00:00:00 2001 From: paresh-accolite Date: Fri, 25 Sep 2020 15:36:25 +0530 Subject: [PATCH 1/2] PR fixes --- README.md | 2 + package.json | 7 +++- src/editor/editor.directive.ts | 76 ++++++++++------------------------ 3 files changed, 28 insertions(+), 57 deletions(-) diff --git a/README.md b/README.md index b67cc8c..848d1ca 100644 --- a/README.md +++ b/README.md @@ -393,6 +393,8 @@ npm run start 1. ng new froala-aot +- Go to `angular.json` and change `architect.build.options.outputPath` to `src/dist` and add following code to `architect.build.options.assets array` + ```javascript { "glob": "**/*", diff --git a/package.json b/package.json index 3abea4e..ff651a6 100644 --- a/package.json +++ b/package.json @@ -53,9 +53,12 @@ "dependencies": { "font-awesome": "^4.7.0", "froala-editor": "^3.2.2", - "tslib": "^1.9.0" + "tslib": "^1.9.0", + "lodash.isequal": "^4.5.0" + }, + "peerDependencies": { + "lodash.clonedeep": "^4.5.0" }, - "peerDependencies": {}, "devDependencies": { "lite-server": "^2.5.4", "@angular-devkit/build-angular": "^0.1000.7", diff --git a/src/editor/editor.directive.ts b/src/editor/editor.directive.ts index 1422830..8726bc3 100644 --- a/src/editor/editor.directive.ts +++ b/src/editor/editor.directive.ts @@ -1,8 +1,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms"; import { Directive, ElementRef, EventEmitter, Input, NgZone, Output, forwardRef } from '@angular/core'; +import cloneDeep from "lodash.clonedeep"; +import isEqual from 'lodash.isequal'; import FroalaEditor from 'froala-editor'; +type FroalaOptions = Record; + @Directive({ selector: '[froalaEditor]', exportAs: 'froalaEditor', @@ -15,7 +19,7 @@ import FroalaEditor from 'froala-editor'; export class FroalaEditorDirective implements ControlValueAccessor { // editor options - private _opts: any = { + private _opts: FroalaOptions = { immediateAngularModelUpdate: false, angularIgnoreAttrs: null }; @@ -65,65 +69,25 @@ export class FroalaEditorDirective implements ControlValueAccessor { // froalaEditor directive as input: store the editor options @Input() set froalaEditor(opts: any) { this._opts = this.clone( opts || this._opts); - this._opts = {...this._opts}; } - // TODO: replace clone method with better possible alternate - private clone(item) { - const me = this; - if (!item) { return item; } // null, undefined values check - - let types = [ Number, String, Boolean ], - result; - - // normalizing primitives if someone did new String('aaa'), or new Number('444'); - types.forEach(function(type) { - if (item instanceof type) { - result = type( item ); - } - }); - - if (typeof result == "undefined") { - if (Object.prototype.toString.call( item ) === "[object Array]") { - result = []; - item.forEach(function(child, index, array) { - result[index] = me.clone( child ); - }); - } else if (typeof item == "object") { - // testing that this is DOM - if (item.nodeType && typeof item.cloneNode == "function") { - result = item.cloneNode( true ); - } else if (!item.prototype) { // check that this is a literal - if (item instanceof Date) { - result = new Date(item); - } else { - // it is an object literal - result = {}; - for (var i in item) { - result[i] = me.clone( item[i] ); - } - } - } else { - if (false && item.constructor) { - result = new item.constructor(); - } else { - result = item; - } - } - } else { - result = item; - } - } - return result; + // clone object + private clone(opts: FroalaOptions): FroalaOptions { + return cloneDeep(opts); } // froalaModel directive as input: store initial editor content @Input() set froalaModel(content: any) { this.updateEditor(content); } + // exposing the editor + public get editor() { + return this._editor; + } + // Update editor with model contents. private updateEditor(content: any) { - if (JSON.stringify(this._oldModel) == JSON.stringify(content)) { + if (isEqual(this._oldModel, content)) { return; } @@ -223,9 +187,7 @@ export class FroalaEditorDirective implements ControlValueAccessor { if (this._editor.events) { // bind contentChange and keyup event to froalaModel this._editor.events.on('contentChanged', function () { - setTimeout(function () { - self.updateModel(); - }, 0); + self.updateModel(); }); this._editor.events.on('mousedown', function () { setTimeout(function () { @@ -278,7 +240,11 @@ export class FroalaEditorDirective implements ControlValueAccessor { } private setHtml() { - this._editor.html.set(this._model || ""); + if (this._hasSpecialTag) { + this._editor.html.set(this._model || ""); + } else { + this._editor.html.set(this._oldModel || ""); + } // This will reset the undo stack everytime the model changes externally. Can we fix this? this._editor.undo.reset(); @@ -291,6 +257,7 @@ export class FroalaEditorDirective implements ControlValueAccessor { // Set initial content if (this._model || this._model == '') { this._oldModel = this._model; + } if (this._hasSpecialTag) { let tags: Object = this._model; @@ -317,7 +284,6 @@ export class FroalaEditorDirective implements ControlValueAccessor { self.setHtml(); } } - } } private destroyEditor() { From 052bc3c2d7854a089d707ccd9c96b01965f00c98 Mon Sep 17 00:00:00 2001 From: paresh-accolite Date: Wed, 30 Sep 2020 14:13:37 +0530 Subject: [PATCH 2/2] fixed the directive issue --- src/editor/editor.directive.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/editor/editor.directive.ts b/src/editor/editor.directive.ts index 8726bc3..8c051f8 100644 --- a/src/editor/editor.directive.ts +++ b/src/editor/editor.directive.ts @@ -257,7 +257,7 @@ export class FroalaEditorDirective implements ControlValueAccessor { // Set initial content if (this._model || this._model == '') { this._oldModel = this._model; - } + if (this._hasSpecialTag) { let tags: Object = this._model; @@ -284,6 +284,7 @@ export class FroalaEditorDirective implements ControlValueAccessor { self.setHtml(); } } + } } private destroyEditor() {