jodit-react 5.0.7 → 5.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jodit-react",
-  "version": "5.0.7",
+  "version": "5.0.9",
   "description": "Jodit is awesome and usefully wysiwyg editor with filebrowser",
   "main": "build/jodit-react.js",
   "author": "Chupurnov <chupurnov@gmail.com> (https://xdsoft.net/)",

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