feat: improve default slugify utility by triming whitespace first (#14421)

Currently, when you are creating slugs and leave spaces on beggining or
the end, they will be replaced with hyphen, this enhancement avoids
trims unwanted spaces first.

### What?
Utilities for creating slugs from titles

### Why?
Badly created slug with hyphen in the end, when user added title with
space.

### How?
Adding simple `trim()` function before replacing spaces with hyphens

Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: MichalKormanik

examples/draft-preview/src/collections/Pages/hooks/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 const format = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

examples/form-builder/src/utilities/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 const format = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

examples/live-preview/src/collections/Pages/hooks/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 const format = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

examples/localization/src/fields/slug/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 export const formatSlug = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

examples/localization/src/hooks/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 const format = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

packages/payload/src/utilities/slugify.ts

@@ -1,5 +1,6 @@
 export const slugify = (val?: string): string | undefined =>
   val
-    ?.replace(/ /g, '-')
+    ?.trim()
+    .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()

test/live-preview/utilities/formatSlug.ts

@@ -2,6 +2,7 @@ import type { FieldHook } from 'payload'
 
 const format = (val: string): string =>
   val
+    .trim()
     .replace(/ /g, '-')
     .replace(/[^\w-]+/g, '')
     .toLowerCase()