aurelia-froala-editor - npm Package Compare versions

Comparing version 2.9.5 to 3.0.0-beta.1

dist/amd/froala-editor.js

@@ -1,2 +0,2 @@
-define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig) {
+define(['exports', 'aurelia-framework', 'aurelia-binding', './froala-editor-config', 'froala-editor/js/froala_editor.pkgd.min.js'], function (exports, _aureliaFramework, _aureliaBinding, _froalaEditorConfig, _froala_editorPkgdMin) {
 	'use strict';
@@ -7,4 +7,12 @@
 	});
-	exports.FroalaEditor = undefined;
+	exports.FroalaEditor1 = undefined;
 
+	var _froala_editorPkgdMin2 = _interopRequireDefault(_froala_editorPkgdMin);
+
+	function _interopRequireDefault(obj) {
+		return obj && obj.__esModule ? obj : {
+			default: obj
+		};
+	}
+
 	function _initDefineProp(target, property, descriptor, context) {
@@ -61,7 +69,7 @@ if (!descriptor) return;
 
-	var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
-		function FroalaEditor(element, config, observerLocator) {
+	var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
+		function FroalaEditor1(element, config, observerLocator) {
 			var _this = this;
 
-			_classCallCheck(this, FroalaEditor);
+			_classCallCheck(this, FroalaEditor1);
 
@@ -79,4 +87,4 @@ _initDefineProp(this, 'value', _descriptor, this);
 			this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
-				if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) {
-					_this.instance.froalaEditor('html.set', newValue);
+				if (_this.instance && _this.instance.html.get() != newValue) {
+					_this.instance.html(newValue);
 				}
@@ -86,12 +94,16 @@ })];
 
-		FroalaEditor.prototype.tearUp = function tearUp() {
+		FroalaEditor1.prototype.tearUp = function tearUp() {
 			var _this2 = this;
 
-			this.instance = $(this.element.getElementsByTagName("div")[0]);
+			if (this.config.iframe) {
+				this.instance = this.element.getElementsByTagName('textarea')[0];
+			} else {
+				this.instance = this.element.getElementsByTagName('div')[0];
+			}
 
-			if (this.instance.data('froala.editor')) {
+			if (this.instance['data-froala.editor']) {
 				return;
 			}
 
-			this.instance.html(this.value);
+			this.instance.innerHTML = this.value;
 
@@ -101,3 +113,3 @@ if (this.eventHandlers && this.eventHandlers.length != 0) {
 					var handler = _this2.eventHandlers[eventHandlerName];
-					_this2.instance.on('froalaEditor.' + eventHandlerName, function () {
+					_this2.instance.addEventListener('' + eventHandlerName, function () {
 						var p = arguments;
@@ -112,12 +124,15 @@ return handler.apply(this, p);
 			}
-			this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) {
+			this.instance.addEventListener('contentChanged', function (e, editor) {
 				return _this2.value = editor.html.get();
 			});
+			this.instance.addEventListener('blur', function (e, editor) {
+				return _this2.value = editor.html.get();
+			});
 
-			this.instance.froalaEditor(Object.assign({}, this.config));
+			this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config));
 		};
 
-		FroalaEditor.prototype.tearDown = function tearDown() {
-			if (this.instance && this.instance.data('froala.editor')) {
-				this.instance.froalaEditor('destroy');
+		FroalaEditor1.prototype.tearDown = function tearDown() {
+			if (this.instance && this.instance['data-froala.editor']) {
+				this.instance.destroy();
 			}
@@ -128,11 +143,11 @@
 
-		FroalaEditor.prototype.attached = function attached() {
+		FroalaEditor1.prototype.attached = function attached() {
 			this.tearUp();
 		};
 
-		FroalaEditor.prototype.detached = function detached() {
+		FroalaEditor1.prototype.detached = function detached() {
 			this.tearDown();
 		};
 
-		return FroalaEditor;
+		return FroalaEditor1;
 	}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_aureliaFramework.bindable], {
@@ -152,2 +167,2 @@ enumerable: true,
 	})), _class2)) || _class) || _class);
-});
+});

