@prenta/admin 1.6.0 → 1.6.1

package/src/__tests__/lib/page-audit-input.test.ts

@@ -244,6 +244,17 @@ describe('post audit extras', () => {
     expect(imageSlots(withImage.sections)).toHaveLength(1)
     expect(imageSlots(withImage.sections)[0]?.sectionId).toBe('__post-featured-image')
   })
+
+  it('does not invent an image slot from a bare media id', () => {
+    const withId = buildPageAuditInput({
+      sections: textOnlySections,
+      meta: postMeta,
+      slug: 'a-post',
+      record: null,
+      post: { featuredImage: 'cmssbdfxo000004jrzphzt2bj' },
+    })
+    expect(imageSlots(withId.sections)).toHaveLength(0)
+  })
 })
 
 function builderTree(heroData: Record<string, unknown>) {

package/src/__tests__/lib/post-editor-service-api.test.ts

@@ -23,6 +23,7 @@ function draft(id: string | null) {
     slug: 'hello',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],

package/src/__tests__/lib/post-editor-service.test.ts

@@ -17,6 +17,7 @@ const {
   missingPostFields,
   savePostDraft,
   parseFeaturedImage,
+  parseFeaturedImageRef,
 } = await import('../../lib/post-editor-service.js')
 
 type EditorPostT = Awaited<ReturnType<typeof emptyPostFromTemplate>>
@@ -29,6 +30,7 @@ function basePost(over: Partial<EditorPostT> = {}): EditorPostT {
     slug: 'hello',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],
@@ -494,21 +496,34 @@ describe('tags round-trip', () => {
     expect(post.tags).toEqual(['AI', 'Nextjs'])
   })
 
+  it('parseFeaturedImageRef splits persist id from display url', () => {
+    const mediaId = 'cmry1z9yr000004l832th7bf2'
+    const url = 'https://cdn.example.com/hero.webp'
+    expect(parseFeaturedImageRef({ id: mediaId, url, alt: 'Hero' })).toEqual({
+      id: mediaId,
+      url,
+    })
+    expect(parseFeaturedImageRef(mediaId)).toEqual({ id: mediaId, url: '' })
+    expect(parseFeaturedImageRef(url)).toEqual({ id: url, url })
+    expect(parseFeaturedImageRef({ publicUrl: url })).toEqual({ id: url, url })
+    expect(parseFeaturedImageRef({ src: '/uploads/hero.webp' })).toEqual({
+      id: '/uploads/hero.webp',
+      url: '/uploads/hero.webp',
+    })
+  })
+
   it('parseFeaturedImage / fetchPostForEditor keep denormalized media objects (#671)', async () => {
     const mediaId = 'cmry1z9yr000004l832th7bf2'
+    const url = 'https://cdn.example.com/hero.webp'
     expect(
       parseFeaturedImage({
         id: mediaId,
-        url: 'https://cdn.example.com/hero.webp',
+        url,
         alt: 'Hero',
       }),
     ).toBe(mediaId)
-    expect(parseFeaturedImage('https://cdn.example.com/hero.webp')).toBe(
-      'https://cdn.example.com/hero.webp',
-    )
-    expect(parseFeaturedImage({ url: 'https://cdn.example.com/hero.webp' })).toBe(
-      'https://cdn.example.com/hero.webp',
-    )
+    expect(parseFeaturedImage(url)).toBe(url)
+    expect(parseFeaturedImage({ url })).toBe(url)
 
     cmsApiMock.mockResolvedValueOnce({
       data: {
@@ -519,7 +534,7 @@ describe('tags round-trip', () => {
         data: {
           featuredImage: {
             id: mediaId,
-            url: 'https://cdn.example.com/hero.webp',
+            url,
             alt: 'Hero',
           },
         },
@@ -527,16 +542,18 @@ describe('tags round-trip', () => {
     })
     const post = await fetchPostForEditor('blog', 'p1')
     expect(post.featuredImage).toBe(mediaId)
+    expect(post.featuredImageUrl).toBe(url)
 
     cmsApiMock.mockResolvedValueOnce({
       data: { id: 'p1', title: 'Hello', slug: 'hello', status: 'DRAFT', data: {} },
     })
-    await savePostDraft(basePost({ id: 'p1', featuredImage: mediaId }))
+    await savePostDraft(basePost({ id: 'p1', featuredImage: mediaId, featuredImageUrl: url }))
     const body = JSON.parse(cmsApiMock.mock.calls[1]![1].body as string) as {
       featuredImage: string
     }
     expect(body.featuredImage).toBe(mediaId)
     expect(body.featuredImage).not.toBe('')
+    expect(body).not.toHaveProperty('featuredImageUrl')
   })
 })
 

package/src/__tests__/lib/version-history.test.ts

@@ -60,6 +60,35 @@ describe('toPageVersion', () => {
     expect(mapped.body).toBe('<p>Snapshot body</p>')
   })
 
+  it('does not treat a bare media id as a canvas preview URL', () => {
+    const mapped = toPageVersion({
+      id: 'v1',
+      changeType: 'UPDATE',
+      createdAt: '2026-08-02T12:00:00Z',
+      data: {
+        featuredImage: 'cmssbdfxo000004jrzphzt2bj',
+        sections: [],
+      },
+    })
+    expect(mapped.featuredImage).toBeUndefined()
+  })
+
+  it('prefers the public URL over the media id on a denormalized snapshot', () => {
+    const mapped = toPageVersion({
+      id: 'v1',
+      changeType: 'UPDATE',
+      createdAt: '2026-08-02T12:00:00Z',
+      data: {
+        featuredImage: {
+          id: 'cmssbdfxo000004jrzphzt2bj',
+          url: 'https://cdn.example.com/hero.webp',
+        },
+        sections: [],
+      },
+    })
+    expect(mapped.featuredImage).toBe('https://cdn.example.com/hero.webp')
+  })
+
   it('preserves an unmanaged section rather than dropping it from the snapshot', () => {
     // Coercing a snapshot more strictly than the live document reads would
     // make an externally-managed section look deleted in every version.

package/src/__tests__/views/post-fields-modal.render.test.tsx

@@ -39,6 +39,7 @@ function basePost(over: Partial<ModalProps['post']> = {}): ModalProps['post'] {
     slug: 'hello',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],
@@ -175,4 +176,42 @@ describe('PostFieldsModal', () => {
     expect(onClose).toHaveBeenCalledTimes(1)
     expect(screen.queryByRole('dialog', { name: 'Discard unsaved changes?' })).toBeNull()
   })
+
+  it('previews the featured image URL, not the stored media id', () => {
+    const mediaId = 'cmssbdfxo000004jrzphzt2bj'
+    const url = 'https://cdn.example.com/hero.webp'
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ featuredImage: mediaId, featuredImageUrl: url })}
+        canEdit
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const input = screen.getByLabelText('Featured image') as HTMLInputElement
+    expect(input.value).toBe(url)
+    expect(input.value).not.toBe(mediaId)
+    const preview = document.querySelector('img')
+    expect(preview?.getAttribute('src')).toBe(url)
+  })
+
+  it('saves the media id when the input is showing the public URL', () => {
+    const onSave = vi.fn()
+    const mediaId = 'cmssbdfxo000004jrzphzt2bj'
+    const url = 'https://cdn.example.com/hero.webp'
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ featuredImage: mediaId, featuredImageUrl: url })}
+        canEdit
+        onClose={() => {}}
+        onSave={onSave}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Done' }))
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ featuredImage: mediaId, featuredImageUrl: url }),
+    )
+  })
 })

