From 9a4561e953cd3fd7142403b735de3d66f9efab73 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 1 Aug 2025 22:36:32 -0600
Subject: [PATCH] tooltip fixes

---
 .../ui/report/elements/AlignToolbarButton.tsx       |  2 +-
 .../src/components/ui/report/elements/Comment.tsx   |  2 ++
 .../ui/report/elements/ExportToolbarButton.tsx      | 13 ++++++-------
 .../ui/report/elements/FontColorToolbarButton.tsx   |  5 +++--
 .../ui/report/elements/ImportToolbarButton.tsx      |  5 +++--
 .../ui/report/elements/InsertToolbarButton.tsx      |  2 +-
 .../ui/report/elements/LineHeightToolbarButton.tsx  |  2 +-
 .../ui/report/elements/ListToolbarButton.tsx        |  7 ++++---
 .../ui/report/elements/MediaToolbarButton.tsx       |  9 +++++++--
 .../ui/report/elements/ModeToolbarButton.tsx        |  5 +++--
 .../ui/report/elements/MoreToolbarButton.tsx        |  6 ++++--
 .../ui/report/elements/TableNode/TableNode.tsx      |  6 ++++--
 .../ui/report/elements/TableToolbarButton.tsx       |  8 ++++++--
 .../ui/report/elements/TurnIntoToolbarButton.tsx    |  4 +++-
 .../components/ui/report/plugins/test-plugin.tsx    |  2 --
 apps/web/src/components/ui/toolbar/Toolbar.tsx      |  7 -------
 16 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
index 0cbe1ed91..69296f6d6 100644
--- a/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/AlignToolbarButton.tsx
@@ -56,7 +56,7 @@ export function AlignToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Align" isDropdown>
           <IconValue />
         </ToolbarButton>