dist/commonjs/froala-editor.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.FroalaEditor = undefined;
+exports.FroalaEditor1 = undefined;
 
@@ -17,2 +17,8 @@ var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
 
+var _froala_editorPkgdMin = require('froala-editor/js/froala_editor.pkgd.min.js');
+
+var _froala_editorPkgdMin2 = _interopRequireDefault(_froala_editorPkgdMin);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _initDefineProp(target, property, descriptor, context) {
@@ -63,7 +69,7 @@ if (!descriptor) return;
 
-var FroalaEditor = exports.FroalaEditor = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
-	function FroalaEditor(element, config, observerLocator) {
+var FroalaEditor1 = exports.FroalaEditor1 = (_dec = (0, _aureliaFramework.customElement)('froala-editor'), _dec2 = (0, _aureliaFramework.inject)(Element, _froalaEditorConfig.Config, _aureliaBinding.ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
+	function FroalaEditor1(element, config, observerLocator) {
 		var _this = this;
 
-		_classCallCheck(this, FroalaEditor);
+		_classCallCheck(this, FroalaEditor1);
 
@@ -81,4 +87,4 @@ _initDefineProp(this, 'value', _descriptor, this);
 		this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
-			if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) {
-				_this.instance.froalaEditor('html.set', newValue);
+			if (_this.instance && _this.instance.html.get() != newValue) {
+				_this.instance.html(newValue);
 			}
@@ -88,12 +94,16 @@ })];
 
-	FroalaEditor.prototype.tearUp = function tearUp() {
+	FroalaEditor1.prototype.tearUp = function tearUp() {
 		var _this2 = this;
 
-		this.instance = $(this.element.getElementsByTagName("div")[0]);
+		if (this.config.iframe) {
+			this.instance = this.element.getElementsByTagName('textarea')[0];
+		} else {
+			this.instance = this.element.getElementsByTagName('div')[0];
+		}
 
-		if (this.instance.data('froala.editor')) {
+		if (this.instance['data-froala.editor']) {
 			return;
 		}
 
-		this.instance.html(this.value);
+		this.instance.innerHTML = this.value;
 
@@ -103,3 +113,3 @@ if (this.eventHandlers && this.eventHandlers.length != 0) {
 				var handler = _this2.eventHandlers[eventHandlerName];
-				_this2.instance.on('froalaEditor.' + eventHandlerName, function () {
+				_this2.instance.addEventListener('' + eventHandlerName, function () {
 					var p = arguments;
@@ -114,12 +124,15 @@ return handler.apply(this, p);
 		}
-		this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) {
+		this.instance.addEventListener('contentChanged', function (e, editor) {
 			return _this2.value = editor.html.get();
 		});
+		this.instance.addEventListener('blur', function (e, editor) {
+			return _this2.value = editor.html.get();
+		});
 
-		this.instance.froalaEditor(Object.assign({}, this.config));
+		this.instance = new _froala_editorPkgdMin2.default('#' + this.element.id, Object.assign({}, this.config));
 	};
 
-	FroalaEditor.prototype.tearDown = function tearDown() {
-		if (this.instance && this.instance.data('froala.editor')) {
-			this.instance.froalaEditor('destroy');
+	FroalaEditor1.prototype.tearDown = function tearDown() {
+		if (this.instance && this.instance['data-froala.editor']) {
+			this.instance.destroy();
 		}
@@ -130,11 +143,11 @@
 
-	FroalaEditor.prototype.attached = function attached() {
+	FroalaEditor1.prototype.attached = function attached() {
 		this.tearUp();
 	};
 
-	FroalaEditor.prototype.detached = function detached() {
+	FroalaEditor1.prototype.detached = function detached() {
 		this.tearDown();
 	};
 
-	return FroalaEditor;
+	return FroalaEditor1;
 }(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [_aureliaFramework.bindable], {
@@ -153,2 +166,2 @@ enumerable: true,
 	}
-})), _class2)) || _class) || _class);
+})), _class2)) || _class) || _class);

