angular2-froala-wysiwyg - npm Package Compare versions

Comparing version 2.5.1-1 to 2.5.1-2

bundles/angular2-froala-wysiwyg.umd.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@angular/core"));
+		module.exports = factory(require("@angular/core"), require("@angular/forms"));
 	else if(typeof define === 'function' && define.amd)
-		define(["@angular/core"], factory);
+		define(["@angular/core", "@angular/forms"], factory);
 	else if(typeof exports === 'object')
-		exports["angular2-froala-wysiwyg.umd"] = factory(require("@angular/core"));
+		exports["angular2-froala-wysiwyg.umd"] = factory(require("@angular/core"), require("@angular/forms"));
 	else
-		root["angular2-froala-wysiwyg.umd"] = factory(root["@angular/core"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
+		root["angular2-froala-wysiwyg.umd"] = factory(root["@angular/core"], root["@angular/forms"]);
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_7__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -76,3 +76,3 @@ /******/ 	// The module cache
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 7);
+/******/ 	return __webpack_require__(__webpack_require__.s = 8);
 /******/ })
@@ -119,2 +119,4 @@ /************************************************************************/
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_forms__ = __webpack_require__(7);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_forms___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__angular_forms__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FroalaEditorDirective; });
@@ -131,2 +133,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 
+
 var FroalaEditorDirective = (function () {
@@ -145,2 +148,5 @@ function FroalaEditorDirective(el) {
         this._oldModel = null;
+        // Begin ControlValueAccesor methods.
+        this.onChange = function (_) { };
+        this.onTouched = function () { };
         // froalaModel directive as output: update model if editor contentChanged
@@ -158,3 +164,10 @@ this.froalaModelChange = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
     }
+    // Form model content changed.
+    FroalaEditorDirective.prototype.writeValue = function (content) {
+        this.updateEditor(content);
+    };
+    FroalaEditorDirective.prototype.registerOnChange = function (fn) { this.onChange = fn; };
+    FroalaEditorDirective.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
     Object.defineProperty(FroalaEditorDirective.prototype, "froalaEditor", {
+        // End ControlValueAccesor methods.
         // froalaEditor directive as input: store the editor options
@@ -170,9 +183,3 @@ set: function (opts) {
         set: function (content) {
-            if (JSON.stringify(this._oldModel) == JSON.stringify(content)) {
-                return;
-            }
-            this._model = content;
-            if (this._editorInitialized) {
-                this.setContent();
-            }
+            this.updateEditor(content);
         },
@@ -182,2 +189,12 @@ enumerable: true,
     });
+    // Update editor with model contents.
+    FroalaEditorDirective.prototype.updateEditor = function (content) {
+        if (JSON.stringify(this._oldModel) == JSON.stringify(content)) {
+            return;
+        }
+        this._model = content;
+        if (this._editorInitialized) {
+            this.setContent();
+        }
+    };
     // update model if editor contentChanged
@@ -208,3 +225,6 @@ FroalaEditorDirective.prototype.updateModel = function () {
         this._oldModel = modelContent;
+        // Update froalaModel.
         this.froalaModelChange.emit(modelContent);
+        // Update form model.
+        this.onChange(modelContent);
     };
@@ -337,4 +357,4 @@ // register event on jquery element
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
-        __metadata('design:type', String), 
-        __metadata('design:paramtypes', [String])
+        __metadata('design:type', Object), 
+        __metadata('design:paramtypes', [Object])
     ], FroalaEditorDirective.prototype, "froalaModel", null);
@@ -351,3 +371,7 @@ __decorate([
         __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Directive"])({
-            selector: '[froalaEditor]'
+            selector: '[froalaEditor]',
+            providers: [{
+                    provide: __WEBPACK_IMPORTED_MODULE_1__angular_forms__["NG_VALUE_ACCESSOR"], useExisting: __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["forwardRef"])(function () { return FroalaEditorDirective; }),
+                    multi: true
+                }]
         }), 
