Merge pull request #2873 from udecode/fix/toolbar-toggle-button

Fix/toolbar toggle button

src/components/plate-ui/tooltip.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { withCn, withProps } from '@udecode/cn';
 
@@ -14,3 +15,47 @@ export const TooltipContent = withCn(
   }),
   'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md'
 );
+
+export function withTooltip<
+  T extends React.ComponentType<any> | keyof HTMLElementTagNameMap,
+>(Component: T) {
+  return React.forwardRef<
+    React.ElementRef<T>,
+    React.ComponentPropsWithoutRef<T> & {
+      tooltip?: React.ReactNode;
+      tooltipContentProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+        'children'
+      >;
+      tooltipProps?: Omit<
+        React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
+        'children'
+      >;
+    }
+  >(function ExtendComponent(
+    { tooltip, tooltipContentProps, tooltipProps, ...props },
+    ref
+  ) {
+    const [mounted, setMounted] = React.useState(false);
+
+    React.useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    const component = <Component ref={ref} {...(props as any)} />;
+
+    if (tooltip && mounted) {
+      return (
+        <Tooltip {...tooltipProps}>
+          <TooltipTrigger asChild>{component}</TooltipTrigger>
+
+          <TooltipPortal>
+            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
+          </TooltipPortal>
+        </Tooltip>
+      );
+    }
+
+    return component;
+  });
+}