jodit-react 5.0.7 → 5.0.10

package/build/types/JoditEditor.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useRef, forwardRef } from 'react';
+import { Jodit } from './include.jodit';
+function usePrevious(value) {
+    const ref = useRef('');
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+const JoditEditor = forwardRef(({ JoditConstructor = Jodit, className, config, id, name, onBlur, onChange, tabIndex, value, editorRef }, ref) => {
+    const textAreaRef = useRef(null);
+    const joditRef = useRef(null);
+    useEffect(() => {
+        const element = textAreaRef.current;
+        const jodit = JoditConstructor.make(element, config);
+        joditRef.current = jodit;
+        if (typeof editorRef === 'function') {
+            editorRef(jodit);
+        }
+        return () => {
+            if (jodit.isReady) {
+                jodit.destruct();
+            }
+            else {
+                jodit
+                    .waitForReady()
+                    .then(joditInstance => joditInstance.destruct());
+            }
+        };
+    }, [JoditConstructor, config, editorRef]);
+    useEffect(() => {
+        if (ref) {
+            if (typeof ref === 'function') {
+                ref(joditRef.current);
+            }
+            else {
+                ref.current = joditRef.current;
+            }
+        }
+    }, [textAreaRef, ref, joditRef]);
+    const preClassName = usePrevious(className ?? '');
+    useEffect(() => {
+        const classList = joditRef.current?.container?.classList;
+        if (preClassName !== className &&
+            typeof preClassName === 'string') {
+            preClassName
+                .split(/\s+/)
+                .filter(Boolean)
+                .forEach(cl => classList?.remove(cl));
+        }
+        if (className && typeof className === 'string') {
+            className
+                .split(/\s+/)
+                .filter(Boolean)
+                .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) => onBlur && onBlur(joditRef?.current?.value ?? '', event);
+        const onChangeHandler = (value) => 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 (React.createElement("div", { className: 'jodit-react-container' },
+        React.createElement("textarea", { defaultValue: value, name: name, id: id, ref: textAreaRef })));
+});
+JoditEditor.displayName = 'JoditEditor';
+export default JoditEditor;

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

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

package/build/types/include.jodit.js

@@ -0,0 +1,5 @@
+// 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 'jodit/es5/jodit.min.css';
+export const Jodit = JoditES5;

package/build/types/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jodit-react",
-  "version": "5.0.7",
+  "version": "5.0.10",
   "description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
   "main": "build/jodit-react.js",
   "author": "Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/)",
@@ -66,7 +66,7 @@
     "start": "npm run demo",
     "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",
+    "build:types": "rm -rf ./build/types && tsc --project tsconfig.types.json && npm run remove-css",
     "remove-css": "replace \"import '[^']+.css';\" '' ./build/**/*.ts",
     "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",

package/src/JoditEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, forwardRef, useLayoutEffect } from 'react';
+import React, { useEffect, useRef, forwardRef } from 'react';
 import type { IJodit } from 'jodit/types/types/jodit';
 import type { Jodit as JoditBaseConstructor } from 'jodit/types/index';
 import type { Config as BaseConfig } from 'jodit/config';
@@ -46,16 +46,6 @@ const JoditEditor = forwardRef<IJodit, Props>(
 		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);
@@ -76,6 +66,16 @@ const JoditEditor = forwardRef<IJodit, Props>(
 			};
 		}, [JoditConstructor, config, editorRef]);
 
+		useEffect(() => {
+			if (ref) {
+				if (typeof ref === 'function') {
+					ref(joditRef.current);
+				} else {
+					ref.current = joditRef.current;
+				}
+			}
+		}, [textAreaRef, ref, joditRef]);
+
 		const preClassName = usePrevious(className ?? '');
 
 		useEffect(() => {

package/tests/ref.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { describe, it } from '@jest/globals';
+import { render, act } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import JoditEditor from '../src';
+import type { IJodit } from 'jodit/types/types/jodit';
+
+describe('Ref Test', () => {
+	describe('Ref as function', () => {
+		it('should be instance of imperative Jodit', () => {
+			const ref = React.createRef<IJodit>();
+
+			const App = () => (
+				<JoditEditor
+					ref={newRef => {
+						ref.current = newRef;
+					}}
+				/>
+			);
+
+			const elm = render(<App />);
+
+			act(() => {
+				elm.rerender(<App />);
+			});
+
+			expect(ref.current?.isJodit).toBe(true);
+		});
+	});
+
+	describe('Ref as object', () => {
+		it('should be instance of imperative Jodit', () => {
+			const ref = React.createRef<IJodit>();
+
+			const App = () => <JoditEditor ref={ref} />;
+
+			const elm = render(<App />);
+
+			act(() => {
+				elm.rerender(<App />);
+			});
+
+			expect(ref.current?.isJodit).toBe(true);
+		});
+	});
+});

package/tests/theme.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { describe, it } from '@jest/globals';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import JoditEditor from '../src';
+
+describe('Theme Test', () => {
+	it('should render with theme classname', () => {
+		const { container } = render(
+			<JoditEditor config={{ theme: 'summer' }} />
+		);
+		expect(
+			container
+				.querySelector('.jodit-container')!
+				.classList.contains('jodit_theme_summer')
+		).toBe(true);
+	});
+});