fix(richtext-lexical): unnecessary isEnabled computations on toolbar items (#8176)

Fixes #8170 

- wrapped onActiveChange in useCallback
- removed an unnecessary mouseUp event

Note: I put the console.log for debugging in the useCallback called
updateStates inside
packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx.

## Before


https://github.com/user-attachments/assets/07d715d4-f6c7-4a4a-91ab-5de418c909d6

## After


https://github.com/user-attachments/assets/2d404d1c-d1a7-46fd-a5b6-7d01c5c16959

Author: GermanJablo

packages/richtext-lexical/src/features/toolbars/fixed/client/Toolbar/index.tsx

@@ -69,31 +69,34 @@ function ToolbarGroupComponent({
     }
   }, [group])
 
-  const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
-    if (!activeItems.length) {
-      if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
-        setDropdownIcon(() => group.ChildComponent)
-        setDropdownLabel(null)
-      } else {
-        setDropdownIcon(null)
-        setDropdownLabel(null)
+  const onActiveChange = React.useCallback(
+    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
+      if (!activeItems.length) {
+        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent)
+          setDropdownLabel(null)
+        } else {
+          setDropdownIcon(null)
+          setDropdownLabel(null)
+        }
+        return
       }
-      return
-    }
-    const item = activeItems[0]
+      const item = activeItems[0]
 
-    let label = item.key
-    if (item.label) {
-      label =
-        typeof item.label === 'function' ? item.label({ i18n, richTextComponentMap }) : item.label
-    }
-    // Crop title to max. 25 characters
-    if (label.length > 25) {
-      label = label.substring(0, 25) + '...'
-    }
-    setDropdownLabel(label)
-    setDropdownIcon(() => item.ChildComponent)
-  }
+      let label = item.key
+      if (item.label) {
+        label =
+          typeof item.label === 'function' ? item.label({ i18n, richTextComponentMap }) : item.label
+      }
+      // Crop title to max. 25 characters
+      if (label.length > 25) {
+        label = label.substring(0, 25) + '...'
+      }
+      setDropdownLabel(label)
+      setDropdownIcon(() => item.ChildComponent)
+    },
+    [group, i18n, richTextComponentMap],
+  )
 
   return (
     <div className={`fixed-toolbar__group fixed-toolbar__group-${group.key}`} key={group.key}>

packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx

@@ -71,18 +71,21 @@ function ToolbarGroupComponent({
     }
   }, [group])
 
-  const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
-    if (!activeItems.length) {
-      if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
-        setDropdownIcon(() => group.ChildComponent)
-      } else {
-        setDropdownIcon(null)
+  const onActiveChange = useCallback(
+    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
+      if (!activeItems.length) {
+        if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
+          setDropdownIcon(() => group.ChildComponent)
+        } else {
+          setDropdownIcon(null)
+        }
+        return
       }
-      return
-    }
-    const item = activeItems[0]
-    setDropdownIcon(() => item.ChildComponent)
-  }
+      const item = activeItems[0]
+      setDropdownIcon(() => item.ChildComponent)
+    },
+    [group],
+  )
 
   return (
     <div

packages/richtext-lexical/src/features/toolbars/shared/ToolbarDropdown/index.tsx

@@ -135,13 +135,6 @@ export const ToolbarDropdown = ({
     updateStates()
   }, [updateStates])
 
-  useEffect(() => {
-    document.addEventListener('mouseup', updateStates)
-    return () => {
-      document.removeEventListener('mouseup', updateStates)
-    }
-  }, [updateStates])
-
   useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(() => {