test loading skeleton & new form

src/app/area/[...slug]/SingleEntryForm.tsx

@@ -6,7 +6,7 @@ export interface SingleEntryFormProps<T> {
   children: ReactNode
   initialValues: DefaultValues<T>
   validationMode?: keyof ValidationMode
-  submitHandler: (formData: T) => Promise<void>
+  submitHandler: (formData: T) => Promise<void> | void
 }
 
 export function SingleEntryForm<T extends FieldValues> ({ children, initialValues, submitHandler, validationMode = 'onBlur' }: SingleEntryFormProps<T>): ReactNode {
@@ -22,7 +22,7 @@ export function SingleEntryForm<T extends FieldValues> ({ children, initialValue
       {/* eslint-disable-next-line */}
       <form onSubmit={handleSubmit(async data => {
         await submitHandler(data)
-        reset() // clear isDirty flag
+        reset({ ...data }, { keepValues: true }) // clear isDirty flag
       }
       )}
       >

src/app/area/[...slug]/page.tsx

@@ -83,7 +83,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
 /**
  * Extract and validate uuid as the first param in a catch-all route
  */
-export const parseUuidAsFirstParam = ({ params }: PageWithCatchAllUuidProps): string => {
+const parseUuidAsFirstParam = ({ params }: PageWithCatchAllUuidProps): string => {
   if (params.slug.length === 0) {
     notFound()
   }

src/app/editArea/[slug]/Skeleton.tsx

@@ -0,0 +1,10 @@
+import { PageContainer } from './page'
+
+export default function Loading (): JSX.Element {
+  return (
+    <>
+      <div className='card card-compact card-bordered border-base-300  w-full h-56 bg-base-300' />
+      <div className='card card-compact card-bordered border-base-300  w-full h-56 bg-base-300' />
+    </>
+  )
+}

src/app/editArea/[slug]/attributes/page.tsx

@@ -1,6 +1,6 @@
-import { EditPageProps, getPageDataForEdit } from '../page'
+import { DashboardPageProps, getPageDataForEdit } from '../page'
 
-export default async function AreaEditPage ({ params }: EditPageProps): Promise<any> {
+export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
   const { area } = await getPageDataForEdit(params.slug)
   return (<div>Attributes {JSON.stringify(area, null, 2)}</div>)
 }

src/app/editArea/[slug]/layout.tsx

@@ -3,7 +3,8 @@ import { SidebarNav } from './SidebarNav'
 export default function RootLayout ({
   children, params
 }: {
-  children: React.ReactNode, params: { slug: string }
+  children: React.ReactNode
+  params: { slug: string }
 }): any {
   return (
     <div>

src/app/editArea/[slug]/page.tsx

@@ -1,35 +1,45 @@
 import { notFound } from 'next/navigation'
 import { validate } from 'uuid'
+import { Suspense, ReactNode } from 'react'
 
 import { AreaPageDataProps, getArea } from '@/js/graphql/getArea'
 import { AreaNameForm } from './general/AreaNameForm'
 import { AreaDescriptionForm } from './general/AreaDescriptionForm'
 import { AreaLatLngForm } from './general/AreaLatLngForm'
+import Loading from './Skeleton'
 
 // Opt out of caching for all data requests in the route segment
 export const dynamic = 'force-dynamic'
 
-interface Props {
+export interface DashboardPageProps {
   params: {
     slug: string
   }
 }
 
-export default async function AreaEditPage ({ params }: Props): Promise<any> {
+export default async function AreaEditPage ({ params }: DashboardPageProps): Promise<any> {
   const areaUuid = params.slug
   if (!validate(areaUuid)) {
     notFound()
   }
   const { area: { areaName, uuid, content: { description }, metadata: { lat, lng } } } = await getPageDataForEdit(areaUuid)
   return (
-    <section className='w-full flex flex-col gap-y-8'>
-      <AreaNameForm initialValue={areaName} uuid={uuid} />
-      <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
-      <AreaDescriptionForm initialValue={description} uuid={uuid} />
-    </section>
+    <PageContainer>
+      <Suspense fallback={<Loading />}>
+        <AreaNameForm initialValue={areaName} uuid={uuid} />
+        <AreaLatLngForm initLat={lat} initLng={lng} uuid={uuid} />
+        <AreaDescriptionForm initialValue={description} uuid={uuid} />
+      </Suspense>
+    </PageContainer>
   )
 }
 
+export const PageContainer: React.FC<{ children: ReactNode } > = ({ children }) => (
+  <section className='w-full flex flex-col gap-y-8'>
+    {children}
+  </section>
+)
+
 export const getPageDataForEdit = async (uuid: string): Promise<AreaPageDataProps> => {
   if (uuid == null) notFound()
 

src/components/editor/MarkdownEditor.tsx

@@ -7,11 +7,9 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { ListPlugin } from '@lexical/react/LexicalListPlugin'
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
-import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'
 
 import { mdeditorConfig } from './editorConfig'
 import { MarkdownPreviewPlugin } from './plugins/MarkdownPreviewPlugin'
-import { PlainTextResetPlugin } from './plugins/PlainTextResetPlugin'
 import { ReactHookFormFieldPlugin } from './plugins/ReactHookFormFieldPlugin'
 import { RulesType } from '../../js/types'
 
@@ -27,7 +25,7 @@ export interface MarkdownEditorProps {
 /**
  * Multiline inplace editor with react-hook-form support.
  */
-export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initialValue = '', preview = false, reset, placeholder = 'Enter some text', rules }) => {
+export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initialValue = '', preview = false, placeholder = 'Enter some text', rules }) => {
   // const { field, fieldState: { error } } = useController({ name: fieldName, rules })
 
   // const onChangeHandler = (arg0: EditorState, arg1: LexicalEditor): void => {
@@ -51,17 +49,11 @@ export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initi
             )
           : (
             <>
-              <AutoFocusPlugin />
               <PlainTextPlugin
                 contentEditable={<ContentEditable className={config.theme?.input} data-lpignore='true' />}
                 placeholder={<MDPlaceholder text={placeholder} className={config.theme?.placeholder} />}
                 ErrorBoundary={LexicalErrorBoundary}
               />
-              <PlainTextResetPlugin
-                initialValue={initialValue}
-                editable={!preview}
-                resetSignal={reset}
-              />
               <ReactHookFormFieldPlugin fieldName={fieldName} rules={rules} />
             </>
             )}

src/components/editor/plugins/ReactHookFormFieldPlugin.tsx

@@ -1,7 +1,9 @@
-import { useEffect } from 'react'
-import { $getRoot } from 'lexical'
+import { useCallback } from 'react'
+import { $getRoot, EditorState } from 'lexical'
 import { useController } from 'react-hook-form'
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
 import { RulesType } from '@/js/types'
 
 /**
@@ -10,14 +12,12 @@ import { RulesType } from '@/js/types'
 export const ReactHookFormFieldPlugin: React.FC<{ fieldName: string, rules?: RulesType }> = ({ fieldName, rules }) => {
   const { field } = useController({ name: fieldName, rules })
   const [editor] = useLexicalComposerContext()
-
-  useEffect(() => {
-    console.log('#RHF field plugin')
-    editor.getEditorState().read(() => {
+  const onChange = useCallback((editorState: EditorState): void => {
+    editorState.read(() => {
       const str = $getRoot().getTextContent()
       console.log('#updating form')
       field.onChange(str)
     })
-  })
-  return null
+  }, [editor])
+  return <OnChangePlugin onChange={onChange} />
 }

src/components/ui/form/MDTextArea.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useState } from 'react'
-import { useController, useFormContext } from 'react-hook-form'
+import { useController } from 'react-hook-form'
 import clx from 'classnames'
 import dynamic from 'next/dynamic'
 
@@ -25,7 +25,6 @@ interface EditorProps {
 export const MDTextArea: React.FC<EditorProps> = ({ initialValue = '', name, placeholder = 'Enter some text', label, description, helper, rules }) => {
   const { fieldState: { error }, formState: { isValid, isDirty, isSubmitting } } = useController({ name, rules })
   const [preview, setPreview] = useState(false)
-  console.log('#Formstate', isValid, isDirty)
   return (
     <div className='card card-compact card-bordered border-base-300  overflow-hidden w-full'>
       <div className='form-control'>
@@ -62,5 +61,5 @@ export const MDTextArea: React.FC<EditorProps> = ({ initialValue = '', name, pla
 }
 
 export const MarkdownEditor = dynamic<MarkdownEditorProps>(async () => await import('@/components/editor/MarkdownEditor').then(
-  module => module.MarkdownEditor), { ssr: false }
+  module => module.MarkdownEditor), { ssr: true }
 )