create-nextjs-cms 0.8.9 → 0.9.0

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

@@ -1,135 +1,138 @@
-import React, { useRef, useState } from 'react'
-import { Editor } from '@tinymce/tinymce-react'
-import FormInputElement from '@/components/form/FormInputElement'
-// import { useTheme } from 'next-themes'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
-import { FieldError, useFormContext } from 'react-hook-form'
-
-export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
-    const { setValue, register, formState } = useFormContext()
-    register(input.name)
-    const editorRef = useRef(null)
-    const value = input.value ? input.value : ''
-    const [initialValue, setInitialValue] = useState('')
-    const [key, setKey] = useState(0) // Step 1: Add key state
-    // const [editorPhotos, setEditorPhotos] = useState<string[]>([])
-    // const { theme } = useTheme()
-    const axiosPrivate = useAxiosPrivate()
-
-    /*useEffect(() => {
-        // Step 2: Update the key when the theme changes
-        setKey((prevKey) => prevKey + 1)
-    }, [theme])*/
-
-    const image_upload_handler = (blobInfo: any, progress: any) =>
-        new Promise<string>(async (resolve, reject) => {
-            const formData = new FormData()
-            formData.append('photo', blobInfo.blob(), blobInfo.filename())
-            formData.append('sectionName', 'editor')
-            formData.append('itemId', '123')
-
-            axiosPrivate
-                .post('/editor/photo', Object.fromEntries(formData.entries()), {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                })
-                .then((res) => {
-                    // resolve(getPublicPhotoUrl(res.data.name, 'editor', 'large'))
-                    resolve(res.data)
-                    return
-                })
-                .catch((error) => {
-                    if (error.response) {
-                        reject({ message: 'Error: ' + error.response.data.error, remove: true })
-                    } else if (error.request) {
-                        reject({ message: 'Error: ' + error.request, remove: true })
-                    } else {
-                        reject({ message: 'Error: ' + error.message, remove: true })
-                    }
-                })
-        })
-
-    const plugins = [
-        'directionality ',
-        'advlist',
-        'autolink',
-        'lists',
-        'link',
-        'charmap',
-        'anchor',
-        'searchreplace',
-        'visualblocks',
-        'code',
-        'fullscreen',
-        'insertdatetime',
-        'table',
-        'preview',
-        'help',
-        'wordcount',
-    ]
-
-    let toolbar =
-        'undo redo | bold italic underline strikethrough formatselect | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment | footnotes '
-    if (input.allowMedia) {
-        plugins.push('media', 'image')
-        toolbar += ' | insertfile image media'
-    }
-
-    return (
-        <FormInputElement
-            validationError={formState.errors[input.name] as FieldError}
-            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <Editor
-                api-key='no-api-key'
-                licenseKey='gpl'
-                // TODO: Is this expensive?
-                onEditorChange={(content) => {
-                    setValue(input.name, content, { shouldValidate: true })
-                }}
-                key={key} // Step 3: Pass the key as a prop
-                /*
-                onEditorChange={(content, editor) => {
-                    console.log('Content was updated:', content)
-                    setValue(content)
-                }}*/
-                // onChange={(e) => setValue(e.target.getContent())}
-                tinymceScriptSrc={'/tinymce/tinymce.min.js?v=1.1'}
-                onInit={(evt, editor) => {
-                    // @ts-ignore
-                    editorRef.current = editor
-                    setInitialValue(value ? value : input.value ? input.value : '')
-                }}
-                textareaName={input.name}
-                initialValue={initialValue}
-                init={{
-                    promotion: false,
-                    height: 500,
-                    menubar: 'file edit view insert format tools table tc help',
-                    plugins: plugins,
-                    toolbar: toolbar,
-
-                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
-                    // skin: theme === 'light' ? 'oxide' : 'oxide-dark',
-                    // content_css: theme === 'light' ? 'default' : 'dark',
-                    skin: 'oxide-dark',
-                    content_css: 'dark',
-                    relative_urls: false,
-                    remove_script_host: false,
-                    convert_urls: true,
-                    extended_valid_elements: 'iframe[src|width|height|name|align|class|style],*[id|class|style]',
-                    // valid_children: '+body[style],+div[*],+p[*]', // Allow any element to be a child of body, div, and p elements
-                    // valid_elements: '*[*]', // Allow all elements and attributes
-                    images_file_types: 'jpg,png,webp',
-                    block_unsupported_drop: true,
-                    images_upload_handler: image_upload_handler,
-                }}
-            />
-        </FormInputElement>
-    )
-}
+import React, { useRef, useState } from 'react'
+import { Editor } from '@tinymce/tinymce-react'
+import FormInputElement from '@/components/form/FormInputElement'
+// import { useTheme } from 'next-themes'
+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()
+    register(input.name)
+    const editorRef = useRef(null)
+    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()
+
+    /*useEffect(() => {
+        // Step 2: Update the key when the theme changes
+        setKey((prevKey) => prevKey + 1)
+    }, [theme])*/
+
+    const image_upload_handler = (blobInfo: any, progress: any) =>
+        new Promise<string>(async (resolve, reject) => {
+            const formData = new FormData()
+            formData.append('photo', blobInfo.blob(), blobInfo.filename())
+            formData.append('sectionName', 'editor')
+            formData.append('itemId', '123')
+
+            axiosPrivate
+                .post('/editor/photo', Object.fromEntries(formData.entries()), {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                })
+                .then((res) => {
+                    // resolve(getPublicPhotoUrl(res.data.name, 'editor', 'large'))
+                    resolve(res.data)
+                    return
+                })
+                .catch((error) => {
+                    if (error.response) {
+                        reject({ message: 'Error: ' + error.response.data.error, remove: true })
+                    } else if (error.request) {
+                        reject({ message: 'Error: ' + error.request, remove: true })
+                    } else {
+                        reject({ message: 'Error: ' + error.message, remove: true })
+                    }
+                })
+        })
+
+    const plugins = [
+        'directionality ',
+        'advlist',
+        'autolink',
+        'lists',
+        'link',
+        'charmap',
+        'anchor',
+        'searchreplace',
+        'visualblocks',
+        'code',
+        'fullscreen',
+        'insertdatetime',
+        'table',
+        'preview',
+        'help',
+        'wordcount',
+    ]
+
+    let toolbar =
+        'undo redo | bold italic underline strikethrough formatselect | fontfamily fontsize blocks | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor permanentpen formatpainter removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | pageembed template link anchor codesample | a11ycheck ltr rtl | showcomments addcomment | footnotes '
+    if (input.allowMedia) {
+        plugins.push('media', 'image')
+        toolbar += ' | insertfile image media'
+    }
+
+    return (
+        <FormInputElement
+            validationError={formState.errors[input.name] as FieldError}
+            value={<div style={{ maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all' }}>{input.value}</div>}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <Editor
+                api-key='no-api-key'
+                licenseKey='gpl'
+                // TODO: Is this expensive?
+                onEditorChange={(content) => {
+                    setValue(input.name, content, { shouldValidate: true })
+                }}
+                key={key} // Step 3: Pass the key as a prop
+                /*
+                onEditorChange={(content, editor) => {
+                    console.log('Content was updated:', content)
+                    setValue(content)
+                }}*/
+                // onChange={(e) => setValue(e.target.getContent())}
+                tinymceScriptSrc={'/tinymce/tinymce.min.js?v=1.1'}
+                onInit={(evt, editor) => {
+                    // @ts-ignore
+                    editorRef.current = editor
+                    setInitialValue(value ? value : input.value ? input.value : '')
+                }}
+                textareaName={input.name}
+                initialValue={initialValue}
+                init={{
+                    promotion: false,
+                    height: 500,
+                    menubar: 'file edit view insert format tools table tc help',
+                    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',
+                    skin: 'oxide-dark',
+                    content_css: 'dark',
+                    relative_urls: false,
+                    remove_script_host: false,
+                    convert_urls: true,
+                    extended_valid_elements: 'iframe[src|width|height|name|align|class|style],*[id|class|style]',
+                    // valid_children: '+body[style],+div[*],+p[*]', // Allow any element to be a child of body, div, and p elements
+                    // valid_elements: '*[*]', // Allow all elements and attributes
+                    images_file_types: 'jpg,png,webp',
+                    block_unsupported_drop: true,
+                    images_upload_handler: image_upload_handler,
+                }}
+            />
+        </FormInputElement>
+    )
+}

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

@@ -1,175 +1,175 @@
-import React, { useEffect, useState, useMemo } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import SelectBox from '@/components/SelectBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import { useAutoAnimate } from '@formkit/auto-animate/react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { useSession } from 'nextjs-cms/auth/react'
-import { trpc } from '@/app/_trpc/client'
-import { SelectFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
-import { ConditionalFields } from '@/components/ConditionalFields'
-import { useController, useFormContext } from 'react-hook-form'
-
-export default function SelectFormInput({
-    input,
-    sectionName,
-    refetch,
-    level = 1,
-}: {
-    input: SelectFieldClientConfig
-    sectionName: string
-    refetch?: any
-    level?: number
-}) {
-    const t = useI18n()
-    const session = useSession()
-    const locale = session?.data?.user?.locale
-    
-    /**
-     * Create options array with translated placeholder option.
-     * This ensures the placeholder is always up-to-date when the language changes.
-     */
-    const optionsWithPlaceholder = useMemo(() => {
-        if (!input.options) return []
-        
-        // Filter out any existing placeholder options (value === undefined)
-        const optionsWithoutPlaceholder = input.options.filter((option) => option.value !== undefined)
-        
-        // Add the translated placeholder option at the beginning
-        // @ts-ignore - This is a type-hack to add the placeholder `select` option with undefined value
-        return [{ value: undefined, label: t('select') as string }, ...optionsWithoutPlaceholder]
-    }, [input.options, t, locale])
-
-    const depth = input.section ? input.section.depth : 1
-    const [parent] = useAutoAnimate(/* optional config */)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [value, setValue] = useState<SelectOption | undefined>(getValue(input.value))
-    const [child, setChild] = useState<{
-        input: SelectFieldClientConfig
-        level: number
-    } | null>(null)
-
-    const childrenMutation = trpc.categorySections.getChildren.useMutation({
-        onSuccess: (data) => {
-            if (data && data.options) {
-                const childInput = {
-                    input: {
-                        type: 'select' as const,
-                        required: false,
-                        readonly: false,
-                        conditionalFields: [],
-                        options: data.options,
-                        section: input.section,
-                        label: '|->',
-                        name: input.name,
-                        value:
-                            input.value && Array.isArray(input.value) && input.value[1]
-                                ? input.value.slice(1)
-                                : undefined,
-                        defaultValue: input.value?.[0]?.value ?? undefined,
-                    },
-                    level: data.level,
-                }
-                setChild(childInput)
-            } else {
-                setChild(null)
-            }
-
-            setIsLoading(false)
-        },
-        onError: (error) => {},
-        // console.log('Error', error)
-    })
-
-    function getValue(value: SelectOption[] | undefined): SelectOption | undefined {
-        if (value && !Array.isArray(value)) {
-            return value
-        }
-        if (Array.isArray(value) && value.length > 0) {
-            return value[0]
-        }
-        return undefined
-    }
-
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { invalid, isTouched, isDirty, error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: value?.value,
-    })
-
-    useEffect(() => {
-        setChild(null)
-        if (!input.section || !input.section.name) return
-        if (!value?.value) {
-            return
-        }
-
-        /**
-         * If the depth is less than or equal to 1, return
-         * If the level is greater than or equal to the depth, return
-         */
-        if (depth && (depth <= 1 || level >= depth)) return
-
-        setIsLoading(true)
-        childrenMutation.mutate({
-            parentId: value.value,
-            sectionName: input.section.name,
-            level: level,
-        })
-    }, [value?.value])
-
-    return (
-        <>
-            <FormInputElement validationError={error} label={input.label} required={input.required}>
-                <input
-                    type='hidden'
-                    disabled={field.disabled}
-                    name={field.name}
-                    onBlur={field.onBlur}
-                    ref={field.ref}
-                    value={field.value}
-                />
-                <SelectBox
-                    defaultValue={value?.value ? value?.value.toString() : undefined}
-                    // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
-                    items={optionsWithPlaceholder}
-                    onChange={(value: SelectOption) => {
-                        field.onChange(value.value)
-                        if (value) setValue(value)
-                    }}
-                    classname='w-full shadow-xs'
-                />
-            </FormInputElement>
-            <div ref={parent}>
-                {isLoading && <LoadingSpinners />}
-                {child && (
-                    <div className='ps-4'>
-                        {/* @ts-ignore no validators for child selects */}
-                        <SelectFormInput
-                            sectionName={sectionName}
-                            refetch={() => {
-                                refetch().then(() => {
-                                    setValue(undefined)
-                                })
-                            }}
-                            level={child.level}
-                            input={child.input}
-                        />
-                    </div>
-                )}
-
-                {input.conditionalFields ? (
-                    <ConditionalFields
-                        sectionName={sectionName}
-                        conditionalFields={input.conditionalFields}
-                        value={value?.value}
-                    />
-                ) : null}
-            </div>
-        </>
-    )
-}
+import React, { useEffect, useState, useMemo } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import SelectBox from '@/components/SelectBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { useSession } from 'nextjs-cms/auth/react'
+import { trpc } from '@/app/_trpc/client'
+import { SelectFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
+import { ConditionalFields } from '@/components/ConditionalFields'
+import { useController, useFormContext } from 'react-hook-form'
+
+export default function SelectFormInput({
+    input,
+    sectionName,
+    refetch,
+    level = 1,
+}: {
+    input: SelectFieldClientConfig
+    sectionName: string
+    refetch?: any
+    level?: number
+}) {
+    const t = useI18n()
+    const session = useSession()
+    const locale = session?.data?.user?.language
+    
+    /**
+     * Create options array with translated placeholder option.
+     * This ensures the placeholder is always up-to-date when the language changes.
+     */
+    const optionsWithPlaceholder = useMemo(() => {
+        if (!input.options) return []
+        
+        // Filter out any existing placeholder options (value === undefined)
+        const optionsWithoutPlaceholder = input.options.filter((option) => option.value !== undefined)
+        
+        // Add the translated placeholder option at the beginning
+        // @ts-ignore - This is a type-hack to add the placeholder `select` option with undefined value
+        return [{ value: undefined, label: t('select') as string }, ...optionsWithoutPlaceholder]
+    }, [input.options, t, locale])
+
+    const depth = input.section ? input.section.depth : 1
+    const [parent] = useAutoAnimate(/* optional config */)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [value, setValue] = useState<SelectOption | undefined>(getValue(input.value))
+    const [child, setChild] = useState<{
+        input: SelectFieldClientConfig
+        level: number
+    } | null>(null)
+
+    const childrenMutation = trpc.categorySections.getChildren.useMutation({
+        onSuccess: (data) => {
+            if (data && data.options) {
+                const childInput = {
+                    input: {
+                        type: 'select' as const,
+                        required: false,
+                        readonly: false,
+                        conditionalFields: [],
+                        options: data.options,
+                        section: input.section,
+                        label: '|->',
+                        name: input.name,
+                        value:
+                            input.value && Array.isArray(input.value) && input.value[1]
+                                ? input.value.slice(1)
+                                : undefined,
+                        defaultValue: input.value?.[0]?.value ?? undefined,
+                    },
+                    level: data.level,
+                }
+                setChild(childInput)
+            } else {
+                setChild(null)
+            }
+
+            setIsLoading(false)
+        },
+        onError: (error) => {},
+        // console.log('Error', error)
+    })
+
+    function getValue(value: SelectOption[] | undefined): SelectOption | undefined {
+        if (value && !Array.isArray(value)) {
+            return value
+        }
+        if (Array.isArray(value) && value.length > 0) {
+            return value[0]
+        }
+        return undefined
+    }
+
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { invalid, isTouched, isDirty, error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: value?.value,
+    })
+
+    useEffect(() => {
+        setChild(null)
+        if (!input.section || !input.section.name) return
+        if (!value?.value) {
+            return
+        }
+
+        /**
+         * If the depth is less than or equal to 1, return
+         * If the level is greater than or equal to the depth, return
+         */
+        if (depth && (depth <= 1 || level >= depth)) return
+
+        setIsLoading(true)
+        childrenMutation.mutate({
+            parentId: value.value,
+            sectionName: input.section.name,
+            level: level,
+        })
+    }, [value?.value])
+
+    return (
+        <>
+            <FormInputElement validationError={error} label={input.label} required={input.required}>
+                <input
+                    type='hidden'
+                    disabled={field.disabled}
+                    name={field.name}
+                    onBlur={field.onBlur}
+                    ref={field.ref}
+                    value={field.value}
+                />
+                <SelectBox
+                    defaultValue={value?.value ? value?.value.toString() : undefined}
+                    // @ts-ignore - optionsWithPlaceholder includes placeholder with undefined value
+                    items={optionsWithPlaceholder}
+                    onChange={(value: SelectOption) => {
+                        field.onChange(value.value)
+                        if (value) setValue(value)
+                    }}
+                    classname='w-full shadow-xs'
+                />
+            </FormInputElement>
+            <div ref={parent}>
+                {isLoading && <LoadingSpinners />}
+                {child && (
+                    <div className='ps-4'>
+                        {/* @ts-ignore no validators for child selects */}
+                        <SelectFormInput
+                            sectionName={sectionName}
+                            refetch={() => {
+                                refetch().then(() => {
+                                    setValue(undefined)
+                                })
+                            }}
+                            level={child.level}
+                            input={child.input}
+                        />
+                    </div>
+                )}
+
+                {input.conditionalFields ? (
+                    <ConditionalFields
+                        sectionName={sectionName}
+                        conditionalFields={input.conditionalFields}
+                        value={value?.value}
+                    />
+                ) : null}
+            </div>
+        </>
+    )
+}