feat(builder): mobile-B touch editing -- selection toolbar, tap-to-add, swipe-dismiss
Phase B makes the Craft.js editor genuinely usable by touch on top of Phase A's responsive shell, gated entirely behind useIsMobile()/<=768px: - Extract useNodeActions(nodeId) out of ContextMenu.tsx (move/duplicate/ delete/select-parent), shared by the desktop right-click menu (behavior unchanged) and the new mobile MobileSelectionToolbar. - MobileSelectionToolbar: bottom-fixed selection toolbar (Move Up/Down, Duplicate, Select Parent, Edit Styles, two-tap Delete confirm), hidden while a sheet is open. - BlocksPanel: tap-to-add on mobile (insert after selection, close sheet, select + scroll the new node into view); desktop drag/double-click unchanged. - LayersPanel rows >=44px on mobile; HeadCodeModal portaled to document.body (same fix TemplateModal already had); BottomSheet gets swipe-to-dismiss and on-screen-keyboard clearance via a new useVisualViewportInsets hook. Also fixes two pre-existing bugs surfaced only by driving a real Craft.js document with Playwright touch input (masked by tests that mock @craftjs/core): regenerateTreeIds structuredClone'd a live node's whole data object, including the component function reference in data.type, throwing DataCloneError and silently breaking Duplicate/Paste for every node type; and an earlier useNodeActions draft cached canMoveUp/canMoveDown inside a useEditor collector closed over nodeId, which goes stale for one render whenever the selection changes without an unrelated store event. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export interface VisualViewportInsets {
|
||||
/** The visual viewport's current height (shrinks when the on-screen
|
||||
* keyboard opens). Falls back to `window.innerHeight` when
|
||||
* `visualViewport` isn't supported. */
|
||||
height: number;
|
||||
/** Extra inset a `position: fixed`, bottom-anchored element should add to
|
||||
* its own `bottom` offset to stay clear of the on-screen keyboard --
|
||||
* `window.innerHeight` minus the visual viewport's bottom edge (its
|
||||
* height + offsetTop). Zero whenever no keyboard is open, or
|
||||
* `visualViewport` isn't supported (a safe no-op fallback). */
|
||||
keyboardInset: number;
|
||||
}
|
||||
|
||||
const ZERO_INSETS: VisualViewportInsets = { height: 0, keyboardInset: 0 };
|
||||
|
||||
function computeInsets(): VisualViewportInsets {
|
||||
if (typeof window === 'undefined') return ZERO_INSETS;
|
||||
const vv = window.visualViewport;
|
||||
if (!vv) return { height: window.innerHeight, keyboardInset: 0 };
|
||||
const keyboardInset = Math.max(0, window.innerHeight - (vv.height + vv.offsetTop));
|
||||
return { height: vv.height, keyboardInset };
|
||||
}
|
||||
|
||||
/**
|
||||
* Tracks `window.visualViewport`'s height/offset (item 5, Phase B) so
|
||||
* `BottomSheet` can stay clear of the on-screen keyboard. `position: fixed`
|
||||
* elements are positioned against the LAYOUT viewport, which does NOT shrink
|
||||
* when a mobile keyboard opens -- only the visual viewport does -- so a
|
||||
* bottom-anchored sheet's inputs can otherwise end up hidden underneath the
|
||||
* keyboard with no visual indication anything is wrong.
|
||||
*
|
||||
* Guards for browsers without `visualViewport` (older WebViews): falls back
|
||||
* to `{ height: window.innerHeight, keyboardInset: 0 }`, i.e. a no-op, so
|
||||
* the sheet just keeps its existing (keyboard-unaware) sizing there.
|
||||
*/
|
||||
export function useVisualViewportInsets(): VisualViewportInsets {
|
||||
const [insets, setInsets] = useState<VisualViewportInsets>(computeInsets);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === 'undefined' || !window.visualViewport) return;
|
||||
const vv = window.visualViewport;
|
||||
const handleChange = () => setInsets(computeInsets());
|
||||
handleChange();
|
||||
vv.addEventListener('resize', handleChange);
|
||||
vv.addEventListener('scroll', handleChange);
|
||||
return () => {
|
||||
vv.removeEventListener('resize', handleChange);
|
||||
vv.removeEventListener('scroll', handleChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return insets;
|
||||
}
|
||||
Reference in New Issue
Block a user