@aatulwork/customform-renderer 1.4.0 → 1.6.0

package/README.md

@@ -52,6 +52,27 @@ const { isReady } = useCKEditor({ autoLoad: true });
 
 See [CKEditor Setup Guide](#ckeditor-setup) for more details.
 
+### Using with Vite
+
+**You do not need any Vite config** to use this package. The package ships correct `module` and `exports` so Vite resolves it without aliases.
+
+- **Dependencies:** The package installs `@emotion/react`, `@emotion/styled`, and `@mui/system`; you only need to install the [peer dependencies](#peer-dependencies) (React, MUI, react-hook-form, etc.).
+
+If you use **SSR** or see module resolution / pre-bundling issues, add the optional plugin (one line):
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { customformRendererVite } from '@aatulwork/customform-renderer/vite';
+
+export default defineConfig({
+  plugins: [react(), customformRendererVite()],
+});
+```
+
+The plugin applies `optimizeDeps.include`, `ssr.noExternal`, and excludes the package’s CKEditor script from pre-bundling. You can pass options: `customformRendererVite({ excludeCkeditorFromOptimize: false })` if you load CKEditor only via a script tag.
+
 ## Package Exports
 
 The package exports the following:
@@ -63,6 +84,7 @@ The package exports the following:
 - **Utils:** `getAllFields`, `normalizeInitialValues`, `transformFormValues`, `getDefaultValue`, `formatFileSize`, `validateFile`, `buildFieldRules`, `normalizeOptions`
 - **CKEditor:** `loadCKEditor`, `isCKEditorAvailable`, `waitForCKEditor`, `useCKEditor`
 - **Default services:** `defaultFileUploadService`, `defaultFormReferenceService`, `defaultApiReferenceService`, `defaultDateFormatterService` (throw if used without override; provide your own via `services`)
+- **Vite:** `customformRendererVite` from `@aatulwork/customform-renderer/vite` (optional plugin for SSR / optimizeDeps)
 
 ## Quick Start
 

package/dist/index.js

@@ -659,14 +659,31 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
   const theme = material.useTheme();
   const formColors = useFormColors(colors);
   const editorContainerRef = react.useRef(null);
+  const editorInstanceRef = react.useRef(null);
+  const isUserTypingRef = react.useRef(false);
   const fileUploadService = services?.fileUpload || defaultFileUploadService;
   const fileBaseUrl = services?.fileBaseUrl || "";
-  const licenseKey = services?.ckEditorLicenseKey || "";
+  const licenseKey = services?.ckEditorLicenseKey || "GPL";
   const ckEditorScriptPath = services?.ckEditorScriptPath || "/lib/ckeditor/ckeditor.js";
   const { isReady: isCKEditorReady, isLoading: isCKEditorLoading, error: ckEditorError } = useCKEditor({
     scriptPath: ckEditorScriptPath,
     autoLoad: true
   });
+  const watchedValue = reactHookForm.useWatch({
+    control,
+    name: field.name,
+    defaultValue: defaultValue || ""
+  });
+  react.useEffect(() => {
+    if (editorInstanceRef.current && isCKEditorReady && !isUserTypingRef.current) {
+      const currentEditorData = editorInstanceRef.current.getData();
+      const formValue = watchedValue || "";
+      if (currentEditorData !== formValue) {
+        editorInstanceRef.current.setData(formValue);
+      }
+    }
+    isUserTypingRef.current = false;
+  }, [watchedValue, isCKEditorReady]);
   const createCustomUploadAdapter = react.useCallback((loader) => {
     return {
       upload: async () => {
@@ -780,6 +797,7 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
                 },
                 data: formField.value || "",
                 onReady: (editor) => {
+                  editorInstanceRef.current = editor;
                   if (formSchema?.name) {
                     try {
                       const fileRepository = editor.plugins.get("FileRepository");
@@ -803,6 +821,7 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
                 },
                 onChange: (_event, editor) => {
                   const data = editor.getData();
+                  isUserTypingRef.current = true;
                   formField.onChange(data);
                 },
                 onBlur: () => {
@@ -1603,8 +1622,9 @@ var FormRenderer = ({
       try {
         await onSubmit(transformedData);
         if (onSuccess) {
-          reset(initialValues || {});
           onSuccess();
+          clearErrors();
+          reset(initialValues || {}, { keepErrors: false });
         }
       } catch (error) {
         console.error("Form submission error:", error);