jodit-react 5.2.41 → 5.3.14

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 It can be easy
+Copyright (c) 2026 Jodit WYSIWYG Editor
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -42,26 +42,27 @@ import React, { useState, useRef, useMemo } from 'react';
 import JoditEditor from 'jodit-react';
 
 const Example = ({ placeholder }) => {
-	const editor = useRef(null);
-	const [content, setContent] = useState('');
-
-	const config = useMemo(() => ({
-			readonly: false, // all options from https://xdsoft.net/jodit/docs/,
-			placeholder: placeholder || 'Start typings...'
-		}),
-		[placeholder]
-	);
-
-	return (
-		<JoditEditor
-			ref={editor}
-			value={content}
-			config={config}
-			tabIndex={1} // tabIndex of textarea
-			onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
-			onChange={newContent => {}}
-		/>
-	);
+  const editor = useRef(null);
+  const [content, setContent] = useState('');
+
+  const config = useMemo(
+    () => ({
+      readonly: false, // all options from https://xdsoft.net/jodit/docs/,
+      placeholder: placeholder || 'Start typings...'
+    }),
+    [placeholder]
+  );
+
+  return (
+    <JoditEditor
+      ref={editor}
+      value={content}
+      config={config}
+      tabIndex={1} // tabIndex of textarea
+      onBlur={newContent => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
+      onChange={newContent => {}}
+    />
+  );
 };
 ```
 
@@ -76,21 +77,21 @@ import JoditEditor, { Jodit } from 'jodit-react';
  * @param {Jodit} jodit
  */
 function preparePaste(jodit) {
-	jodit.e.on(
-		'paste',
-		e => {
-			if (confirm('Change pasted content?')) {
-				jodit.e.stopPropagation('paste');
-				jodit.s.insertHTML(
-					Jodit.modules.Helpers.getDataTransfer(e)
-						.getData(Jodit.constants.TEXT_HTML)
-						.replace(/a/g, 'b')
-				);
-				return false;
-			}
-		},
-		{ top: true }
-	);
+  jodit.e.on(
+    'paste',
+    e => {
+      if (confirm('Change pasted content?')) {
+        jodit.e.stopPropagation('paste');
+        jodit.s.insertHTML(
+          Jodit.modules.Helpers.getDataTransfer(e)
+            .getData(Jodit.constants.TEXT_HTML)
+            .replace(/a/g, 'b')
+        );
+        return false;
+      }
+    },
+    { top: true }
+  );
 }
 Jodit.plugins.add('preparePaste', preparePaste);
 
@@ -107,16 +108,24 @@ You can connect any Jodit constructor and set it as the `JoditConstructor` prope
 ```jsx
 import React from 'react';
 import JoditEditor from 'jodit-react';
-import {Jodit} from 'jodit-pro';
+import { Jodit } from 'jodit-pro';
 import 'jodit-pro/es5/jodit.min.css';
 // ...
 
 function App() {
   return <JoditEditor JoditConstructor={Jodit} />;
 }
-
 ```
 
+### Import and use Jodit-react inside your Next.js application
+
+```js
+import dynamic from 'next/dynamic';
+
+const JoditEditor = dynamic(() => import('jodit-react'), {
+  ssr: false
+});
+```
 
 ## License
 

package/build/esm/index.d.mts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { IJodit } from 'jodit/esm/types/jodit';
+import { Jodit as Jodit$2 } from 'jodit/esm/index';
+import { Config } from 'jodit/esm/config';
+import { Jodit as Jodit$1 } from 'jodit/esm/jodit';
+import { DeepPartial } from 'jodit/esm/types';
+
+declare const Jodit: typeof Jodit$1;
+
+interface Props<T extends typeof Jodit$2 = typeof Jodit> {
+    JoditConstructor?: T;
+    config?: DeepPartial<Config>;
+    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 Jodit$2> & React.RefAttributes<IJodit>>;
+
+export { Jodit, JoditEditor as default };

package/build/esm/index.mjs

@@ -0,0 +1,125 @@
+// src/JoditEditor.tsx
+import { useEffect, useRef, forwardRef } from "react";
+
+// src/include.jodit.ts
+import { Jodit as JoditES5 } from "jodit/esm/index";
+import "jodit/es2021/jodit.min.css";
+import "jodit/esm/plugins/all";
+var Jodit = JoditES5;
+
+// src/JoditEditor.tsx
+import { jsx } from "react/jsx-runtime";
+function usePrevious(value) {
+  const ref = useRef("");
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+var 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 != null ? className : "");
+    useEffect(() => {
+      var _a, _b;
+      const classList = (_b = (_a = joditRef.current) == null ? void 0 : _a.container) == null ? void 0 : _b.classList;
+      if (preClassName !== className && typeof preClassName === "string") {
+        preClassName.split(/\s+/).filter(Boolean).forEach((cl) => classList == null ? void 0 : classList.remove(cl));
+      }
+      if (className && typeof className === "string") {
+        className.split(/\s+/).filter(Boolean).forEach((cl) => classList == null ? void 0 : classList.add(cl));
+      }
+    }, [className, preClassName]);
+    useEffect(() => {
+      var _a;
+      if ((_a = joditRef.current) == null ? void 0 : _a.workplace) {
+        joditRef.current.workplace.tabIndex = tabIndex || -1;
+      }
+    }, [tabIndex]);
+    useEffect(() => {
+      const jodit = joditRef.current;
+      if (!(jodit == null ? void 0 : jodit.events) || !(onBlur || onChange)) {
+        return;
+      }
+      const onBlurHandler = (event) => {
+        var _a, _b;
+        return onBlur && onBlur((_b = (_a = joditRef == null ? void 0 : joditRef.current) == null ? void 0 : _a.value) != null ? _b : "", event);
+      };
+      const onChangeHandler = (value2) => onChange && onChange(value2);
+      jodit.events.on("blur", onBlurHandler).on("change", onChangeHandler);
+      return () => {
+        var _a;
+        (_a = jodit.events) == null ? void 0 : _a.off("blur", onBlurHandler).off("change", onChangeHandler);
+      };
+    }, [onBlur, onChange]);
+    useEffect(() => {
+      const jodit = joditRef.current;
+      const updateValue = () => {
+        if (jodit && value !== void 0 && jodit.value !== value) {
+          jodit.value = value;
+        }
+      };
+      if (jodit) {
+        if (jodit.isReady) {
+          updateValue();
+        } else {
+          jodit.waitForReady().then(updateValue);
+        }
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsx("div", { className: "jodit-react-container", children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        defaultValue: value,
+        name,
+        id,
+        ref: textAreaRef
+      }
+    ) });
+  }
+);
+JoditEditor.displayName = "JoditEditor";
+var JoditEditor_default = JoditEditor;
+
+// src/index.ts
+var index_default = JoditEditor_default;
+export {
+  Jodit,
+  index_default as default
+};