@prenta/admin 1.17.11 → 1.17.13

package/src/__tests__/lib/post-canvas-context.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  canvasAuthorName,
+  relatedPostsFromField,
+  relatedPostsFromSiblings,
+} from '../../lib/post-canvas-context.js'
+
+describe('canvasAuthorName', () => {
+  it('prefers the document author over the logged-in editor', () => {
+    expect(canvasAuthorName('Ada Lovelace', { name: 'Editor', email: 'ed@example.com' })).toBe(
+      'Ada Lovelace',
+    )
+  })
+
+  it('falls back to the session when the document author is blank', () => {
+    expect(canvasAuthorName('  ', { name: '', email: 'ed@example.com' })).toBe('ed@example.com')
+    expect(canvasAuthorName(undefined, { name: 'Editor' })).toBe('Editor')
+  })
+})
+
+describe('related posts for the canvas', () => {
+  it('uses hand-picked posts when they already have titles', () => {
+    expect(
+      relatedPostsFromField([{ title: 'Keep going', excerpt: 'A note', url: '/blog/keep-going' }]),
+    ).toEqual([{ title: 'Keep going', excerpt: 'A note', url: '/blog/keep-going' }])
+  })
+
+  it('returns null for id-only relations so the editor can load siblings', () => {
+    expect(relatedPostsFromField(['post_1', 'post_2'])).toBeNull()
+    expect(relatedPostsFromField(undefined)).toBeNull()
+  })
+
+  it('builds sibling cards from data.title and the collection prefix', () => {
+    const cards = relatedPostsFromSiblings(
+      [
+        {
+          id: 'self',
+          title: 'Slug-Style-Title',
+          slug: 'self',
+          data: { title: 'This post' },
+        },
+        {
+          id: 'other',
+          title: 'Foster-Independence',
+          slug: 'foster-independence',
+          data: { title: 'Foster independence', excerpt: 'A summary' },
+        },
+      ],
+      { excludeId: 'self', urlPrefix: 'blog', collection: 'posts' },
+    )
+    expect(cards).toEqual([
+      { title: 'Foster independence', excerpt: 'A summary', url: '/blog/foster-independence' },
+    ])
+  })
+})

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