package/src/__tests__/views/post-section-editor.test.tsx

@@ -49,6 +49,7 @@ function loadedPost(
     slug: 'logan',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],

package/src/__tests__/views/post-tab.render.test.tsx

@@ -27,6 +27,7 @@ function basePost(over: Partial<EditorPost> = {}): EditorPost {
     slug: 'hello',
     excerpt: 'A short summary.',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],

package/src/lib/page-audit-input.ts

@@ -95,7 +95,7 @@ export function withPostAuditSlots(sections: PageSection[], post?: PostAuditExtr
     })
   }
   const image = post.featuredImage?.trim() ?? ''
-  if (image) {
+  if (image && (image.startsWith('/') || /^https?:\/\//i.test(image))) {
     extras.push({
       id: POST_IMAGE_SECTION_ID,
       sectionType: 'feature',

package/src/lib/post-editor-service.ts

@@ -74,7 +74,10 @@ export interface EditorPost {
   title: string
   slug: string
   excerpt: string
+  /** Persist identity — media id when present so usage tracking survives (#671). */
   featuredImage: string
+  /** Public URL for `<img src>` and the details input. Empty when only an id is known. */
+  featuredImageUrl: string
   body: string
   category: string
   /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
@@ -216,20 +219,49 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+export interface FeaturedImageRef {
+  /** Persist this — media id when present so usage tracking survives (#671). */
+  id: string
+  /** Use this for `<img src>` and the details input. Empty when only an id is known. */
+  url: string
+}
+
+/** True for paths and http(s) URLs — never a bare media cuid. */
+export function isDisplayableImageSrc(value: string): boolean {
+  const v = value.trim()
+  return v.startsWith('/') || /^https?:\/\//i.test(v)
+}
+
+function asDisplayUrl(value: unknown): string {
+  if (typeof value !== 'string') return ''
+  const v = value.trim()
+  return isDisplayableImageSrc(v) ? v : ''
+}
+
 /**
- * Media fields are stored denormalized as `{ id, url, alt, … }` after headless
- * writes / admin picker. The editor state is a string (id or URL). Never coerce
- * an object to `""` — that wiped featured images on the next save (#671).
+ * Split a stored featured-image value into persist identity and display URL.
+ *
+ * Media fields are denormalized as `{ id, url, alt, … }` after headless writes
+ * / the admin picker. Never coerce an object to `""` — that wiped featured
+ * images on the next save (#671).
  */
-export function parseFeaturedImage(raw: unknown): string {
-  if (typeof raw === 'string') return raw.trim()
+export function parseFeaturedImageRef(raw: unknown): FeaturedImageRef {
+  if (typeof raw === 'string') {
+    const value = raw.trim()
+    return { id: value, url: asDisplayUrl(value) }
+  }
   if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
     const obj = raw as Record<string, unknown>
-    if (typeof obj.id === 'string' && obj.id.trim()) return obj.id.trim()
-    const url = obj.url ?? obj.publicUrl ?? obj.src
-    if (typeof url === 'string' && url.trim()) return url.trim()
+    const id = typeof obj.id === 'string' ? obj.id.trim() : ''
+    const url = asDisplayUrl(obj.url ?? obj.publicUrl ?? obj.src)
+    return { id: id || url, url }
   }
-  return ''
+  return { id: '', url: '' }
+}
+
+/** Persist identity only — prefer `id` so a save does not drop the media link. */
+export function parseFeaturedImage(raw: unknown): string {
+  return parseFeaturedImageRef(raw).id
 }
 
 /**
@@ -255,6 +287,7 @@ export function parseTags(raw: unknown): string[] {
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
   const dataTitle = dataStr(data, 'title')
+  const featured = parseFeaturedImageRef(data.featuredImage)
   return {
     id: doc.id,
     postType,
@@ -263,7 +296,8 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     title: dataTitle || (doc.title ?? ''),
     slug: doc.slug ?? dataStr(data, 'slug'),
     excerpt: dataStr(data, 'excerpt'),
-    featuredImage: parseFeaturedImage(data.featuredImage),
+    featuredImage: featured.id,
+    featuredImageUrl: featured.url,
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
     tags: parseTags(data.tags),
@@ -457,6 +491,7 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     slug: '',
     excerpt: '',
     featuredImage: '',
+    featuredImageUrl: '',
     body: '',
     category: '',
     tags: [],

package/src/lib/version-history.ts

@@ -9,6 +9,7 @@
  * response and no second request per row is needed.
  */
 import { cmsApi } from './api.js'
+import { parseFeaturedImageRef } from './post-editor-service.js'
 import { coerceSections, type PageSection } from '@prenta/core/page-sections'
 
 /**
@@ -97,13 +98,8 @@ function optionalString(value: unknown): string | undefined {
 }
 
 function optionalFeaturedImage(value: unknown): string | undefined {
-  if (typeof value === 'string') return value
-  if (value && typeof value === 'object' && !Array.isArray(value)) {
-    const obj = value as Record<string, unknown>
-    const url = obj.url ?? obj.publicUrl ?? obj.src
-    if (typeof url === 'string') return url
-  }
-  return undefined
+  const url = parseFeaturedImageRef(value).url
+  return url || undefined
 }
 
 export function toPageVersion(row: VersionApiRow): PageVersion {

package/src/views/post-editor/PostFieldsForm.tsx

@@ -23,7 +23,10 @@ export interface PostFieldsFormValues {
   title: string
   slug: string
   excerpt: string
+  /** Persist identity (media id when known). */
   featuredImage: string
+  /** Public URL shown in the input and used as `<img src>`. */
+  featuredImageUrl: string
   category: string
   tags: string[]
 }
@@ -286,10 +289,13 @@ export function PostFieldsForm({
             <input
               id={imageId}
               className={`${INPUT} min-w-0 flex-1`}
-              value={values.featuredImage}
+              value={values.featuredImageUrl}
               disabled={!canEdit}
               placeholder="https://… or pick from the media library"
-              onChange={(e) => onChange({ featuredImage: e.target.value })}
+              onChange={(e) => {
+                const next = e.target.value
+                onChange({ featuredImage: next, featuredImageUrl: next })
+              }}
             />
             <button
               type="button"
@@ -300,9 +306,9 @@ export function PostFieldsForm({
               Browse
             </button>
           </div>
-          {values.featuredImage && (
+          {values.featuredImageUrl && (
             <div className="border-border bg-muted mt-2 overflow-hidden rounded-md border">
-              <img src={values.featuredImage} alt="" className="h-28 w-full object-cover" />
+              <img src={values.featuredImageUrl} alt="" className="h-28 w-full object-cover" />
             </div>
           )}
         </div>
@@ -311,8 +317,11 @@ export function PostFieldsForm({
       <MediaPickerModal
         open={mediaOpen}
         onClose={() => setMediaOpen(false)}
+        onSelectItem={(item) => {
+          onChange({ featuredImage: item.id || item.url, featuredImageUrl: item.url })
+        }}
         onSelect={(url) => {
-          onChange({ featuredImage: url })
+          onChange({ featuredImageUrl: url })
           setMediaOpen(false)
         }}
         accept="image/*"

package/src/views/post-editor/PostFieldsModal.tsx

@@ -29,6 +29,7 @@ type FormSnapshot = {
   slug: string
   excerpt: string
   featuredImage: string
+  featuredImageUrl: string
   category: string
   tags: string
 }
@@ -39,6 +40,7 @@ function snapshotFromPost(post: EditorPost): FormSnapshot {
     slug: post.slug,
     excerpt: post.excerpt,
     featuredImage: post.featuredImage,
+    featuredImageUrl: post.featuredImageUrl,
     category: post.category,
     tags: [...post.tags].sort().join('\0'),
   }
@@ -64,6 +66,7 @@ export function PostFieldsModal({
   const [slug, setSlug] = useState(post.slug)
   const [excerpt, setExcerpt] = useState(post.excerpt)
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
+  const [featuredImageUrl, setFeaturedImageUrl] = useState(post.featuredImageUrl)
   const [category, setCategory] = useState(post.category)
   const [tags, setTags] = useState<string[]>(post.tags)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
@@ -82,13 +85,22 @@ export function PostFieldsModal({
     setSlug(post.slug)
     setExcerpt(post.excerpt)
     setFeaturedImage(post.featuredImage)
+    setFeaturedImageUrl(post.featuredImageUrl)
     setCategory(post.category)
     setTags(post.tags)
     setSlugTouched(Boolean(post.slug))
     baselineRef.current = snapshotFromPost(post)
   }, [open, post])
 
-  const values: PostFieldsFormValues = { title, slug, excerpt, featuredImage, category, tags }
+  const values: PostFieldsFormValues = {
+    title,
+    slug,
+    excerpt,
+    featuredImage,
+    featuredImageUrl,
+    category,
+    tags,
+  }
 
   const isDirty = useMemo(() => {
     if (!open || !baselineRef.current) return false
@@ -108,6 +120,7 @@ export function PostFieldsModal({
     if (patch.slug !== undefined) setSlug(patch.slug)
     if (patch.excerpt !== undefined) setExcerpt(patch.excerpt)
     if (patch.featuredImage !== undefined) setFeaturedImage(patch.featuredImage)
+    if (patch.featuredImageUrl !== undefined) setFeaturedImageUrl(patch.featuredImageUrl)
     if (patch.category !== undefined) setCategory(patch.category)
     if (patch.tags !== undefined) setTags(patch.tags)
   }
@@ -116,7 +129,7 @@ export function PostFieldsModal({
 
   function handleSave() {
     if (slugError) return
-    onSave({ title, slug, excerpt, featuredImage, category, tags })
+    onSave({ title, slug, excerpt, featuredImage, featuredImageUrl, category, tags })
     onClose()
   }
 

package/src/views/post-editor/PostSectionEditor.tsx

@@ -226,7 +226,7 @@ export function PostSectionEditor({
     post: {
       title: post?.title,
       bodyHtml: post?.body,
-      featuredImage: post?.featuredImage,
+      featuredImage: post?.featuredImageUrl,
     },
   })
   const audit = liveAudit ?? savedAudit
@@ -338,7 +338,7 @@ export function PostSectionEditor({
       title: post?.title,
       excerpt: post?.excerpt,
       body: post?.body,
-      featuredImageUrl: post?.featuredImage,
+      featuredImageUrl: post?.featuredImageUrl,
       publishDate: post?.publishDate ?? post?.updatedAt ?? null,
       category: post?.category,
       author: { name: session?.user?.name || session?.user?.email },
@@ -841,7 +841,7 @@ export function PostSectionEditor({
                         contentHtml={seoContentHtml}
                         title={post.title}
                         bodyHtml={post.body}
-                        featuredImage={post.featuredImage}
+                        featuredImage={post.featuredImageUrl}
                         draftMeta={{
                           seoTitle: post.seoTitle,
                           seoDescription: post.seoDescription,

package/src/views/post-editor/PostTab.tsx

@@ -30,6 +30,7 @@ export function PostTab({ post, canEdit, fields, onChange }: PostTabProps) {
           slug: post.slug,
           excerpt: post.excerpt,
           featuredImage: post.featuredImage,
+          featuredImageUrl: post.featuredImageUrl,
           category: post.category,
           tags: post.tags,
         }}