react-froala-wysiwyg - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0-beta.2

demo/src/basic.jsx

@@ -5,3 +5,2 @@ // Note that Froala Editor has to be required separately.
 import 'froala-editor/css/froala_style.css';
-import 'font-awesome/css/font-awesome.css';
 import 'file-loader?name=[name].[ext]!./basic.html';
@@ -12,6 +11,5 @@
 import ReactDOM from 'react-dom';
-// Require Font Awesome.
 
 // Render Froala Editor component.
-ReactDOM.render(<FroalaEditor tag='textarea' config={{pluginsEnabled:['image', 'link']}}/>, document.getElementById('editor'));
+ReactDOM.render(<FroalaEditor tag='textarea' config={{pluginsEnabled:['align', 'link'], language: 'ro'}} />, document.getElementById('editor'));
 

demo/src/edit_inline.jsx

 // Note that Froala Editor has to be required separately
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.css';
+
 import FroalaEditor from 'react-froala-wysiwyg';
@@ -18,3 +19,3 @@ import React from 'react';
       events: {
-        'initialized': function() {
+        initialized: function() {
           console.log('initialized');
@@ -21,0 +22,0 @@ }

demo/src/full_editor.jsx

 // Note that Froala Editor has to be required separately
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.css';
-// Require Font Awesome.
-import 'font-awesome/css/font-awesome.css';
 import 'file-loader?name=[name].[ext]!./full_editor.html';
+import 'froala-editor/js/plugins.pkgd.min.js';
 
@@ -8,0 +7,0 @@ import FroalaEditor from 'react-froala-wysiwyg';

demo/src/init_on_button.jsx

 // Note that Froala Editor has to be required separately
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 import 'froala-editor/css/froala_style.css';
+import 'file-loader?name=[name].[ext]!./init_on_button.html';
 
-
-
-
 import FroalaEditorButton from 'react-froala-wysiwyg/FroalaEditorButton';
@@ -50,2 +48,1 @@ import React from 'react';
 
-import 'file-loader?name=[name].[ext]!./init_on_button.html';

demo/webpack.config.js

@@ -17,2 +17,6 @@ var webpack = require("webpack");
 
+  optimization: {
+    concatenateModules: false
+  },
+
   module: {
@@ -57,4 +61,3 @@ rules: [
     alias: {
-      "react-froala-wysiwyg": '../../dist/dist',
-
+      "react-froala-wysiwyg": '../../dist'
     },
@@ -72,3 +75,3 @@ modules: ['node_modules']
     new webpack.ProvidePlugin({
-   
+
     }),
@@ -75,0 +78,0 @@

FroalaEditorView.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FroalaEditorView=t(require("react")):e.FroalaEditorView=t(e.React)}(window,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=14)}({0:function(t,r){t.exports=e},14:function(e,t,r){e.exports=r(15)},15:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(0),i=(n=u)&&n.__esModule?n:{default:n};var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.defaultTag="div",r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"getTrustedHtml",value:function(){return{__html:this.props.model}}},{key:"render",value:function(){return this.tag=this.props.tag||this.defaultTag,i.default.createElement(this.tag,{className:"fr-view",dangerouslySetInnerHTML:this.getTrustedHtml()})}}]),t}();t.default=f}})});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FroalaEditorView=t(require("react")):e.FroalaEditorView=t(e.React)}(window,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=13)}({0:function(t,r){t.exports=e},13:function(e,t,r){e.exports=r(14)},14:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(0),i=(n=u)&&n.__esModule?n:{default:n};var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.defaultTag="div",r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"getTrustedHtml",value:function(){return{__html:this.props.model}}},{key:"render",value:function(){return this.tag=this.props.tag||this.defaultTag,i.default.createElement(this.tag,{className:"fr-view",dangerouslySetInnerHTML:this.getTrustedHtml()})}}]),t}();t.default=f}})});

