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

Fix/toolbar toggle button

.changeset/nervous-baboons-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-table": patch
+---
+
+Fix: merging empty cells should result into a single empty paragraph

.changeset/olive-rats-share.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-indent-list": patch
+---
+
+fix someIndentList: handle the case when editor.selection is null

apps/www/content/docs/components/changelog.mdx

@@ -10,6 +10,16 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## January 2024 #7
 
+### January 9 #7.3
+
+- `toolbar`
+  - `Toolbar`: replace `items-stretch` with `items-center` 
+  - use `toolbarButtonVariants` instead of `toggleVariants`
+  - fix `value` prop type bug
+  - uses now `withTooltip`, so replace `[data-state=on]` with `aria-checked` to avoid conflicts
+- `toggle`: removed as unused
+- `tooltip`: add `withTooltip`, which is used by `ToolbarButton`
+
 ### January 8 #7.2
 
 - `table-element` - TableProvider must now be rendered above TableElement

apps/www/content/docs/components/toolbar.mdx

@@ -37,7 +37,6 @@ npm install @radix-ui/react-toolbar
 
 - [Separator](/docs/components/separator)
 - [Tooltip](/docs/components/tooltip)
-- [Toggle](/docs/components/toggle)
 
 </Step>
 

apps/www/src/__registry__/index.tsx

@@ -641,13 +641,6 @@ export const Index: Record<string, any> = {
       files: ['registry/default/plate-ui/todo-list-element.tsx'],
       component: React.lazy(() => import('@/registry/default/plate-ui/todo-list-element')),
     },
