@prenta/admin 0.94.0 → 0.95.0

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

@@ -0,0 +1,162 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+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'
+
+afterEach(cleanup)
+
+function section(over: Partial<PageSection> = {}): PageSection {
+  return {
+    id: 's1',
+    sectionType: 'hero',
+    name: 'Hero Banner',
+    visible: true,
+    content: { heading: 'Existing headline' },
+    settings: { backgroundType: 'solid', backgroundColor: 'purple', paddingY: 'lg' },
+    ...over,
+  } as PageSection
+}
+
+function renderForm(over: Partial<Parameters<typeof SectionEditForm>[0]> = {}) {
+  const onContentChange = vi.fn()
+  const onMetaChange = vi.fn()
+  render(
+    <SectionEditForm
+      section={section()}
+      canEdit
+      onContentChange={onContentChange}
+      onMetaChange={onMetaChange}
+      {...over}
+    />,
+  )
+  return { onContentChange, onMetaChange }
+}
+
+describe('SectionEditForm — content only', () => {
+  it('renders the type’s content fields', () => {
+    renderForm()
+    expect(screen.getByDisplayValue('Existing headline')).toBeTruthy()
+    // Exact: the hero type also declares "Primary button URL", and a loose
+    // match would find both and fail for the wrong reason.
+    expect(screen.getByLabelText('Primary button')).toBeTruthy()
+    expect(screen.getByLabelText('Primary button URL')).toBeTruthy()
+  })
+
+  it('edits content through the patch sink', () => {
+    const { onContentChange } = renderForm()
+    fireEvent.change(screen.getByDisplayValue('Existing headline'), {
+      target: { value: 'New headline' },
+    })
+    expect(onContentChange).toHaveBeenCalledWith({ heading: 'New headline' })
+  })
+
+  /**
+   * The reason this component exists rather than a trimmed inspector. This CMS
+   * edits words, images and embed code; `docs/design-owned-sections.md` says
+   * the editor never changes styling, and the old panel offered background,
+   * colour, spacing and a CSS class one panel away from that sentence.
+   */
+  it('offers no styling controls at all', () => {
+    renderForm()
+    for (const label of [/^Background$/i, /^Color$/i, /^Spacing$/i, /CSS class/i]) {
+      expect(screen.queryByLabelText(label), `${label} is still editable`).toBeNull()
+    }
+    expect(screen.queryByText(/Appearance/i)).toBeNull()
+    expect(screen.queryByRole('combobox')).toBeNull()
+  })
+
+  it('says where the missing controls went, so their absence reads as deliberate', () => {
+    renderForm()
+    expect(screen.getByText(/come from the template/i)).toBeTruthy()
+  })
+
+  it('keeps the naming fields, which are not styling', () => {
+    const { onMetaChange } = renderForm()
+    fireEvent.change(screen.getByLabelText('Section name'), { target: { value: 'Intro' } })
+    expect(onMetaChange).toHaveBeenCalledWith({ name: 'Intro' })
+    expect(screen.getByLabelText('Internal label')).toBeTruthy()
+  })
+
+  it('explains an unmanaged section instead of rendering an empty form', () => {
+    renderForm({ section: section({ sectionType: 'opal-pricing', unmanaged: true }) })
+    expect(screen.getByText(/Managed outside the editor/i)).toBeTruthy()
+    expect(screen.queryByLabelText('Section name')).toBeNull()
+  })
+
+  it('disables every control for a read-only user', () => {
+    renderForm({ canEdit: false })
+    // Asserted on the fieldset, not the input: a disabled ancestor fieldset is
+    // what actually disables the controls, and `input.disabled` reports only
+    // the element's own attribute, so checking the input passes either way.
+    const field = screen.getByDisplayValue('Existing headline')
+    const fieldset = field.closest('fieldset')
+    expect(fieldset).toBeTruthy()
+    expect(fieldset!.disabled).toBe(true)
+  })
+})
+
+describe('SectionsList — the editor opens inside its row', () => {
+  const sections = [section(), section({ id: 's2', name: 'CTA Banner', sectionType: 'cta' })]
+
+  function renderList(selectedId: string | null, withEditor = true) {
+    const onSelect = vi.fn()
+    render(
+      <SectionsList
+        sections={sections}
+        selectedId={selectedId}
+        canEdit
+        onSelect={onSelect}
+        onToggleVisibility={vi.fn()}
+        renderEditor={
+          withEditor
+            ? (s) => <div data-testid={`editor-${s.id}`}>editor for {s.name}</div>
+            : undefined
+        }
+      />,
+    )
+    return { onSelect }
+  }
+
+  it('renders the editor for the selected row and no other', () => {
+    renderList('s1')
+    expect(screen.getByTestId('editor-s1')).toBeTruthy()
+    expect(screen.queryByTestId('editor-s2')).toBeNull()
+  })
+
+  it('renders no editor when nothing is selected', () => {
+    renderList(null)
+    expect(screen.queryByTestId('editor-s1')).toBeNull()
+  })
+
+  it('gives the row a disclosure control that reports its state', () => {
+    renderList('s1')
+    // The chevron is what says the row opens at all — without one the list
+    // reads as links to somewhere else, which is what it was.
+    const open = screen.getByRole('button', { name: 'Close Hero Banner' })
+    expect(open.getAttribute('aria-expanded')).toBe('true')
+    expect(
+      screen.getByRole('button', { name: 'Edit CTA Banner' }).getAttribute('aria-expanded'),
+    ).toBe('false')
+  })
+
+  it('points the disclosure at the editor it opens', () => {
+    renderList('s1')
+    const control = screen.getByRole('button', { name: 'Close Hero Banner' })
+    const target = control.getAttribute('aria-controls')
+    expect(target).toBe('section-editor-s1')
+    expect(document.getElementById(target!)).toBeTruthy()
+  })
+
+  it('selects a closed row when its chevron is used', () => {
+    const { onSelect } = renderList('s1')
+    fireEvent.click(screen.getByRole('button', { name: 'Edit CTA Banner' }))
+    expect(onSelect).toHaveBeenCalledWith('s2')
+  })
+
+  it('shows no disclosure when the list renders no editor (template list)', () => {
+    renderList('s1', false)
+    expect(screen.queryByRole('button', { name: /^(Edit|Close) / })).toBeNull()
+  })
+})

