Update to v4.4.0 (#407)

 - React framework plugin upgraded
 - Fixed, Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
 - Fixed, Random number list gets generated when copy-pasting content from MS Word
 - Fixed, Pasting TOC from Word does not work as expected
 - Fixed, oneNote: deleting bullet lists after pasting into the editor does not work as expected
 - Fixed, editor does not returns `fullPage` content when `fontFamilyDefaultSelection` option is used
 - Fixed, pasting list containing sub-bullet lists, the sub bullet lists are not preserved in the same order
 - Fixed, complex numbering and bullets alignment is not pasted correctly from MS Word inside the editor
 - Fixed, increasing font size does not increase's the subscript line
 - Fixed, problem with underline text and color change
 - Fixed, table with header that contains merged cells is not displayed correctly
 - Fixed, after clicking an image the image toolbar moves with outer scroll
 - Fixed, track changes: editor completely delete's characters from content when pressing backspace 
 - Fixed, cursor position get's lost if the content is wrapped with `html.wrap` inside tables
 - Fixed, XSS vulnerability when pasting content into the froala editor
 - Fixed, Vimeo Embedded Code Includes Extra `<p>` Tag Causing Embed Failure
 - Fixed, inserting link with special character, the editor removes any formatting from the content. 
 - Updated Dompurify library integration within Froala to respect the configurable options

---------

Co-authored-by: AndriiMysko <[email protected]>

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.19.0
+FROM node:18
 
 LABEL maintainer="[email protected]"
 

Readme.md

@@ -21,13 +21,13 @@ npm update froala-editor
 npm install font-awesome --save
 ```
 
-## Usage with Class Component 
+## Usage with Class Component
 
 #### 1. Require and use Froala Editor component inside your application.
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 
 // Require Editor CSS files.
@@ -63,7 +63,8 @@ import FroalaEditorComponent from 'react-froala-wysiwyg';
 // import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';
 
 // Render Froala Editor component.
-ReactDOM.render(<FroalaEditorComponent tag='textarea'/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<FroalaEditorComponent tag='textarea'/>);
 ```
 
 #### Add editor to UI by passing id to html element
@@ -244,13 +245,13 @@ To display content created with the froala editor use the `FroalaEditorView` com
 ```
 
 
-## Usage with Functional Component 
+## Usage with Functional Component
 
 #### 1. Require and use Froala Editor component inside your application.
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Require Editor CSS files.
 import 'froala-editor/css/froala_style.min.css';
@@ -369,13 +370,13 @@ import React,{ useState } from 'react';
 
 const App=()=> {
   const [model,setModel] = useState("Example Set");
-  
+
   const handleModelChange= (event)=>{
     setModel(event)
   }
   return (
     <div className="App">
-      <FroalaEditorComponent 
+      <FroalaEditorComponent
         tag='textarea'
         onModelChange={handleModelChange}
       />
@@ -419,7 +420,7 @@ The model must be an object containing the attributes for your special tags. Exa
     model={{src: 'path/to/image.jpg',
         width:"300px",
         alt:"Old Clock"
-    }} 
+    }}
 ```
 
 * The model can contain a special attribute named **innerHTML** which inserts innerHTML in the element: If you are using 'button' tag, you can specify the button text like this:
@@ -429,6 +430,84 @@ model={{innerHTML: 'Click Me'}}
 ```
 As the button text is modified by the editor, the **innerHTML** attribute from buttonModel model will be modified too.
 
+## Usage with Server-Side Rendering
+
+When using Server-Side Rendering you can use Froala components as described previously. If you require additonal plugins or translations, you will have to use React lazy loading
+in order to load the plugins first. Please refer to the examples below.
+
+### Class component
+
+```js
+import React, { Suspense } from "react";
+
+import 'froala-editor/css/froala_editor.pkgd.min.css';
+import 'froala-editor/css/froala_style.css';
+
+const FroalaEditor = React.lazy(() => import('react-froala-wysiwyg'));
+
+export default class MyComponent extends React.Component {
+  constructor () {
+    super();
+    this.state = {
+      isInitialized: false
+    };
+  }
+
+  componentDidMount() {
+    // Import all Froala Editor plugins;
+    import('froala-editor/js/plugins.pkgd.min.js').then(() => this.setState({isInitialized: true}));
+  }
+
+  render() {
+	  return <>
+  	  {this.state.isInitialized && (
+	  	  <Suspense fallback={<p>Loading...</p>}>
+		  	  <FroalaEditor
+	  			  model={content}
+    			/>
+	  	  </Suspense>
+      )}
+  	</>;
+  }
+}
+```
+
+### Functional component
+
+```js
+import React, { Suspense, useEffect, useState } from "react";
+
+import 'froala-editor/css/froala_editor.pkgd.min.css';
+import 'froala-editor/css/froala_style.css';
+
+const FroalaEditor = React.lazy(() => import('react-froala-wysiwyg'));
+
+export default function MyComponent() {
+	const [isInitialized, setIsInitialized] = useState(false);
+
+	useEffect(() => {
+		async function initPlugins() {
+      // Import all Froala Editor plugins;
+			await import('froala-editor/js/plugins.pkgd.min.js');
+			setIsInitialized(true);
+		}
+		if (!isInitialized) {
+			initPlugins();
+		}
+	});
+
+	return <>
+	  {isInitialized && (
+		  <Suspense fallback={<p>Loading...</p>}>
+			  <FroalaEditor
+				  model={content}
+			  />
+		  </Suspense>
+    )}
+	</>;
+}
+```
+
 ## Manual Instantiation
 
 Gets the functionality to operate on the editor: create, destroy and get editor instance. Use it if you want to manually initialize the editor.
@@ -519,7 +598,7 @@ Froalaeditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
     }
   });
   </script>
-  
+
  ```
  Now you can use these buttons in options:
  ```javascript

demo/src/basic.jsx

@@ -6,10 +6,11 @@ import 'file-loader?name=[name].[ext]!./basic.html';
 
 import FroalaEditor from 'react-froala-wysiwyg';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
-ReactDOM.render(<FroalaEditor tag='textarea' config={{
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<FroalaEditor tag='textarea' config={{
   pluginsEnabled: ['align', 'link'],
   language: 'ro',
   events: {
@@ -18,5 +19,5 @@ ReactDOM.render(<FroalaEditor tag='textarea' config={{
       console.log('@@@@@@initialized', editor, e);
     }
   }
-}} />, document.getElementById('editor'));
+}} />);
 

demo/src/custombutton.jsx

@@ -4,7 +4,7 @@ import 'file-loader?name=[name].[ext]!./custombutton.html';
 
 import FroalaEditor from 'react-froala-wysiwyg';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import Froalaeditor from 'froala-editor';
 Froalaeditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
   Froalaeditor.RegisterCommand('alert', {
@@ -41,4 +41,5 @@ Froalaeditor.DefineIcon('alert', {NAME: 'info', SVG_KEY: 'help'});
   });
 
 // Render Froala Editor component.
-ReactDOM.render(<FroalaEditor tag='textarea' config={{pluginsEnabled:['align', 'link'], language: 'ro', toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']]}} />, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<FroalaEditor tag='textarea' config={{pluginsEnabled:['align', 'link'], language: 'ro', toolbarButtons: [['undo', 'redo' , 'bold'], ['alert', 'clear', 'insert']]}} />);

demo/src/edit_inline.jsx

@@ -4,7 +4,7 @@ import 'froala-editor/css/froala_style.css';
 
 import FroalaEditor from 'react-froala-wysiwyg';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -58,6 +58,7 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 
 require("file-loader?name=[name].[ext]!./edit_inline.html");

demo/src/full_editor.jsx

@@ -7,7 +7,7 @@ import 'froala-editor/js/plugins.pkgd.min.js';
 import FroalaEditor from 'react-froala-wysiwyg';
 import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -45,5 +45,6 @@ class EditorComponent extends React.Component {
 
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/src/init_on_button.jsx

@@ -5,7 +5,7 @@ import 'file-loader?name=[name].[ext]!./init_on_button.html';
 import 'froala-editor/js/plugins.pkgd.min.js';
 import FroalaEditorButton from 'react-froala-wysiwyg/FroalaEditorButton';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -43,5 +43,6 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/src/init_on_image.jsx

@@ -8,7 +8,7 @@ import 'file-loader?name=[name].[ext]!./init_on_image.html';
 
 import FroalaEditorImg from 'react-froala-wysiwyg/FroalaEditorImg';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -57,5 +57,6 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/src/init_on_input.jsx

@@ -7,7 +7,7 @@ import 'file-loader?name=[name].[ext]!./init_on_input.html';
 
 import FroalaEditorInput from 'react-froala-wysiwyg/FroalaEditorInput';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -44,5 +44,6 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/src/init_on_link.jsx

@@ -7,7 +7,7 @@ import 'froala-editor/js/plugins.pkgd.min.js';
 
 import FroalaEditorA from 'react-froala-wysiwyg/FroalaEditorA';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -47,6 +47,7 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 
 import "file-loader?name=[name].[ext]!./init_on_link.html";

demo/src/manual_initialization.jsx

@@ -6,7 +6,7 @@ import 'file-loader?name=[name].[ext]!./manual_initialization.html';
 import FroalaEditor from 'react-froala-wysiwyg';
 import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -80,5 +80,6 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/src/two_way_binding.jsx

@@ -6,7 +6,7 @@ import 'file-loader?name=[name].[ext]!./two_way_binding.html';
 
 import FroalaEditor from 'react-froala-wysiwyg';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 
 // Render Froala Editor component.
 class EditorComponent extends React.Component {
@@ -43,5 +43,6 @@ class EditorComponent extends React.Component {
   }
 }
 
-ReactDOM.render(<EditorComponent/>, document.getElementById('editor'));
+const root = ReactDOM.createRoot(document.getElementById('editor'));
+root.render(<EditorComponent/>);
 

demo/webpack.config.js

@@ -12,7 +12,7 @@ module.exports = {
     init_on_button: './src/init_on_button.jsx',
     init_on_link: './src/init_on_link.jsx',
     init_on_input: './src/init_on_input.jsx',
-	custombutton: './src/custombutton.jsx'
+    custombutton: './src/custombutton.jsx'
   },
 
   optimization: {
@@ -29,9 +29,10 @@ module.exports = {
             cacheDirectory: true,
               presets: [
                 ['@babel/preset-env', {
-                  'targets': { 
+                  'targets': {
                     "ie": "11"
                   },
+                  "corejs": 3,
                   "useBuiltIns": "entry"
                 }],
                 '@babel/preset-react']
@@ -41,7 +42,12 @@ module.exports = {
         test: /\.css$/,
         use: [
           'style-loader',
-          'css-loader'
+          {
+            loader: 'css-loader',
+            options: {
+              esModule: false
+            }
+          }
         ]
       },
       {
@@ -81,6 +87,11 @@ module.exports = {
 
     }),
 
-    new CopyWebpackPlugin([{ from: './src/index.html'}, {from: './src/image.jpg'} ])
+    new CopyWebpackPlugin({
+      patterns: [
+        { from: './src/index.html' },
+        { from: './src/image.jpg' }
+      ]
+    })
   ]
 };