dist/es2015/froala-editor.js

@@ -51,4 +51,6 @@ var _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3;
 
-export let FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = class FroalaEditor {
+import FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js';
 
+export let FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = class FroalaEditor1 {
+
 	constructor(element, config, observerLocator) {
@@ -66,4 +68,4 @@ _initDefineProp(this, 'value', _descriptor, this);
 		this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe((newValue, oldValue) => {
-			if (this.instance && this.instance.froalaEditor('html.get') != newValue) {
-				this.instance.froalaEditor('html.set', newValue);
+			if (this.instance && this.instance.html.get() != newValue) {
+				this.instance.html(newValue);
 			}
@@ -74,9 +76,13 @@ })];
 	tearUp() {
-		this.instance = $(this.element.getElementsByTagName("div")[0]);
+		if (this.config.iframe) {
+			this.instance = this.element.getElementsByTagName('textarea')[0];
+		} else {
+			this.instance = this.element.getElementsByTagName('div')[0];
+		}
 
-		if (this.instance.data('froala.editor')) {
+		if (this.instance['data-froala.editor']) {
 			return;
 		}
 
-		this.instance.html(this.value);
+		this.instance.innerHTML = this.value;
 
@@ -86,3 +92,3 @@ if (this.eventHandlers && this.eventHandlers.length != 0) {
 				let handler = this.eventHandlers[eventHandlerName];
-				this.instance.on(`froalaEditor.${eventHandlerName}`, function () {
+				this.instance.addEventListener(`${eventHandlerName}`, function () {
 					let p = arguments;
@@ -93,10 +99,11 @@ return handler.apply(this, p);
 		}
-		this.instance.on('froalaEditor.contentChanged froalaEditor.blur', (e, editor) => this.value = editor.html.get());
+		this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get());
+		this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get());
 
-		this.instance.froalaEditor(Object.assign({}, this.config));
+		this.instance = new FroalaEditor(`#${this.element.id}`, Object.assign({}, this.config));
 	}
 
 	tearDown() {
-		if (this.instance && this.instance.data('froala.editor')) {
-			this.instance.froalaEditor('destroy');
+		if (this.instance && this.instance['data-froala.editor']) {
+			this.instance.destroy();
 		}
@@ -127,2 +134,2 @@
 	}
-})), _class2)) || _class) || _class);
+})), _class2)) || _class) || _class);

dist/system/froala-editor.js

 'use strict';
 