diff --git a/apps/web/src/components/ui/report/elements/Comment.tsx b/apps/web/src/components/ui/report/elements/Comment.tsx
index de6dd43da..d46eb649b 100644
--- a/apps/web/src/components/ui/report/elements/Comment.tsx
+++ b/apps/web/src/components/ui/report/elements/Comment.tsx
@@ -32,6 +32,7 @@ import { type TDiscussion, discussionPlugin } from '../plugins/discussion-kit';
 
 import { EditorContainer } from '../EditorContainer';
 import { Editor } from '../Editor';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export interface TComment {
   id: string;
@@ -334,6 +335,7 @@ function CommentMoreDropdown(props: {
       </DropdownMenuTrigger>
       <DropdownMenuContent
         className="w-48"
+        style={DEFAULT_THEME_STYLE}
         onCloseAutoFocus={(e) => {
           if (selectedEditCommentRef.current) {
             onCloseAutoFocus?.();
diff --git a/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
index fdc96e974..38bc2fa62 100644
--- a/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ExportToolbarButton.tsx
@@ -19,6 +19,7 @@ import {
 import { EditorStatic } from './EditorStatic';
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
 import { useBusterNotifications } from '@/context/BusterNotifications';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -187,15 +188,13 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-      <DropdownMenuTrigger asChild>
-        <div>
-          <ToolbarButton pressed={open} tooltip="Export" isDropdown>
-            {children}
-          </ToolbarButton>
-        </div>
+      <DropdownMenuTrigger>
+        <ToolbarButton pressed={open} tooltip="Export" isDropdown>
+          {children}
+        </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="swagger" align="start">
+      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem onSelect={exportToHtml}>Export as HTML</DropdownMenuItem>
           <DropdownMenuItem onSelect={exportToPdf}>Export as PDF</DropdownMenuItem>
diff --git a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
index bab9faa27..a21e85234 100644
--- a/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx
@@ -26,6 +26,7 @@ import {
 import { cn } from '@/lib/utils';
 
 import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function FontColorToolbarButton({
   children,
@@ -99,13 +100,13 @@ export function FontColorToolbarButton({
         setOpen(value);
       }}
       modal={false}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip={tooltip}>
           {children}
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
         <ColorPicker
           color={selectedColor || color}
           clearColor={clearColor}
diff --git a/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
index 1a92d92bb..40ed39d22 100644
--- a/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 type ImportType = 'html' | 'markdown';
 
@@ -69,7 +70,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Import" isDropdown>
           <div className="size-4">
             <ArrowUpToLine />
@@ -77,7 +78,7 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start">
+      <DropdownMenuContent align="start" style={DEFAULT_THEME_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem
             onSelect={() => {
diff --git a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
index 943f35ee6..a48982937 100644
--- a/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/InsertToolbarButton.tsx
@@ -215,7 +215,7 @@ export function InsertToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Insert" isDropdown>
           <Plus />
         </ToolbarButton>
diff --git a/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx b/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
index 3c670177e..fd4f4ec83 100644
--- a/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/LineHeightToolbarButton.tsx
@@ -33,7 +33,7 @@ export function LineHeightToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Line height" isDropdown>
           <div className="size-4">
             <TextTool2 />
diff --git a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
index 024a79565..85e45d83b 100644
--- a/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ListToolbarButton.tsx
@@ -21,6 +21,7 @@ import {
   ToolbarSplitButtonPrimary,
   ToolbarSplitButtonSecondary
 } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function BulletedListToolbarButton() {
   const editor = useEditorRef();
@@ -47,11 +48,11 @@ export function BulletedListToolbarButton() {
       </ToolbarSplitButtonPrimary>
 
       <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger>
           <ToolbarSplitButtonSecondary />
         </DropdownMenuTrigger>
 
-        <DropdownMenuContent align="start" alignOffset={-32}>
+        <DropdownMenuContent align="start" alignOffset={-32} style={DEFAULT_THEME_STYLE}>
           <DropdownMenuGroup>
             <DropdownMenuItem
               onClick={() =>
@@ -125,7 +126,7 @@ export function NumberedListToolbarButton() {
       </ToolbarSplitButtonPrimary>
 
       <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-        <DropdownMenuTrigger asChild>
+        <DropdownMenuTrigger>
           <ToolbarSplitButtonSecondary />
         </DropdownMenuTrigger>
 
diff --git a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
index 83a667bd2..d260572bc 100644
--- a/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/MediaToolbarButton.tsx
@@ -35,6 +35,7 @@ import {
   ToolbarSplitButtonPrimary,
   ToolbarSplitButtonSecondary
 } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 const MEDIA_CONFIG: Record<
   string,
@@ -121,11 +122,15 @@ export function MediaToolbarButton({
         <ToolbarSplitButtonPrimary>{currentConfig.icon}</ToolbarSplitButtonPrimary>
 
         <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-          <DropdownMenuTrigger asChild>
+          <DropdownMenuTrigger>
             <ToolbarSplitButtonSecondary />
           </DropdownMenuTrigger>
 
-          <DropdownMenuContent onClick={(e) => e.stopPropagation()} align="start" alignOffset={-32}>
+          <DropdownMenuContent
+            onClick={(e) => e.stopPropagation()}
+            align="start"
+            alignOffset={-32}
+            style={DEFAULT_THEME_STYLE}>
             <DropdownMenuGroup>
               <DropdownMenuItem onSelect={() => openFilePicker()}>
                 {currentConfig.icon}
diff --git a/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
index e1d80ccf0..c80a562c7 100644
--- a/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/ModeToolbarButton.tsx
@@ -16,6 +16,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function ModeToolbarButton(props: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -47,14 +48,14 @@ export function ModeToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Editing mode" isDropdown>
           {item[value].icon}
           <span className="hidden lg:inline">{item[value].label}</span>
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="min-w-[180px]" align="start">
+      <DropdownMenuContent className="min-w-[180px]" align="start" style={DEFAULT_THEME_STYLE}>
         <DropdownMenuRadioGroup
           value={value}
           onValueChange={(newValue) => {
diff --git a/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx b/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
index db7914b0d..dfc8a0145 100644
--- a/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/MoreToolbarButton.tsx
@@ -17,6 +17,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function MoreToolbarButton(props: DropdownMenuProps) {
   const editor = useEditorRef();
@@ -24,7 +25,7 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Insert">
           <Dots />
         </ToolbarButton>
@@ -32,7 +33,8 @@ export function MoreToolbarButton(props: DropdownMenuProps) {
 
       <DropdownMenuContent
         className="ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto"
-        align="start">
+        align="start"
+        style={DEFAULT_THEME_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuItem
             onSelect={() => {
diff --git a/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx b/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
index f2c99d386..158746902 100644
--- a/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
+++ b/apps/web/src/components/ui/report/elements/TableNode/TableNode.tsx
@@ -100,6 +100,7 @@ import {
   ToolbarGroup,
   ToolbarMenuGroup
 } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../../ThemeWrapper/themes';
 export const TableElement = withHOC(
   TableProvider,
   function TableElement({ children, ...props }: PlateElementProps<TTableElement>) {
@@ -180,7 +181,7 @@ function TableFloatingToolbar({ children, ...props }: React.ComponentProps<typeo
             )}
 
             <DropdownMenu modal={false}>
-              <DropdownMenuTrigger asChild>
+              <DropdownMenuTrigger>
                 <ToolbarButton tooltip="Cell borders">
                   <Grid2X2 />
                 </ToolbarButton>
@@ -280,6 +281,7 @@ function TableBordersDropdownMenuContent(
   return (
     <DropdownMenuContent
       className="min-w-[220px]"
+      style={DEFAULT_THEME_STYLE}
       onCloseAutoFocus={(e) => {
         e.preventDefault();
         editor.tf.focus();
@@ -357,7 +359,7 @@ function ColorDropdownMenu({ children, tooltip }: { children: React.ReactNode; t
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton tooltip={tooltip}>{children}</ToolbarButton>
       </DropdownMenuTrigger>
 
diff --git a/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
index 5c3019cfd..5b8ad110e 100644
--- a/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/TableToolbarButton.tsx
@@ -45,6 +45,7 @@ import {
 import { cn } from '@/lib/utils';
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 export function TableToolbarButton(props: DropdownMenuProps) {
   const tableSelected = useEditorSelector(
@@ -58,13 +59,16 @@ export function TableToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton pressed={open} tooltip="Table" isDropdown>
           <Table />
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="flex w-[180px] min-w-0 flex-col" align="start">
+      <DropdownMenuContent
+        className="flex w-[180px] min-w-0 flex-col"
+        align="start"
+        style={DEFAULT_THEME_STYLE}>
         <DropdownMenuGroup>
           <DropdownMenuSub>
             <DropdownMenuSubTrigger className="gap-2 data-[disabled]:pointer-events-none data-[disabled]:opacity-50">
diff --git a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
index 13215b42f..4e46d25b9 100644
--- a/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
+++ b/apps/web/src/components/ui/report/elements/TurnIntoToolbarButton.tsx
@@ -35,6 +35,7 @@ import {
 import { getBlockType, setBlockType } from './transforms';
 
 import { ToolbarButton, ToolbarMenuGroup } from '@/components/ui/toolbar/Toolbar';
+import { DEFAULT_THEME_STYLE } from '../ThemeWrapper/themes';
 
 const turnIntoItems = [
   {
@@ -137,7 +138,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
 
   return (
     <DropdownMenu open={open} onOpenChange={setOpen} modal={false} {...props}>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger>
         <ToolbarButton className="min-w-[125px]" pressed={open} tooltip="Turn into" isDropdown>
           {selectedItem.label}
         </ToolbarButton>
@@ -145,6 +146,7 @@ export function TurnIntoToolbarButton(props: DropdownMenuProps) {
 
       <DropdownMenuContent
         className="ignore-click-outside/toolbar min-w-0"
+        style={DEFAULT_THEME_STYLE}
         onCloseAutoFocus={(e) => {
           e.preventDefault();
           editor.tf.focus();
diff --git a/apps/web/src/components/ui/report/plugins/test-plugin.tsx b/apps/web/src/components/ui/report/plugins/test-plugin.tsx
index dfe6604f8..47b2dd941 100644
--- a/apps/web/src/components/ui/report/plugins/test-plugin.tsx
+++ b/apps/web/src/components/ui/report/plugins/test-plugin.tsx
@@ -7,14 +7,12 @@ export const MyTestPlugin = createPlatePlugin({
   // Define editor.tf.doc.format()
   .extendTransforms(({ editor, type }) => ({
     format: () => {
-      console.log('format', editor, type);
       editor.tf.normalize({ force: true });
     }
   }))
   // Define editor.api.doc.format()
   .extendApi(({ editor, type }) => ({
     save: async () => {
-      console.log('save', editor, type);
       // Save the document
       // await fetch(...);
     }
diff --git a/apps/web/src/components/ui/toolbar/Toolbar.tsx b/apps/web/src/components/ui/toolbar/Toolbar.tsx
index eb943cbdb..fe00db258 100644
--- a/apps/web/src/components/ui/toolbar/Toolbar.tsx
+++ b/apps/web/src/components/ui/toolbar/Toolbar.tsx
@@ -268,13 +268,6 @@ export const ToolbarMenuGroup = ({
   );
 };
 
-type TooltipProps<T extends React.ElementType> = {
-  tooltip?: React.ReactNode;
-  tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
-  tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof Tooltip>, 'children'>;
-  tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
-} & React.ComponentProps<T>;
-
 const WithTooltip: React.FC<{ children: React.ReactNode; tooltip?: React.ReactNode }> = ({
   children,
   tooltip