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

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

@@ -69,7 +69,8 @@ function ToolbarGroupComponent({
     }
   }, [group])
 
-  const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
+  const onActiveChange = React.useCallback(
+    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
       if (!activeItems.length) {
         if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
           setDropdownIcon(() => group.ChildComponent)
@@ -93,7 +94,9 @@ function ToolbarGroupComponent({
       }
       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,7 +71,8 @@ function ToolbarGroupComponent({
     }
   }, [group])
 
-  const onActiveChange = ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
+  const onActiveChange = useCallback(
+    ({ activeItems }: { activeItems: ToolbarGroupItem[] }) => {
       if (!activeItems.length) {
         if (group?.type === 'dropdown' && group.items.length && group.ChildComponent) {
           setDropdownIcon(() => group.ChildComponent)
@@ -82,7 +83,9 @@ function ToolbarGroupComponent({
       }
       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(() => {