create-nextjs-cms 0.8.9 → 0.9.0

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

@@ -1,131 +1,131 @@
-'use client'
-
-import React, { useCallback, useEffect, useRef } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
-import { useFormContext, useController, useWatch } from 'react-hook-form'
-import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'
-import { Link2 } from 'lucide-react'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-/**
- * Convert a string to a URL-friendly slug (for real-time input).
- * - Converts to lowercase
- * - Replaces spaces with hyphens
- * - Removes special characters (keeps letters from any language, numbers, and hyphens)
- * - Collapses multiple consecutive hyphens into one
- * - Keeps trailing hyphen (user might still be typing)
- */
-function toSlugLive(value: string): string {
-    return value
-        .toLowerCase()
-        .replace(/\s+/g, '-') // Replace spaces with hyphens
-        .replace(/[^\p{L}\p{N}-]/gu, '') // Remove special characters (keep Unicode letters/numbers)
-        .replace(/-+/g, '-') // Collapse multiple hyphens
-        .replace(/^-/, '') // Remove leading hyphen only
-}
-
-/**
- * Normalize a slug (for blur/final value).
- * Same as toSlugLive but also trims and removes trailing hyphens.
- */
-function toSlugFinal(value: string): string {
-    return toSlugLive(value.trim()).replace(/-$/, '') // Remove trailing hyphen
-}
-
-export default function SlugFormInput({
-    input,
-    direction,
-    disabled = false,
-}: {
-    input: SlugFieldClientConfig
-    direction?: 'row' | 'col'
-    disabled?: boolean
-}) {
-    const t = useI18n()
-    const { control } = useFormContext()
-    const {
-        field,
-        fieldState: { error },
-    } = useController({
-        name: input.name,
-        control,
-        defaultValue: input.value ?? '',
-        disabled: disabled,
-    })
-
-    // Watch the source field value
-    const sourceFieldValue = useWatch({
-        control,
-        name: input.forFieldName,
-        defaultValue: '',
-    })
-
-    // Track previous source value to only update when it actually changes
-    const previousSourceValueRef = useRef<string>(sourceFieldValue ?? '')
-
-    // Auto-generate slug from source field when it changes
-    useEffect(() => {
-        const currentSourceValue = sourceFieldValue ?? ''
-
-        // Only update if the source field value actually changed
-        if (currentSourceValue !== previousSourceValueRef.current) {
-            previousSourceValueRef.current = currentSourceValue
-
-            if (currentSourceValue) {
-                const newSlug = toSlugFinal(currentSourceValue)
-                field.onChange(newSlug)
-            } else {
-                field.onChange('')
-            }
-        }
-    }, [sourceFieldValue, field])
-
-    // Handle manual changes to the slug field
-    const handleChange = useCallback(
-        (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = e.target.value
-            // Apply slug normalization in real-time
-            field.onChange(toSlugLive(newValue))
-        },
-        [field],
-    )
-
-    // Handle blur - finalize the slug value (remove trailing hyphens)
-    const handleBlur = useCallback(() => {
-        field.onBlur()
-        if (field.value) {
-            const finalSlug = toSlugFinal(field.value)
-            if (finalSlug !== field.value) {
-                field.onChange(finalSlug)
-            }
-        }
-    }, [field])
-
-    return (
-        <FormInputElement
-            validationError={error}
-            value={input.value}
-            readonly={input.readonly}
-            label={input.label}
-            required={input.required}
-        >
-            <InputGroup className='bg-input'>
-                <InputGroupAddon align='inline-start' title={t('autoGeneratedFromLinkedField') as string}>
-                    <Link2 className='h-4 w-4' />
-                </InputGroupAddon>
-                <InputGroupInput
-                    placeholder={input.placeholder ? input.placeholder : input.label}
-                    type='text'
-                    readOnly={disabled}
-                    disabled={field.disabled}
-                    name={field.name}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    value={field.value ?? ''}
-                    ref={field.ref}
-                />
-            </InputGroup>
-        </FormInputElement>
-    )
-}
+'use client'
+
+import React, { useCallback, useEffect, useRef } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
+import { useFormContext, useController, useWatch } from 'react-hook-form'
+import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'
+import { Link2 } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+/**
+ * Convert a string to a URL-friendly slug (for real-time input).
+ * - Converts to lowercase
+ * - Replaces spaces with hyphens
+ * - Removes special characters (keeps letters from any language, numbers, and hyphens)
+ * - Collapses multiple consecutive hyphens into one
+ * - Keeps trailing hyphen (user might still be typing)
+ */
+function toSlugLive(value: string): string {
+    return value
+        .toLowerCase()
+        .replace(/\s+/g, '-') // Replace spaces with hyphens
+        .replace(/[^\p{L}\p{N}-]/gu, '') // Remove special characters (keep Unicode letters/numbers)
+        .replace(/-+/g, '-') // Collapse multiple hyphens
+        .replace(/^-/, '') // Remove leading hyphen only
+}
+
+/**
+ * Normalize a slug (for blur/final value).
+ * Same as toSlugLive but also trims and removes trailing hyphens.
+ */
+function toSlugFinal(value: string): string {
+    return toSlugLive(value.trim()).replace(/-$/, '') // Remove trailing hyphen
+}
+
+export default function SlugFormInput({
+    input,
+    direction,
+    disabled = false,
+}: {
+    input: SlugFieldClientConfig
+    direction?: 'row' | 'col'
+    disabled?: boolean
+}) {
+    const t = useI18n()
+    const { control } = useFormContext()
+    const {
+        field,
+        fieldState: { error },
+    } = useController({
+        name: input.name,
+        control,
+        defaultValue: input.value ?? '',
+        disabled: disabled,
+    })
+
+    // Watch the source field value
+    const sourceFieldValue = useWatch({
+        control,
+        name: input.forFieldName,
+        defaultValue: '',
+    })
+
+    // Track previous source value to only update when it actually changes
+    const previousSourceValueRef = useRef<string>(sourceFieldValue ?? '')
+
+    // Auto-generate slug from source field when it changes
+    useEffect(() => {
+        const currentSourceValue = sourceFieldValue ?? ''
+
+        // Only update if the source field value actually changed
+        if (currentSourceValue !== previousSourceValueRef.current) {
+            previousSourceValueRef.current = currentSourceValue
+
+            if (currentSourceValue) {
+                const newSlug = toSlugFinal(currentSourceValue)
+                field.onChange(newSlug)
+            } else {
+                field.onChange('')
+            }
+        }
+    }, [sourceFieldValue, field])
+
+    // Handle manual changes to the slug field
+    const handleChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement>) => {
+            const newValue = e.target.value
+            // Apply slug normalization in real-time
+            field.onChange(toSlugLive(newValue))
+        },
+        [field],
+    )
+
+    // Handle blur - finalize the slug value (remove trailing hyphens)
+    const handleBlur = useCallback(() => {
+        field.onBlur()
+        if (field.value) {
+            const finalSlug = toSlugFinal(field.value)
+            if (finalSlug !== field.value) {
+                field.onChange(finalSlug)
+            }
+        }
+    }, [field])
+
+    return (
+        <FormInputElement
+            validationError={error}
+            value={input.value}
+            readonly={input.readonly}
+            label={input.label}
+            required={input.required}
+        >
+            <InputGroup className='bg-input'>
+                <InputGroupAddon align='inline-start' title={t('autoGeneratedFromLinkedField') as string}>
+                    <Link2 className='h-4 w-4' />
+                </InputGroupAddon>
+                <InputGroupInput
+                    placeholder={input.placeholder ? input.placeholder : input.label}
+                    type='text'
+                    readOnly={disabled}
+                    disabled={field.disabled}
+                    name={field.name}
+                    onChange={handleChange}
+                    onBlur={handleBlur}
+                    value={field.value ?? ''}
+                    ref={field.ref}
+                />
+            </InputGroup>
+        </FormInputElement>
+    )
+}