FroalaEditorView.src.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FroalaEditorView=t(require("react")):e.FroalaEditorView=t(e.React)}(window,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=14)}({0:function(t,r){t.exports=e},14:function(e,t,r){e.exports=r(15)},15:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(0),i=(n=u)&&n.__esModule?n:{default:n};var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.defaultTag="div",r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"getTrustedHtml",value:function(){return{__html:this.props.model}}},{key:"render",value:function(){return this.tag=this.props.tag||this.defaultTag,i.default.createElement(this.tag,{className:"fr-view",dangerouslySetInnerHTML:this.getTrustedHtml()})}}]),t}();t.default=f}})});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.FroalaEditorView=t(require("react")):e.FroalaEditorView=t(e.React)}(window,function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=13)}({0:function(t,r){t.exports=e},13:function(e,t,r){e.exports=r(14)},14:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,o=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),u=r(0),i=(n=u)&&n.__esModule?n:{default:n};var f=function(e){function t(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var r=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.defaultTag="div",r}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,i.default.Component),o(t,[{key:"getTrustedHtml",value:function(){return{__html:this.props.model}}},{key:"render",value:function(){return this.tag=this.props.tag||this.defaultTag,i.default.createElement(this.tag,{className:"fr-view",dangerouslySetInnerHTML:this.getTrustedHtml()})}}]),t}();t.default=f}})});

lib/FroalaEditor.jsx

