@actuate-media/cms-admin 0.45.0 → 0.46.0

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

@@ -0,0 +1,126 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+
+/**
+ * PostFieldsModal — control selection is driven by the post type's field
+ * config: a `select` category renders a structured dropdown (UpChat taxonomy
+ * feedback P1), an `array` tags field renders the chip input (P2). Free-text
+ * configs keep their legacy inputs so existing sites are unaffected.
+ */
+
+const cmsApi = vi.fn(async () => ({ data: { field: 'tags', values: [] }, status: 200 }))
+
+vi.mock('../../lib/api.js', () => ({
+  cmsApi: (...args: unknown[]) => cmsApi(...(args as [])),
+  ensureCsrfToken: vi.fn(async () => {}),
+}))
+
+// The rich text editor pulls in heavy dependencies; stub it.
+vi.mock('../../fields/RichTextField.js', () => ({
+  RichTextField: () => <div data-testid="rich-text" />,
+}))
+
+const { PostFieldsModal } = await import('../../views/post-editor/PostFieldsModal.js')
+type ModalProps = Parameters<typeof PostFieldsModal>[0]
+
+function basePost(over: Partial<ModalProps['post']> = {}): ModalProps['post'] {
+  return {
+    id: 'p1',
+    postType: 'posts',
+    title: 'Hello',
+    slug: 'hello',
+    excerpt: '',
+    featuredImage: '',
+    body: '',
+    category: '',
+    tags: [],
+    status: 'DRAFT',
+    publishDate: null,
+    sections: [],
+    seoTitle: '',
+    seoDescription: '',
+    publishedAt: null,
+    updatedAt: null,
+    ...over,
+  }
+}
+
+const SELECT_FIELDS: ModalProps['fields'] = {
+  category: {
+    type: 'select',
+    options: [
+      { label: 'News', value: 'news' },
+      { label: 'Tutorials', value: 'tutorials' },
+    ],
+  },
+  tags: { type: 'array', maxRows: 12 },
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+})
+
+describe('PostFieldsModal', () => {
+  it('renders a category dropdown when the field config is a select', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost()}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const select = screen.getByLabelText('Category') as HTMLSelectElement
+    expect(select.tagName).toBe('SELECT')
+    const labels = [...select.options].map((o) => o.textContent)
+    expect(labels).toEqual(['No category', 'News', 'Tutorials'])
+  })
+
+  it('keeps a legacy free-text category selectable instead of discarding it', () => {
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ category: 'Hand Typed' })}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={() => {}}
+      />,
+    )
+    const select = screen.getByLabelText('Category') as HTMLSelectElement
+    expect(select.value).toBe('Hand Typed')
+  })
+
+  it('falls back to a free-text category input without field config', () => {
+    render(<PostFieldsModal open post={basePost()} canEdit onClose={() => {}} onSave={() => {}} />)
+    const input = screen.getByLabelText('Category') as HTMLInputElement
+    expect(input.tagName).toBe('INPUT')
+    // No tags config → no tags control.
+    expect(screen.queryByLabelText('Tags')).toBeNull()
+  })
+
+  it('saves selected category and edited tags in the patch', () => {
+    const onSave = vi.fn()
+    render(
+      <PostFieldsModal
+        open
+        post={basePost({ tags: ['AI'] })}
+        canEdit
+        fields={SELECT_FIELDS}
+        onClose={() => {}}
+        onSave={onSave}
+      />,
+    )
+    fireEvent.change(screen.getByLabelText('Category'), { target: { value: 'tutorials' } })
+    const tagInput = screen.getByLabelText('Tags')
+    fireEvent.change(tagInput, { target: { value: 'CMS' } })
+    fireEvent.keyDown(tagInput, { key: 'Enter' })
+    fireEvent.click(screen.getByRole('button', { name: 'Done' }))
+    expect(onSave).toHaveBeenCalledWith(
+      expect.objectContaining({ category: 'tutorials', tags: ['AI', 'CMS'] }),
+    )
+  })
+})

package/src/components/TagInput.tsx

