useFloatingToolbar Hook Error

[narraje]

Fix: Resolve infinite loop in useFloatingToolbar hook

Problem

The floating toolbar was causing infinite re-renders under certain conditions, leading to performance issues and potential browser hangs. This occurred when users interacted with text selections while the toolbar was visible.

Root Cause

The third useEffect in useFloatingToolbar had open in its dependency array while also calling setOpen inside the effect:

Before - Problematic code

React.useEffect(() => {
  if (
    !selectionExpanded ||
    !selectionText ||
    (mousedown && !open) ||  // ← Reads 'open'
    hideToolbar ||
    (readOnly && !showWhenReadOnly)
  ) {
    setOpen(false);  // ← Writes 'open'
  } else if (
    selectionText &&
    selectionExpanded &&
    (!waitForCollapsedSelection || readOnly)
  ) {
    setOpen(true);   // ← Writes 'open'
  }
}, [
  // ... other deps
  open,  // ← Creates feedback loop!
  // ...
]);

This created a feedback loop: setOpen → open changes → effect re-runs → setOpen → infinite loop.

Solution

Removed open from the dependency array - The effect logic doesn't actually depend on the current open value for decision-making.

Simplified the mousedown condition from (mousedown && !open) to just mousedown - The original condition was redundant since calling setOpen(false) when already closed is a no-op.

After - Fixed code
React.useEffect(() => {
  if (
    !selectionExpanded ||
    !selectionText ||
    mousedown ||  // ← Simplified condition
    hideToolbar ||
    (readOnly && !showWhenReadOnly)
  ) {
    setOpen(false);
  } else if (
    selectionText &&
    selectionExpanded &&
    (!waitForCollapsedSelection || readOnly)
  ) {
    setOpen(true);
  }
}, [  setOpen,
  editorId,
  focusedEditorId,
  hideToolbar,
  showWhenReadOnly,
  selectionExpanded,
  selectionText,
  mousedown,
  waitForCollapsedSelection,
  readOnly,
  // ← 'open' removed - no more infinite loop!
]);

Files Changed

packages/floating/src/hooks/useFloatingToolbar.ts

This fix maintains all existing functionality while eliminating the performance issue caused by the infinite loop.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[changeset-bot]

🦋 Changeset detected

Latest commit: 500dfd7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@platejs/floating	Patch
@platejs/link	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
plate	Ready	Preview	Comment	Sep 19, 2025 8:14pm