feat(zod): editor metadata (#3133)

Author: larbish

docs/content.config.ts

@@ -62,8 +62,8 @@ export default defineContentConfig({
         onboarding: z.object({
           title: z.string(),
           image: z.object({
-            dark: z.string(),
-            light: z.string(),
+            dark: z.string().editor({ input: 'media' }),
+            light: z.string().editor({ input: 'media' }),
           }),
         }),
         plans: z.object({
@@ -137,19 +137,19 @@ export default defineContentConfig({
       source: 'templates/*.md',
       schema: z.object({
         draft: z.boolean().default(false),
-        slug: z.string(),
+        slug: z.string().editor({ hidden: true }),
         subtitle: z.string(),
         baseDir: z.string(),
         branch: z.string(),
         category: z.enum(['docs', 'blog', 'minimal', 'saas']),
         demo: z.string(),
         licenseType: z.enum(['nuxt-ui-pro', 'free']),
-        mainScreen: z.string(),
+        mainScreen: z.string().editor({ input: 'media' }),
         name: z.string(),
         owner: z.string(),
-        image1: z.string(),
-        image2: z.string(),
-        image3: z.string(),
+        image1: z.string().editor({ input: 'media' }),
+        image2: z.string().editor({ input: 'media' }),
+        image3: z.string().editor({ input: 'media' }),
       }),
     }),
     posts: defineCollection({
@@ -170,7 +170,7 @@ export default defineContentConfig({
         category: z.enum(['studio', 'content']).optional(),
         date: z.date(),
         image: z.object({
-          src: z.string(),
+          src: z.string().editor({ input: 'media' }),
           alt: z.string(),
         }),
       }),

src/module.ts

@@ -28,7 +28,7 @@ import { createParser } from './utils/content'
 import { installMDCModule } from './utils/mdc'
 import { findPreset } from './presets'
 import type { Manifest } from './types/manifest'
-import { setupPreview } from './utils/preview/module'
+import { setupPreview, shouldEnablePreview } from './utils/preview/module'
 import { parseSourceBase } from './utils/source'
 import { getLocalDatabase, refineDatabaseConfig, resolveDatabaseAdapter } from './utils/database'
 
@@ -212,12 +212,7 @@ export default defineNuxtModule<ModuleOptions>({
       })
 
       // Handle preview mode
-      if (process.env.NUXT_CONTENT_PREVIEW_API || options.preview?.api) {
-        // Only enable preview in production build or when explicitly enabled
-        if (nuxt.options.dev === true && !options.preview?.dev) {
-          return
-        }
-
+      if (shouldEnablePreview(nuxt, options)) {
         await setupPreview(options, nuxt, resolver, manifest)
       }
     })

src/utils/preview/module.ts

@@ -61,3 +61,14 @@ export async function setupPreview(options: ModuleOptions, nuxt: Nuxt, resolver:
     include: manifest.components,
   })
 }
+
+export function shouldEnablePreview(nuxt: Nuxt, options: ModuleOptions) {
+  if (process.env.NUXT_CONTENT_PREVIEW_API || options.preview?.api) {
+    // Only enable preview in production build or when explicitly enabled
+    if (nuxt.options.dev === true && !options.preview?.dev) {
+      return false
+    }
+    return true
+  }
+  return false
+}

src/utils/templates.ts

@@ -1,16 +1,24 @@
 import { gzip } from 'node:zlib'
 import { printNode, zodToTs } from 'zod-to-ts'
-import { zodToJsonSchema } from 'zod-to-json-schema'
+import { zodToJsonSchema, ignoreOverride } from 'zod-to-json-schema'
 import type { NuxtTemplate } from '@nuxt/schema'
 import { isAbsolute, join, relative } from 'pathe'
 import { genDynamicImport } from 'knitwork'
 import { pascalCase } from 'scule'
 import type { Schema } from 'untyped'
+import { createDefu } from 'defu'
 import type { CollectionInfo, ResolvedCollection } from '../types/collection'
 import type { Manifest } from '../types/manifest'
 import type { GitInfo } from './git'
 import { generateCollectionTableDefinition } from './collection'
 
+const defu = createDefu((obj, key, value) => {
+  if (Array.isArray(obj[key]) && Array.isArray(value)) {
+    obj[key] = value
+    return true
+  }
+})
+
 const compress = (text: string): Promise<string> => {
   return new Promise((resolve, reject) => gzip(text, (err, buff) => {
     if (err) {
@@ -186,7 +194,7 @@ export const previewTemplate = (collections: ResolvedCollection[], gitInfo: GitI
         source: collection.source?.filter(source => source.repository ? undefined : collection.source),
         type: collection.type,
         fields: collection.fields,
-        schema: zodToJsonSchema(collection.extendedSchema, collection.name),
+        schema: generateJsonSchema(collection),
         tableDefinition: generateCollectionTableDefinition(collection),
       }
       return acc
@@ -209,3 +217,23 @@ export const previewTemplate = (collections: ResolvedCollection[], gitInfo: GitI
   },
   write: true,
 })
+
+function generateJsonSchema(collection: ResolvedCollection) {
+  const jsonSchema = zodToJsonSchema(collection.extendedSchema, collection.name)
+  const jsonSchemaWithEditorMeta = zodToJsonSchema(
+    collection.extendedSchema,
+    {
+      name: collection.name,
+      override: (def) => {
+        if (def.editor) {
+          return {
+            editor: def.editor,
+          } as never
+        }
+
+        return ignoreOverride
+      },
+    })
+
+  return defu(jsonSchema, jsonSchemaWithEditorMeta)
+}

src/utils/zod.ts

@@ -1,9 +1,30 @@
-import type { ZodType, ZodOptionalDef } from 'zod'
+import type { ZodOptionalDef, ZodType } from 'zod'
 import { z as zod } from 'zod'
 
+declare module 'zod' {
+  interface ZodTypeDef {
+    editor?: EditorOptions
+  }
+
+  interface ZodType {
+    editor(options: EditorOptions): this
+  }
+}
+
+interface EditorOptions {
+  input?: 'media' | 'icon' // Override the default input for the field
+  hidden?: boolean // Do not display the field in the editor
+}
+
 export type ZodFieldType = 'ZodString' | 'ZodNumber' | 'ZodBoolean' | 'ZodDate' | 'ZodEnum'
 export type SqlFieldType = 'VARCHAR' | 'INT' | 'BOOLEAN' | 'DATE' | 'TEXT'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(zod.ZodType as any).prototype.editor = function (options: EditorOptions) {
+  this._def.editor = { ...this._def.editor, ...options }
+  return this
+}
+
 export const z = zod
 
 export const ZodToSqlFieldTypes: Record<ZodFieldType, SqlFieldType> = {
@@ -21,7 +42,7 @@ export function getEnumValues<T extends Record<string, unknown>>(obj: T) {
 // Function to get the underlying Zod type
 export function getUnderlyingType(zodType: ZodType): ZodType {
   while ((zodType._def as ZodOptionalDef).innerType) {
-    zodType = (zodType._def as ZodOptionalDef).innerType
+    zodType = (zodType._def as ZodOptionalDef).innerType as ZodType
   }
   return zodType
 }