an editor opens beside the page, not under it
The spacing and free-text editors rendered below the preview, so they took their height from the thing being edited: choosing a spacing shrank the page you were choosing it for, and on a laptop two dropdowns cost a third of the frame. They are a third panel now, to the right of the preview. The workspace already knows how to size and move panels; a drawer was a second, worse layout system living inside one of them. The panel holds nothing. Whichever panel owns a selection BUILDS the editor and announces it through a `useGlobal` slot — the two are siblings and neither may own the other, and a provider around both would mean something above them knowing they exist. The slot carries the ELEMENT, not a description of one. A descriptor plus a switch would move every editor's loading, saving and cancelling into a panel that would have to learn what a section is — a second place that understands the page builder, kept in step by hand. SaveTarget makes the same trade for the same reason. The hazard is real and worth naming: an element captures the props it was built with, so the announcing effect must depend on everything the editor DISPLAYS. The save handlers sit in refs so they cannot drag that list wider — depending on them would re-announce on every keystroke, and omitting them without refs would announce a stale one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,30 @@
|
||||
import { useEditorSlot } from './useEditorSlot';
|
||||
|
||||
/**
|
||||
* Where an editor opens — a column beside the preview rather than a drawer beneath it.
|
||||
*
|
||||
* It was rendered under the frame, which took the height from the thing being edited: choosing a
|
||||
* spacing shrank the page you were choosing it for, and on a laptop the preview lost a third of itself
|
||||
* to a row of two dropdowns. A panel keeps the page whole and puts the controls where a workspace puts
|
||||
* controls.
|
||||
*
|
||||
* It holds nothing. The panel that owns a selection builds the editor and announces it — see
|
||||
* useEditorSlot for why it carries the element rather than a description of one.
|
||||
*/
|
||||
export const EditorPanel = () => {
|
||||
const [editor] = useEditorSlot();
|
||||
|
||||
if (!editor) {
|
||||
return (
|
||||
<div className="flex size-full items-center justify-center p-6 text-center">
|
||||
{/* Names what the panel is FOR rather than saying it is empty. "Nothing selected" describes
|
||||
this component's state; this describes the reader's next move. */}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Pick a block in the page to edit it, or press Spacing on a band.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className="size-full overflow-auto p-3">{editor}</div>;
|
||||
};
|
||||
Reference in New Issue
Block a user