-    'toggle': {
-      name: 'toggle',
-      type: 'components:plate-ui',
-      registryDependencies: [],
-      files: ['registry/default/plate-ui/toggle.tsx'],
-      component: React.lazy(() => import('@/registry/default/plate-ui/toggle')),
-    },
     'toolbar': {
       name: 'toolbar',
       type: 'components:plate-ui',

apps/www/src/components/command-menu.tsx

@@ -85,7 +85,7 @@ export function CommandMenuGroup({
             item={navItem}
             runCommand={runCommand}
           >
-            {navItem.items?.map((item) => {
+            {navItem?.items?.map((item) => {
               return (
                 <CommandItems
                   key={item.title}

apps/www/src/components/settings-toggle.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react';
 
-import { Toggle } from '@/registry/default/plate-ui/toggle';
 import {
   Tooltip,
   TooltipContent,
@@ -11,6 +10,7 @@ import {
 
 import { settingsStore } from './context/settings-store';
 import { Icons } from './icons';
+import { Toggle } from './ui/toggle';
 
 export function SettingsToggle() {
   const showSettings = settingsStore.use.showSettings();

apps/www/src/registry/default/plate-ui/toggle.tsx → apps/www/src/components/ui/toggle.tsx

@@ -20,7 +20,7 @@ export const toggleVariants = cva(
       },
       size: {
         default: 'h-10 px-3',
-        sm: 'h-9 px-2',
+        sm: 'h-9 px-2.5',
         lg: 'h-11 px-5',
         circle: 'p-3',
       },

apps/www/src/config/customizer-components.ts

@@ -240,7 +240,6 @@ export const customizerComponents = {
     href: '/docs/components/todo-list-element',
     label: 'Element',
   },
-  toggle: { title: 'Toggle', href: '/docs/components/toggle' },
   toolbar: { title: 'Toolbar', href: '/docs/components/toolbar' },
   tooltip: { title: 'Tooltip', href: '/docs/components/tooltip' },
   turnIntoDropdownMenu: {

apps/www/src/config/docs.ts

@@ -773,7 +773,6 @@ export const docsConfig: DocsConfig = {
         customizerComponents.tableElement,
         customizerComponents.tableRowElement,
         customizerComponents.todoListElement,
-        customizerComponents.toggle,
         customizerComponents.toolbar,
         customizerComponents.tooltip,
         customizerComponents.turnIntoDropdownMenu,

apps/www/src/lib/plate/demo/values/tableValue.tsx

@@ -47,10 +47,10 @@ export const createTable = (spanning?: boolean): any => (
           </hp>
         </htd>
         <htd>
-          <hp>Yes</hp>
+          <hp></hp>
         </htd>
         <htd>
-          <hp>No</hp>
+          <hp></hp>
         </htd>
         <htd>
           <hp>No</hp>

apps/www/src/registry/default/plate-ui/color-dropdown-menu.tsx

@@ -7,15 +7,14 @@ import {
   useColorDropdownMenuState,
 } from '@udecode/plate-font';
 
+import { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';
+import { ColorPicker } from './color-picker';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from '@/registry/default/plate-ui/dropdown-menu';
-import { ToolbarButton } from '@/registry/default/plate-ui/toolbar';
-
-import { DEFAULT_COLORS, DEFAULT_CUSTOM_COLORS } from './color-constants';
-import { ColorPicker } from './color-picker';
+} from './dropdown-menu';
+import { ToolbarButton } from './toolbar';
 
 export type TColor = {
   name: string;

apps/www/src/registry/default/plate-ui/toolbar.tsx

@@ -1,24 +1,18 @@
 'use client';
 
 import * as React from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import { cn, withCn, withRef, withVariants } from '@udecode/cn';
+import { cva, VariantProps } from 'class-variance-authority';
 
 import { Icons } from '@/components/icons';
 
 import { Separator } from './separator';
-import { Toggle, toggleVariants } from './toggle';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipPortal,
-  TooltipTrigger,
-} from './tooltip';
+import { withTooltip } from './tooltip';
 
 export const Toolbar = withCn(
   ToolbarPrimitive.Root,
-  'relative flex select-none items-stretch gap-1 bg-background'
+  'relative flex select-none items-center gap-1 bg-background'
 );
 
 export const ToolbarToggleGroup = withCn(
@@ -36,42 +30,59 @@ export const ToolbarSeparator = withCn(
   'my-1 w-[1px] shrink-0 bg-border'
 );
 
-export const ToolbarButton = withRef<
-  typeof ToolbarPrimitive.Button,
-  Omit<ComponentPropsWithoutRef<typeof Toggle>, 'type'> & {
-    buttonType?: 'button' | 'toggle';
-    pressed?: boolean;
-    tooltip?: ReactNode;
-    isDropdown?: boolean;
-  }
->(
-  (
-    {
-      className,
-      variant,
-      size = 'sm',
-      isDropdown,
-      children,
-      pressed,
-      value,
-      tooltip,
-      ...props
+const toolbarButtonVariants = cva(
+  cn(
+    'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+    '[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5'
+  ),
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2',
+        lg: 'h-11 px-5',
+      },
     },
-    ref
-  ) => {
-    const [isLoaded, setIsLoaded] = React.useState(false);
-
-    React.useEffect(() => {
-      setIsLoaded(true);
-    }, []);
+    defaultVariants: {
+      variant: 'default',
+      size: 'sm',
+    },
+  }
+);
 
-    const content =
-      typeof pressed === 'boolean' ? (
-        <ToolbarToggleGroup type="single" value="single">
+const ToolbarButton = withTooltip(
+  // eslint-disable-next-line react/display-name
+  React.forwardRef<
+    React.ElementRef<typeof ToolbarToggleItem>,
+    Omit<
+      React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>,
+      'asChild' | 'value'
+    > &
+      VariantProps<typeof toolbarButtonVariants> & {
+        pressed?: boolean;
+        isDropdown?: boolean;
+      }
+  >(
+    (
+      { className, variant, size, isDropdown, children, pressed, ...props },
+      ref
+    ) => {
+      return typeof pressed === 'boolean' ? (
+        <ToolbarToggleGroup
+          type="single"
+          value="single"
+          disabled={props.disabled}
+        >
           <ToolbarToggleItem
             ref={ref}
             className={cn(
-              toggleVariants({
+              toolbarButtonVariants({
                 variant,
                 size,
               }),
@@ -81,19 +92,23 @@ export const ToolbarButton = withRef<
             value={pressed ? 'single' : ''}
             {...props}
           >
-            <div className="flex flex-1">{children}</div>
-            <div>
-              {isDropdown && (
-                <Icons.arrowDown className="ml-0.5 h-4 w-4" data-icon />
-              )}
-            </div>
+            {isDropdown ? (
+              <>
+                <div className="flex flex-1">{children}</div>
+                <div>
+                  <Icons.arrowDown className="ml-0.5 h-4 w-4" data-icon />
+                </div>
+              </>
+            ) : (
+              children
+            )}
           </ToolbarToggleItem>
         </ToolbarToggleGroup>
       ) : (
         <ToolbarPrimitive.Button
           ref={ref}
           className={cn(
-            toggleVariants({
+            toolbarButtonVariants({
               variant,
               size,
             }),
@@ -105,24 +120,15 @@ export const ToolbarButton = withRef<
           {children}
         </ToolbarPrimitive.Button>
       );
-
-    return isLoaded && tooltip ? (
-      <Tooltip>
-        <TooltipTrigger asChild>{content}</TooltipTrigger>
-
-        <TooltipPortal>
-          <TooltipContent>{tooltip}</TooltipContent>
-        </TooltipPortal>
-      </Tooltip>
-    ) : (
-      <>{content}</>
-    );
-  }
+    }
+  )
 );
+ToolbarButton.displayName = 'ToolbarButton';
+export { ToolbarButton };
 
 export const ToolbarToggleItem = withVariants(
   ToolbarPrimitive.ToggleItem,
-  toggleVariants,
+  toolbarButtonVariants,
   ['variant', 'size']
 );