Free Text, written from inside the page

Every column gets Add component; every component in one gets Edit and Delete, drawn ON the rendered
thing rather than replacing it. An editor that swaps content for a placeholder is showing you the
editor, not the page — and free text with nothing in it renders as nothing, so the outline is the only
thing saying it is there.

Add component opens the editor STRAIGHT AWAY. Free Text is the only kind, and one option is not a
choice: a picker offering it would be a click asking to be got past. The picker arrives with the second
kind, which is when it starts meaning something.

The add button is quieter than Add section. This is the inner loop, and a control as loud as the one
that adds a whole band would make every column shout.

── The dialog, and the limitation worth naming ──

Editing happens in a modal, not in the page. In-place is the obvious idea and a much bigger one: the
toolbar would have to live in a document the site owns, the site's typography would fight it, and every
keystroke would cross into another document. The dialog is where a working editor already exists, and
it costs a modal instead of a rewrite.

So what you type is not laid out in the page until you save. The preview reloads immediately after, so
the loop is short — but it is a loop, and direct manipulation is what a page builder eventually wants.

The editor is keyed on the stored html, so opening a different component rebuilds it rather than
reusing one still holding the last component's document. Empty text saves: clearing a paragraph is
deleting its words, not abandoning the edit.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/PageBuilderPanel.tsx

@@ -4,8 +4,9 @@ import { useClient } from 'hooks/useClient';
 import { readableError } from '../errors';
 import { SitePreview, useDevPort } from '../SitePreview';
 import { usePreviewable, useViewMode } from '../ViewMode';
-import { paintCanvas, type CanvasSection } from '../canvas';
+import { paintCanvas, type CanvasComponent, type CanvasSection } from '../canvas';
 import { AddSectionDialog, type SectionLayout } from './AddSectionDialog';
+import { FreeTextDialog } from './FreeTextDialog';
 import { usePages, type Page } from '../usePages';
 
 /**
@@ -50,9 +51,19 @@ export const PageBuilderPanel = () => {
     so putting them in the dependency list would repaint on every render; through a ref they are always
     the current ones without being part of the identity.
   */
-  const handlersRef = useRef<{ add: () => void; remove: (id: number) => void }>({ add: () => {}, remove: () => {} });
+  const handlersRef = useRef<{
+    add: () => void;
+    remove: (id: number) => void;
+    addComponent: (section: CanvasSection, column: number) => void;
+    editComponent: (component: CanvasComponent) => void;
+    removeComponent: (component: CanvasComponent) => void;
+  }>({ add: () => {}, remove: () => {}, addComponent: () => {}, editComponent: () => {}, removeComponent: () => {} });
   const [adding, setAdding] = useState(false);
   const [creating, setCreating] = useState(false);
+  /** The component being written, and where a new one would go. Null when the dialog is shut. */
+  const [editing, setEditing] = useState<{ id: number | null; sectionId: number; column: number; html: string } | null>(
+    null,
+  );
   /*
     Bumped after a write, and passed to SitePreview to remount the frame.
 
@@ -86,6 +97,9 @@ export const PageBuilderPanel = () => {
         sections,
         onAddSection: () => handlersRef.current.add(),
         onDeleteSection: (section) => handlersRef.current.remove(section.id),
+        onAddComponent: (section, column) => handlersRef.current.addComponent(section, column),
+        onEditComponent: (component) => handlersRef.current.editComponent(component),
+        onDeleteComponent: (component) => handlersRef.current.removeComponent(component),
       });
     },
     // `mode` is in here so switching to View gives SitePreview a NEW function, which runs the previous
@@ -162,7 +176,63 @@ export const PageBuilderPanel = () => {
 
   // Assigned on every render, after both functions above exist, so the ref always holds the current
   // pair without either being part of `onDocument`'s identity.
-  handlersRef.current = { add: () => setAdding(true), remove: (sectionId: number) => void deleteSection(sectionId) };
+  /*
+    Free Text is the only kind, so Add component opens the editor straight away.
+
+    No picker in between: one option is not a choice, and a dialog that offers it is a click asking to
+    be got past. The picker arrives with the second kind, which is the moment it starts meaning
+    something.
+  */
+  const addComponent = (section: CanvasSection, column: number) =>
+    setEditing({ id: null, sectionId: section.id, column, html: '' });
+
+  const editComponent = (component: CanvasComponent) => {
+    const owner = sections.find((section) => section.components.some((one) => one.id === component.id));
+    const stored = owner?.components.find((one) => one.id === component.id);
+    const html = typeof stored?.content?.html === 'string' ? stored.content.html : '';
+    setEditing({ id: component.id, sectionId: owner?.id ?? 0, column: component.column, html });
+  };
+
+  const saveText = async (html: string) => {
+    if (!page || !editing) return;
+    setCreating(true);
+    setError(null);
+    const base = `/fofos-admin/pages/${page.id}/sections/${editing.sectionId}/components`;
+    try {
+      if (editing.id === null) {
+        await clientRef.current.post(base, { kind: 'free-text', column: editing.column, content: { html } });
+      } else {
+        await clientRef.current.patch(`${base}/${editing.id}`, { content: { html } });
+      }
+      setEditing(null);
+      setRendered((n) => n + 1);
+    } catch (failure) {
+      setError(readableError(failure));
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const deleteComponent = async (component: CanvasComponent) => {
+    if (!page) return;
+    const owner = sections.find((section) => section.components.some((one) => one.id === component.id));
+    if (!owner) return;
+    setError(null);
+    try {
+      await clientRef.current.delete(`/fofos-admin/pages/${page.id}/sections/${owner.id}/components/${component.id}`);
+      setRendered((n) => n + 1);
+    } catch (failure) {
+      setError(readableError(failure));
+    }
+  };
+
+  handlersRef.current = {
+    add: () => setAdding(true),
+    remove: (sectionId: number) => void deleteSection(sectionId),
+    addComponent,
+    editComponent,
+    removeComponent: (component) => void deleteComponent(component),
+  };
 
   if (error) return <div className="p-4 text-xs text-destructive">{error}</div>;
   if (!pages) return <div className="p-4 text-xs text-muted-foreground">Loading…</div>;
@@ -192,6 +262,14 @@ export const PageBuilderPanel = () => {
         onCancel={() => setAdding(false)}
         onCreate={(values) => void createSection(values)}
       />
+
+      <FreeTextDialog
+        open={editing !== null}
+        busy={creating}
+        initial={editing?.html ?? ''}
+        onCancel={() => setEditing(null)}
+        onSave={(html) => void saveText(html)}
+      />
     </div>
   );
 };