jodit-react 4.0.30 → 5.0.0-beta.1

package/build/jodit-react.js.LICENSE.txt

@@ -1,7 +1,7 @@
 /*!
  * jodit - Jodit is an awesome and useful wysiwyg editor with filebrowser
  * Author: Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/jodit/)
- * Version: v4.2.10
+ * Version: v4.2.47
  * Url: https://xdsoft.net/jodit/
  * License(s): MIT
  */

package/build/types/JoditEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { IJodit } from 'jodit/types/types/jodit';
+import type { Jodit as JoditConstructorType } from 'jodit';
+import { Jodit } from './include.jodit';
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+interface Props<T extends typeof JoditConstructorType = typeof Jodit> {
+    JoditConstructor?: T;
+    config?: DeepPartial<ReturnType<T['make']>['options']>;
+    className?: string;
+    id?: string;
+    name?: string;
+    onBlur?: (value: string, event: MouseEvent) => void;
+    onChange?: (value: string) => void;
+    tabIndex?: number;
+    value?: string;
+    editorRef?: (editor: IJodit) => void;
+}
+declare const JoditEditor: React.ForwardRefExoticComponent<Props<typeof JoditConstructorType> & React.RefAttributes<IJodit>>;
+export default JoditEditor;

package/build/types/include.jodit.d.ts

@@ -0,0 +1,3 @@
+import type { Jodit as JoditConstructorType } from 'jodit';
+import 'jodit/es5/jodit.min.css';
+export declare const Jodit: typeof JoditConstructorType;

package/build/types/index.d.ts

@@ -0,0 +1,4 @@
+import JoditEditor from './JoditEditor';
+import { Jodit } from './include.jodit';
+export default JoditEditor;
+export { Jodit };

package/examples/{app.js → app.tsx}

@@ -1,6 +1,6 @@
 import './app.css';
 
-import React from 'react';
+import React, { StrictMode } from 'react';
 import Form from './components/Form';
 
 // For React < 18
@@ -8,6 +8,10 @@ import Form from './components/Form';
 // ReactDOM.render(<Form />, document.getElementById('editor'));
 
 import { createRoot } from 'react-dom/client';
-const container = document.getElementById('editor');
+const container = document.getElementById('editor')!;
 const root = createRoot(container);
-root.render(<Form />);
+root.render(
+	<StrictMode>
+		<Form />
+	</StrictMode>
+);

package/examples/components/{Form.js → Form.tsx}

@@ -1,21 +1,22 @@
-import React, { useCallback, useState } from 'react';
+import React, { type ChangeEvent, useCallback, useState } from 'react';
 
 import JoditEditor, { Jodit } from '../../src/';
 import './Form.css';
+import type { IJodit } from 'jodit/types/types/jodit';
 
 /**
  * @param {Jodit} jodit
  */
