jodit-react 5.0.9 → 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.9",
+  "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",