fix: change storyForm revalidation strategy

src/Components/Inputs/TextEditor/SaveModule.tsx

@@ -1,6 +1,6 @@
+import { useDebouncedCallback } from '@react-hookz/web';
 import { useHelpers, useRemirrorContext } from '@remirror/react';
 import { Control, useController } from 'react-hook-form';
-import { useDebouncedCallback } from '@react-hookz/web';
 
 interface Props {
     control?: Control,
@@ -17,6 +17,7 @@ export default function SaveModule(props: Props) {
     const { getMarkdown } = useHelpers();
 
     const changeCallback = useDebouncedCallback(ctx => {
+
         const { state } = ctx;
         const md = getMarkdown(state);
         onChange(md);
@@ -24,7 +25,6 @@ export default function SaveModule(props: Props) {
 
     useRemirrorContext(changeCallback)
 
-    // useEvent('focus', () => onBlur())
 
     return <></>
 }

src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx

@@ -90,15 +90,17 @@ export default function StoryForm() {
 
     const clickPreview = async () => {
         const isValid = await trigger();
-        const data = getValues()
 
         if (isValid) {
+            const data = getValues()
             dispatch(stageStory(data))
             navigate('/blog/preview-post/Story')
+        } else {
+            clickSubmit(); // I'm doing this so that the react-hook-form attaches onChange listener to inputs validation
         }
     }
 
-    const onSubmit: SubmitHandler<IFormInputs> = data => {
+    const clickSubmit = handleSubmit<IFormInputs>(data => {
         setLoading(true);
         createStory({
             variables: {
@@ -111,14 +113,15 @@ export default function StoryForm() {
                 },
             }
         })
-    }
+    })
+
 
     const isUpdating = story?.id;
 
     return (
         <FormProvider {...formMethods}>
             <form
-                onSubmit={handleSubmit(onSubmit)}
+                onSubmit={clickSubmit}
             >
                 <div
                     className='bg-white border-2 border-gray-200 rounded-16 overflow-hidden'>