mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-11-01 03:00:40 +00:00
The previous attempt added a focus() call in the pointerup stop() branch, but it never stuck. CDP-driven tests against the real app showed two reasons the focus kept getting clobbered: 1. The click event still fires AFTER pointerup, propagates up to the .freeLayer's click handler, which re-runs selectLayerWithEvent + renderLayerList + syncLayerInputs. Something in that chain blurs the contenteditable (focus log: focusin → blur → focusout, all on the .textLayer, in that order). 2. The selection change between the two clicks triggers a render() somewhere — which rebuilds the layers and DETACHES the original .textLayer node that startLayerDrag's closure captured. So even when focus did briefly land on textTarget, that textTarget was already a stale, detached element by the next tick. Fix: - Defer the focus call via setTimeout(0), so it runs AFTER the click event chain completes and any blur-on-click side effects have fired. - Inside the deferred callback, re-query the live .textLayer for the layer's id via `.freeLayer[data-layer-id="..."] .textLayer`, so we never focus a detached element. - Only apply the click-position caret range if it's inside the LIVE editable (caretRangeFromPoint can resolve into the detached node if the layout hasn't reflowed yet). Verified end-to-end via CDP + Input.dispatchMouseEvent against the running app (with the welcome modal dismissed and a fresh ?n=… cache-bust). Two single clicks in sequence: - After click 1: state.selectedLayerId='tx1', activeElement=BODY. - After click 2: activeElement is a DIV with className='textLayer' and isContentEditable=true — caret is now in the text and the user can drag-select / type / apply the toolbar buttons. Co-Authored-By: Claude Opus 4.7 <[email protected]>