Try Typescript build and JoditConstructor option

.github/workflows/new-version.yml

@@ -10,11 +10,11 @@ jobs:
   newversion:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal access token.
           fetch-depth: 0 # otherwise, there would be errors pushing refs to the destination repository.
-      - uses: actions/setup-node@v3 #Setup Node
+      - uses: actions/setup-node@v4 #Setup Node
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/release.yml

@@ -13,8 +13,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3 #Setup Node
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4 #Setup Node
       with:
         node-version-file: '.nvmrc'
         cache: 'npm'
@@ -33,4 +33,4 @@ jobs:
 
     - name: Publish
       run: |
-        NPM_TOKEN=${{ secrets.NPM_TOKEN }} npm publish ./ --access public
+        NPM_TOKEN=${{ secrets.NPM_TOKEN }} npm publish ./ --access public --tag beta

.npmignore

@@ -1,6 +1,6 @@
 .idea
-.eslintrc.js
-.eslintignore
+eslint.config.mjs
 .editorconfig
 .gitignore
 .prettierrc.json
+tsconfig.types.json

.nvmrc

@@ -1 +1 @@
-18.17.1
+20

README.md

@@ -100,6 +100,24 @@ return <JoditEditor />;
 
 You can see how to write plugins [in the documentation](https://xdsoft.net/jodit/pro/docs/how-to/create-plugin.md) or [on the stand](https://xdsoft.net/jodit/pro/docs/getting-started/examples.md#jodit-example-paste-link)
 
+## Use with Jodit PRO
+
+You can connect any Jodit constructor and set it as the `JoditConstructor` property of the component.
+
+```jsx
+import React from 'react';
+import JoditEditor from 'jodit-react';
+import {Jodit} from 'jodit-pro';
+import 'jodit-pro/es5/jodit.min.css';
+// ...
+
+function App() {
+  return <JoditEditor JoditConstructor={Jodit} />;
+}
+
+```
+
+
 ## License
 
 This package is available under `MIT` License.

eslint.config.mjs

@@ -0,0 +1,36 @@
+import { fixupConfigRules } from '@eslint/compat';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+	baseDirectory: __dirname,
+	recommendedConfig: js.configs.recommended,
+	allConfig: js.configs.all
+});
+
+export default [
+	{
+		ignores: ['node_modules/*', '**/build', 'types/*']
+	},
+	...fixupConfigRules(
+		compat.extends(
+			'eslint:recommended',
+			'plugin:react/recommended',
+			'plugin:prettier/recommended',
+			'plugin:react-hooks/recommended',
+			'plugin:@typescript-eslint/eslint-recommended',
+			'plugin:@typescript-eslint/recommended'
+		)
+	),
+	{
+		settings: {
+			react: {
+				version: 'detect'
+			}
+		}
+	}
+];

examples/app.js → examples/app.tsx

@@ -8,7 +8,7 @@ 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(
 	<StrictMode>

examples/components/Form.js → examples/components/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,25 +74,26 @@ 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]
 	);
 
 	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 (

examples/index.html

@@ -31,17 +31,17 @@ <h3>JavaScript</h3>
 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(&lt;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(
+	&lt;StrictMode&gt;
+		&lt;Form /&gt;
+	&lt;/StrictMode&gt;
+);
         </pre>
 	</div>
 	<div class="result">
@@ -62,5 +62,5 @@ <h3>JavaScript</h3>
 </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>

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
+	}
+};

index.d.ts

@@ -1,27 +1 @@
-import { 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';