Skip to content

Inline text editing on the canvas (double-click to edit) #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DavidBabinec merged 18 commits into from
Jun 11, 2026
Merged

Inline text editing on the canvas (double-click to edit) #25

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
629270d
docs: add approved inline text editing design spec
DavidBabinec Jun 10, 2026
f975e9a
feat(module-engine): add inlineTextEdit contract, declare on text/but…
DavidBabinec Jun 10, 2026
a0a7f24
feat(editor-store): add inline text edit session slice with coalesced…
DavidBabinec Jun 10, 2026
6bfcbf6
feat(editor-store): force-close inline edit sessions on deletion and …
DavidBabinec Jun 11, 2026
20edb1d
feat(canvas): add inline-edit typography mirroring helpers
DavidBabinec Jun 11, 2026
6bad4b7
feat(canvas): add InlineTextEditOverlay, mounted per breakpoint frame
DavidBabinec Jun 11, 2026
ee59e9f
feat(canvas): wire double-click inline editing and hide doubled text
DavidBabinec Jun 11, 2026
41b2575
docs: document canvas inline text editing (parent-doc overlay)
DavidBabinec Jun 11, 2026
a617084
docs: fix remaining stale slice counts in editor.md (11 -> 12)
DavidBabinec Jun 11, 2026
83bf384
docs: fix stale slice count in adminUi header comment (11 -> 12)
DavidBabinec Jun 11, 2026
7447335
Merge origin/main into feat/inline-text-editing
DavidBabinec Jun 11, 2026
6cfeb1a
fix(canvas): render canvas + inline-edit field in the site's fonts, n…
DavidBabinec Jun 11, 2026
61b3457
fix(canvas): stop inline-edit field scroll-shifting multi-line text
DavidBabinec Jun 11, 2026
b7b265a
fix(canvas): remove inline-edit open flash by positioning in a layout…
DavidBabinec Jun 11, 2026
a23853d
feat(canvas): rewrite inline text editing to edit the real element in…
DavidBabinec Jun 11, 2026
84b59ea
fix(canvas): stop React clobbering the inline-edit caret every keystroke
DavidBabinec Jun 11, 2026
4fe6f20
fix(canvas): let the spacebar type a space during inline editing
DavidBabinec Jun 11, 2026
3486ff0
fix(canvas): finalize inline editing — keyboard-forward guard, select…
DavidBabinec Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(canvas): remove inline-edit open flash by positioning in a layout… 
… effect

The first position+focus tick ran in a useEffect (after paint), so the field
painted once at the canvas origin in its default font before the tick moved
and type-matched it — a visible flash on every double-click. Move the initial
tick + focus into useLayoutEffect so the field is correct on its first painted
frame.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
  • Loading branch information
@DavidBabinec @claude
DavidBabinec and claude committed Jun 11, 2026
commit b7b265a05607a213723f2d95e75d0911ec881e01
13 changes: 8 additions & 5 deletions src/admin/pages/site/canvas/InlineTextEditOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
* - Escape → cancel (single undo of the coalesced burst iff committed).
* - Node unmounted / rect unmeasurable / frame unmount → force-close.
*/
import { use, useEffect, useEffectEvent, useRef } from 'react'
import { use, useEffect, useEffectEvent, useLayoutEffect, useRef } from 'react'
import { createPortal } from 'react-dom'
import { useEditorStore } from '@site/store/store'
import { CanvasViewportActionsContext } from './CanvasContexts'
Expand Down Expand Up @@ -106,10 +106,13 @@ export function InlineTextEditOverlay({ breakpointId, iframeElement }: InlineTex
})

// Position + typography RAF loop, armed only while this frame owns the
// session. The first tick runs synchronously so the field never flashes at
// (0,0); focus + select-all mirror the removed in-iframe editor's
// enter-edit-mode behaviour (commit 934df7d4).
useEffect(() => {
// session. The first tick + focus run in a LAYOUT effect — synchronously
// BEFORE the browser paints — so the field is positioned and type-matched on
// its very first painted frame. A plain `useEffect` runs after paint, which
// flashed the field unpositioned (default font at the canvas origin) for one
// frame on every double-click. focus + select-all mirror the removed
// in-iframe editor's enter-edit-mode behaviour (commit 934df7d4).
useLayoutEffect(() => {
if (!sessionKey || !iframeElement) return
tickOnce()
const field = fieldRef.current
Expand Down