@@ -0,0 +1,196 @@
+'use client'
+
+/**
+ * Chip-style tag editor with autocomplete from values already in use.
+ *
+ * Suggestions come from `GET /collections/:collection/field-values?field=...`
+ * (distinct values across the collection, most-used first) and are fetched
+ * once on first focus, then filtered client-side as the user types.
+ *
+ * Deduplication is case-insensitive and resolves to the existing canonical
+ * casing: typing "ai" when the collection already uses "AI" adds "AI", so a
+ * vocabulary never splinters into `AI` / `ai` / `Ai` variants.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { X } from 'lucide-react'
+import { cmsApi } from '../lib/api.js'
+
+interface TagInputProps {
+  id: string
+  value: string[]
+  onChange: (tags: string[]) => void
+  /** Collection slug used to fetch suggestions. Omit to disable autocomplete. */
+  collection?: string
+  /** Field to aggregate for suggestions (default `tags`). */
+  field?: string
+  disabled?: boolean
+  placeholder?: string
+  /** Hard cap on the number of tags (mirrors the field's `maxRows`). */
+  maxTags?: number
+}
+
+interface FieldValuesResponse {
+  field: string
+  values: Array<{ value: string; count: number }>
+}
+
+const INPUT =
+  'border-input bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none'
+
+export function TagInput({
+  id,
+  value,
+  onChange,
+  collection,
+  field = 'tags',
+  disabled,
+  placeholder,
+  maxTags,
+}: TagInputProps) {
+  const [draft, setDraft] = useState('')
+  const [known, setKnown] = useState<string[] | null>(null)
+  const [open, setOpen] = useState(false)
+  const [activeIndex, setActiveIndex] = useState(-1)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  const atCap = typeof maxTags === 'number' && value.length >= maxTags
+
+  // Fetch the in-use vocabulary once, on first focus.
+  const ensureSuggestions = useCallback(() => {
+    if (known !== null || !collection) return
+    setKnown([]) // sentinel: fetch in flight, don't refetch
+    cmsApi<FieldValuesResponse>(
+      `/collections/${encodeURIComponent(collection)}/field-values?field=${encodeURIComponent(field)}`,
+    ).then((res) => {
+      if (res.data?.values) setKnown(res.data.values.map((v) => v.value))
+    })
+  }, [known, collection, field])
+
+  // Close the suggestion list on outside click.
+  useEffect(() => {
+    if (!open) return
+    function onPointerDown(e: PointerEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    document.addEventListener('pointerdown', onPointerDown)
+    return () => document.removeEventListener('pointerdown', onPointerDown)
+  }, [open])
+
+  const lowerExisting = new Set(value.map((t) => t.toLowerCase()))
+  const matches = (known ?? [])
+    .filter((s) => !lowerExisting.has(s.toLowerCase()))
+    .filter((s) => !draft.trim() || s.toLowerCase().includes(draft.trim().toLowerCase()))
+    .slice(0, 8)
+
+  function addTag(raw: string) {
+    const tag = raw.trim()
+    if (!tag || atCap) return
+    const lower = tag.toLowerCase()
+    if (lowerExisting.has(lower)) {
+      setDraft('')
+      return
+    }
+    // Prefer the canonical casing already used elsewhere in the collection.
+    const canonical = (known ?? []).find((s) => s.toLowerCase() === lower) ?? tag
+    onChange([...value, canonical])
+    setDraft('')
+    setActiveIndex(-1)
+  }
+
+  function removeTag(index: number) {
+    onChange(value.filter((_, i) => i !== index))
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault()
+      if (activeIndex >= 0 && activeIndex < matches.length) addTag(matches[activeIndex]!)
+      else addTag(draft)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setOpen(true)
+      setActiveIndex((i) => Math.min(i + 1, matches.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIndex((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Escape') {
+      setOpen(false)
+      setActiveIndex(-1)
+    } else if (e.key === 'Backspace' && !draft && value.length > 0) {
+      removeTag(value.length - 1)
+    }
+  }
+
+  return (
+    <div ref={rootRef} className="relative">
+      {value.length > 0 && (
+        <div className="mb-1.5 flex flex-wrap gap-1.5">
+          {value.map((tag, i) => (
+            <span
+              key={`${tag}-${i}`}
+              className="bg-accent text-foreground inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs"
+            >
+              {tag}
+              {!disabled && (
+                <button
+                  type="button"
+                  aria-label={`Remove tag ${tag}`}
+                  onClick={() => removeTag(i)}
+                  className="text-muted-foreground hover:text-destructive rounded p-0.5"
+                >
+                  <X className="h-3 w-3" aria-hidden />
+                </button>
+              )}
+            </span>
+          ))}
+        </div>
+      )}
+      <input
+        id={id}
+        className={INPUT}
+        role="combobox"
+        aria-expanded={open && matches.length > 0}
+        aria-autocomplete="list"
+        aria-controls={`${id}-listbox`}
+        value={draft}
+        disabled={disabled || atCap}
+        placeholder={atCap ? `Maximum of ${maxTags} tags` : (placeholder ?? 'Add a tag…')}
+        onFocus={() => {
+          ensureSuggestions()
+          setOpen(true)
+        }}
+        onChange={(e) => {
+          setDraft(e.target.value)
+          setOpen(true)
+          setActiveIndex(-1)
+        }}
+        onKeyDown={handleKeyDown}
+      />
+      {open && matches.length > 0 && !disabled && (
+        <ul
+          id={`${id}-listbox`}
+          role="listbox"
+          aria-label="Tag suggestions"
+          className="border-border bg-card absolute z-20 mt-1 max-h-44 w-full overflow-y-auto rounded-md border py-1 shadow-md"
+        >
+          {matches.map((s, i) => (
+            <li key={s} role="option" aria-selected={i === activeIndex}>
+              <button
+                type="button"
+                className={`w-full px-2.5 py-1.5 text-left text-sm ${
+                  i === activeIndex
+                    ? 'bg-accent text-foreground'
+                    : 'text-foreground hover:bg-accent'
+                }`}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => addTag(s)}
+              >
+                {s}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

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

@@ -73,6 +73,8 @@ export interface EditorPost {
   featuredImage: string
   body: string
   category: string
+  /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
+  tags: string[]
   status: PostStatus
   publishDate: string | null
   sections: PageSection[]
@@ -190,6 +192,26 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+/**
+ * Read stored tags into plain strings. The `tagsField` preset stores
+ * `[{ tag: 'AI' }]` rows; older/hand-rolled configs may store `['AI']`
+ * directly — accept both so no site loses tags in the editor.
+ */
+export function parseTags(raw: unknown): string[] {
+  if (!Array.isArray(raw)) return []
+  const out: string[] = []
+  for (const item of raw) {
+    const value =
+      typeof item === 'string'
+        ? item
+        : item && typeof item === 'object'
+          ? (item as { tag?: unknown }).tag
+          : undefined
+    if (typeof value === 'string' && value.trim()) out.push(value.trim())
+  }
+  return out
+}
+
 function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
   const data = doc.data ?? {}
   return {
@@ -201,6 +223,7 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     featuredImage: dataStr(data, 'featuredImage'),
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
+    tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
     publishDate: (data.publishDate as string) ?? doc.scheduledAt ?? null,
     // Preserve unknown (externally-managed) sections so the editor can show
@@ -290,6 +313,7 @@ interface PostWritePayload {
   featuredImage: string
   body: string
   category: string
+  tags: Array<{ tag: string }>
   publishDate: string | null
   sections: PageSection[]
   metaTitle: string
@@ -313,6 +337,9 @@ function toWriteBody(post: EditorPost, extra?: Record<string, unknown>): string
     featuredImage: post.featuredImage,
     body: post.body,
     category: post.category,
+    // Store the canonical `tagsField` row shape so server-side array-field
+    // validation and the public renderer see the schema they expect.
+    tags: post.tags.map((tag) => ({ tag })),
     publishDate: post.publishDate,
     // Unmanaged sections are part of `post.sections`, so they round-trip on
     // every save (no data loss).
@@ -378,6 +405,7 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     featuredImage: '',
     body: '',
     category: '',
+    tags: [],
     status: 'DRAFT',
     publishDate: null,
     sections,

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