jodit-react 1.1.22 → 1.2.1

package/examples/app.js

@@ -3,8 +3,8 @@ import './app.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import 'jodit';
+import "jodit";
 import 'jodit/build/jodit.min.css';
-import From from "./components/From";
+import Form from './components/Form';
 
-ReactDOM.render(<From/>, document.getElementById('editor'));
+ReactDOM.render(<Form />, document.getElementById('editor'));

package/examples/components/Form.css

@@ -0,0 +1,5 @@
+.simple-textarea {
+	display: block;
+	width: 100%;
+	min-height: 100px;
+}

package/examples/components/Form.js

@@ -0,0 +1,117 @@
+import React, { useCallback, useState } from 'react';
+
+import JoditEditor from '../../src/';
+import './Form.css';
+
+const Form = () => {
+	const [isSource, setSource] = useState(false);
+
+	const [config, setConfig] = useState({
+		readonly: false,
+		toolbar: true
+	});
+
+	const [textAreaValue, setTextAreaValue] = useState('Test');
+
+	const [inputValue, setInputValue] = useState('');
+
+	const [spin, setSpin] = useState(1);
+
+	const toggleToolbar = useCallback(
+		() =>
+			setConfig(config => ({
+				...config,
+				toolbar: !config.toolbar
+			})),
+		[]
+	);
+
+	const toggleReadOnly = useCallback(
+		() =>
+			setConfig(config => ({
+				...config,
+				readonly: !config.readonly
+			})),
+		[]
+	);
+
+	const handleBlurAreaChange = useCallback((textAreaValue, event) => {
+		console.log('handleBlurAreaChange', textAreaValue, event);
+	}, []);
+
+	const handleWYSIWYGChange = useCallback(newTextAreaValue => {
+		console.log('handleWYSIWYGChange', newTextAreaValue);
+
+		setTextAreaValue(newTextAreaValue);
+		setInputValue(newTextAreaValue);
+
+		return setTextAreaValue(() => newTextAreaValue);
+	}, []);
+
+	const handleNativeTextAreaChange = useCallback(e => {
+		console.log('handleNativeTextAreaChange', e.target.value);
+		setTextAreaValue(e.target.value);
+		setInputValue(e.target.value);
+	}, []);
+
+	const handleInputChange = useCallback(e => {
+		const { value } = e.target;
+		setInputValue(() => value);
+		handleWYSIWYGChange(value);
+	}, []);
+
+	const handleSpin = useCallback(() => setSpin(spin => ++spin), []);
+
+	const onSourceChange = useCallback(e => {
+		setSource(e.target.checked);
+	}, []);
+
+	return (
+		<div>
+			<label>
+				<input
+					type="checkbox"
+					onChange={onSourceChange}
+					checked={isSource}
+				/>{' '}
+				Source
+			</label>
+
+			{!isSource ? (
+				<JoditEditor
+					config={config}
+					onChange={handleWYSIWYGChange}
+					onBlur={handleBlurAreaChange}
+					value={textAreaValue}
+				/>
+			) : (
+				<textarea
+					className={'simple-textarea'}
+					onChange={handleNativeTextAreaChange}
+					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 Form;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jodit-react",
-	"version": "1.1.22",
+	"version": "1.2.1",
 	"description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
 	"main": "build/jodit-react.js",
 	"author": "Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/)s",
@@ -24,6 +24,7 @@
 	},
 	"devDependencies": {
 		"@babel/core": "^7.16.0",
+		"@babel/eslint-parser": "^7.17.0",
 		"@babel/preset-env": "^7.16.0",
 		"@babel/preset-react": "^7.16.0",
 		"@types/react": "^16.14.2",
@@ -32,6 +33,13 @@
 		"babel-loader": "^8.2.2",
 		"babel-plugin-transform-class-properties": "^6.24.1",
 		"css-loader": "^3.6.0",
+		"eslint": "^8.9.0",
+		"eslint-config-prettier": "^8.4.0",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.28.0",
+		"husky": "^7.0.4",
+		"lint-staged": "^12.3.4",
+		"prettier": "^2.5.1",
 		"react": "^16.14.0",
 		"react-dom": "^16.14.0",
 		"style-loader": "^0.20.3",
@@ -42,6 +50,7 @@
 	"scripts": {
 		"newversion": "npm update && rm -rf build/ && npm run build && npm version patch --no-git-tag-version && npm run github && npm publish ./",
 		"demo": "cd examples && export NODE_ENV=development && webpack-dev-server --config ./webpack.config.js --mode development --port 4000 --hot --inline",
+		"start": "npm run demo",
 		"build": "export NODE_ENV=production && webpack --mode production",
 		"github": "git add --all  && git commit -m \"New version $npm_package_version. Read more https://github.com/jodit/jodit-react/releases/tag/$npm_package_version \" && git tag $npm_package_version && git push --tags origin HEAD:master"
 	},
@@ -53,5 +62,16 @@
 	"bugs": {
 		"url": "https://github.com/jodit/jodit-react/issues"
 	},
+	"husky": {
+		"hooks": {
+			"pre-commit": "lint-staged"
+		}
+	},
+	"lint-staged": {
+		"**/*.js": [
+			"eslint ./ --fix",
+			"git add"
+		]
+	},
 	"homepage": "https://xdsoft.net/jodit/"
 }

package/src/JoditEditor.js

@@ -1,64 +1,76 @@
-import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react'
-import { func, number, object, string } from 'prop-types'
-import { Jodit } from './include.jodit'
+import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
+import { func, number, object, string } from 'prop-types';
+import { Jodit } from './include.jodit';
+const { isFunction } = Jodit.modules.Helpers;
 
-const JoditEditor = forwardRef(({
-	config,
-	id,
-	name,
-	onBlur,
-	onChange,
-	tabIndex,
-	value,
-	editorRef
-}, ref) => {
-	const textArea = useRef()
+const JoditEditor = forwardRef(
+	(
+		{ config, id, name, onBlur, onChange, tabIndex, value, editorRef },
+		ref
+	) => {
+		const textArea = useRef();
 
-	useLayoutEffect(() => {
-		if (ref) {
-			if (typeof ref === 'function') {
-				ref(textArea.current)
-			} else {
-				ref.current = textArea.current
+		useLayoutEffect(() => {
+			if (ref) {
+				if (isFunction(ref)) {
+					ref(textArea.current);
+				} else {
+					ref.current = textArea.current;
+				}
 			}
-		}
-	}, [textArea])
+		}, [textArea]);
 
-	useEffect(() => {
-		const element = textArea.current
-		textArea.current = Jodit.make(element, config)
-		textArea.current.workplace.tabIndex = tabIndex || -1
+		useEffect(() => {
+			const element = textArea.current;
+			textArea.current = Jodit.make(element, config);
+			textArea.current.workplace.tabIndex = tabIndex || -1;
 
-		// adding event handlers
-		textArea.current.events.on('blur', (e) => onBlur && onBlur(textArea.current.value, e))
-		textArea.current.events.on('change', value => onChange && onChange(value))
+			// adding event handlers
+			textArea.current.events.on(
+				'blur',
+				e => onBlur && onBlur(textArea.current.value, e)
+			);
+			textArea.current.events.on(
+				'change',
+				value => onChange && onChange(value)
+			);
 
-		if (id) element.id = id
-		if (name) element.name = name
+			if (id) {
+				element.id = id;
+			}
 
-		if (typeof editorRef === 'function') {
-			editorRef(textArea.current)
-		}
+			if (name) {
+				element.name = name;
+			}
 
-		return () => {
-			if(textArea?.current){
-				textArea.current.destruct()
+			if (isFunction(editorRef)) {
+				editorRef(textArea.current);
 			}
 
-			textArea.current = element
-		}
-	}, [config])
+			return () => {
+				if (textArea?.current) {
+					textArea.current.destruct();
+				}
+
+				textArea.current = element;
+			};
+		}, [config]);
+
+		useEffect(() => {
+			if (textArea?.current?.value !== value) {
+				textArea.current.value = value;
+			}
+		}, [value]);
 
-	useEffect(() => {
-		if (textArea?.current?.value !== value) {
-			textArea.current.value = value
-		}
-	}, [value])
+		return (
+			<div className={'jodit-react-container'}>
+				<textarea ref={textArea} />
+			</div>
+		);
+	}
+);
 
-	return (
-		<textarea ref={textArea} />
-	)
-})
+JoditEditor.displayName = 'JoditEditor';
 
 JoditEditor.propTypes = {
 	config: object,
@@ -68,7 +80,7 @@ JoditEditor.propTypes = {
 	onChange: func,
 	editorRef: func,
 	tabIndex: number,
-	value: string,
-}
+	value: string
+};
 
-export default JoditEditor
+export default JoditEditor;

package/src/include.jodit.js

@@ -1,4 +1,4 @@
-import { Jodit } from 'jodit'
-import 'jodit/build/jodit.min.css'
+import { Jodit } from 'jodit';
+import 'jodit/build/jodit.min.css';
 
-export {Jodit};
+export { Jodit };

package/src/index.js

@@ -1,3 +1,3 @@
-import JoditEditor from './JoditEditor';
-
-export default JoditEditor;
+import JoditEditor from './JoditEditor';
+
+export default JoditEditor;

package/.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-end_of_line = lf
-indent_size = 2
-indent_style = tab
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[{LICENSE,.gitattributes,.gitignore,.npmignore,.eslintignore}]
-indent_style = space
-
-[*.{json,yml,md,yaspellerrc,bowerrc,babelrc,snakeskinrc,eslintrc,tsconfig,pzlrrc}]
-indent_style = space

package/examples/components/From.js

@@ -1,88 +0,0 @@
-import React, {useState} from 'react';
-
-import JoditEditor from "../../src/";
-
-const From = () => {
-	const [config, setConfig] = useState({
-		readonly: false,
-		toolbar: true,
-	})
-
-	const [textAreaValue, setTextAreaValue] = useState('Test')
-
-	const [inputValue, setInputValue] = useState('')
-
-	const [spin, setSpin] = useState(1)
-
-	const toggleToolbar = () => (
-		setConfig(config => ({
-			...config,
-			toolbar: !config.toolbar,
-		}))
-	)
-
-	const toggleReadOnly = () => (
-		setConfig(config => ({
-			...config,
-			readonly: !config.readonly,
-		}))
-	)
-
-	const handleBlurAreaChange = (textAreaValue, event) => {
-		console.log('handleBlurAreaChange', textAreaValue, event)
-	};
-
-	const handleTextAreaChange = newTextAreaValue => {
-		console.log('handleTextAreaChange', newTextAreaValue)
-
-		return (
-			setTextAreaValue(() => newTextAreaValue)
-		)
-	}
-
-	const handleInputChange = e => {
-		const {value} = e.target
-		setInputValue(() => value)
-		handleTextAreaChange(value)
-	}
-
-	const handleSpin = () => setSpin(spin => ++spin)
-
-	return (
-		<div>
-			<JoditEditor
-				config={config}
-				onChange={handleTextAreaChange}
-				onBlur={handleBlurAreaChange}
-				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/examples/webpack.config.js

@@ -1,40 +0,0 @@
-var path = require('path');
-
-module.exports = {
-	entry: './app.js',
-	devtool: "eval",
-	module: {
-		rules: [
-			{
-				test: /\.js$/,
-				use: [
-					{
-						loader: 'babel-loader',
-						options: {
-							presets: [
-								"@babel/preset-env",
-								"@babel/preset-react"
-							]
-						}
-					}
-				]
-			},
-			{
-				test: /\.css$/,
-				use: [
-					'style-loader',
-					'css-loader'
-				],
-			},
-		]
-	},
-
-	output: {
-		path: path.join(__dirname, '/build/'),
-		filename: 'app.js'
-	},
-
-	devServer: {
-		contentBase: './'
-	}
-};

package/webpack.config.js

@@ -1,71 +0,0 @@
-const webpack = require("webpack");
-const path = require('path');
-
-module.exports = (env, argv, dir = process.cwd()) => {
-	const debug = !argv || !argv.mode || !argv.mode.match(/production/);
-
-	return {
-		context: dir,
-
-		entry: './src/index.js',
-		devtool: debug ? 'inline-source-map' : false,
-
-		module: {
-			rules: [
-				{
-					test: /\.js$/,
-					use: {
-						loader: 'babel-loader',
-						options: require(path.join(dir, './babel.config.json'))
-					}
-				},
-				{
-					test: /\.css$/,
-					use: [
-						'style-loader',
-						'css-loader'
-					],
-				},
-			]
-		},
-
-		resolve: {
-			alias: {
-				"jodit-react": path.join(__dirname, './src')
-			},
-		},
-
-		output: {
-			path: path.join(dir, './build/'),
-			filename: 'jodit-react.js',
-			library: 'JoditEditor',
-			libraryTarget: 'umd'
-		},
-
-		plugins: [
-			new webpack.DefinePlugin({
-				'process.env': {
-					NODE_ENV: JSON.stringify(debug ? 'development' : 'production'),
-				},
-			}),
-			new webpack.optimize.ModuleConcatenationPlugin(),
-		],
-
-		externals: {
-			jodit: 'jodit',
-			Jodit: 'Jodit',
-			react: {
-				root: 'React',
-				commonjs2: 'react',
-				commonjs: 'react',
-				amd: 'react'
-			},
-			'react-dom': {
-				root: 'ReactDOM',
-				commonjs2: 'react-dom',
-				commonjs: 'react-dom',
-				amd: 'react-dom'
-			}
-		}
-	}
-};