[lexical-utils] Bug Fix: positionNodeOnRange leaking orphan rect nodes when rects shrink

[durvesh1992]

Summary

positionNodeOnRange (used by @lexical/utils markSelection / selectionAlwaysOnDisplay) renders one absolutely-positioned <div> per selection client-rect and reuses them across repositions. When the number of rects decreases between two repositions — e.g. a multi-line highlight collapses to a single line after an edit — the cleanup loop popped the excess entries from the lastNodes tracking array but never detached the corresponding <div> from the DOM:

while (lastNodes.length > rects.length) {
  lastNodes.pop(); // array shrinks, but the <div> stays in wrapperNode
}

So stale highlight rectangles remain painted inside wrapperNode until the next stop()/restart(). Note stop() (a few lines below) already does the right thing — for (const node of lastNodes) node.remove() — this just applies the same cleanup on the reposition path.

Fix

Detach the popped node:

while (lastNodes.length > rects.length) {
  const node = lastNodes.pop();
  if (node != null) {
    node.remove();
  }
}

Test plan

Added packages/lexical-utils/src/__tests__/unit/positionNodeOnRange.test.tsx: renders two rects, then shrinks to one via a reposition and asserts the wrapper's child-node count drops to 1.

• Before: fails (expected 2 to be 1 — orphan div remains).
• After: passes.
• Full lexical-utils unit suite: 225 passed, no regressions.

npx vitest run --project unit packages/lexical-utils/src/__tests__/unit

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview	Jun 29, 2026 7:50pm
lexical-playground	Ready	Preview	Jun 29, 2026 7:50pm