-function preparePaste(jodit) {
+function preparePaste(jodit: IJodit) {
 	jodit.e.on(
 		'paste',
 		e => {
 			if (confirm('Change pasted content?')) {
 				jodit.e.stopPropagation('paste');
 				jodit.s.insertHTML(
-					Jodit.modules.Helpers.getDataTransfer(e)
+					Jodit.modules.Helpers.getDataTransfer(e)!
 						.getData(Jodit.constants.TEXT_HTML)
-						.replace(/a/g, 'b')
+						?.replace(/a/g, 'b') ?? ''
 				);
 				return false;
 			}
@@ -57,11 +58,14 @@ const Form = () => {
 		[]
 	);
 
-	const handleBlurAreaChange = useCallback((textAreaValue, event) => {
-		console.log('handleBlurAreaChange', textAreaValue, event);
-	}, []);
+	const handleBlurAreaChange = useCallback(
+		(textAreaValue: string, event: MouseEvent) => {
+			console.log('handleBlurAreaChange', textAreaValue, event);
+		},
+		[]
+	);
 
-	const handleWYSIWYGChange = useCallback(newTextAreaValue => {
+	const handleWYSIWYGChange = useCallback((newTextAreaValue: string) => {
 		console.log('handleWYSIWYGChange', newTextAreaValue);
 
 		setTextAreaValue(newTextAreaValue);
@@ -70,16 +74,17 @@ const Form = () => {
 		return setTextAreaValue(() => newTextAreaValue);
 	}, []);
 
-	const handleNativeTextAreaChange = useCallback(e => {
-		console.log('handleNativeTextAreaChange', e.target.value);
-		setTextAreaValue(e.target.value);
-		setInputValue(e.target.value);
+	const handleNativeTextAreaChange = useCallback((e: ChangeEvent) => {
+		const value = (e.target as HTMLTextAreaElement).value;
+		console.log('handleNativeTextAreaChange', value);
+		setTextAreaValue(value);
+		setInputValue(value);
 	}, []);
 
 	const handleInputChange = useCallback(
-		e => {
-			const { value } = e.target;
-			setInputValue(() => value);
+		(e: ChangeEvent) => {
+			const { value } = e.target as HTMLInputElement;
+			setInputValue(value);
 			handleWYSIWYGChange(value);
 		},
 		[handleWYSIWYGChange]
@@ -87,8 +92,8 @@ const Form = () => {
 
 	const handleSpin = useCallback(() => setSpin(spin => ++spin), []);
 
-	const onSourceChange = useCallback(e => {
-		setSource(e.target.checked);
+	const onSourceChange = useCallback((e: ChangeEvent) => {
+		setSource((e.target as HTMLInputElement).checked);
 	}, []);
 
 	return (

package/examples/index.html

@@ -31,17 +31,17 @@
 import './app.css';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import JoditEditor from "../src/JoditEditor";
 
-ReactDOM.render(<JoditEditor
-  value={"test"}
-  config={{
-    readonly: false // all options from https://xdsoft.net/jodit/doc/
-  }}
-  onChange={console.log}
-/>, document.getElementById('editor'));
+const container = document.getElementById('editor')!;
+const root = createRoot(container);
+root.render(
+	<StrictMode>
+		<Form />
+	</StrictMode>
+);
         </pre>
 	</div>
 	<div class="result">
@@ -62,5 +62,5 @@ ReactDOM.render(&lt;JoditEditor
 </body>
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700,700i" rel="stylesheet">
 
-<script src="app.js"></script>
+<script src="build/app.js"></script>
 </html>

package/examples/webpack.config.ts

@@ -0,0 +1,43 @@
+import path from 'node:path';
+import process from 'node:process';
+
+export default {
+	entry: './app.tsx',
+	context: path.join(process.cwd(), './examples/'),
+	devtool: 'eval',
+	module: {
+		rules: [
+			{
+				test: /\.(js|jsx|ts|tsx)$/,
+				use: {
+					loader: 'swc-loader'
+				}
+			},
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader']
+			}
+		]
+	},
+
+	resolve: {
+		extensions: ['.js', '.jsx', '.ts', '.tsx']
+	},
+
+	output: {
+		path: path.join(process.cwd(), './examples/build/'),
+		filename: 'app.js'
+	},
+
+	devServer: {
+		static: './examples',
+		open: true,
+		allowedHosts: 'all',
+		client: {
+			progress: true,
+			overlay: true
+		},
+		port: 4000,
+		hot: true
+	}
+};

package/index.d.ts

@@ -1,27 +1 @@
-import type { Jodit } from 'jodit/esm/index';
-import * as React from 'react';
-
-type DeepPartial<T> = T extends object
-	? {
-			[P in keyof T]?: DeepPartial<T[P]>;
-	  }
-	: T;
-
-export interface IJoditEditorProps {
-	value: string;
-
-	className?: string;
-
-	config?: DeepPartial<Jodit['options']>;
-	// eslint-disable-next-line no-unused-vars
-	onChange?: (newValue: string) => void;
-	// eslint-disable-next-line no-unused-vars
-	onBlur?: (newValue: string) => void;
-}
-
-declare const JoditEditor: React.ForwardRefExoticComponent<
-	React.PropsWithoutRef<IJoditEditorProps> & React.RefAttributes<Jodit>
->;
-
-export default JoditEditor;
-export { Jodit };
+export type * from './build/types/index.d.ts';

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "jodit-react",
-	"version": "4.0.30",
+	"version": "5.0.0-beta.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",
+	"author": "Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/)",
 	"keywords": [
 		"react",
 		"jodit",
@@ -16,46 +16,44 @@
 		"rte"
 	],
 	"dependencies": {
-		"jodit": "^4.2.10"
+		"jodit": "^4.2.47"
 	},
 	"peerDependencies": {
-		"react": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-		"react-dom": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+		"react": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+		"react-dom": "~0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.22.5",
-		"@babel/eslint-parser": "^7.22.5",
-		"@babel/preset-env": "^7.22.5",
-		"@babel/preset-react": "^7.22.5",
-		"@types/react": "^18.2.14",
-		"@typescript-eslint/eslint-plugin": "^5.60.1",
-		"@typescript-eslint/parser": "^5.60.1",
-		"babel": "^6.23.0",
-		"babel-cli": "^6.26.0",
-		"babel-loader": "^9.1.2",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"css-loader": "^6.8.1",
-		"eslint": "8.43.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "^7.32.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"husky": "^8.0.3",
-		"lint-staged": "^13.2.3",
-		"prettier": "^2.8.8",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"style-loader": "^3.3.3",
-		"webpack": "^5.88.1",
+		"@eslint/compat": "^1.2.4",
+		"@swc-node/register": "^1.10.9",
+		"@swc/core": "^1.10.1",
+		"@types/react": "^19.0.1",
+		"@types/react-dom": "^19.0.2",
+		"@typescript-eslint/eslint-plugin": "^8.18.0",
+		"css-loader": "^7.1.2",
+		"eslint": "9.16.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-react": "^7.37.2",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"prettier": "^3.4.2",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"style-loader": "^4.0.0",
+		"swc-loader": "^0.2.6",
+		"webpack": "^5.97.1",
 		"webpack-cli": "^5.1.4",
-		"webpack-dev-server": "^4.15.1"
+		"webpack-dev-server": "^5.1.0"
 	},
 	"scripts": {
-		"newversion": "npm version patch --no-git-tag-version && npm run github",
-		"lint": "eslint ./",
-		"demo": "cd examples && export NODE_ENV=development && webpack serve --config ./webpack.config.js --mode development",
+		"newversion": "npm version prerelease --preid=beta --no-git-tag-version && npm run github",
+		"lint": "npm run lint:ts && npm run lint:eslint",
+		"lint:ts": "tsc --noEmit",
+		"lint:eslint": "eslint ./",
+		"demo": "NODE_ENV=development node -r @swc-node/register ./node_modules/.bin/webpack serve --config ./examples/webpack.config.ts --mode development",
 		"start": "npm run demo",
-		"build": "export NODE_ENV=production && webpack --mode production",
+		"build": "npm run build:react && npm run build:types",
+		"build:react": "NODE_ENV=production node -r @swc-node/register ./node_modules/.bin/webpack --mode production",
+		"build:types": "rm -rf ./build/types && tsc --project tsconfig.types.json --emitDeclarationOnly",
 		"github": "npm run git && git push --tags origin HEAD:main",
 		"git": "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"
 	},
@@ -67,16 +65,17 @@
 	"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/",
+	"ava": {
+		"extensions": [
+			"ts",
+			"tsx"
+		],
+		"require": [
+			"@swc-node/register"
+		],
+		"files": [
+			"packages/**/*.spec.{ts,tsx}"
 		]
-	},
-	"homepage": "https://xdsoft.net/jodit/"
+	}
 }

package/src/JoditEditor.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
+import type { IJodit } from 'jodit/types/types/jodit';
+import type { Jodit as JoditConstructorType } from 'jodit';
+import { Jodit } from './include.jodit';
+
+function usePrevious(value: string): string {
+	const ref = useRef<string>('');
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+}
+
+type DeepPartial<T> = T extends object
+	? {
+			[P in keyof T]?: DeepPartial<T[P]>;
+		}
+	: T;
+
+interface Props<T extends typeof JoditConstructorType = typeof Jodit> {
+	JoditConstructor?: T;
+	config?: DeepPartial<ReturnType<T['make']>['options']>;
+	className?: string;
+	id?: string;
+	name?: string;
+	onBlur?: (value: string, event: MouseEvent) => void;
+	onChange?: (value: string) => void;
+	tabIndex?: number;
+	value?: string;
+	editorRef?: (editor: IJodit) => void;
+}
+
+const JoditEditor = forwardRef<IJodit, Props>(
+	(
+		{
+			JoditConstructor = Jodit,
+			className,
+			config,
+			id,
+			name,
+			onBlur,
+			onChange,
+			tabIndex,
+			value,
+			editorRef
+		},
+		ref
+	) => {
+		const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+		const joditRef = useRef<IJodit | null>(null);
+
+		useLayoutEffect(() => {
+			if (ref) {
+				if (typeof ref === 'function') {
+					ref(joditRef.current);
+				} else {
+					ref.current = joditRef.current;
+				}
+			}
+		}, [textAreaRef, ref]);
+
+		useEffect(() => {
+			const element = textAreaRef.current!;
+			const jodit = JoditConstructor.make(element, config);
+			joditRef.current = jodit;
+
+			if (typeof editorRef === 'function') {
+				editorRef(jodit);
+			}
+
+			return () => {
+				if (jodit) {
+					jodit.destruct();
+				}
+			};
+		}, [JoditConstructor, config, editorRef]);
+
+		const preClassName = usePrevious(className ?? '');
+
+		useEffect(() => {
+			const classList = joditRef.current?.container?.classList;
+
+			if (
+				preClassName !== className &&
+				typeof preClassName === 'string'
+			) {
+				preClassName.split(/\s+/).forEach(cl => classList?.remove(cl));
+			}
+
+			if (className && typeof className === 'string') {
+				className.split(/\s+/).forEach(cl => classList?.add(cl));
+			}
+		}, [className, preClassName]);
+
+		useEffect(() => {
+			if (joditRef.current?.workplace) {
+				joditRef.current.workplace.tabIndex = tabIndex || -1;
+			}
+		}, [tabIndex]);
+
+		useEffect(() => {
+			const jodit = joditRef.current;
+			if (!jodit?.events || !(onBlur || onChange)) {
+				return;
+			}
+
+			const onBlurHandler = (event: MouseEvent) =>
+				onBlur && onBlur(joditRef?.current?.value ?? '', event);
+
+			const onChangeHandler = (value: string) =>
+				onChange && onChange(value);
+
+			// adding event handlers
+			jodit.events
+				.on('blur', onBlurHandler)
+				.on('change', onChangeHandler);
+
+			return () => {
+				// Remove event handlers
+				jodit.events
+					?.off('blur', onBlurHandler)
+					.off('change', onChangeHandler);
+			};
+		}, [onBlur, onChange]);
+
+		useEffect(() => {
+			const jodit = joditRef.current;
+
+			const updateValue = () => {
+				if (jodit && value !== undefined && jodit.value !== value) {
+					jodit.value = value;
+				}
+			};
+
+			if (jodit) {
+				if (jodit.isReady) {
+					updateValue();
+				} else {
+					jodit.waitForReady().then(updateValue);
+				}
+			}
+		}, [value]);
+
+		return (
+			<div className={'jodit-react-container'}>
+				<textarea
+					defaultValue={value}
+					name={name}
+					id={id}
+					ref={textAreaRef}
+				/>
+			</div>
+		);
+	}
+);
+
+JoditEditor.displayName = 'JoditEditor';
+
+export default JoditEditor;

package/src/include.jodit.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Jodit Editor (https://xdsoft.net/jodit/)
+import { Jodit as JoditES5 } from 'jodit/es5/jodit.fat.min';
+import type { Jodit as JoditConstructorType } from 'jodit';
+import 'jodit/es5/jodit.min.css';
+
+export const Jodit: typeof JoditConstructorType = JoditES5;

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"compilerOptions": {
+		"target": "es2015",
+		"module": "esnext",
+		"outDir": "./build",
+		"declaration": true,
+		"declarationDir": "./build/types",
+		"strict": true,
+		"skipLibCheck": true,
+		"esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+		"forceConsistentCasingInFileNames": true,
+		"verbatimModuleSyntax": true,
+		"jsx": "react",
+		"moduleResolution": "node",
+		"noImplicitAny": true
+	}
+}

package/{webpack.config.js → webpack.config.ts}

@@ -1,22 +1,22 @@
-const webpack = require('webpack');
-const path = require('path');
+import path from 'path';
+import webpack from 'webpack';
+import process from 'process';
 
-module.exports = (env, argv, dir = process.cwd()) => {
+export default (env: unknown, argv: { mode?: string }, dir = process.cwd()) => {
 	const debug = !argv || !argv.mode || !argv.mode.match(/production/);
 
 	return {
 		context: dir,
 
-		entry: './src/index.js',
+		entry: './src/index.ts',
 		devtool: debug ? 'inline-source-map' : false,
 
 		module: {
 			rules: [
 				{
-					test: /\.js$/,
+					test: /\.(js|jsx|ts|tsx)$/,
 					use: {
-						loader: 'babel-loader',
-						options: require(path.join(dir, './babel.config.json'))
+						loader: 'swc-loader'
 					}
 				},
 				{
@@ -27,6 +27,7 @@ module.exports = (env, argv, dir = process.cwd()) => {
 		},
 
 		resolve: {
+			extensions: ['.ts', '.tsx', '.js', '.jsx'],
 			alias: {
 				'jodit-react': path.join(__dirname, './src')
 			}

package/babel.config.json

@@ -1,12 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env",
-		"@babel/preset-react"
-	],
-	"plugins": [
-		"transform-class-properties"
-	],
-	"ignore": [
-		"node_modules"
-	]
-}

package/examples/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    "transform-class-properties"
-  ],
-  "ignore": [
-    "node_modules"
-  ]
-}

package/examples/webpack.config.js

@@ -1,45 +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: {
-		static: './',
-		open: true,
-		allowedHosts: 'all',
-		client: {
-			progress: true,
-			overlay: true
-		},
-		port: 4000,
-		hot: true
-	}
-};