fix: toolbar button active states

mdx-editor · Jul 6, 2023 · 573ebe4 · 573ebe4
1 parent bdf93fa
commit 573ebe4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/src/ui/ToolbarPlugin/Image.tsx b/src/ui/ToolbarPlugin/Image.tsx
@@ -31,11 +31,11 @@ export const ImageButton = React.forwardRef<HTMLButtonElement, RadixToolbar.Tool
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild>
-        <InstantTooltip title="Insert image">
-          <RadixToolbar.Button className={styles.toolbarButton} {...props} ref={forwardedRef}>
+        <RadixToolbar.Button className={styles.toolbarButton} {...props} ref={forwardedRef}>
+          <InstantTooltip title="Insert image">
             <AddPhotoIcon />
-          </RadixToolbar.Button>
-        </InstantTooltip>
+          </InstantTooltip>
+        </RadixToolbar.Button>
       </Dialog.Trigger>
       <Dialog.Portal container={editorRootElementRef!.current}>
         <Dialog.Overlay className={styles.dialogOverlay} />

diff --git a/src/ui/ToolbarPlugin/InstantTooltip.tsx b/src/ui/ToolbarPlugin/InstantTooltip.tsx
@@ -11,7 +11,7 @@ export const InstantTooltip = React.forwardRef<HTMLButtonElement, { title: strin
     <Tooltip.Provider delayDuration={100}>
       <Tooltip.Root>
         <Tooltip.Trigger ref={ref} asChild>
-          {children}
+          <span>{children}</span>
         </Tooltip.Trigger>
         <Tooltip.Portal container={editorRootElementRef?.current}>
           <Tooltip.Content className={classNames(styles.tooltipContent)} sideOffset={10}>

diff --git a/src/ui/ToolbarPlugin/toolbarComponents.tsx b/src/ui/ToolbarPlugin/toolbarComponents.tsx
@@ -31,21 +31,21 @@ export { ImageButton } from './Image'
 export { InstantTooltip } from './InstantTooltip'
 
 export const ToggleItem = React.forwardRef<HTMLButtonElement, RadixToolbar.ToolbarToggleItemProps & { title: string }>(
-  ({ title, className: passedClassName, ...props }, forwardedRef) => {
+  ({ title, children, className: passedClassName, ...props }, forwardedRef) => {
     return (
-      <InstantTooltip title={title}>
-        <RadixToolbar.ToggleItem className={classNames(passedClassName, styles.toolbarToggleItem)} {...props} ref={forwardedRef} />
-      </InstantTooltip>
+      <RadixToolbar.ToggleItem className={classNames(passedClassName, styles.toolbarToggleItem)} {...props} ref={forwardedRef}>
+        <InstantTooltip title={title}>{children}</InstantTooltip>
+      </RadixToolbar.ToggleItem>
     )
   }
 )
 
 export const ToolbarButton = React.forwardRef<HTMLButtonElement, RadixToolbar.ToolbarButtonProps & { title: string }>(
-  ({ title, ...props }, forwardedRef) => {
+  ({ title, children, ...props }, forwardedRef) => {
     return (
-      <InstantTooltip title={title}>
-        <RadixToolbar.Button className={styles.toolbarButton} {...props} ref={forwardedRef} />
-      </InstantTooltip>
+      <RadixToolbar.Button className={styles.toolbarButton} {...props} ref={forwardedRef}>
+        <InstantTooltip title={title}>{children}</InstantTooltip>
+      </RadixToolbar.Button>
     )
   }
 )

diff --git a/src/ui/styles.module.css b/src/ui/styles.module.css
@@ -148,8 +148,8 @@
 
 .toolbarRoot {
   /* border: var(--spacing-px) solid var(--baseBorder); */
-  z-index: 50;
   margin-bottom: var(--spacing-6);
+  z-index: 1;
   display: flex;
   flex-direction: row;
   gap: var(--spacing-1);
@@ -237,7 +237,7 @@
 .toolbarButtonDropdownContainer,
 .toolbarCodeBlockLanguageSelectContent
 {
-  z-index: 60;
+  z-index: 3;
   width: var(--spacing-36);
   border-bottom-left-radius: var(--radius-base);
   border-bottom-right-radius: var(--radius-base);
@@ -533,6 +533,8 @@
 }
 
 .tooltipContent {
+  z-index: 2;
+  position: relative;
   border-radius: var(--radius-medium);
   padding: var(--spacing-1) var(--spacing-2);
   font-size: var(--text-xs);