@@ -485,2 +509,8 @@ __metadata('design:paramtypes', [__WEBPACK_IMPORTED_MODULE_0__angular_core__["ElementRef"]])
 /* 7 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
+
+/***/ }),
+/* 8 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -487,0 +517,0 @@

bundles/angular2-froala-wysiwyg.umd.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core")):"function"==typeof define&&define.amd?define(["@angular/core"],e):"object"==typeof exports?exports["angular2-froala-wysiwyg.umd.min"]=e(require("@angular/core")):t["angular2-froala-wysiwyg.umd.min"]=e(t["@angular/core"])}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=7)}([function(e,n){e.exports=t},function(t,e,n){"use strict";var i=n(3);n.d(e,"a",function(){return i.a});var r=n(5);n.d(e,"b",function(){return r.a})},function(t,e,n){"use strict";var i=n(4);n.d(e,"a",function(){return i.a});var r=n(6);n.d(e,"b",function(){return r.a})},function(t,e,n){"use strict";var i=n(0);n.n(i);n.d(e,"a",function(){return a});var r=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},a=function(){function t(t){this._opts={immediateAngularModelUpdate:!1,angularIgnoreAttrs:null},this.SPECIAL_TAGS=["img","button","input","a"],this.INNER_HTML_ATTR="innerHTML",this._hasSpecialTag=!1,this._listeningEvents=[],this._editorInitialized=!1,this._oldModel=null,this.froalaModelChange=new i.EventEmitter,this.froalaInit=new i.EventEmitter;var e=t.nativeElement;this.SPECIAL_TAGS.indexOf(e.tagName.toLowerCase())!=-1&&(this._hasSpecialTag=!0),this._$element=$(e)}return Object.defineProperty(t.prototype,"froalaEditor",{set:function(t){this._opts=t||this._opts},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"froalaModel",{set:function(t){JSON.stringify(this._oldModel)!=JSON.stringify(t)&&(this._model=t,this._editorInitialized&&this.setContent())},enumerable:!0,configurable:!0}),t.prototype.updateModel=function(){var t=null;if(this._hasSpecialTag){for(var e=this._$element[0].attributes,n={},i=0;i<e.length;i++){var r=e[i].name;this._opts.angularIgnoreAttrs&&this._opts.angularIgnoreAttrs.indexOf(r)!=-1||(n[r]=e[i].value)}this._$element[0].innerHTML&&(n[this.INNER_HTML_ATTR]=this._$element[0].innerHTML),t=n}else{var o=this._$element.froalaEditor("html.get");"string"==typeof o&&(t=o)}this._oldModel=t,this.froalaModelChange.emit(t)},t.prototype.registerEvent=function(t,e,n){t&&e&&n&&(this._listeningEvents.push(e),t.on(e,n))},t.prototype.initListeners=function(){var t=this;this.registerEvent(this._$element,"froalaEditor.contentChanged",function(){t.updateModel()}),this._opts.immediateAngularModelUpdate&&this.registerEvent(this._editor,"keyup",function(){t.updateModel()})},t.prototype.registerFroalaEvents=function(){if(this._opts.events)for(var t in this._opts.events)this._opts.events.hasOwnProperty(t)&&this.registerEvent(this._$element,t,this._opts.events[t])},t.prototype.createEditor=function(){this._editorInitialized||(this.setContent(!0),this.registerFroalaEvents(),this._editor=this._$element.froalaEditor(this._opts).data("froala.editor").$el,this.initListeners(),this._editorInitialized=!0)},t.prototype.setHtml=function(){this._$element.froalaEditor("html.set",this._model||"",!0),this._$element.froalaEditor("undo.reset"),this._$element.froalaEditor("undo.saveStep")},t.prototype.setContent=function(t){void 0===t&&(t=!1);var e=this;if(this._model||""==this._model)if(this._oldModel=this._model,this._hasSpecialTag){var n=this._model;if(n){for(var i in n)n.hasOwnProperty(i)&&i!=this.INNER_HTML_ATTR&&this._$element.attr(i,n[i]);n.hasOwnProperty(this.INNER_HTML_ATTR)&&(this._$element[0].innerHTML=n[this.INNER_HTML_ATTR])}}else t?this.registerEvent(this._$element,"froalaEditor.initialized",function(){e.setHtml()}):e.setHtml()},t.prototype.destroyEditor=function(){this._editorInitialized&&(this._$element.off(this._listeningEvents.join(" ")),this._editor.off("keyup"),this._$element.froalaEditor("destroy"),this._listeningEvents.length=0,this._editorInitialized=!1)},t.prototype.getEditor=function(){return this._$element?this._$element.froalaEditor.bind(this._$element):null},t.prototype.generateManualController=function(){var t={initialize:this.createEditor.bind(this),destroy:this.destroyEditor.bind(this),getEditor:this.getEditor.bind(this)};this.froalaInit.emit(t)},t.prototype.ngOnInit=function(){this.froalaInit.observers.length?this.generateManualController():this.createEditor()},t.prototype.ngOnDestroy=function(){this.destroyEditor()},r([n.i(i.Input)(),o("design:type",Object),o("design:paramtypes",[Object])],t.prototype,"froalaEditor",null),r([n.i(i.Input)(),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"froalaModel",null),r([n.i(i.Output)(),o("design:type",i.EventEmitter)],t.prototype,"froalaModelChange",void 0),r([n.i(i.Output)(),o("design:type",i.EventEmitter)],t.prototype,"froalaInit",void 0),t=r([n.i(i.Directive)({selector:"[froalaEditor]"}),o("design:paramtypes",[i.ElementRef])],t)}()},function(t,e,n){"use strict";var i=n(0);n.n(i);n.d(e,"a",function(){return a});var r=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},a=function(){function t(t,e){this.renderer=t,this._element=e.nativeElement}return Object.defineProperty(t.prototype,"froalaView",{set:function(t){this._element.innerHTML=t},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.renderer.setElementClass(this._element,"fr-view",!0)},r([n.i(i.Input)(),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"froalaView",null),t=r([n.i(i.Directive)({selector:"[froalaView]"}),o("design:paramtypes",[i.Renderer,i.ElementRef])],t)}()},function(t,e,n){"use strict";var i=n(0),r=(n.n(i),n(3));n.d(e,"a",function(){return s});var o=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},a=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t=o([n.i(i.NgModule)({declarations:[r.a],exports:[r.a]}),a("design:paramtypes",[])],t)}()},function(t,e,n){"use strict";var i=n(0),r=(n.n(i),n(4));n.d(e,"a",function(){return s});var o=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},a=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t=o([n.i(i.NgModule)({declarations:[r.a],exports:[r.a]}),a("design:paramtypes",[])],t)}()},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0),r=(n.n(i),n(1)),o=n(2);n.d(e,"FroalaEditorDirective",function(){return r.a}),n.d(e,"FroalaEditorModule",function(){return r.b}),n.d(e,"FroalaViewDirective",function(){return o.a}),n.d(e,"FroalaViewModule",function(){return o.b}),n.d(e,"FERootModule",function(){return f});var a=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},s=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},l=[r.b,o.b],f=function(){function t(){}return t=a([n.i(i.NgModule)({imports:[r.b.forRoot(),o.b.forRoot()],exports:l}),s("design:paramtypes",[])],t)}()}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["@angular/core","@angular/forms"],e):"object"==typeof exports?exports["angular2-froala-wysiwyg.umd.min"]=e(require("@angular/core"),require("@angular/forms")):t["angular2-froala-wysiwyg.umd.min"]=e(t["@angular/core"],t["@angular/forms"])}(this,function(t,e){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,i){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:i})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="/",e(e.s=8)}([function(e,n){e.exports=t},function(t,e,n){"use strict";var i=n(3);n.d(e,"a",function(){return i.a});var r=n(5);n.d(e,"b",function(){return r.a})},function(t,e,n){"use strict";var i=n(4);n.d(e,"a",function(){return i.a});var r=n(6);n.d(e,"b",function(){return r.a})},function(t,e,n){"use strict";var i=n(0),r=(n.n(i),n(7));n.n(r);n.d(e,"a",function(){return s});var o=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},a=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=function(){function t(t){this._opts={immediateAngularModelUpdate:!1,angularIgnoreAttrs:null},this.SPECIAL_TAGS=["img","button","input","a"],this.INNER_HTML_ATTR="innerHTML",this._hasSpecialTag=!1,this._listeningEvents=[],this._editorInitialized=!1,this._oldModel=null,this.onChange=function(t){},this.onTouched=function(){},this.froalaModelChange=new i.EventEmitter,this.froalaInit=new i.EventEmitter;var e=t.nativeElement;this.SPECIAL_TAGS.indexOf(e.tagName.toLowerCase())!=-1&&(this._hasSpecialTag=!0),this._$element=$(e)}return t.prototype.writeValue=function(t){this.updateEditor(t)},t.prototype.registerOnChange=function(t){this.onChange=t},t.prototype.registerOnTouched=function(t){this.onTouched=t},Object.defineProperty(t.prototype,"froalaEditor",{set:function(t){this._opts=t||this._opts},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"froalaModel",{set:function(t){this.updateEditor(t)},enumerable:!0,configurable:!0}),t.prototype.updateEditor=function(t){JSON.stringify(this._oldModel)!=JSON.stringify(t)&&(this._model=t,this._editorInitialized&&this.setContent())},t.prototype.updateModel=function(){var t=null;if(this._hasSpecialTag){for(var e=this._$element[0].attributes,n={},i=0;i<e.length;i++){var r=e[i].name;this._opts.angularIgnoreAttrs&&this._opts.angularIgnoreAttrs.indexOf(r)!=-1||(n[r]=e[i].value)}this._$element[0].innerHTML&&(n[this.INNER_HTML_ATTR]=this._$element[0].innerHTML),t=n}else{var o=this._$element.froalaEditor("html.get");"string"==typeof o&&(t=o)}this._oldModel=t,this.froalaModelChange.emit(t),this.onChange(t)},t.prototype.registerEvent=function(t,e,n){t&&e&&n&&(this._listeningEvents.push(e),t.on(e,n))},t.prototype.initListeners=function(){var t=this;this.registerEvent(this._$element,"froalaEditor.contentChanged",function(){t.updateModel()}),this._opts.immediateAngularModelUpdate&&this.registerEvent(this._editor,"keyup",function(){t.updateModel()})},t.prototype.registerFroalaEvents=function(){if(this._opts.events)for(var t in this._opts.events)this._opts.events.hasOwnProperty(t)&&this.registerEvent(this._$element,t,this._opts.events[t])},t.prototype.createEditor=function(){this._editorInitialized||(this.setContent(!0),this.registerFroalaEvents(),this._editor=this._$element.froalaEditor(this._opts).data("froala.editor").$el,this.initListeners(),this._editorInitialized=!0)},t.prototype.setHtml=function(){this._$element.froalaEditor("html.set",this._model||"",!0),this._$element.froalaEditor("undo.reset"),this._$element.froalaEditor("undo.saveStep")},t.prototype.setContent=function(t){void 0===t&&(t=!1);var e=this;if(this._model||""==this._model)if(this._oldModel=this._model,this._hasSpecialTag){var n=this._model;if(n){for(var i in n)n.hasOwnProperty(i)&&i!=this.INNER_HTML_ATTR&&this._$element.attr(i,n[i]);n.hasOwnProperty(this.INNER_HTML_ATTR)&&(this._$element[0].innerHTML=n[this.INNER_HTML_ATTR])}}else t?this.registerEvent(this._$element,"froalaEditor.initialized",function(){e.setHtml()}):e.setHtml()},t.prototype.destroyEditor=function(){this._editorInitialized&&(this._$element.off(this._listeningEvents.join(" ")),this._editor.off("keyup"),this._$element.froalaEditor("destroy"),this._listeningEvents.length=0,this._editorInitialized=!1)},t.prototype.getEditor=function(){return this._$element?this._$element.froalaEditor.bind(this._$element):null},t.prototype.generateManualController=function(){var t={initialize:this.createEditor.bind(this),destroy:this.destroyEditor.bind(this),getEditor:this.getEditor.bind(this)};this.froalaInit.emit(t)},t.prototype.ngOnInit=function(){this.froalaInit.observers.length?this.generateManualController():this.createEditor()},t.prototype.ngOnDestroy=function(){this.destroyEditor()},o([n.i(i.Input)(),a("design:type",Object),a("design:paramtypes",[Object])],t.prototype,"froalaEditor",null),o([n.i(i.Input)(),a("design:type",Object),a("design:paramtypes",[Object])],t.prototype,"froalaModel",null),o([n.i(i.Output)(),a("design:type",i.EventEmitter)],t.prototype,"froalaModelChange",void 0),o([n.i(i.Output)(),a("design:type",i.EventEmitter)],t.prototype,"froalaInit",void 0),t=o([n.i(i.Directive)({selector:"[froalaEditor]",providers:[{provide:r.NG_VALUE_ACCESSOR,useExisting:n.i(i.forwardRef)(function(){return t}),multi:!0}]}),a("design:paramtypes",[i.ElementRef])],t)}()},function(t,e,n){"use strict";var i=n(0);n.n(i);n.d(e,"a",function(){return a});var r=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},a=function(){function t(t,e){this.renderer=t,this._element=e.nativeElement}return Object.defineProperty(t.prototype,"froalaView",{set:function(t){this._element.innerHTML=t},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.renderer.setElementClass(this._element,"fr-view",!0)},r([n.i(i.Input)(),o("design:type",String),o("design:paramtypes",[String])],t.prototype,"froalaView",null),t=r([n.i(i.Directive)({selector:"[froalaView]"}),o("design:paramtypes",[i.Renderer,i.ElementRef])],t)}()},function(t,e,n){"use strict";var i=n(0),r=(n.n(i),n(3));n.d(e,"a",function(){return s});var o=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},a=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t=o([n.i(i.NgModule)({declarations:[r.a],exports:[r.a]}),a("design:paramtypes",[])],t)}()},function(t,e,n){"use strict";var i=n(0),r=(n.n(i),n(4));n.d(e,"a",function(){return s});var o=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},a=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[]}},t=o([n.i(i.NgModule)({declarations:[r.a],exports:[r.a]}),a("design:paramtypes",[])],t)}()},function(t,n){t.exports=e},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(0),r=(n.n(i),n(1)),o=n(2);n.d(e,"FroalaEditorDirective",function(){return r.a}),n.d(e,"FroalaEditorModule",function(){return r.b}),n.d(e,"FroalaViewDirective",function(){return o.a}),n.d(e,"FroalaViewModule",function(){return o.b}),n.d(e,"FERootModule",function(){return l});var a=this&&this.__decorate||function(t,e,n,i){var r,o=arguments.length,a=o<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(a=(o<3?r(a):o>3?r(e,n,a):r(e,n))||a);return o>3&&a&&Object.defineProperty(e,n,a),a},s=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},f=[r.b,o.b],l=function(){function t(){}return t=a([n.i(i.NgModule)({imports:[r.b.forRoot(),o.b.forRoot()],exports:f}),s("design:paramtypes",[])],t)}()}])});

editor/editor.directive.d.ts

 import { ElementRef, EventEmitter } from '@angular/core';
-export declare class FroalaEditorDirective {
+import { ControlValueAccessor } from "@angular/forms";
+export declare class FroalaEditorDirective implements ControlValueAccessor {
     private _opts;
@@ -14,4 +15,10 @@ private _$element;
     constructor(el: ElementRef);
+    onChange: (_: any) => void;
+    onTouched: () => void;
+    writeValue(content: any): void;
+    registerOnChange(fn: (_: any) => void): void;
+    registerOnTouched(fn: () => void): void;
     froalaEditor: any;
-    froalaModel: string;
+    froalaModel: any;
+    private updateEditor(content);
     froalaModelChange: EventEmitter<any>;
@@ -18,0 +25,0 @@ froalaInit: EventEmitter<Object>;

editor/editor.directive.js

@@ -1,2 +0,3 @@
-import { Directive, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { Directive, ElementRef, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
 export var FroalaEditorDirective = (function () {
@@ -15,2 +16,5 @@ function FroalaEditorDirective(el) {
         this._oldModel = null;
+        // Begin ControlValueAccesor methods.
+        this.onChange = function (_) { };
+        this.onTouched = function () { };
         // froalaModel directive as output: update model if editor contentChanged
@@ -28,3 +32,10 @@ this.froalaModelChange = new EventEmitter();
     }
+    // Form model content changed.
+    FroalaEditorDirective.prototype.writeValue = function (content) {
+        this.updateEditor(content);
+    };
+    FroalaEditorDirective.prototype.registerOnChange = function (fn) { this.onChange = fn; };
+    FroalaEditorDirective.prototype.registerOnTouched = function (fn) { this.onTouched = fn; };
     Object.defineProperty(FroalaEditorDirective.prototype, "froalaEditor", {
+        // End ControlValueAccesor methods.
         // froalaEditor directive as input: store the editor options
@@ -40,9 +51,3 @@ set: function (opts) {
         set: function (content) {
-            if (JSON.stringify(this._oldModel) == JSON.stringify(content)) {
-                return;
-            }
-            this._model = content;
-            if (this._editorInitialized) {
-                this.setContent();
-            }
+            this.updateEditor(content);
         },
@@ -52,2 +57,12 @@ enumerable: true,
     });
+    // Update editor with model contents.
+    FroalaEditorDirective.prototype.updateEditor = function (content) {
+        if (JSON.stringify(this._oldModel) == JSON.stringify(content)) {
+            return;
+        }
+        this._model = content;
+        if (this._editorInitialized) {
+            this.setContent();
+        }
+    };
     // update model if editor contentChanged
@@ -78,3 +93,6 @@ FroalaEditorDirective.prototype.updateModel = function () {
         this._oldModel = modelContent;
+        // Update froalaModel.
         this.froalaModelChange.emit(modelContent);
+        // Update form model.
+        this.onChange(modelContent);
     };
@@ -202,3 +220,7 @@ // register event on jquery element
         { type: Directive, args: [{
-                    selector: '[froalaEditor]'
+                    selector: '[froalaEditor]',
+                    providers: [{
+                            provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(function () { return FroalaEditorDirective; }),
+                            multi: true
+                        }]
                 },] },
@@ -205,0 +227,0 @@ ];

editor/editor.directive.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"FroalaEditorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[froalaEditor]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"froalaEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"froalaInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"updateModel":[{"__symbolic":"method"}],"registerEvent":[{"__symbolic":"method"}],"initListeners":[{"__symbolic":"method"}],"registerFroalaEvents":[{"__symbolic":"method"}],"createEditor":[{"__symbolic":"method"}],"setHtml":[{"__symbolic":"method"}],"setContent":[{"__symbolic":"method"}],"destroyEditor":[{"__symbolic":"method"}],"getEditor":[{"__symbolic":"method"}],"generateManualController":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FroalaEditorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[froalaEditor]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"froalaEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"froalaInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"updateModel":[{"__symbolic":"method"}],"registerEvent":[{"__symbolic":"method"}],"initListeners":[{"__symbolic":"method"}],"registerFroalaEvents":[{"__symbolic":"method"}],"createEditor":[{"__symbolic":"method"}],"setHtml":[{"__symbolic":"method"}],"setContent":[{"__symbolic":"method"}],"destroyEditor":[{"__symbolic":"method"}],"getEditor":[{"__symbolic":"method"}],"generateManualController":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"FroalaEditorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[froalaEditor]","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"FroalaEditorDirective"},"multi":true}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"froalaEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateEditor":[{"__symbolic":"method"}],"froalaModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"froalaInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"updateModel":[{"__symbolic":"method"}],"registerEvent":[{"__symbolic":"method"}],"initListeners":[{"__symbolic":"method"}],"registerFroalaEvents":[{"__symbolic":"method"}],"createEditor":[{"__symbolic":"method"}],"setHtml":[{"__symbolic":"method"}],"setContent":[{"__symbolic":"method"}],"destroyEditor":[{"__symbolic":"method"}],"getEditor":[{"__symbolic":"method"}],"generateManualController":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"FroalaEditorDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[froalaEditor]","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"FroalaEditorDirective"},"multi":true}]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"froalaEditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"froalaModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"updateEditor":[{"__symbolic":"method"}],"froalaModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"froalaInit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"updateModel":[{"__symbolic":"method"}],"registerEvent":[{"__symbolic":"method"}],"initListeners":[{"__symbolic":"method"}],"registerFroalaEvents":[{"__symbolic":"method"}],"createEditor":[{"__symbolic":"method"}],"setHtml":[{"__symbolic":"method"}],"setContent":[{"__symbolic":"method"}],"destroyEditor":[{"__symbolic":"method"}],"getEditor":[{"__symbolic":"method"}],"generateManualController":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "main": "bundles/angular2-froala-wysiwyg.umd.js",
-  "version": "2.5.1-1",
+  "version": "2.5.1-2",
   "description": "Angular2 bindings for Froala WYSIWYG HTML rich text editor",
@@ -41,4 +41,4 @@ "module": "index.js",
   },
-  "_id": "angular2-froala-wysiwyg@2.5.1-1",
+  "_id": "angular2-froala-wysiwyg@2.5.1-2",
   "devDependencies": {}
 }

README.md

@@ -17,2 +17,3 @@ # angular2-froala-wyswiyg
 6. [License](#license)
+7. [Development environment setup](#development-environment-setup)
 
@@ -438,4 +439,21 @@ ## Installation instructions
 
+Use it with reactive forms:
 
+```html
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <textarea [froalaEditor] formControlName="formModel"></textarea>
+  <button type="submit">Submit</button>
+</form>
+```
 
+If you want to use two-way binding to display de form model in other places you must include `[(froalaModel)]`:
+
+```html
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <textarea [froalaEditor] formControlName="formModel" [(froalaModel)]="form.formModel"></textarea>
+  <div [froalaView]="form.formModel"></div>
+  <button type="submit">Submit</button>
+</form>
+```
+
 ### Special tags
@@ -476,3 +494,3 @@
 public inputOptions: Object = {
-  angularIgnoreAttrs: ['class', 'ng-model', 'id']
+  angularIgnoreAttrs: ['class', 'id']
 };
@@ -528,1 +546,24 @@ ```
 For details please see [License Agreement](http://froala.com/wysiwyg-editor/terms).
+
+
+
+## Development environment setup
+
+If you want to contribute to angular2-froala-wyswiyg, you will first need to install the required tools to get the project going.
+
+#### Prerequisites
+
+* [Node Package Manager](https://npmjs.org/) (NPM)
+* [Git](http://git-scm.com/)
+
+#### Install dependencies
+
+    $ npm install
+
+#### Build
+
+    $ npm run demo.build
+
+#### Run Demo
+
+    $ npm run start

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120105

increased by7.68%

Lines of code

906

increased by6.59%

Number of lines in readme file

566

increased by7.81%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes