create-nextjs-cms 0.8.10 → 0.9.1

package/templates/default/components/form/inputs/PhotoFormInput.tsx

@@ -1,16 +1,24 @@
-import React, { useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
 import FormInputElement from '@/components/form/FormInputElement'
 import ProtectedImage from '@/components/ProtectedImage'
 import Image from 'next/image'
 import useModal from '@/hooks/useModal'
-import { ChevronRight, InfoIcon, Trash2Icon, UploadIcon, X } from 'lucide-react'
+import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { PhotoFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 
-export default function PhotoFormInput({ input, sectionName }: { input: PhotoFieldClientConfig; sectionName: string }) {
+export default function PhotoFormInput({
+    input,
+    sectionName,
+    submitSuccessCount = 0,
+}: {
+    input: PhotoFieldClientConfig
+    sectionName: string
+    submitSuccessCount?: number
+}) {
     const t = useI18n()
     const { control } = useFormContext()
     const {
@@ -25,7 +33,34 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
     const [fileName, setFileName] = useState(t('noFileSelected'))
     const fileInputContainerRef = useRef<HTMLDivElement>(null)
     const [image, setImage] = useState<string | null>(null)
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const [markedForDeletion, setMarkedForDeletion] = useState(false)
+    const handledSubmitSuccessCountRef = useRef(0)
+    const { setModal } = useModal()
+
+    const clearSelectedFile = useCallback(() => {
+        setFileName(t('noFileSelected'))
+        setImage(null)
+        field.onChange(undefined)
+        if (fileInputContainerRef.current?.firstChild) {
+            ;(fileInputContainerRef.current.firstChild as HTMLInputElement).value = ''
+        }
+    }, [field.onChange, t])
+
+    useEffect(() => {
+        return () => {
+            if (image?.startsWith('blob:')) {
+                URL.revokeObjectURL(image)
+            }
+        }
+    }, [image])
+
+    useEffect(() => {
+        if (!submitSuccessCount || handledSubmitSuccessCountRef.current === submitSuccessCount) return
+
+        handledSubmitSuccessCountRef.current = submitSuccessCount
+        setMarkedForDeletion(false)
+        clearSelectedFile()
+    }, [clearSelectedFile, submitSuccessCount])
 
     const onImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         if (event.target.files && event.target.files[0]) {
@@ -52,7 +87,16 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
         />
     )
 
-    const handleImageDelete = () => {}
+    const handleImageDelete = () => {
+        setMarkedForDeletion(true)
+        clearSelectedFile()
+        setModal(null)
+    }
+
+    const handleUndoDeletion = () => {
+        setMarkedForDeletion(false)
+    }
+
     return (
         <FormInputElement
             validationError={error}
@@ -61,6 +105,13 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
             label={input.label}
             required={input.required}
         >
+            {markedForDeletion && input.value ? (
+                <input
+                    type='hidden'
+                    name='__removedFile'
+                    value={JSON.stringify({ fieldName: input.name, fileName: input.value })}
+                />
+            ) : null}
             <Card className='flex max-w-full flex-col'>
                 <CardHeader>
                     <CardTitle className='flex flex-wrap content-center items-center gap-1.5'>
@@ -99,119 +150,124 @@ export default function PhotoFormInput({ input, sectionName }: { input: PhotoFie
                             </div>
                         ) : null}
                     </div>
-                    <div className='flex flex-col gap-4'>
-                        {input.value ? protectedImage : null}
-                        {image ? (
-                            <div className='relative flex items-center'>
-                                <ChevronRight fontSize='large' />
-                                <div className='relative h-[150px] w-[150px]'>
-                                    <X
-                                        className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
-                                        onClick={() => {
-                                            setImage(null)
-                                            setFileName(t('noFileSelected'))
-                                            field.onChange(undefined)
-                                            if (fileInputContainerRef.current) {
-                                                /**
-                                                 * Clear the child input value
-                                                 */
+                    {markedForDeletion ? (
+                        <div className='flex items-center gap-3 rounded border border-amber-400 bg-amber-50 p-3 dark:border-amber-600 dark:bg-amber-950'>
+                            <span className='text-sm text-amber-800 dark:text-amber-200'>
+                                {t('photoMarkedForDeletion')}
+                            </span>
+                            <button
+                                type='button'
+                                className='flex items-center gap-1 text-sm font-medium text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300'
+                                onClick={handleUndoDeletion}
+                            >
+                                <Undo2Icon size={14} /> {t('undo')}
+                            </button>
+                        </div>
+                    ) : (
+                        <>
+                            <div className='flex flex-col gap-4'>
+                                {input.value ? protectedImage : null}
+                                {image ? (
+                                    <div className='relative flex items-center'>
+                                        <ChevronRight fontSize='large' />
+                                        <div className='relative h-[150px] w-[150px]'>
+                                            <X
+                                                className='absolute -right-3 -top-3 z-10 cursor-pointer rounded-full border-2 border-gray-500 bg-white p-1'
+                                                onClick={clearSelectedFile}
+                                            />
+                                            <Image
+                                                className='mb-4 rounded p-1 ring-3 ring-green-600'
+                                                src={image}
+                                                alt={t('newImage') as string}
+                                                fill={true}
+                                                style={{
+                                                    objectFit: 'contain',
+                                                }}
+                                            />
+                                        </div>
+                                    </div>
+                                ) : null}
+                            </div>
+                            <div ref={fileInputContainerRef}>
+                                <input
+                                    type='file'
+                                    className='hidden'
+                                    name={field.name}
+                                    ref={field.ref}
+                                    onChange={(e) => {
+                                        onImageChange(e)
+                                        if (!input.value) {
+                                            field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
+                                        }
+                                    }}
+                                />
+                            </div>
+                            <div className='flex flex-col items-center gap-2 md:flex-row'>
+                                <div className='flex w-full flex-col'>
+                                    {[false, 'false', 0].includes(input.required) &&
+                                    !['', null, undefined].includes(input.value) ? (
+                                        <div className='w-[400px] max-w-full'>
+                                            <button
+                                                type='button'
+                                                className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
+                                                onClick={() => {
+                                                    setModal({
+                                                        title: t('deletePhoto'),
+                                                        body: (
+                                                            <div className='p-4'>
+                                                                <div className='flex flex-col gap-4'>
+                                                                    <div>{t('deletePhotoText')}</div>
+                                                                    <div className='flex gap-2'>
+                                                                        <button
+                                                                            className='rounded bg-green-600 px-2 py-1 text-white'
+                                                                            onClick={handleImageDelete}
+                                                                        >
+                                                                            {t('yes')}
+                                                                        </button>
+                                                                        <button
+                                                                            className='rounded bg-red-800 px-2 py-1 text-white'
+                                                                            onClick={() => {
+                                                                                setModal(null)
+                                                                            }}
+                                                                        >
+                                                                            {t('no')}
+                                                                        </button>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        ),
+                                                        headerColor: 'bg-red-700',
+                                                        titleColor: 'text-white',
+                                                        lang: 'en',
+                                                    })
+                                                }}
+                                            >
+                                                <Trash2Icon size={20} /> {t('delete')}
+                                            </button>
+                                        </div>
+                                    ) : null}
+                                    <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
+                                        <button
+                                            type='button'
+                                            className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
+                                            onClick={() => {
                                                 if (fileInputContainerRef.current?.firstChild) {
                                                     ;(
                                                         fileInputContainerRef.current.firstChild as HTMLInputElement
-                                                    ).value = ''
+                                                    ).click()
                                                 }
-                                            }
-                                        }}
-                                    />
-                                    <Image
-                                        className='mb-4 rounded p-1 ring-3 ring-green-600'
-                                        src={image}
-                                        alt={t('newImage') as string}
-                                        fill={true}
-                                        style={{
-                                            objectFit: 'contain',
-                                        }}
-                                    />
+                                            }}
+                                        >
+                                            <UploadIcon size={20} /> {t('selectFile')}
+                                        </button>
+                                        <div className='flex w-full ps-2'>
+                                            <div className='break-all'>{fileName}</div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
-                        ) : null}
-                    </div>
-                    <div ref={fileInputContainerRef}>
-                        <input
-                            type='file'
-                            className='hidden'
-                            name={field.name}
-                            ref={field.ref}
-                            onChange={(e) => {
-                                onImageChange(e)
-                                if (!input.value) {
-                                    field.onChange(e.target?.files?.length ? e.target.files[0] : undefined)
-                                }
-                            }}
-                        />
-                    </div>
-                    <div className='flex flex-col items-center gap-2 md:flex-row'>
-                        <div className='flex w-full flex-col'>
-                            {[false, 'false', 0].includes(input.required) &&
-                            !['', null, undefined].includes(input.value) ? (
-                                <div className='w-[400px] max-w-full'>
-                                    <button
-                                        type='button'
-                                        className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-red-600 to-amber-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-red-400 hover:to-amber-400'
-                                        onClick={() => {
-                                            setModal({
-                                                title: t('deletePhoto'),
-                                                body: (
-                                                    <div className='p-4'>
-                                                        <div className='flex flex-col gap-4'>
-                                                            <div>{t('deletePhotoText')}</div>
-                                                            <div className='flex gap-2'>
-                                                                <button
-                                                                    className='rounded bg-green-600 px-2 py-1 text-white'
-                                                                    onClick={handleImageDelete}
-                                                                >
-                                                                    {t('yes')}
-                                                                </button>
-                                                                <button
-                                                                    className='rounded bg-red-800 px-2 py-1 text-white'
-                                                                    onClick={() => {
-                                                                        setModal(null)
-                                                                    }}
-                                                                >
-                                                                    {t('no')}
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                ),
-                                                headerColor: 'bg-red-700',
-                                                titleColor: 'text-white',
-                                                lang: 'en',
-                                            })
-                                        }}
-                                    >
-                                        <Trash2Icon size={20} /> {t('delete')}
-                                    </button>
-                                </div>
-                            ) : null}
-                            <div className='dark:border-neutral my-2 flex w-[400px] max-w-full flex-col gap-1 rounded-lg border border-gray-400 p-2'>
-                                <button
-                                    type='button'
-                                    className='flex w-full flex-wrap items-center justify-center gap-1.5 rounded border bg-linear-to-r from-blue-700 to-sky-500 p-2 text-center text-sm font-bold uppercase text-white drop-shadow-sm hover:from-blue-500 hover:to-sky-400'
-                                    onClick={() => {
-                                        if (fileInputContainerRef.current?.firstChild) {
-                                            ;(fileInputContainerRef.current.firstChild as HTMLInputElement).click()
-                                        }
-                                    }}
-                                >
-                                    <UploadIcon size={20} /> {t('selectFile')}
-                                </button>
-                                <div className='flex w-full ps-2'>
-                                    <div className='break-all'>{fileName}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                        </>
+                    )}
                 </CardContent>
             </Card>
         </FormInputElement>

package/templates/default/components/form/inputs/RichTextFormInput.tsx

@@ -5,6 +5,7 @@ import FormInputElement from '@/components/form/FormInputElement'
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
 import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useFormContext } from 'react-hook-form'
+import { useLocale } from '@/components/form/ContentLocaleContext'
 
 export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
     const { setValue, register, formState } = useFormContext()
@@ -13,6 +14,7 @@ export default function RichTextFormInput({ input }: { input: RichTextFieldClien
     const value = input.value ? input.value : ''
     const [initialValue, setInitialValue] = useState('')
     const [key, setKey] = useState(0) // Step 1: Add key state
+    const locale = useLocale()
     // const [editorPhotos, setEditorPhotos] = useState<string[]>([])
     // const { theme } = useTheme()
     const axiosPrivate = useAxiosPrivate()
@@ -114,6 +116,7 @@ export default function RichTextFormInput({ input }: { input: RichTextFieldClien
                     plugins: plugins,
                     toolbar: toolbar,
 
+                    directionality: input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr'),
                     content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
                     // skin: theme === 'light' ? 'oxide' : 'oxide-dark',
                     // content_css: theme === 'light' ? 'default' : 'dark',

package/templates/default/components/form/inputs/SelectFormInput.tsx

@@ -23,7 +23,7 @@ export default function SelectFormInput({
 }) {
     const t = useI18n()
     const session = useSession()
-    const locale = session?.data?.user?.locale
+    const locale = session?.data?.user?.language
     
     /**
      * Create options array with translated placeholder option.

package/templates/default/components/form/inputs/TagsFormInput.tsx

@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { X } from 'lucide-react'
 import { useState, useRef, useEffect, useCallback } from 'react'
+import { useSearchParams } from 'next/navigation'
 import { cn } from '@/lib/utils'
 import { trpc } from '@/app/_trpc/client'
 
@@ -16,7 +17,10 @@ export default function TagsFormInput({
     input: TagsFieldClientConfig
     sectionName: string
 }) {
-    const t = useI18n()
+    const t = useI18n()
+    const searchParams = useSearchParams()
+    const localeParam = searchParams.get('locale')
+    const locale = input.localized ? (localeParam?.trim() ? localeParam : undefined) : undefined
     const { control } = useFormContext()
     const {
         field,
@@ -45,7 +49,7 @@ export default function TagsFormInput({
     }, [inputValue, input.hasAutoCompletion])
 
     const { data: suggestions } = trpc.fields.tagsAutoComplete.useQuery(
-        { sectionName, fieldName: input.name, query: debouncedQuery },
+        { sectionName, fieldName: input.name, query: debouncedQuery, locale },
         { enabled: input.hasAutoCompletion && debouncedQuery.length >= 1 },
     )
 

package/templates/default/components/form/inputs/TextFormInput.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import FormInputElement from '@/components/form/FormInputElement'
 import type { TextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController } from 'react-hook-form'
+import { useLocale } from '@/components/form/ContentLocaleContext'
 
 export default function TextFormInput({
     input,
@@ -22,6 +23,7 @@ export default function TextFormInput({
         defaultValue: input.value ?? undefined,
         disabled: disabled,
     })
+    const locale = useLocale()
 
     return (
         <FormInputElement
@@ -34,6 +36,7 @@ export default function TextFormInput({
             <input
                 placeholder={input.placeholder ? input.placeholder : input.label}
                 type='text'
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
                 readOnly={disabled}
                 disabled={field.disabled}
                 name={field.name}

package/templates/default/components/form/inputs/TextareaFormInput.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import FormInputElement from '@/components/form/FormInputElement'
 import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useController, useFormContext } from 'react-hook-form'
+import { useLocale } from '@/components/form/ContentLocaleContext'
 
 export default function TextareaFormInput({
     input,
@@ -22,6 +23,7 @@ export default function TextareaFormInput({
         defaultValue: defaultValue ?? input.value ?? undefined,
         disabled: input.readonly,
     })
+    const locale = useLocale()
 
     return (
         <FormInputElement
@@ -33,6 +35,7 @@ export default function TextareaFormInput({
         >
             <textarea
                 placeholder={input.label}
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
                 readOnly={input.readonly}
                 disabled={field.disabled}
                 name={field.name}

package/templates/default/components/{locale-dropdown.tsx → language-dropdown.tsx}

@@ -1,74 +1,74 @@
-'use client'
-
-import { useCallback, useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { trpc } from '@/app/_trpc/client'
-import { useSession, refreshSession } from 'nextjs-cms/auth/react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { setLoginPageLocaleCookie } from 'nextjs-cms/translations'
-import { useToast } from '@/components/ui/use-toast'
-import LocalePicker from './locale-picker'
-
-/**
- * Locale dropdown for the app Navbar (authenticated).
- * Persists via accountSettings.updateLocale → admins table → auth refresh.
- * Also writes nextjs-cms-locale cookie so the login page shows the same locale after logout.
- */
-export default function LocaleDropdown() {
-    const t = useI18n()
-    const router = useRouter()
-    const { toast } = useToast()
-    const { data: session } = useSession()
-    const i18nQuery = trpc.config.getI18n.useQuery()
-    const updateLocale = trpc.accountSettings.updateLocale.useMutation({
-        onSuccess: async (_data, variables) => {
-            setLoginPageLocaleCookie(variables.locale)
-            try {
-                const res = await fetch('/api/auth/refresh', { credentials: 'include' })
-                const data = await res.json()
-                if (res.ok && data.session) {
-                    await refreshSession(data.session)
-                    router.refresh()
-                } else {
-                    router.refresh()
-                }
-            } catch {
-                router.refresh()
-            } finally {
-                setPendingLocale(null)
-            }
-        },
-        onError: () => {
-            setPendingLocale(null)
-            toast({
-                variant: 'destructive',
-                title: t('error'),
-                description: t('somethingWentWrong'),
-            })
-        },
-    })
-    const [pendingLocale, setPendingLocale] = useState<string | null>(null)
-
-    const supported = i18nQuery.data?.supportedLanguages ?? []
-    const currentLocale = session?.user?.locale ?? i18nQuery.data?.fallbackLanguage ?? 'en'
-
-    const handleSelect = useCallback(
-        (locale: string) => {
-            if (locale === currentLocale) return
-            setPendingLocale(locale)
-            updateLocale.mutate({ locale })
-        },
-        [currentLocale, updateLocale],
-    )
-
-    return (
-        <LocalePicker
-            supportedLanguages={supported}
-            currentLocale={currentLocale}
-            onLocaleChange={handleSelect}
-            disabled={updateLocale.isPending}
-            loading={updateLocale.isPending && pendingLocale != null}
-            ariaLabel={t('language')}
-        />
-    )
-}
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { trpc } from '@/app/_trpc/client'
+import { useSession, refreshSession } from 'nextjs-cms/auth/react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { setLoginPageLanguageCookie } from 'nextjs-cms/translations'
+import { useToast } from '@/components/ui/use-toast'
+import LanguagePicker from './language-picker'
+
+/**
+ * Language dropdown for the app Navbar (authenticated).
+ * Persists via accountSettings.updateLanguage → admins table → auth refresh.
+ * Also writes nextjs-cms-locale cookie so the login page shows the same language after logout.
+ */
+export default function LanguageDropdown() {
+    const t = useI18n()
+    const router = useRouter()
+    const { toast } = useToast()
+    const { data: session } = useSession()
+    const i18nQuery = trpc.config.getI18n.useQuery()
+    const updateLanguage = trpc.accountSettings.updateLanguage.useMutation({
+        onSuccess: async (_data, variables) => {
+            setLoginPageLanguageCookie(variables.language)
+            try {
+                const res = await fetch('/api/auth/refresh', { credentials: 'include' })
+                const data = await res.json()
+                if (res.ok && data.session) {
+                    await refreshSession(data.session)
+                    router.refresh()
+                } else {
+                    router.refresh()
+                }
+            } catch {
+                router.refresh()
+            } finally {
+                setPendingLanguage(null)
+            }
+        },
+        onError: () => {
+            setPendingLanguage(null)
+            toast({
+                variant: 'destructive',
+                title: t('error'),
+                description: t('somethingWentWrong'),
+            })
+        },
+    })
+    const [pendingLanguage, setPendingLanguage] = useState<string | null>(null)
+
+    const supported = i18nQuery.data?.supportedLanguages ?? []
+    const currentLanguage = session?.user?.language ?? i18nQuery.data?.fallbackLanguage ?? 'en'
+
+    const handleSelect = useCallback(
+        (language: string) => {
+            if (language === currentLanguage) return
+            setPendingLanguage(language)
+            updateLanguage.mutate({ language })
+        },
+        [currentLanguage, updateLanguage],
+    )
+
+    return (
+        <LanguagePicker
+            supportedLanguages={supported}
+            currentLanguage={currentLanguage}
+            onLanguageChange={handleSelect}
+            disabled={updateLanguage.isPending}
+            loading={updateLanguage.isPending && pendingLanguage != null}
+            ariaLabel={t('language')}
+        />
+    )
+}