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,169 @@
|
||||
import { useEditor } from '@craftjs/core';
|
||||
import { regenerateTreeIds } from '../utils/craft-tree';
|
||||
import { findDeletableTarget } from '../utils/craft-helpers';
|
||||
|
||||
export interface NodeActions {
|
||||
moveUp: () => void;
|
||||
moveDown: () => void;
|
||||
duplicate: () => void;
|
||||
deleteNode: () => void;
|
||||
selectParent: () => void;
|
||||
/** True if `nodeId` has an earlier sibling under the same parent (so
|
||||
* `moveUp` would actually move it). False for ROOT/null/no-parent. */
|
||||
canMoveUp: boolean;
|
||||
/** True if `nodeId` has a later sibling under the same parent (so
|
||||
* `moveDown` would actually move it). False for ROOT/null/no-parent. */
|
||||
canMoveDown: boolean;
|
||||
/** True if `findDeletableTarget` resolves to a real, deletable node (either
|
||||
* `nodeId` itself, or an ancestor when `nodeId` is an empty linked-node
|
||||
* slot whose siblings are all also empty -- see `craft-helpers.ts`). */
|
||||
canDelete: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared node-action logic (move up/down, duplicate, delete, select parent)
|
||||
* extracted from `ContextMenu.tsx` (Phase B) so both the desktop right-click
|
||||
* menu AND the mobile on-canvas selection toolbar (`MobileSelectionToolbar`)
|
||||
* drive the exact same behavior from one place instead of two independent
|
||||
* copies drifting apart.
|
||||
*
|
||||
* IMPORTANT gotcha this hook works around: `@craftjs/core`'s `useEditor`
|
||||
* collector (`@craftjs/utils`' `useCollector`) only synchronously computes
|
||||
* the collector function ONCE, on this hook's very first mount. After that,
|
||||
* it updates purely in reaction to the underlying store's OWN change
|
||||
* notifications, invoking whatever collector closure is current AT THAT
|
||||
* NOTIFICATION -- so a collector that closes over `nodeId` (an argument that
|
||||
* changes across renders of the SAME mounted hook instance, e.g. every time
|
||||
* `MobileSelectionToolbar` re-renders with a newly-selected node) goes stale
|
||||
* for exactly one render: the cached value from the last store notification
|
||||
* (computed against the PREVIOUS nodeId) is what gets returned, until some
|
||||
* unrelated store event happens to trigger a fresh computation. An earlier
|
||||
* version of this hook computed `canMoveUp`/`canMoveDown`/`canDelete` inside
|
||||
* such a collector and was caught showing the PREVIOUS selection's move
|
||||
* boundaries in the mobile toolbar for one render after tapping a new node
|
||||
* (verified with real Playwright touch taps against a real Craft.js
|
||||
* document -- a plain mocked `useEditor` in a unit test doesn't reproduce
|
||||
* this, since a hand-rolled mock has no reason to replicate the real
|
||||
* library's caching).
|
||||
*
|
||||
* The fix: get `actions`/`query` from a collector-FREE `useEditor()` call
|
||||
* (an always-live reference, same pattern `ContextMenu.tsx` used before this
|
||||
* extraction) and compute `canMoveUp`/`canMoveDown`/`canDelete` as plain
|
||||
* synchronous code during render using that live `query` -- never cached.
|
||||
*
|
||||
* That still leaves one gap: `nodeId` staying the SAME across renders while
|
||||
* its position changes (e.g. tapping "Move Up" repeatedly on the same
|
||||
* still-selected node) needs SOMETHING to trigger a re-render so the boundary
|
||||
* flags below get recomputed. An earlier version of this hook forced that
|
||||
* via a second `useEditor((state) => ({ _: state.nodes }))` subscription --
|
||||
* but subscribing to the WHOLE node map reacts to every `dom` ref
|
||||
* assignment too (Craft's `connectors.connect(ref)` calls `actions.setDOM`
|
||||
* synchronously from a React ref callback during COMMIT, i.e. while some
|
||||
* OTHER component is still mounting), which trips React's "Cannot update a
|
||||
* component while rendering a different component" warning the moment a
|
||||
* freshly-added container with children mounts. Callers that need
|
||||
* `canMoveUp`/`canMoveDown` to refresh after a move they themselves
|
||||
* triggered (`MobileSelectionToolbar`) should instead bump their OWN local
|
||||
* state right after calling `moveUp`/`moveDown` -- a plain, local,
|
||||
* event-handler-triggered re-render, not a store-wide subscription.
|
||||
*/
|
||||
export function useNodeActions(nodeId: string | null | undefined): NodeActions {
|
||||
const { actions, query } = useEditor();
|
||||
|
||||
const isRootOrNull = !nodeId || nodeId === 'ROOT';
|
||||
|
||||
let canMoveUp = false;
|
||||
let canMoveDown = false;
|
||||
if (!isRootOrNull) {
|
||||
try {
|
||||
const node = query.node(nodeId).get();
|
||||
const parentId: string | null | undefined = node?.data?.parent;
|
||||
if (parentId) {
|
||||
const siblings: string[] = query.node(parentId).get()?.data?.nodes || [];
|
||||
const idx = siblings.indexOf(nodeId);
|
||||
canMoveUp = idx > 0;
|
||||
canMoveDown = idx !== -1 && idx < siblings.length - 1;
|
||||
}
|
||||
} catch {
|
||||
// Node no longer exists (e.g. deleted out from under a stale
|
||||
// reference) -- leave both false.
|
||||
}
|
||||
}
|
||||
|
||||
const canDelete = !isRootOrNull && !!findDeletableTarget(query, nodeId);
|
||||
|
||||
const getParentId = (): string | null => {
|
||||
if (!nodeId) return null;
|
||||
try {
|
||||
const node = query.node(nodeId).get();
|
||||
return node?.data?.parent || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const duplicate = () => {
|
||||
if (!nodeId || nodeId === 'ROOT') return;
|
||||
try {
|
||||
const parentId = getParentId();
|
||||
if (!parentId) return;
|
||||
|
||||
const tree = regenerateTreeIds(query.node(nodeId).toNodeTree());
|
||||
actions.addNodeTree(tree, parentId);
|
||||
} catch (e) {
|
||||
console.error('Duplicate failed:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const moveUp = () => {
|
||||
if (!nodeId || nodeId === 'ROOT') return;
|
||||
try {
|
||||
const parentId = getParentId();
|
||||
if (!parentId) return;
|
||||
const parent = query.node(parentId).get();
|
||||
const children = parent.data.nodes || [];
|
||||
const idx = children.indexOf(nodeId);
|
||||
if (idx > 0) {
|
||||
actions.move(nodeId, parentId, idx - 1);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Move up failed:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const moveDown = () => {
|
||||
if (!nodeId || nodeId === 'ROOT') return;
|
||||
try {
|
||||
const parentId = getParentId();
|
||||
if (!parentId) return;
|
||||
const parent = query.node(parentId).get();
|
||||
const children = parent.data.nodes || [];
|
||||
const idx = children.indexOf(nodeId);
|
||||
if (idx < children.length - 1) {
|
||||
actions.move(nodeId, parentId, idx + 2);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Move down failed:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const selectParent = () => {
|
||||
if (!nodeId || nodeId === 'ROOT') return;
|
||||
const parentId = getParentId();
|
||||
if (parentId) {
|
||||
actions.selectNode(parentId);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteNode = () => {
|
||||
const target = findDeletableTarget(query, nodeId);
|
||||
if (!target) return;
|
||||
try {
|
||||
actions.delete(target);
|
||||
} catch (e) {
|
||||
console.error('Delete failed:', e);
|
||||
}
|
||||
};
|
||||
|
||||
return { moveUp, moveDown, duplicate, deleteNode, selectParent, canMoveUp, canMoveDown, canDelete };
|
||||
}
|
||||
Reference in New Issue
Block a user