pastilhasandClaude Opus 5
b7c887a9e8
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>
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { RichText } from '../RichText';
|
|
|
|
/**
|
|
* Writing the words in a Free Text component.
|
|
*
|
|
* ── Why a dialog and not in-place on the page ──
|
|
*
|
|
* Editing inside the frame is the obvious idea and it is a much bigger one: the editor's toolbar would
|
|
* have to live in a document the site owns, the site's own typography would fight it, and every
|
|
* keystroke would cross into another document. The dialog is where the plugin already has a working
|
|
* editor, and it costs a modal instead of a rewrite.
|
|
*
|
|
* It is a real limitation and worth naming: 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 rather than direct
|
|
* manipulation, and direct manipulation is what a page builder eventually wants.
|
|
*/
|
|
export const FreeTextDialog = ({
|
|
open,
|
|
busy,
|
|
initial,
|
|
onCancel,
|
|
onSave,
|
|
}: {
|
|
open: boolean;
|
|
busy: boolean;
|
|
/** What is stored today. Empty for a component that was only just added. */
|
|
initial: string;
|
|
onCancel: () => void;
|
|
onSave: (html: string) => void;
|
|
}) => {
|
|
const [html, setHtml] = useState(initial);
|
|
|
|
// Reset from the stored value on every open, so a cancelled edit is genuinely cancelled rather than
|
|
// waiting in the box for the next time somebody opens it.
|
|
useEffect(() => {
|
|
if (open) setHtml(initial);
|
|
}, [open, initial]);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={(next) => !next && onCancel()}>
|
|
<DialogContent className="sm:max-w-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>Text</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{/* Keyed on `initial`, so opening a DIFFERENT component rebuilds the editor rather than
|
|
reusing one still holding the last component's document. */}
|
|
<div className="min-h-0 max-h-[60vh] overflow-auto">
|
|
<RichText key={initial} value={html} onChange={setHtml} placeholder="Write something." />
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="ghost" onClick={onCancel} disabled={busy}>
|
|
Cancel
|
|
</Button>
|
|
{/* No disabled-when-empty here, unlike the section name: empty text is a legitimate thing to
|
|
save. Somebody clearing a paragraph is deleting its words, not abandoning the edit. */}
|
|
<Button onClick={() => onSave(html)} disabled={busy}>
|
|
{busy && <Loader2 className="size-3.5 animate-spin" />}
|
|
Save text
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|