the text editor renders below the page, and types into it

A modal covered the thing being edited, which for a page builder is the whole subject: you are choosing
how words sit in a column, and a dialog in front of the column answers a different question. It sits
under the preview now, the way the Layout section's controls already do.

AND THE TEXT LANDS IN THE PAGE AS IT IS TYPED. The panel writes each change straight into the
component's node in the frame, so the loop stops being "type, save, look" and becomes looking. That is
the same door everything else here goes through — the frame is same origin — and it is what the modal
made impossible rather than merely awkward.

The node's children are replaced and the injected tools put back. Those live inside the component and
belong to the admin, so an innerHTML that forgot them would take the Edit button away mid-edit.

Not sanitised while typing. The server cleans on write, so what is on screen can be marginally more
permissive than what is stored — and the difference shows the moment it is saved, which is the right
place to find out.

Cancel reloads the frame rather than restoring the markup by hand. The node has been written into on
every keystroke, and putting it back correctly means remembering what was there before the first one; a
reload is the same answer with nothing to get wrong.

The editor is capped and scrolls, so a long piece does not push the page off the top of the panel.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-08-31 06:06:45 +01:00
co-authored by Claude Opus 5
parent 466ad26f11
commit 45104c1f98
4 changed files with 113 additions and 80 deletions
+3 -1
View File
@@ -265,7 +265,9 @@ export function paintCanvas(document: Document, canvas: Canvas): () => void {
const wasPosition = node.style.position;
node.style.position = 'relative';
// The outline and the tools' visibility are the stylesheet's, so they can depend on :hover.
node.setAttribute('data-fofos-component', '');
// The ID, not an empty marker: the panel writes a draft into this node as somebody types, and
// has to be able to find the one being edited.
node.setAttribute('data-fofos-component', String(component.id));
undo.push(() => {
node.style.position = wasPosition;
node.removeAttribute('data-fofos-component');