@@ -26,6 +26,8 @@ function draft(id: string | null) {
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: null,
     tags: [],
     status: 'DRAFT' as const,
     workflowStage: 'DRAFT' as const,

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

@@ -33,6 +33,8 @@ function basePost(over: Partial<EditorPostT> = {}): EditorPostT {
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: null,
     tags: [],
     status: 'DRAFT',
     workflowStage: 'DRAFT',
@@ -314,6 +316,26 @@ describe('unmanaged section round-trip (data-loss regression)', () => {
     expect(post.title).toBe('Foster independence in children with autism')
   })
 
+  it('fetchPostForEditor reads authorName and expanded related posts', async () => {
+    cmsApiMock.mockResolvedValueOnce({
+      data: {
+        id: 'p1',
+        title: 'Logan',
+        slug: 'logan',
+        status: 'DRAFT',
+        data: {
+          title: 'Logan',
+          authorName: 'Ada Lovelace',
+          relatedPosts: [{ title: 'Next', url: '/blog/next' }],
+          sections: [],
+        },
+      },
+    })
+    const post = await fetchPostForEditor('blog', 'p1')
+    expect(post.authorName).toBe('Ada Lovelace')
+    expect(post.canvasRelatedPosts).toEqual([{ title: 'Next', url: '/blog/next' }])
+  })
+
   it('fetchPostForEditor preserves unknown section types as unmanaged', async () => {
     cmsApiMock.mockResolvedValueOnce({
       data: {

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

@@ -42,6 +42,8 @@ function basePost(over: Partial<ModalProps['post']> = {}): ModalProps['post'] {
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: null,
     tags: [],
     status: 'DRAFT',
     workflowStage: 'DRAFT',

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

@@ -52,6 +52,8 @@ function loadedPost(
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: [],
     tags: [],
     status: 'DRAFT',
     workflowStage: 'DRAFT',

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

@@ -30,6 +30,8 @@ function basePost(over: Partial<EditorPost> = {}): EditorPost {
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: null,
     tags: [],
     status: 'DRAFT',
     workflowStage: 'DRAFT',

package/src/__tests__/views/section-edit-form.render.test.tsx

@@ -5,6 +5,26 @@ import { SectionEditForm } from '../../views/page-editor/SectionEditForm.js'
 import { SectionsList } from '../../views/page-editor/SectionsPanel.js'
 import type { PageSection } from '../../lib/page-editor-service.js'
 
+vi.mock('../../fields/RichTextField.js', () => ({
+  RichTextField: ({
+    label,
+    value,
+    onChange,
+    helpText,
+  }: {
+    label: string
+    value?: string
+    onChange: (value: string) => void
+    helpText?: string
+  }) => (
+    <label>
+      {label}
+      <textarea aria-label={label} value={value ?? ''} onChange={(e) => onChange(e.target.value)} />
+      {helpText ? <span>{helpText}</span> : null}
+    </label>
+  ),
+}))
+
 afterEach(cleanup)
 
 function section(over: Partial<PageSection> = {}): PageSection {
@@ -85,6 +105,41 @@ describe('SectionEditForm — content only', () => {
     expect(screen.queryByLabelText('Section name')).toBeNull()
   })
 
+  it('edits the post Body field when an article body uses that source (#519)', () => {
+    const onPostBodyChange = vi.fn()
+    const { onContentChange } = renderForm({
+      section: section({
+        sectionType: 'article-body',
+        name: 'Article Body',
+        content: { source: 'field', body: '<p>custom</p>', width: 'normal', showToc: false },
+      }),
+      postBody: '<p>Hello</p>',
+      onPostBodyChange,
+    })
+    expect(screen.getByLabelText('Post body field')).toBeTruthy()
+    expect(screen.getByText(/Shared with post settings/i)).toBeTruthy()
+    expect(screen.queryByLabelText('Custom body')).toBeNull()
+    fireEvent.change(screen.getByLabelText('Post body field'), {
+      target: { value: '<p>Next</p>' },
+    })
+    expect(onPostBodyChange).toHaveBeenCalledWith('<p>Next</p>')
+    expect(onContentChange).not.toHaveBeenCalled()
+  })
+
+  it('keeps Custom body when the article body source is custom copy', () => {
+    renderForm({
+      section: section({
+        sectionType: 'article-body',
+        name: 'Article Body',
+        content: { source: 'override', body: '<p>Only here</p>' },
+      }),
+      postBody: '<p>Hello</p>',
+      onPostBodyChange: vi.fn(),
+    })
+    expect(screen.queryByLabelText('Post body field')).toBeNull()
+    expect(screen.getByLabelText('Custom body')).toBeTruthy()
+  })
+
   it('disables every control for a read-only user', () => {
     renderForm({ canEdit: false })
     // Asserted on the fieldset, not the input: a disabled ancestor fieldset is

package/src/lib/post-canvas-context.ts

@@ -0,0 +1,80 @@
+import { publicPathFor } from './public-path.js'
+
+/** A related-post card the canvas and public resolve endpoint both understand. */
+export interface CanvasRelatedPost {
+  title: string
+  url?: string
+  excerpt?: string
+}
+
+/**
+ * Byline for the canvas. The document's `authorName` is the post's author.
+ * The logged-in editor is only a fallback when that field is empty (#473).
+ */
+export function canvasAuthorName(
+  authorName: string | undefined,
+  session?: { name?: string; email?: string },
+): string | undefined {
+  const fromDoc = authorName?.trim()
+  if (fromDoc) return fromDoc
+  const fallback = session?.name?.trim() || session?.email?.trim()
+  return fallback || undefined
+}
+
+/**
+ * Hand-picked related posts already expanded to objects with titles.
+ * Returns null when the field is missing or still a list of ids, so the
+ * editor can fall back to recent published siblings.
+ */
+export function relatedPostsFromField(raw: unknown): CanvasRelatedPost[] | null {
+  if (!Array.isArray(raw) || raw.length === 0) return null
+  const cards: CanvasRelatedPost[] = []
+  for (const item of raw) {
+    if (!item || typeof item !== 'object') return null
+    const row = item as Record<string, unknown>
+    const title = typeof row.title === 'string' ? row.title.trim() : ''
+    if (!title) return null
+    const excerpt = typeof row.excerpt === 'string' ? row.excerpt : undefined
+    const url = typeof row.url === 'string' ? row.url : undefined
+    cards.push({
+      title,
+      ...(excerpt !== undefined ? { excerpt } : {}),
+      ...(url !== undefined ? { url } : {}),
+    })
+  }
+  return cards
+}
+
+interface SiblingDoc {
+  id: string
+  title?: string | null
+  slug?: string | null
+  data?: Record<string, unknown> | null
+}
+
+/**
+ * Recent published siblings, matching the public resolve payload: `data.title`
+ * wins over the denormalized column, and the URL uses the collection prefix.
+ */
+export function relatedPostsFromSiblings(
+  docs: readonly SiblingDoc[],
+  opts: { excludeId?: string | null; urlPrefix?: string; collection: string; limit?: number },
+): CanvasRelatedPost[] {
+  const limit = opts.limit ?? 3
+  const out: CanvasRelatedPost[] = []
+  for (const doc of docs) {
+    if (opts.excludeId && doc.id === opts.excludeId) continue
+    const data = doc.data ?? {}
+    const title = (typeof data.title === 'string' && data.title.trim()) || doc.title?.trim() || ''
+    if (!title) continue
+    const slug = doc.slug ?? (typeof data.slug === 'string' ? data.slug : '')
+    const excerpt = typeof data.excerpt === 'string' ? data.excerpt : undefined
+    out.push({
+      title,
+      ...(excerpt !== undefined ? { excerpt } : {}),
+      ...(slug ? { url: publicPathFor(opts.urlPrefix, opts.collection, slug) } : {}),
+    })
+    if (out.length >= limit) break
+  }
+  return out
+}

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

@@ -20,6 +20,7 @@
  * so the field-access layer doesn't strip them on write.
  */
 import { cmsApi } from './api.js'
+import { relatedPostsFromField, type CanvasRelatedPost } from './post-canvas-context.js'
 import { missingCollectionFields } from './collection-schema.js'
 import { SUBMIT_BEFORE_PUBLISH_ERROR, type WorkflowStage } from './workflow-chrome.js'
 import {
@@ -75,6 +76,13 @@ export interface EditorPost {
   featuredImageUrl: string
   body: string
   category: string
+  /** Display byline. Empty when the document has no `authorName`. */
+  authorName: string
+  /**
+   * Hand-picked related posts ready for the canvas. Null when the field is
+   * absent or only ids, so the editor loads recent published siblings instead.
+   */
+  canvasRelatedPosts: CanvasRelatedPost[] | null
   /** Editorial tags as plain strings (stored as `[{ tag }]` rows, see {@link parseTags}). */
   tags: string[]
   status: PostStatus
@@ -297,6 +305,8 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     featuredImageUrl: featured.url,
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
+    authorName: dataStr(data, 'authorName'),
+    canvasRelatedPosts: relatedPostsFromField(data.relatedPosts),
     tags: parseTags(data.tags),
     status: doc.status ?? 'DRAFT',
     workflowStage: (doc.workflowStage as WorkflowStage | undefined) ?? 'DRAFT',
@@ -491,6 +501,8 @@ export async function emptyPostFromTemplate(postType: string): Promise<EditorPos
     featuredImageUrl: '',
     body: '',
     category: '',
+    authorName: '',
+    canvasRelatedPosts: null,
     tags: [],
     status: 'DRAFT',
     workflowStage: 'DRAFT',

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

@@ -90,11 +90,11 @@ export function SectionEditForm({
       <fieldset disabled={!canEdit} className="space-y-3">
         {editPostBodyField && (
           <RichTextField
-            label="Body"
+            label="Post body field"
             value={postBody ?? ''}
             onChange={onPostBodyChange}
             className="[&_.ProseMirror]:min-h-[240px]"
-            helpText="Main article copy — rendered in the canvas preview and on the live site."
+            helpText="Shared with post settings. Edits here change the post's Body field, which the canvas and the live site both render."
           />
         )}
 

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

@@ -148,11 +148,11 @@ export function SectionInspector({
           </legend>
           {editPostBodyField && (
             <RichTextField
-              label="Body"
+              label="Post body field"
               value={postBody ?? ''}
               onChange={onPostBodyChange}
               className="[&_.ProseMirror]:min-h-[240px]"
-              helpText="Main article copy — rendered in the canvas preview and on the live site."
+              helpText="Shared with post settings. Edits here change the post's Body field, which the canvas and the live site both render."
             />
           )}
           {contentFields.map((field) => (

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

@@ -125,7 +125,7 @@ function EmptyBody({ onAddSection }: { onAddSection?: () => void }) {
       </span>
       <p className="text-muted-foreground text-sm">
         {onAddSection
-          ? 'The header is set by the template. Add body sections to build out this post. Hover sections for a light outline, click to open its editor in the section list.'
+          ? 'Add body sections to build out this post. Hover sections for a light outline, click to open its editor in the section list.'
           : 'This post’s template renders no body sections. Layout is design-owned — sections come from the template in code. Pick a different template in Post settings, or edit the template itself.'}
       </p>
       {onAddSection && (

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

@@ -21,6 +21,7 @@ function formatDate(value?: string | null): string {
  * public preview match.
  */
 export function PostHeader({ config, context }: PostHeaderProps) {
+  if (config.layout === 'none') return null
   const title = context.title || 'Untitled post'
   const date = config.showDate ? formatDate(context.publishDate) : ''
   const overlay =

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

@@ -69,32 +69,40 @@ export function PostHeaderPanel({ header, canEdit, onClose, onChange }: PostHead
               <option value="centered">Centered</option>
               <option value="left">Left-aligned</option>
               <option value="overlay">Image overlay</option>
+              <option value="none">None</option>
             </select>
+            {header.layout === 'none' && (
+              <p className="text-muted-foreground mt-1 text-xs">
+                The built-in header is hidden. Put the title in a section instead.
+              </p>
+            )}
           </div>
         </fieldset>
 
-        <fieldset disabled={!canEdit} className="space-y-2">
-          <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
-            Show in header
-          </legend>
-          {TOGGLES.map((t) => {
-            const value = header[t.key] === true
-            return (
-              <div
-                key={t.key}
-                className="border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm"
-              >
-                <span>{t.label}</span>
-                <Toggle
-                  checked={value}
-                  disabled={!canEdit}
-                  onCheckedChange={(v) => onChange({ [t.key]: v } as Partial<PostHeaderConfig>)}
-                  aria-label={t.label}
-                />
-              </div>
-            )
-          })}
-        </fieldset>
+        {header.layout !== 'none' && (
+          <fieldset disabled={!canEdit} className="space-y-2">
+            <legend className="text-muted-foreground mb-2 text-[10px] font-medium tracking-wider uppercase">
+              Show in header
+            </legend>
+            {TOGGLES.map((t) => {
+              const value = header[t.key] === true
+              return (
+                <div
+                  key={t.key}
+                  className="border-border text-foreground flex w-full items-center justify-between rounded-md border px-2.5 py-1.5 text-sm"
+                >
+                  <span>{t.label}</span>
+                  <Toggle
+                    checked={value}
+                    disabled={!canEdit}
+                    onCheckedChange={(v) => onChange({ [t.key]: v } as Partial<PostHeaderConfig>)}
+                    aria-label={t.label}
+                  />
+                </div>
+              )
+            })}
+          </fieldset>
+        )}
       </div>
     </ResizableAside>
   )

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

@@ -55,6 +55,12 @@ import { buildEditorContentHtml } from '../../lib/editor-seo-content.js'
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
 import { ReflowContext } from '../page-editor/reflow-context.js'
 import type { Zoom } from '../../lib/breakpoints.js'
+import { cmsApi } from '../../lib/api.js'
+import {
+  canvasAuthorName,
+  relatedPostsFromSiblings,
+  type CanvasRelatedPost,
+} from '../../lib/post-canvas-context.js'
 import { inspectorIdFromFieldPath } from '../../lib/preview-bridge.js'
 import { PostEditorCanvas } from './PostEditorCanvas.js'
 import { PostFieldsModal, type PostFieldConfig } from './PostFieldsModal.js'
@@ -333,6 +339,43 @@ export function PostSectionEditor({
   // ─── Unsaved-changes guard (client-side navigation + browser unload) ──
   useNavigationBlocker(dirty)
 
+  const [siblingPosts, setSiblingPosts] = useState<CanvasRelatedPost[]>([])
+
+  useEffect(() => {
+    if (!post?.id || post.canvasRelatedPosts !== null) {
+      setSiblingPosts([])
+      return
+    }
+    let cancelled = false
+    const urlPrefix = config?.collections?.[postType]?.urlPrefix
+    cmsApi<{
+      docs?: Array<{
+        id: string
+        title?: string | null
+        slug?: string | null
+        data?: Record<string, unknown> | null
+      }>
+    }>(
+      `/collections/${encodeURIComponent(postType)}?status=PUBLISHED&pageSize=4&sort=publishedAt&order=desc`,
+    )
+      .then((res) => {
+        if (cancelled) return
+        setSiblingPosts(
+          relatedPostsFromSiblings(res.data?.docs ?? [], {
+            excludeId: post.id,
+            urlPrefix,
+            collection: postType,
+          }),
+        )
+      })
+      .catch(() => {
+        if (!cancelled) setSiblingPosts([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [post?.id, post?.canvasRelatedPosts, postType, config])
+
   const context: PostRenderContext = useMemo(
     () => ({
       title: post?.title,
@@ -341,9 +384,10 @@ export function PostSectionEditor({
       featuredImageUrl: post?.featuredImageUrl,
       publishDate: post?.publishDate ?? post?.updatedAt ?? null,
       category: post?.category,
-      author: { name: session?.user?.name || session?.user?.email },
+      author: { name: canvasAuthorName(post?.authorName, session?.user) },
+      relatedPosts: post?.canvasRelatedPosts ?? siblingPosts,
     }),
-    [post, session],
+    [post, session, siblingPosts],
   )
 
   // ─── Section mutations ───────────────────────────────────────────────