@prenta/admin 1.6.0 → 1.6.2

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/lib/workflow-chrome.ts

@@ -8,6 +8,8 @@ export const REQUEST_CHANGES_LABEL = 'Request changes'
 export const WAITING_FOR_REVIEW_LABEL = 'Waiting for review.'
 export const REVIEWER_NOTE_PREFIX = 'Reviewer note:'
 export const SUBMIT_BEFORE_PUBLISH_ERROR = 'Submit for review before publishing.'
+export const SAVE_DRAFT_LABEL = 'Save Draft'
+export const UPDATE_LIVE_LABEL = 'Update live'
 
 const REVIEWER_ROLES = new Set(['ADMIN', 'EDITOR'])
 const SUBMIT_ROLES = new Set(['ADMIN', 'EDITOR', 'AUTHOR'])
@@ -33,12 +35,14 @@ export function resolveWorkflowChrome(input: {
   waitingLabel?: string
   statusLabel: string
   statusClassName: string
+  saveLabel: string
 } {
   const role = input.role.toUpperCase()
   const published = input.status === 'PUBLISHED'
   const scheduled = input.status === 'SCHEDULED'
   const pillKey = published ? 'PUBLISHED' : scheduled ? 'SCHEDULED' : input.stage
   const pill = STATUS_PILL[pillKey]
+  const saveLabel = published ? UPDATE_LIVE_LABEL : SAVE_DRAFT_LABEL
 
   if (!input.canEdit || published) {
     return {
@@ -47,6 +51,7 @@ export function resolveWorkflowChrome(input: {
       showSchedule: false,
       statusLabel: pill.label,
       statusClassName: pill.className,
+      saveLabel,
     }
   }
 
@@ -61,6 +66,7 @@ export function resolveWorkflowChrome(input: {
       showSchedule: reviewer,
       statusLabel: pill.label,
       statusClassName: pill.className,
+      saveLabel,
     }
   }
 
@@ -71,6 +77,7 @@ export function resolveWorkflowChrome(input: {
       showSchedule: false,
       statusLabel: pill.label,
       statusClassName: pill.className,
+      saveLabel,
     }
   }
 
@@ -81,6 +88,7 @@ export function resolveWorkflowChrome(input: {
       showSchedule: true,
       statusLabel: pill.label,
       statusClassName: pill.className,
+      saveLabel,
     }
   }
 
@@ -92,6 +100,7 @@ export function resolveWorkflowChrome(input: {
       waitingLabel: WAITING_FOR_REVIEW_LABEL,
       statusLabel: pill.label,
       statusClassName: pill.className,
+      saveLabel,
     }
   }
 
@@ -101,5 +110,6 @@ export function resolveWorkflowChrome(input: {
     showSchedule: false,
     statusLabel: pill.label,
     statusClassName: pill.className,
+    saveLabel,
   }
 }

package/src/views/page-editor/EditorTopBar.tsx

@@ -403,7 +403,7 @@ export function EditorTopBar({
           disabled={!canEdit || saveState === 'saving' || (!dirty && saveState !== 'error')}
           className="border-border text-foreground hover:bg-accent rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
         >
-          {saveState === 'saving' ? 'Saving…' : 'Save Draft'}
+          {saveState === 'saving' ? 'Saving…' : workflow.saveLabel}
         </button>
 
         {onSchedule && workflow.showSchedule && (

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,
         }}