package/src/__tests__/views/section-inspector-media.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { companionDimensionKeys } from '../../views/page-editor/SectionInspector.js'
+import { companionDimensionKeys } from '../../views/page-editor/section-fields.js'
 
 describe('companionDimensionKeys', () => {
   it('maps a *Url field to *Width / *Height (feature, hero)', () => {

package/src/__tests__/views/section-inspector-repeater.render.test.tsx

@@ -3,7 +3,8 @@ import { describe, expect, it, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
 import { createSection } from '../../lib/page-editor-service.js'
-import { SectionInspector, repeaterRowSummary } from '../../views/page-editor/SectionInspector.js'
+import { SectionInspector } from '../../views/page-editor/SectionInspector.js'
+import { repeaterRowSummary } from '../../views/page-editor/section-fields.js'
 import type { SectionFieldDef } from '../../views/page-editor/section-types.js'
 
 /**

package/src/components/CanvasEditTip.tsx

@@ -26,9 +26,9 @@ export function CanvasEditTip() {
       <p className="min-w-0 flex-1 leading-[1.5]">
         <span className="text-foreground font-medium">Editing tip</span>
         {' — '}
-        Hover sections for a light outline, then click to select. Edit copy and images in the
-        inspector. Use <span className="text-foreground font-medium">Site preview</span> to click
-        text and images in place.
+        Click a section on the canvas, or in the list, to open its copy and images in the section
+        list. Use <span className="text-foreground font-medium">Site preview</span> to click text
+        and images in place.
       </p>
       <button
         type="button"

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

@@ -29,7 +29,6 @@ import {
   updateSectionContent,
   updateSectionContentAtPath,
   updateSectionMeta,
-  updateSectionSettings,
   validatePage,
   type EditorPage,
   type ValidationResult,
@@ -41,7 +40,6 @@ import {
   createPreviewToken,
 } from '../../lib/preview-link.js'
 import { usePublicSiteUrl } from '../../hooks/usePublicSiteUrl.js'
-import type { SectionSettings } from './section-types.js'
 import { DEFAULT_VIEWPORT, type ViewportId } from './viewports.js'
 import type { Zoom } from '../../lib/breakpoints.js'
 import { snapshotBaseline, type ReflowBaseline } from '../../lib/reflow-baseline.js'
@@ -63,7 +61,7 @@ import { EditorCanvas } from './EditorCanvas.js'
 import { ReflowContext } from './reflow-context.js'
 import { SitePreviewFrame } from './SitePreviewFrame.js'
 import { useSitePreview } from './useSitePreview.js'
-import { SectionInspector } from './SectionInspector.js'
+import { SectionEditForm } from './SectionEditForm.js'
 import { PageSettingsModal } from './PageSettingsModal.js'
 import { ValidationSummary } from './ValidationSummary.js'
 import { resolveDefaultSitePreview } from '../../lib/editor-preview.js'
@@ -508,13 +506,12 @@ export function PageSectionEditor({
     [selectedId, mutateSections],
   )
 
-  const handleSettingsChange = useCallback(
-    (patch: Partial<SectionSettings>) => {
-      if (!selectedId) return
-      mutateSections((s) => updateSectionSettings(s, selectedId, patch))
-    },
-    [selectedId, mutateSections],
-  )
+  // NOTE: there is deliberately no `handleSettingsChange` here any more.
+  // `settings` holds background, spacing, anchor and CSS class — the template's
+  // business, not the editor's (docs/design-owned-sections.md). The values
+  // still round-trip through save untouched and the renderers still read them;
+  // this editor simply no longer offers to change them. The post TEMPLATE
+  // editor keeps the full set, because that is the surface that authors one.
 
   const handleMetaChange = useCallback(
     (patch: { name?: string; internalLabel?: string }) => {
@@ -902,8 +899,6 @@ export function PageSectionEditor({
     )
   }
 
-  const selected = page.sections.find((s) => s.id === selectedId) ?? null
-
   // `readOnly` / `effectiveCanEdit` / `canRestoreVersion` are computed above,
   // with the hooks, so the callbacks defined there share this one gate.
 
@@ -1049,6 +1044,21 @@ export function PageSectionEditor({
                         canEdit={effectiveCanEdit}
                         onSelect={handleSelectSection}
                         onToggleVisibility={handleToggleVisibility}
+                        // The editor opens inside the row it belongs to. While
+                        // reviewing a past version there is nothing to edit, so
+                        // rows stay closed rather than opening a dead form.
+                        renderEditor={
+                          reviewing
+                            ? undefined
+                            : (section) => (
+                                <SectionEditForm
+                                  section={section}
+                                  canEdit={effectiveCanEdit}
+                                  onContentChange={handleContentChange}
+                                  onMetaChange={handleMetaChange}
+                                />
+                              )
+                        }
                       />
                     ) : railTab === 'page' ? (
                       <div className="min-h-0 flex-1 overflow-y-auto">
@@ -1153,18 +1163,6 @@ export function PageSectionEditor({
                 />
               )}
             </div>
-
-            {selected && railTab === 'sections' && !reviewing && (
-              <SectionInspector
-                section={selected}
-                canEdit={effectiveCanEdit}
-                onClose={() => setSelectedId(null)}
-                onContentChange={handleContentChange}
-                onSettingsChange={handleSettingsChange}
-                onMetaChange={handleMetaChange}
-                onToggleVisibility={() => handleToggleVisibility(selected.id)}
-              />
-            )}
           </div>
         </ReflowContext.Provider>
       </div>

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

@@ -0,0 +1,161 @@
+'use client'
+
+import { ExternalLink, Lock } from 'lucide-react'
+import { RichTextField } from '../../fields/RichTextField.js'
+import type { PageSection } from '../../lib/page-editor-service.js'
+import { ContentField, FIELD_INPUT, FIELD_LABEL } from './section-fields.js'
+import { getSectionType } from './section-types.js'
+
+export interface SectionEditFormProps {
+  section: PageSection
+  canEdit: boolean
+  onContentChange: (patch: Record<string, unknown>) => void
+  onMetaChange: (patch: { name?: string; internalLabel?: string }) => void
+  /** Post body field — shown when an Article Body section is bound to the post field. */
+  postBody?: string
+  onPostBodyChange?: (html: string) => void
+}
+
+/**
+ * The section editor, rendered inline as the body of its row.
+ *
+ * ── Why inline, and not a docked panel ────────────────────────────────────
+ *
+ * The design puts the form inside the row it belongs to: click a section, it
+ * opens underneath. It never had a right-hand panel. The panel that existed
+ * here was left over from the pre-handoff editor, and the rail work that
+ * introduced the tab strip explicitly retired the OTHER right-hand aside — the
+ * SEO one — on the grounds that "the editor has one settings surface rather
+ * than two competing ones". This is that same second surface, finally closed.
+ *
+ * ── Why there is no Appearance group ──────────────────────────────────────
+ *
+ * This CMS edits words, images and embed code. Background, colour and spacing
+ * are the template's business, and `docs/design-owned-sections.md` already
+ * says so in as many words: the editor changes "copy, CTAs, and imagery —
+ * never layout, order, or styling". The controls contradicted that rule while
+ * sitting one panel away from the sentence stating it.
+ *
+ * The VALUES are untouched. `settings` round-trips through save exactly as
+ * before, the renderers keep reading it, and every existing page renders
+ * identically — the editor simply stops offering to change it. Removing the
+ * controls and dropping the data are very different changes, and this is only
+ * the first. The template editor keeps the full set: it is the surface that
+ * authors a template, and styling genuinely belongs there.
+ */
+export function SectionEditForm({
+  section,
+  canEdit,
+  onContentChange,
+  onMetaChange,
+  postBody,
+  onPostBodyChange,
+}: SectionEditFormProps) {
+  const def = getSectionType(section.sectionType)
+
+  // Unmanaged types have no registered field schema, so there is nothing to
+  // render a form from. Say why rather than showing an empty box.
+  if (section.unmanaged) {
+    return (
+      <div className="border-border bg-muted/40 border-t px-3 py-3">
+        <p className="text-muted-foreground flex items-start gap-2 text-xs leading-relaxed">
+          <Lock className="mt-0.5 h-3.5 w-3.5 shrink-0" aria-hidden />
+          <span>
+            <span className="text-foreground font-medium">Managed outside the editor</span> — this
+            section&rsquo;s type (<code className="font-mono">{section.sectionType}</code>) is not
+            registered, so it is preserved on save but edited in code.
+          </span>
+        </p>
+      </div>
+    )
+  }
+
+  const bodySource = String(section.content.source ?? 'field')
+  const editPostBodyField =
+    section.sectionType === 'article-body' &&
+    bodySource === 'field' &&
+    onPostBodyChange !== undefined
+  const contentFields = def?.fields.filter((f) => !(editPostBodyField && f.key === 'body')) ?? []
+
+  return (
+    <div className="border-border bg-muted/40 border-t px-3 py-3.5">
+      <fieldset disabled={!canEdit} className="space-y-3">
+        {editPostBodyField && (
+          <RichTextField
+            label="Body"
+            value={postBody ?? ''}
+            onChange={onPostBodyChange}
+            className="[&_.ProseMirror]:min-h-[240px]"
+            helpText="Main article copy — rendered in the canvas preview and on the live site."
+          />
+        )}
+
+        {contentFields.map((field) => (
+          <ContentField
+            key={field.key}
+            id={`sec-${section.id}-${field.key}`}
+            field={field}
+            value={section.content[field.key]}
+            onChange={(v) => onContentChange({ [field.key]: v })}
+            onPatch={(patch) => onContentChange(patch)}
+          />
+        ))}
+
+        {contentFields.length === 0 && !editPostBodyField && (
+          <p className="text-muted-foreground text-xs">
+            This section has no editable content — it is rendered entirely from the template.
+          </p>
+        )}
+
+        <details className="group">
+          <summary className="text-muted-foreground hover:text-foreground cursor-pointer list-none text-[11px] font-medium tracking-wider uppercase">
+            Section settings
+          </summary>
+          <div className="mt-2.5 space-y-3">
+            <div>
+              <label className={FIELD_LABEL} htmlFor={`sec-${section.id}-name`}>
+                Section name
+              </label>
+              <input
+                id={`sec-${section.id}-name`}
+                className={FIELD_INPUT}
+                value={section.name}
+                onChange={(e) => onMetaChange({ name: e.target.value })}
+              />
+            </div>
+            <div>
+              <label className={FIELD_LABEL} htmlFor={`sec-${section.id}-internal`}>
+                Internal label
+              </label>
+              <input
+                id={`sec-${section.id}-internal`}
+                className={FIELD_INPUT}
+                placeholder="Team-only note (optional)"
+                value={section.internalLabel ?? ''}
+                onChange={(e) => onMetaChange({ internalLabel: e.target.value })}
+              />
+            </div>
+          </div>
+        </details>
+      </fieldset>
+
+      {/* The design's locked note, per section rather than once per rail: this
+          is where an editor looks for the control that is missing. */}
+      <p className="text-muted-foreground mt-3 flex items-start gap-1.5 text-[11px] leading-relaxed">
+        <Lock className="mt-0.5 h-3 w-3 shrink-0" aria-hidden />
+        <span>
+          Background, spacing and layout come from the template.{' '}
+          <a
+            href="https://github.com/actuate-media/prenta/blob/main/docs/design-owned-sections.md"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-brand inline-flex items-center gap-0.5 hover:underline"
+          >
+            Why
+            <ExternalLink className="h-2.5 w-2.5" aria-hidden />
+          </a>
+        </span>
+      </p>
+    </div>
+  )
+}