jodit-react 4.1.2 → 5.0.0-beta.2

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}

@@ -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>

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/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';

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "jodit-react",
-	"version": "4.1.2",
+	"version": "5.0.0-beta.2",
 	"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/.github/ISSUE_TEMPLATE.md

@@ -1,18 +0,0 @@
-<!-- BUGS: Please use this template -->
-<!-- QUESTIONS: This is not a general support forum! Ask Qs at http://stackoverflow.com/questions/tagged/jodit -->
-
-**Jodit Version:**  3.4.xxxxx
-
-**Browser:**  <!-- Chrome/IE/Safary/FF -->
-**OS:**  <!-- Windows/Mac/Linux -->
-**Is React App:**  <!-- True/False -->
-
-**Code**
-
-```js
-// A *self-contained* demonstration of the problem follows...
-```
-
-**Expected behavior:**
-
-**Actual behavior:**

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,14 +0,0 @@
-<!--
-
-Thank you for submitting a pull request!
-
-Here's a checklist you might find useful.
-[ ] There is an associated issue that is labelled
-  'Bug' or 'help wanted' or is in the Community milestone
-[ ] Code is up-to-date with the `main` branch
-[ ] You've successfully run `npm test` locally
-[ ] There are new or updated tests validating the change
-
--->
-
-Fixes #

package/.github/workflows/new-version.yml

@@ -1,42 +0,0 @@
-name: New version
-
-on:
-  workflow_dispatch:
-
-  repository_dispatch:
-    types: [newversion]
-
-jobs:
-  newversion:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        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
-        with:
-          node-version-file: '.nvmrc'
-          cache: 'npm'
-      - name: Create local changes
-        run: |
-          npm ci
-          npm i jodit
-
-          git config --local user.email "github-actions[bot]@users.noreply.github.com"
-          git config --local user.name "github-actions[bot]"
-
-          npm version patch --no-git-tag-version
-          npm run git
-
-      - name: Push changes
-        uses: ad-m/github-push-action@master
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          branch: ${{ github.ref }}
-          tags: true
-
-      - name: Trigger release action
-        run: |
-          curl -XPOST -u "${{ secrets.PAT_USERNAME}}:${{secrets.PAT_TOKEN}}" -H "Accept:application/vnd.github.everest-preview+json" -H "Content-Type: application/json" https://api.github.com/repos/jodit/jodit-react/dispatches --data '{"event_type": "release" }'
-

package/.github/workflows/release.yml

@@ -1,36 +0,0 @@
-name: Publish Package to npmjs
-
-on:
-  repository_dispatch:
-    types: [ release ]
-
-  push:
-    tags: ["*"]
-
-jobs:
-  release:
-
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3 #Setup Node
-      with:
-        node-version-file: '.nvmrc'
-        cache: 'npm'
-
-    - name: Install dependencies
-      run: |
-        npm ci
-
-    - name: Lint
-      run: |
-        npm run lint
-
-    - name: Build
-      run: |
-        npm run build
-
-    - name: Publish
-      run: |
-        NPM_TOKEN=${{ secrets.NPM_TOKEN }} npm publish ./ --access public

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"
-  ]
-}