jodit-react - npm Package Compare versions

Comparing version 1.0.53 to 1.0.54

examples/components/From.js

@@ -1,71 +0,75 @@
-import React, {Component} from 'react';
+import React, { useRef, useState } from 'react';
 
 import JoditEditor from "../../src/";
 
-export default class From extends Component {
-    state = {
-        config: {
-            readonly: false,
-            toolbar: true,
-        },
-        value: 'Test',
-        spin: 1
-    };
+const From = () => {
+    const [config, setConfig] = useState({
+        readonly: false,
+        toolbar: true,
+    })
 
-    toggleToolbar = () => {
-        this.setState(prevState => {
-            let config = {
-                readonly: prevState.config.readonly,
-                toolbar: !prevState.config.toolbar
-            };
+    const [textAreaValue, setTextAreaValue] = useState('Test')
 
-            return {
-                config: config,
-                value: prevState.value
-            }
-        });
-    };
+    const [inputValue, setInputValue] = useState('')
 
-    toggleReadOnly = () => {
-        this.setState(prevState => {
-            let config = {
-                toolbar: prevState.config.toolbar,
-                readonly: !prevState.config.readonly
-            };
+    const [spin, setSpin] = useState(1)
 
-            return {
-                config: config,
-                value: prevState.value
-            }
-        });
-    };
+    const toggleToolbar = () => (
+        setConfig(config => ({
+            ...config,
+            toolbar: !config.toolbar,
+        }))
+    )
 
-    onChangeInput = () => {
-        this.setState(prevState => ({
-            config: prevState.config,
-            value: this.refs.input.value
-        }));
-    };
+    const toggleReadOnly = () => (
+        setConfig(config => ({
+            ...config,
+            readonly: !config.readonly,
+        }))
+    )
 
-    spin = () => {
-        this.setState(prevState => ({
-            config: prevState.config,
-            value: prevState.value,
-            spin: prevState.spin + 1
-        }));
-    };
+    const handleTextAreaChange = newTextAreaValue => {
+        console.log('handleTextAreaChange', newTextAreaValue)
+        return (
+        setTextAreaValue(() => newTextAreaValue)
+    )}
 
-    render () {
-        return <div>
+    const handleInputChange = e => {
+        const { value } = e.target
+        setInputValue(() => value)
+        handleTextAreaChange(value)
+    }
+
+    const handleSpin = () => setSpin(spin => ++spin)
+
+    return (
+        <div>
             <JoditEditor
-                value={this.state.value}
-                config={this.state.config}
-                onChange={console.log}
-            />
-            <input placeholder={"entre some text"} ref="input" type="text" onChange={this.onChangeInput}/>
-            <button type="button" onClick={this.toggleReadOnly}>Toggle Read-Only</button>
-            <button type="button" onClick={this.toggleToolbar}>Toggle Toolbar</button>
-            <button type="button" onClick={this.spin}>Spin {this.state.spin}</button>
+                config={config}
+                onChange={handleTextAreaChange}
+                value={textAreaValue} />
+            <input
+                onChange={handleInputChange}
+                placeholder={"enter some text"}
+                type={"text"}
+                value={inputValue} />
+            <button
+                onClick={toggleReadOnly}
+                type={"button"}>
+                {'Toggle Read-Only'}
+            </button>
+            <button
+                onClick={toggleToolbar}
+                type={"button"}>
+                {'Toggle Toolbar'}
+            </button>
+            <button
+                type={"button"}
+                onClick={handleSpin}>
+                {`Spin ${spin}`}
+            </button>
         </div>
-    };
+    )
 }
+
+export default From

package.json

 {
   "name": "jodit-react",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
@@ -19,3 +19,3 @@ "main": "build/jodit-react.js",
   "dependencies": {
-    "jodit": "^3.4.15"
+    "jodit": "^3.4.17"
   },
@@ -27,6 +27,6 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
-    "@types/react": "^16.9.43",
+    "@types/react": "^16.9.44",
     "babel": "^6.23.0",
@@ -40,3 +40,3 @@ "babel-cli": "^6.26.0",
     "style-loader": "^0.20.3",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
@@ -43,0 +43,0 @@ "webpack-dev-server": "^3.11.0"

src/JoditEditor.js

@@ -1,59 +0,68 @@
-import React, {useEffect, useRef, forwardRef, useLayoutEffect} from 'react'
-import PropTypes from 'prop-types'
-import {Jodit} from 'jodit'
+import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react'
+import { func, number, object, string } from 'prop-types'
+import { Jodit } from 'jodit'
 import 'jodit/build/jodit.min.css'
 
-const JoditEditor = forwardRef(({value, config, onChange, onBlur, tabIndex, name}, ref) => {
-	const textArea = useRef(null);
+const JoditEditor = forwardRef((props, ref) => {
+    const {
+        config,
+        id,
+        name,
+        onBlur,
+        onChange,
+        tabIndex,
+        value,
+    } = props
 
-	useLayoutEffect(() => {
-		if (ref) {
-			if (typeof ref === 'function') {
-				ref(textArea.current)
-			} else {
-				ref.current = textArea.current
-			}
-		}
-	}, [textArea]);
+    const textArea = useRef(null)
 
-	useEffect(() => {
-		const blurHandler = value => {
-			onBlur && onBlur(value)
-		};
+    useLayoutEffect(() => {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(textArea.current)
+            } else {
+                ref.current = textArea.current
+            }
+        }
+    }, [textArea])
 
-		const changeHandler = value => {
-			onChange && onChange(value)
-		};
+    useEffect(() => {
+        const element = textArea.current
+        textArea.current = Jodit.make(element, config)
+        textArea.current.workplace.tabIndex = tabIndex || -1
 
-		const element = textArea.current;
-		textArea.current = Jodit.make(element, config);
+        // adding event handlers
+        textArea.current.events.on('blur', value => onBlur && onBlur(value))
+        textArea.current.events.on('change', value => onChange && onChange(value))
 
-		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 (id) element.id = id
+        if (name) element.name = name
 
-		return () => {
-			textArea.current.destruct();
-      textArea.current = element;
-		}
-	}, [config]);
+        return () => {
+            textArea.current.destruct()
+            textArea.current = element
+        }
+    }, [config])
 
-	useEffect(() => {
-		if (textArea && textArea.current) {
-			textArea.current.value = value
-		}
-	}, [textArea, value]);
+    useEffect(() => {
+        if (textArea?.current?.value !== value) {
+            textArea.current.value = value
+        }
+    }, [value])
 
-	return <textarea ref={textArea} name={name}></textarea>
-});
+    return (
+        <textarea ref={textArea} />
+    )
+})
 
 JoditEditor.propTypes = {
-	value: PropTypes.string,
-	tabIndex: PropTypes.number,
-	config: PropTypes.object,
-	onChange: PropTypes.func,
-	onBlur: PropTypes.func
-};
+    config: object,
+    id: string,
+    name: string,
+    onBlur: func,
+    onChange: func,
+    tabIndex: number,
+    value: string,
+}
 
 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

Fixed 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

114192

increased by2.41%

Lines of code

401

increased by2.56%

Dependency changes

• Updatedjodit@^3.4.17