@@ -0,3 +1,3 @@
+import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 import React from 'react';
-import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 
@@ -4,0 +4,0 @@ export default class FroalaEditor extends FroalaEditorFunctionality {

lib/FroalaEditorA.jsx

@@ -0,3 +1,3 @@
+import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 import React from 'react';
-import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 
@@ -4,0 +4,0 @@ export default class FroalaEditorA extends FroalaEditorFunctionality {

lib/FroalaEditorButton.jsx

@@ -0,3 +1,3 @@
+import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 import React from 'react';
-import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 
@@ -4,0 +4,0 @@ export default class FroalaEditorButton extends FroalaEditorFunctionality {

lib/FroalaEditorFunctionality.jsx

@@ -1,4 +0,3 @@
-/* global $ */
+import FroalaEditor from 'froala-editor';
 import React from 'react';
-import  FroalaEditor from 'froala-editor/js/froala_editor.pkgd.min.js';
 
@@ -16,3 +15,3 @@ let lastId = 0;
     // Jquery wrapped element.
-    this.$element = null;
+    this.element = null;
 
@@ -76,16 +75,14 @@ // Editor element.
 
-    this.$element = this.refs.el;
-    
-    
+    this.element = this.refs.el;
+
     this.setContent(true);
-    
-    this.registerEvents();
-    if(!this.$element.getAttribute('id'))
-    {
-      lastId++;
-      this.$element.setAttribute('id', `main-editor${lastId}`);
-    }
-    this.initListeners();  
-    this.$element.froalaEditor = new FroalaEditor('#'+this.$element.getAttribute('id'), this.config);
-    this.editor = this.$element.froalaEditor.$el;
+
+    // Default initialized.
+    this.registerEvent('initialized', this.config.events && this.config.events.initialized);
+
+    // Check if events are set.
+    if (!this.config.events) this.config.events = {};
+    this.config.events.initialized = () => this.initListeners();
+
+    this.editor = new FroalaEditor(this.element, this.config);
   }
@@ -109,7 +106,7 @@
     function htmlSet() {
-      self.$element.froalaEditor.html && self.$element.froalaEditor.html.set(self.props.model || '');
-      if (self.editorInitialized && self.$element.froalaEditor.undo) {
+      self.editor.html && self.editor.html.set(self.props.model || '');
+      if (self.editorInitialized && self.editor.undo) {
         //This will reset the undo stack everytime the model changes externally. Can we fix this?
-        self.$element.froalaEditor.undo.reset();
-        self.$element.froalaEditor.undo.saveStep();
+        self.editor.undo.reset();
+        self.editor.undo.saveStep();
       }
@@ -120,10 +117,11 @@ }
       if (this.config.initOnClick) {
-        this.registerEvent(this.$element, 'initializationDelayed', () => {
+        this.registerEvent('initializationDelayed', () => {
           htmlSet();
         });
-        this.registerEvent(this.$element, 'initialized', () => {
+
+        this.registerEvent('initialized', () => {
           this.editorInitialized = true;
         });
       } else {
-        this.registerEvent(this.$element, 'initialized', () => {
+        this.registerEvent('initialized', () => {
           this.editorInitialized = true;
@@ -145,3 +143,3 @@ htmlSet();
         if (tags.hasOwnProperty(attr) && attr != this.INNER_HTML_ATTR) {
-          this.$element.setAttribute(attr, tags[attr]);
+          this.element.setAttribute(attr, tags[attr]);
         }
@@ -151,3 +149,3 @@ }
       if (tags.hasOwnProperty(this.INNER_HTML_ATTR)) {
-        this.$element.innerHTML = tags[this.INNER_HTML_ATTR];
+        this.element.innerHTML = tags[this.INNER_HTML_ATTR];
       }
@@ -158,6 +156,6 @@ }
   destroyEditor () {
-    if (this.$element) {
-      this.$element.froalaEditor.destroy && this.$element.froalaEditor.destroy();
+    if (this.element) {
+      this.editor.destroy && this.editor.destroy();
       this.listeningEvents.length = 0;
-      this.$element = null;
+      this.element = null;
       this.editorInitialized = false;
@@ -168,4 +166,4 @@ }
   getEditor () {
-    if (this.$element) {
-      return this.$element.froalaEditor;
+    if (this.element) {
+      return this.editor;
     }
@@ -196,3 +194,3 @@
     if (this.hasSpecialTag) {
-      let attributeNodes = this.$element.attributes;
+      let attributeNodes = this.element.attributes;
       let attrs = {};
@@ -208,4 +206,4 @@
 
-      if (this.$element.innerHTML) {
-        attrs[this.INNER_HTML_ATTR] = this.$element.innerHTML;
+      if (this.element.innerHTML) {
+        attrs[this.INNER_HTML_ATTR] = this.element.innerHTML;
       }
@@ -215,3 +213,3 @@
     } else {
-      let returnedHtml = this.$element.froalaEditor.html.get();
+      let returnedHtml = this.editor.html.get();
       if (typeof returnedHtml === 'string') {
@@ -230,37 +228,37 @@ modelContent = returnedHtml;
     // bind contentChange and keyup event to froalaModel
-    this.registerEvent(this.$element, 'contentChanged', function () {
+    this.editor.events.on('contentChanged', function () {
       self.updateModel();
     });
     if (this.config.immediateReactModelUpdate) {
-      this.registerEvent(this.$element, 'keyup', function () {
+      this.editor.events.on('keyup', function () {
         self.updateModel();
       });
     }
+
+    // Call init events.
+    if (this._initEvents) {
+      for (let i = 0; i < this._initEvents.length; i++) {
+        this._initEvents[i].call(this.editor);
+      }
+    }
   }
 
   // register event on jquery editor element
-  registerEvent (element, eventName, callback) {
-    if (!element || !eventName || !callback) {
+  registerEvent (eventName, callback) {
+    if (!eventName || !callback) {
       return;
     }
 
-    this.listeningEvents.push(eventName);
-    if (!this.config.events) {
-      this.config.events = {};
+    if (eventName == 'initialized') {
+      if (!this._initEvents) this._initEvents = [];
+      this._initEvents.push(callback);
     }
-    this.config.events[eventName] = callback;
-  }
+    else {
+      if (!this.config.events) {
+        this.config.events = {};
+      }
 
-  registerEvents () {
-    let events = this.config.events;
-    if (!events) {
-      return;
+      this.config.events[eventName] = callback;
     }
-
-    for (let event in events) {
-      if (events.hasOwnProperty(event)) {
-        this.registerEvent(this.$element, event, events[event]);
-      }
-    }
   }
 };

lib/FroalaEditorImg.jsx

@@ -0,3 +1,3 @@
+import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 import React from 'react';
-import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 
@@ -4,0 +4,0 @@ export default class FroalaEditorImg extends FroalaEditorFunctionality {

lib/FroalaEditorInput.jsx

@@ -0,3 +1,3 @@
+import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 import React from 'react';
-import FroalaEditorFunctionality from './FroalaEditorFunctionality.jsx';
 
@@ -4,0 +4,0 @@ export default class FroalaEditorInput extends FroalaEditorFunctionality {

package.json

 {
   "name": "react-froala-wysiwyg",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.2",
   "description": "React component for Froala WYSIWYG HTML rich text editor.",
@@ -25,7 +25,7 @@ "main": "index.js",
     "create-react-class": "^15.5.2",
-    "froala-editor": "3.0.0-beta.1"
+    "froala-editor": "3.0.0-beta.2-1"
   },
   "devDependencies": {
+    "autoprefixer": "^8.3.0",
     "babel": "^6.23.0",
-    "autoprefixer": "^8.3.0",
     "babel-cli": "^6.26.0",
@@ -56,5 +56,5 @@ "babel-core": "^6.6.0",
     "url-loader": "^0.5.5",
-    "webpack": "^4.6.0",
-    "webpack-cli": "^3.1.3",
-    "webpack-dev-server": "^3.1.3"
+    "webpack": "^4.32.1",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.3.0"
   },
@@ -61,0 +61,0 @@ "scripts": {

README.md

@@ -33,4 +33,17 @@ # React JS Froala WYSIWYG Editor
 
-import FroalaEditor from 'react-froala-wysiwyg';
+import FroalaEditorComponent from 'react-froala-wysiwyg';
 
+// Import all Froala Editor plugins;
+// import 'froala-editor/js/plugins.pkgd.min.js';
+
+// Import a single Froala Editor plugin.
+// import 'froala-editor/js/plugins/align.min.js';
+
+// Import a language file.
+// import 'froala-editor/js/languages/de.js';
+
+// Include font-awesome css if required.
+// import 'font-awesome/css/font-awesome.css';
+// install using "npm install font-awesome --save"
+
 // Include special components if required.
@@ -44,3 +57,3 @@ // import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
 // Render Froala Editor component.
-ReactDOM.render(<FroalaEditor tag='textarea'/>, document.getElementById('editor'));
+ReactDOM.render(<FroalaEditorComponent tag='textarea'/>, document.getElementById('editor'));
 ```
@@ -87,15 +100,6 @@
   resolve: {
-   alias: {
-     FroalaEditor: 'file_name'
-    },
+    modulesDirectories: ['node_modules']
+  }
+};
 
-    modulesDirectories: ['../node_modules/froala-editor/js','node_modules']
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      FroalaEditor: 'file_name'
-    })
-  ]
-};
-file_name : froala_editor.min.js/froala_editor.pkgd.min.js 
 ```
@@ -146,14 +150,6 @@
   resolve: {
-    alias: {
-     FroalaEditor: 'file_name'
-    },
-    modules: ['../node_modules/froala-editor/js','node_modules']
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-       FroalaEditor: 'file_name'
-    })
-  ]
+    modules: ['node_modules']
+  }
 };
-file_name : froala_editor.min.js/froala_editor.pkgd.min.js 
+
 ```
@@ -160,0 +156,0 @@

webpack.config.js

@@ -34,3 +34,3 @@ var path = require('path');
 
-var externals = [reactExternals];
+var externals = [reactExternals,'froala-editor'];
 
@@ -48,3 +48,3 @@ module.exports = {
   module: {
-    
+
     rules: [
@@ -70,3 +70,3 @@ {
   output: {
-    filename: 'dist/[name]' + filenamePostfix + '.js',
+    filename: '[name]' + filenamePostfix + '.js',
     libraryTarget: 'umd',
@@ -73,0 +73,0 @@ library: '[name]'

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

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

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

High entropy strings

Supply chain risk

Contains high entropy strings. This could be a sign of encrypted data, leaked secrets or obfuscated code.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

132409

decreased by-97.9%

Lines of code

851

decreased by-96.13%

Number of lines in readme file

370

decreased by-1.07%

Dependency changes

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

• - Removedfroala-editor@3.0.0-beta.1(transitive)

• Updatedfroala-editor@3.0.0-beta.2-1