style(emoji & color picker): fix styling & dependencies with color pi…

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

@@ -11,6 +11,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## October 2024 #15
 
+### October 27 #15.6
+
+- Fixed and modified some styles in emoji and color picker
+
 ### October 26 #15.5
 
 - Rename `indent-todo-marker-component` to `indent-todo-marker`.

apps/www/src/components/icons.tsx

@@ -30,6 +30,7 @@ import {
   CornerUpLeft,
   DownloadCloud,
   DownloadIcon,
+  EraserIcon,
   ExternalLink,
   Eye,
   File,
@@ -418,6 +419,7 @@ export const Icons = {
   code: Code2,
   codeblock: FileCode,
   color: Baseline,
+  colorClear: EraserIcon,
   column: RectangleVertical,
   combine: Combine,
   comment: MessageSquare,

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

@@ -7,8 +7,6 @@ import type { DropdownMenuItemProps } from '@radix-ui/react-dropdown-menu';
 import { cn } from '@udecode/cn';
 import { Check } from 'lucide-react';
 
-import type { TColor } from './color-dropdown-menu';
-
 import { buttonVariants } from './button';
 import { DropdownMenuItem } from './dropdown-menu';
 import {
@@ -18,6 +16,12 @@ import {
   TooltipTrigger,
 } from './tooltip';
 
+export type TColor = {
+  isBrightColor: boolean;
+  name: string;
+  value: string;
+};
+
 type ColorDropdownMenuItemProps = {
   isBrightColor: boolean;
   isSelected: boolean;
@@ -42,8 +46,8 @@ export function ColorDropdownMenuItem({
           isMenu: true,
           variant: 'outline',
         }),
-        'size-6 border border-solid border-muted p-0',
-        !isBrightColor && 'border-transparent text-white',
+        'flex size-6 items-center justify-center rounded-full border border-solid border-muted p-0 transition-all hover:scale-125',
+        !isBrightColor && 'border-transparent text-white hover:!text-white',
         className
       )}
       style={{ backgroundColor: value }}
@@ -53,14 +57,14 @@ export function ColorDropdownMenuItem({
       }}
       {...props}
     >
-      {isSelected ? <Check /> : null}
+      {isSelected ? <Check className="size-3" /> : null}
     </DropdownMenuItem>
   );
 
   return name ? (
     <Tooltip>
       <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent>{name}</TooltipContent>
+      <TooltipContent className="mb-1 capitalize">{name}</TooltipContent>
     </Tooltip>
   ) : (
     content
@@ -82,7 +86,10 @@ export function ColorDropdownMenuItems({
 }: ColorDropdownMenuItemsProps) {
   return (
     <div
-      className={cn('grid grid-cols-[repeat(10,1fr)] gap-1', className)}
+      className={cn(
+        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-1',
+        className
+      )}
       {...props}
     >
       <TooltipProvider>
@@ -96,6 +103,7 @@ export function ColorDropdownMenuItems({
             updateColor={updateColor}
           />
         ))}
+        {props.children}
       </TooltipProvider>
     </div>
   );

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

@@ -1,7 +1,5 @@
 'use client';
 
-import React from 'react';
-
 import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
 
 import {
@@ -18,12 +16,6 @@ import {
 } from './dropdown-menu';
 import { ToolbarButton } from './toolbar';
 
-export type TColor = {
-  isBrightColor: boolean;
-  name: string;
-  value: string;
-};
-
 type ColorDropdownMenuProps = {
   nodeType: string;
   tooltip?: string;

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

@@ -4,13 +4,20 @@ import React from 'react';
 
 import { cn, withRef } from '@udecode/cn';
 
-import type { TColor } from './color-dropdown-menu';
+import { Icons } from '@/components/icons';
 
 import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
-import { ColorsCustom } from './colors-custom';
-import { DropdownMenuItem } from './dropdown-menu';
-import { Separator } from './separator';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
+import { ColorCustom } from './colors-custom';
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+} from './dropdown-menu';
 
 export const ColorPickerContent = withRef<
   'div',
@@ -37,36 +44,47 @@ export const ColorPickerContent = withRef<
     ref
   ) => {
     return (
-      <div
-        ref={ref}
-        className={cn('flex flex-col gap-4 p-4', className)}
-        {...props}
-      >
-        <ColorsCustom
-          color={color}
-          colors={colors}
-          customColors={customColors}
-          updateColor={updateColor}
-          updateCustomColor={updateCustomColor}
-        />
-
-        <Separator />
-
-        <ColorDropdownMenuItems
-          color={color}
-          colors={colors}
-          updateColor={updateColor}
-        />
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        <DropdownMenuLabel>Color Picker</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          <ColorCustom
+            color={color}
+            className="p-2"
+            colors={colors}
+            customColors={customColors}
+            updateColor={updateColor}
+            updateCustomColor={updateCustomColor}
+          />
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <ColorDropdownMenuItems
+            color={color}
+            className="p-2"
+            colors={colors}
+            updateColor={updateColor}
+          />
+        </DropdownMenuGroup>
         {color && (
-          <DropdownMenuItem
-            className={buttonVariants({
-              isMenu: true,
-              variant: 'outline',
-            })}
-            onClick={clearColor}
-          >
-            Clear
-          </DropdownMenuItem>
+          <React.Fragment>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                className={cn(
+                  buttonVariants({
+                    isMenu: false,
+                    size: 'sm',
+                    variant: 'ghost',
+                  }),
+                  'w-full justify-start'
+                )}
+                onClick={clearColor}
+              >
+                <Icons.colorClear className="mr-2" />
+                <span>Clear</span>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </React.Fragment>
         )}
       </div>
     );

apps/www/src/registry/default/plate-ui/colors-custom.tsx

@@ -1,34 +1,42 @@
 'use client';
 
-import React from 'react';
+import React, { type ComponentPropsWithoutRef } from 'react';
 
+import { cn } from '@udecode/cn';
 import {
   useColorsCustom,
   useColorsCustomState,
 } from '@udecode/plate-font/react';
 
-import type { TColor } from './color-dropdown-menu';
+import { Icons } from '@/components/icons';
 
 import { buttonVariants } from './button';
-import { ColorDropdownMenuItems } from './color-dropdown-menu-items';
+import {
+  type TColor,
+  ColorDropdownMenuItems,
+} from './color-dropdown-menu-items';
 import { ColorInput } from './color-input';
+
+// import { ColorInput } from './color-input';
 import { DropdownMenuItem } from './dropdown-menu';
 
-type ColorsCustomProps = {
+type ColorCustomProps = {
   colors: TColor[];
   customColors: TColor[];
   updateColor: (color: string) => void;
   updateCustomColor: (color: string) => void;
   color?: string;
-};
+} & ComponentPropsWithoutRef<'div'>;
 
-export function ColorsCustom({
+export function ColorCustom({
+  className,
   color,
   colors,
   customColors,
   updateColor,
   updateCustomColor,
-}: ColorsCustomProps) {
+  ...props
+}: ColorCustomProps) {
   const state = useColorsCustomState({
     color,
     colors,
@@ -38,24 +46,29 @@ export function ColorsCustom({
   const { inputProps, menuItemProps } = useColorsCustom(state);
 
   return (
-    <div className="flex flex-col gap-4">
-      <ColorInput {...inputProps}>
-        <DropdownMenuItem
-          className={buttonVariants({
-            isMenu: true,
-            variant: 'outline',
-          })}
-          {...menuItemProps}
-        >
-          CUSTOM
-        </DropdownMenuItem>
-      </ColorInput>
-
+    <div className={cn('relative flex flex-col gap-4', className)} {...props}>
       <ColorDropdownMenuItems
         color={color}
         colors={state.computedColors}
         updateColor={updateColor}
-      />
+      >
+        <ColorInput {...inputProps}>
+          <DropdownMenuItem
+            className={cn(
+              buttonVariants({
+                isMenu: true,
+                size: 'icon',
+                variant: 'outline',
+              }),
+              'absolute bottom-2 right-2 top-1.5 flex size-7 items-center justify-center rounded-full'
+            )}
+            {...menuItemProps}
+          >
+            <span className="sr-only">Custom</span>
+            <Icons.add />
+          </DropdownMenuItem>
+        </ColorInput>
+      </ColorDropdownMenuItems>
     </div>
   );
 }

apps/www/src/registry/default/plate-ui/emoji-picker-content.tsx

@@ -48,7 +48,7 @@ const Button = memo(
           className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100"
           aria-hidden="true"
         />
-        <span style={{ position: 'relative' }} data-emoji-set="native">
+        <span className="relative" data-emoji-set="native">
           {emoji.skins[0].native}
         </span>
       </button>

apps/www/src/registry/default/plate-ui/emoji-picker-navigation.tsx

@@ -1,12 +1,5 @@
-'use client';
-
-import { useMemo } from 'react';
-
 import type { EmojiCategoryList } from '@udecode/plate-emoji';
-import type {
-  IEmojiFloatingLibrary,
-  UseEmojiPickerType,
-} from '@udecode/plate-emoji/react';
+import type { UseEmojiPickerType } from '@udecode/plate-emoji/react';
 
 import { cn } from '@udecode/cn';
 
@@ -25,22 +18,23 @@ export type EmojiPickerNavigationProps = {
   'emojiLibrary' | 'focusedCategory' | 'i18n' | 'icons'
 >;
 
-const getBarProperty = (
-  emojiLibrary: IEmojiFloatingLibrary,
-  focusedCategory?: EmojiCategoryList
-) => {
-  let width = 0;
-  let position = 0;
+// KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+// const getBarProperty = (
+//   emojiLibrary: IEmojiFloatingLibrary,
+//   focusedCategory?: EmojiCategoryList
+// ) => {
+//   let width = 0;
+//   let position = 0;
 
-  if (focusedCategory) {
-    width = 100 / emojiLibrary.getGrid().size;
-    position = focusedCategory
-      ? emojiLibrary.indexOf(focusedCategory) * 100
-      : 0;
-  }
+//   if (focusedCategory) {
+//     width = 100 / emojiLibrary.getGrid().size;
+//     position = focusedCategory
+//       ? emojiLibrary.indexOf(focusedCategory) * 100
+//       : 0;
+//   }
 
-  return { position, width };
-};
+//   return { position, width };
+// };
 
 export function EmojiPickerNavigation({
   emojiLibrary,
@@ -49,10 +43,11 @@ export function EmojiPickerNavigation({
   icons,
   onClick,
 }: EmojiPickerNavigationProps) {
-  const { position, width } = useMemo(
-    () => getBarProperty(emojiLibrary, focusedCategory),
-    [emojiLibrary, focusedCategory]
-  );
+  // KEEP: This is for the animated idicator bar under the icon - Opt in if needed
+  // const { position, width } = useMemo(
+  //   () => getBarProperty(emojiLibrary, focusedCategory),
+  //   [emojiLibrary, focusedCategory]
+  // );
 
   return (
     <TooltipProvider delayDuration={500}>
@@ -81,7 +76,7 @@ export function EmojiPickerNavigation({
                     aria-label={i18n.categories[id]}
                     type="button"
                   >
-                    <span className="size-5">
+                    <span className="inline-flex size-5 items-center justify-center">
                       {icons.categories[id].outline}
                     </span>
                   </Button>
@@ -91,7 +86,9 @@ export function EmojiPickerNavigation({
                 </TooltipContent>
               </Tooltip>
             ))}
-          <div
+
+          {/* This is the animated indicator - Opt In if needed */}
+          {/* <div
             className={cn(
               'absolute -bottom-1.5 left-0 h-0.5 w-full rounded-t-lg bg-accent opacity-100 transition-transform duration-200'
             )}
@@ -100,7 +97,7 @@ export function EmojiPickerNavigation({
               visibility: `${focusedCategory ? 'visible' : 'hidden'}`,
               width: `${width}%`,
             }}
-          />
+          /> */}
         </div>
       </nav>
     </TooltipProvider>