-System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config'], function (_export, _context) {
+System.register(['aurelia-framework', 'aurelia-binding', './froala-editor-config', 'froala-editor/js/froala_editor.pkgd.min.js'], function (_export, _context) {
 	"use strict";
 
-	var inject, customElement, bindable, ObserverLocator, Config, _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, FroalaEditor;
+	var inject, customElement, bindable, ObserverLocator, Config, FroalaEditor, _dec, _dec2, _class, _desc, _value, _class2, _descriptor, _descriptor2, _descriptor3, FroalaEditor1;
 
@@ -66,9 +66,11 @@ function _initDefineProp(target, property, descriptor, context) {
 			Config = _froalaEditorConfig.Config;
+		}, function (_froalaEditorJsFroala_editorPkgdMinJs) {
+			FroalaEditor = _froalaEditorJsFroala_editorPkgdMinJs.default;
 		}],
 		execute: function () {
-			_export('FroalaEditor', FroalaEditor = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
-				function FroalaEditor(element, config, observerLocator) {
+			_export('FroalaEditor1', FroalaEditor1 = (_dec = customElement('froala-editor'), _dec2 = inject(Element, Config, ObserverLocator), _dec(_class = _dec2(_class = (_class2 = function () {
+				function FroalaEditor1(element, config, observerLocator) {
 					var _this = this;
 
-					_classCallCheck(this, FroalaEditor);
+					_classCallCheck(this, FroalaEditor1);
 
@@ -86,4 +88,4 @@ _initDefineProp(this, 'value', _descriptor, this);
 					this.subscriptions = [observerLocator.getObserver(this, 'value').subscribe(function (newValue, oldValue) {
-						if (_this.instance && _this.instance.froalaEditor('html.get') != newValue) {
-							_this.instance.froalaEditor('html.set', newValue);
+						if (_this.instance && _this.instance.html.get() != newValue) {
+							_this.instance.html(newValue);
 						}
@@ -93,12 +95,16 @@ })];
 
-				FroalaEditor.prototype.tearUp = function tearUp() {
+				FroalaEditor1.prototype.tearUp = function tearUp() {
 					var _this2 = this;
 
-					this.instance = $(this.element.getElementsByTagName("div")[0]);
+					if (this.config.iframe) {
+						this.instance = this.element.getElementsByTagName('textarea')[0];
+					} else {
+						this.instance = this.element.getElementsByTagName('div')[0];
+					}
 
-					if (this.instance.data('froala.editor')) {
+					if (this.instance['data-froala.editor']) {
 						return;
 					}
 
-					this.instance.html(this.value);
+					this.instance.innerHTML = this.value;
 
@@ -108,3 +114,3 @@ if (this.eventHandlers && this.eventHandlers.length != 0) {
 							var handler = _this2.eventHandlers[eventHandlerName];
-							_this2.instance.on('froalaEditor.' + eventHandlerName, function () {
+							_this2.instance.addEventListener('' + eventHandlerName, function () {
 								var p = arguments;
@@ -119,12 +125,15 @@ return handler.apply(this, p);
 					}
-					this.instance.on('froalaEditor.contentChanged froalaEditor.blur', function (e, editor) {
+					this.instance.addEventListener('contentChanged', function (e, editor) {
 						return _this2.value = editor.html.get();
 					});
+					this.instance.addEventListener('blur', function (e, editor) {
+						return _this2.value = editor.html.get();
+					});
 
-					this.instance.froalaEditor(Object.assign({}, this.config));
+					this.instance = new FroalaEditor('#' + this.element.id, Object.assign({}, this.config));
 				};
 
-				FroalaEditor.prototype.tearDown = function tearDown() {
-					if (this.instance && this.instance.data('froala.editor')) {
-						this.instance.froalaEditor('destroy');
+				FroalaEditor1.prototype.tearDown = function tearDown() {
+					if (this.instance && this.instance['data-froala.editor']) {
+						this.instance.destroy();
 					}
@@ -135,11 +144,11 @@
 
-				FroalaEditor.prototype.attached = function attached() {
+				FroalaEditor1.prototype.attached = function attached() {
 					this.tearUp();
 				};
 
-				FroalaEditor.prototype.detached = function detached() {
+				FroalaEditor1.prototype.detached = function detached() {
 					this.tearDown();
 				};
 
-				return FroalaEditor;
+				return FroalaEditor1;
 			}(), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'value', [bindable], {
@@ -160,5 +169,5 @@ enumerable: true,
 
-			_export('FroalaEditor', FroalaEditor);
+			_export('FroalaEditor1', FroalaEditor1);
 		}
 	};
-});
+});

package.json

 {
   "name": "aurelia-froala-editor",
-  "version": "2.9.5",
+  "version": "3.0.0-beta.1",
   "description": "Aurelia plugin for Froala WYSIWYG HTML rich text editor.",
@@ -62,3 +62,3 @@ "keywords": [
     "aurelia-framework": "^1.3.0",
-    "froala-editor": "2.9.5"
+    "froala-editor": "3.0.0-beta.1"
   },
@@ -65,0 +65,0 @@ "jspm": {

README.md

@@ -16,4 +16,3 @@ # Aurelia Froala WYSIWYG HTML Editor
    2. [With Webpack](#with-webpack)
-   3. [With Easy Webpack](#with-easy-webpack)
-   4. [With JSPM](#with-jspm)
+   3. [With JSPM](#with-jspm)
 4. [Usage](#usage)
@@ -62,5 +61,2 @@ 5. [License](#license)
 ```javascript
-// Editor files.
-import "froala-editor/js/froala_editor.pkgd.min";
-
 ...
@@ -75,3 +71,2 @@
 ```html
-<require from="font-awesome.css"></require>
 <require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
@@ -119,17 +114,2 @@ <require from="froala-editor/css/froala_style.min.css"></require>
 {
-  "name": "font-awesome",
-  "path": "../node_modules/font-awesome/css",
-  "main": "font-awesome.css"
-},
-"jquery",
-{
-  "name": "froala-editor",
-  "path": "../node_modules/froala-editor",
-  "main": "js/froala_editor.min",
-  "resources": [
-    "./js/**/*.{js}",
-    "./css/**/*.{css}"
-  ]
-},
-{
   "name": "aurelia-froala-editor",
@@ -143,5 +123,3 @@ "path": "../node_modules/aurelia-froala-editor/dist/amd",
   "deps": [
-    "jquery",
-    "froala-editor",
-    "font-awesome"
+    "froala-editor"
   ]
@@ -151,8 +129,2 @@ }
 
-- Create a task to copy Font Awesome fonts:
-
-```javascript
-au generate task copy-assets
-```
-
 - Open newly created `aurelia_project/tasks/copy-assets.js` file and make it look like this:
@@ -191,23 +163,2 @@
 
-- Add Font Awesome paths to `aurelia_project/aurelia.json` file:
-
-```javascript
-{
-  "paths": {
-    "root": "src",
-    "resources": "resources",
-    "elements": "resources/elements",
-    "attributes": "resources/attributes",
-    "valueConverters": "resources/value-converters",
-    "bindingBehaviors": "resources/binding-behaviors",
-    "assets": [
-      {
-        "src": "./node_modules/font-awesome/fonts/**/*.*",
-        "dest": "./fonts"
-      }
-    ]
-  }
-}
-```
-
 #### Run aurelia-cli
@@ -266,5 +217,16 @@
 const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
-
+  resolve: {
+    extensions: ['.js'],
+    modules:[srcDir,'../node_modules/froala-editor/js','node_modules'],
+     alias: {
+       "FroalaEditor": 'froala_editor.pkgd.min.js'
+     }
+  },
 plugins: [
   new AureliaPlugin(),
+   new ProvidePlugin({
+      FroalaEditor: 'froala_editor.pkgd.min.js',
+      'Promise': 'bluebird',
+      Popper: ['popper.js', 'default'] // Bootstrap 4 Dependency.
+    }),
   new ModuleDependenciesPlugin({
@@ -285,64 +247,2 @@ "aurelia-froala-editor": [ './froala-editor' ],
 
-### With Easy Webpack
-
-To configure your project with Easy Webpack, follow the resources from Aurelia Docs: http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/setup-webpack/2 .
-
-```bash
-git clone [e-mail]:aurelia/skeleton-navigation.git
-cd skeleton-navigation/skeleton-esnext-webpack
-git reset --hard 8997a6f87339a2702f77aeaab7ede5bffe94437f
-npm install
-```
-
-#### Add aurelia-froala-editor
-
-- Install the aurelia plugin
-
-```bash
-npm install aurelia-froala-editor --save
-```
-
-- In your `src/main.js` or `src/main.ts` file add:
-
-```javascript
-import { PLATFORM } from "aurelia-pal";
-
-// Editor files.
-import "froala-editor/js/froala_editor.pkgd.min";
-
-...
-
-// Use the aurelia-froala-editor plugin.
-aurelia.use.plugin(PLATFORM.moduleName('aurelia-froala-editor'));
-```
-
-- In your `src/app.html` include CSS files and Froala Editor component:
-
-```html
-<require from="froala-editor/css/froala_editor.pkgd.min.css"></require>
-<require from="froala-editor/css/froala_style.min.css"></require>
-
-<froala-editor></froala-editor>
-```
-
-- In `package.json` file include the Aurelia Froala Editor plugin:
-
-```json
-"aurelia": {
-  "build": {
-    "resources": [
-      "aurelia-froala-editor/froala-editor"
-    ]
-  }
-}
-```
-
-#### Run application
-
-```bash
-npm run start
-```
-
-
-
 ### With JSPM
@@ -377,10 +277,3 @@
 ```javascript
-// Import jQuery
-import * as $ from 'jquery';
 
-// Import Editor.
-import * as froala from 'froala-editor/js/froala_editor.pkgd.min.js';
-
-...
-
 // Use the aurelia-froala-editor plugin.
@@ -387,0 +280,0 @@ aurelia.use.plugin('aurelia-froala-editor');

src/froala-editor.js

@@ -6,5 +6,8 @@ import {inject, customElement, bindable} from 'aurelia-framework';
 
+// Import Froala Editor
+import FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js'
+
 @customElement('froala-editor')
 @inject(Element, Config, ObserverLocator)
-export class FroalaEditor {
+export class FroalaEditor1 {
 	@bindable value;
@@ -29,4 +32,4 @@ @bindable config = {}
 					.subscribe((newValue, oldValue) => {
-						if (this.instance && this.instance.froalaEditor('html.get') != newValue) {
-							this.instance.froalaEditor('html.set', newValue);
+						if (this.instance && this.instance.html.get() != newValue) {
+							this.instance.html(newValue);
 						}
@@ -38,13 +41,13 @@ })
   // Starting poing.
-	tearUp () {
+	  tearUp () {
     // Get element.
         if (this.config.iframe) {
-            this.instance = $(this.element.getElementsByTagName('textarea')[0]);
+            this.instance = this.element.getElementsByTagName('textarea')[0];
         }
         else {
-            this.instance = $(this.element.getElementsByTagName('div')[0]);
+            this.instance = this.element.getElementsByTagName('div')[0];
         }
 
     // Check if editor isn't already initialized.
-		if (this.instance.data('froala.editor')) {
+		if (this.instance['data-froala.editor']) {
 		  return;
@@ -54,3 +57,3 @@ }
     // Set the HTML for the inner element.
-    this.instance.html(this.value);
+    this.instance.innerHTML = this.value;
 
@@ -61,3 +64,3 @@ // Set events.
 				let handler = this.eventHandlers[eventHandlerName];
-				this.instance.on(`froalaEditor.${eventHandlerName}`, function() {
+				this.instance.addEventListener(`${eventHandlerName}`, function() {
 					let p = arguments;
@@ -69,6 +72,7 @@ return handler.apply(this, p)
 		}
-		this.instance.on('froalaEditor.contentChanged froalaEditor.blur', (e, editor) => this.value = editor.html.get());
+		this.instance.addEventListener('contentChanged', (e, editor) => this.value = editor.html.get());
+		this.instance.addEventListener('blur', (e, editor) => this.value = editor.html.get())
 
     // Initialize editor.
-		this.instance.froalaEditor(Object.assign({}, this.config));
+		this.instance = new FroalaEditor(`#${this.element.id}`, Object.assign({}, this.config));
 	}
@@ -78,4 +82,4 @@
 	tearDown () {
-		if (this.instance && this.instance.data('froala.editor')) {
-    	this.instance.froalaEditor('destroy');
+		if (this.instance && this.instance['data-froala.editor']) {
+    	this.instance.destroy();
   	}
@@ -95,2 +99,2 @@
 	}
-}
+}

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

Improved metrics

Total package byte prevSize

48611

increased by0.01%

Lines of code

1085

increased by3.63%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

365

decreased by-22.67%

Dependency changes

• + Addedfroala-editor@3.0.0-beta.1(transitive)

• - Removedfont-awesome@4.7.0(transitive)

• - Removedfroala-editor@2.9.5(transitive)

• - Removedjquery@3.7.1(transitive)

• Updatedfroala-editor@3.0.0-beta.1