@actuate-media/cms-admin 0.44.0 → 0.46.0

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

@@ -4,13 +4,27 @@ import { useEffect, useState } from 'react'
 import { Modal } from '../../components/ui/Modal.js'
 import { Button } from '../../components/ui/Button.js'
 import { MediaPickerModal } from '../../components/MediaPickerModal.js'
+import { TagInput } from '../../components/TagInput.js'
 import { RichTextField } from '../../fields/RichTextField.js'
 import type { EditorPost } from '../../lib/post-editor-service.js'
 
+/**
+ * The slice of a collection's field config the modal reads to pick controls:
+ * a `select` category renders a dropdown (structured vocabulary), an `array`
+ * tags field renders the chip input with autocomplete.
+ */
+export interface PostFieldConfig {
+  type?: string
+  options?: Array<{ label: string; value: string }>
+  maxRows?: number
+}
+
 interface PostFieldsModalProps {
   open: boolean
   post: EditorPost
   canEdit: boolean
+  /** Field definitions from the post type's collection config. */
+  fields?: Record<string, PostFieldConfig | undefined>
   onClose: () => void
   onSave: (patch: Partial<EditorPost>) => void
 }
@@ -27,19 +41,35 @@ function slugify(value: string): string {
     .replace(/^-+|-+$/g, '')
 }
 
-/** Edits post-level fields: title, slug, excerpt, featured image, category, body, SEO. */
-export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFieldsModalProps) {
+/** Edits post-level fields: title, slug, excerpt, featured image, category, tags, body, SEO. */
+export function PostFieldsModal({
+  open,
+  post,
+  canEdit,
+  fields,
+  onClose,
+  onSave,
+}: PostFieldsModalProps) {
   const [title, setTitle] = useState(post.title)
   const [slug, setSlug] = useState(post.slug)
   const [excerpt, setExcerpt] = useState(post.excerpt)
   const [featuredImage, setFeaturedImage] = useState(post.featuredImage)
   const [category, setCategory] = useState(post.category)
+  const [tags, setTags] = useState<string[]>(post.tags)
   const [body, setBody] = useState(post.body)
   const [seoTitle, setSeoTitle] = useState(post.seoTitle)
   const [seoDescription, setSeoDescription] = useState(post.seoDescription)
   const [slugTouched, setSlugTouched] = useState(Boolean(post.slug))
   const [mediaOpen, setMediaOpen] = useState(false)
 
+  const categoryField = fields?.category
+  const categoryOptions =
+    categoryField?.type === 'select' && Array.isArray(categoryField.options)
+      ? categoryField.options
+      : null
+  const tagsField = fields?.tags
+  const hasTags = tagsField?.type === 'array'
+
   useEffect(() => {
     if (!open) return
     setTitle(post.title)
@@ -47,6 +77,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
     setExcerpt(post.excerpt)
     setFeaturedImage(post.featuredImage)
     setCategory(post.category)
+    setTags(post.tags)
     setBody(post.body)
     setSeoTitle(post.seoTitle)
     setSeoDescription(post.seoDescription)
@@ -59,7 +90,7 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
   }
 
   function handleSave() {
-    onSave({ title, slug, excerpt, featuredImage, category, body, seoTitle, seoDescription })
+    onSave({ title, slug, excerpt, featuredImage, category, tags, body, seoTitle, seoDescription })
     onClose()
   }
 
@@ -112,16 +143,54 @@ export function PostFieldsModal({ open, post, canEdit, onClose, onSave }: PostFi
             <label className={LABEL} htmlFor="pf-category">
               Category
             </label>
-            <input
-              id="pf-category"
-              className={INPUT}
-              value={category}
+            {categoryOptions ? (
+              <select
+                id="pf-category"
+                className={INPUT}
+                value={category}
+                disabled={!canEdit}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                <option value="">No category</option>
+                {categoryOptions.map((o) => (
+                  <option key={o.value} value={o.value}>
+                    {o.label}
+                  </option>
+                ))}
+                {/* Keep a legacy free-text value selectable so opening the
+                    modal never silently discards it. */}
+                {category && !categoryOptions.some((o) => o.value === category) && (
+                  <option value={category}>{category}</option>
+                )}
+              </select>
+            ) : (
+              <input
+                id="pf-category"
+                className={INPUT}
+                value={category}
+                disabled={!canEdit}
+                placeholder="e.g. Product"
+                onChange={(e) => setCategory(e.target.value)}
+              />
+            )}
+          </div>
+        </div>
+        {hasTags && (
+          <div>
+            <label className={LABEL} htmlFor="pf-tags">
+              Tags
+            </label>
+            <TagInput
+              id="pf-tags"
+              value={tags}
+              onChange={setTags}
+              collection={post.postType}
+              field="tags"
               disabled={!canEdit}
-              placeholder="e.g. Product"
-              onChange={(e) => setCategory(e.target.value)}
+              maxTags={tagsField?.maxRows}
             />
           </div>
-        </div>
+        )}
         <div>
           <label className={LABEL} htmlFor="pf-excerpt">
             Excerpt

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

@@ -47,11 +47,19 @@ import { SectionInspector } from '../page-editor/SectionInspector.js'
 import { AddSectionModal } from '../page-editor/AddSectionModal.js'
 import { ValidationSummary } from '../page-editor/ValidationSummary.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
-import { PostFieldsModal } from './PostFieldsModal.js'
+import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
 
 /** The slice of the resolved CMS config this editor reads. */
 interface EditorConfig {
-  collections?: Record<string, { labels?: { singular?: string }; urlPrefix?: string } | undefined>
+  collections?: Record<
+    string,
+    | {
+        labels?: { singular?: string }
+        urlPrefix?: string
+        fields?: Record<string, PostFieldConfig | undefined>
+      }
+    | undefined
+  >
   seo?: { siteUrl?: string }
 }
 
@@ -576,6 +584,7 @@ export function PostSectionEditor({
         open={fieldsOpen}
         post={post}
         canEdit={canEdit}
+        fields={config?.collections?.[postType]?.fields}
         onClose={() => setFieldsOpen(false)}
         onSave={handleFields}
       />