jodit-react - npm Package Compare versions

Comparing version 1.0.26 to 1.0.29

package.json

 {
   "name": "jodit-react",
-  "version": "1.0.26",
+  "version": "1.0.29",
   "description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
@@ -19,4 +19,4 @@ "main": "build/jodit-react.js",
   "dependencies": {
-    "@types/react": "^16.8.7",
-    "jodit": "^3.2.44"
+    "@types/react": "^16.9.16",
+    "jodit": "^3.3.1"
   },
@@ -34,7 +34,7 @@ "peerDependencies": {
     "css-loader": "^0.28.11",
-    "react": "^16.8.4",
-    "react-dom": "^16.8.4",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "style-loader": "^0.20.3",
     "webpack": "^3.12.0",
-    "webpack-dev-server": "^2.11.3"
+    "webpack-dev-server": "^2.11.5"
   },
@@ -41,0 +41,0 @@ "scripts": {

README.md

@@ -33,41 +33,26 @@ # React Jodit WYSIWYG Editor
 
-### 1. Require and use Jodit component inside your application.
+### 1. Require and use Jodit-react component inside your application.
 
 ```jsx
-import React from 'react';
-
-import 'jodit';
-import 'jodit/build/jodit.min.css';
+import React, {useState} from 'react';
 import JoditEditor from "jodit-react";
 
-class Example  extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-        	content: 'content',
-        }
-    }
-
-    updateContent = (value) => {
-        this.setState({content:value})
-    }
-    /**
-     * @property Jodit jodit instance of native Jodit
-     */
-	jodit;
-	setRef = jodit => this.jodit = jodit;
+cosnt Example = ({}) => {
+	const editor = useRef(null)
+	cosnt [content, setContent] = useState('')
 	
-	config = {
+	const config = {
 		readonly: false // all options from https://xdsoft.net/jodit/doc/
 	}
-    render() {
-        return (
+	
+	return (
             <JoditEditor
-            	editorRef={this.setRef}
-                value={this.state.content}
-                config={this.config}
-                onChange={this.updateContent}
+            	ref={editor}
+                value={content}
+                config={config}
+		tabIndex={1} // tabIndex of textarea
+		onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
+                onChange={newContent => setContent(newContent)}
             />
         );
-    }
 }
@@ -74,0 +59,0 @@ ```

src/JoditEditor.js

@@ -1,69 +0,55 @@
-import React, { Component } from 'react';
+import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react'
+import PropTypes from 'prop-types'
 import Jodit from 'jodit'
+import 'jodit/build/jodit.min.css'
 
-export default class JoditEditor extends Component {
-    /**
-     *Jodit editor
-     *
-     * @name JoditEditor#editor
-     * @type Jodit
-     */
-    editor;
-    oldConfig = {};
+const JoditEditor = forwardRef(({ value, config, onChange, onBlur, tabIndex }, ref) => {
+  const textArea = useRef(null)
 
-    constructor(props) {
-        super(props);
+  useLayoutEffect(() => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(textArea.current)
+      } else {
+        ref.current = textArea.current
+      }
+    }
+  }, [textArea])
 
-        this.state = {
-            value: props.value || '',
-            config: props.config || {},
-            onChange: props.onChange
-        };
-
-        this.oldConfig = this.state.config;
+  useEffect(() => {
+    const blurHandler = value => {
+      onBlur && onBlur(value)
     }
 
-    changeListener = (value) => {
-        this.state.value = value;
-        if (typeof this.state.onChange === 'function') {
-            this.state.onChange(value);
-        }
-    };
-
-    componentDidMount () {
-        this.createEditor();
+    const changeHandler = value => {
+      onChange && onChange(value)
     }
 
-    createEditor() {
-        this.editor && this.editor.destruct();
-        this.editor = new Jodit(this.refs.element, this.props.config);
+    textArea.current = new Jodit(textArea.current, customConfig)
+    textArea.current.value = value
+    textArea.current.events.on('blur', () => blurHandler(textArea.current.value))
+    textArea.current.events.on('change', () => changeHandler(textArea.current.value))
+    textArea.current.workplace.tabIndex = tabIndex || -1
 
-        if (this.props.editorRef && typeof this.props.editorRef === 'function') {
-            this.props.editorRef(this.editor);
-        }
-
-        this.editor.value = this.state.value;
-        this.editor.events.on('change', this.changeListener);
+    return () => {
+      textArea.current.destruct()
     }
-
-    componentWillUnmount () {
-        this.editor && this.editor.destruct();
+  }, [])
+  
+  useEffect(() => {
+    if (textArea && textArea.current) {
+      textArea.current.value = value
     }
+  }, [textArea, value])
 
-    componentDidUpdate () {
-        if (this.oldConfig !== this.props.config) {
-            this.oldConfig = this.props.config;
-            this.createEditor();
-        }
+  return <textarea ref={textArea}></textarea>
+})
 
-        if (JSON.stringify(this.editor.value) === JSON.stringify(this.props.value)) {
-            return;
-        }
+JoditEditor.propTypes = {
+  value: PropTypes.string,
+  config: PropTypes.object,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func
+}
 
-        this.editor.value = this.props.value;
-    }
-
-    render() {
-        return <textarea ref="element"></textarea>
-    }
-}
+export default JoditEditor

New alerts

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

Total package byte prevSize

268641

increased by702.08%

Lines of code

1358

increased by151.48%

Worsened metrics

Number of lines in readme file

64

decreased by-18.99%

Number of low supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@types/react@^16.9.16

• Updatedjodit@^3.3.1