Merge pull request #3928 from udecode/revert/dropdown-menu

Revert/dropdown menu
udecode · Dec 28, 2024 · 76c5701 · 76c5701
1 parent b158825
commit 76c5701
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 108 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,7 @@
     "@udecode/plate-line-height": "41.0.0",
     "@udecode/plate-link": "41.0.0",
     "@udecode/plate-markdown": "41.0.0",
-    "@udecode/plate-math": "41.0.4",
+    "@udecode/plate-math": "41.0.11",
     "@udecode/plate-media": "41.0.0",
     "@udecode/plate-mention": "41.0.0",
     "@udecode/plate-node-id": "41.0.0",
@@ -75,7 +75,6 @@
     "@udecode/plate-toggle": "41.0.0",
     "@udecode/plate-trailing-block": "41.0.0",
     "@uploadthing/react": "7.1.0",
-    "react-textarea-autosize": "^8.5.5",
     "ai": "^4.0.21",
     "class-variance-authority": "0.7.1",
     "clsx": "^2.1.1",
@@ -94,6 +93,7 @@
     "react-lite-youtube-embed": "^2.4.0",
     "react-player": "^2.16.0",
     "react-resizable-panels": "^2.1.7",
+    "react-textarea-autosize": "^8.5.6",
     "react-tweet": "^3.2.1",
     "slate": "^0.112.0",
     "slate-dom": "^0.111.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/editor/plugins/equation-plugins.ts b/src/components/editor/plugins/equation-plugins.ts
@@ -1,3 +1,4 @@
+'use client';
 import {
   EquationPlugin,
   InlineEquationPlugin,

diff --git a/src/components/plate-ui/color-picker.tsx b/src/components/plate-ui/color-picker.tsx
@@ -10,11 +10,7 @@ import {
   ColorDropdownMenuItems,
 } from './color-dropdown-menu-items';
 import { ColorCustom } from './colors-custom';
-import {
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-} from './dropdown-menu';
+import { DropdownMenuGroup, DropdownMenuItem } from './dropdown-menu';
 
 export const ColorPickerContent = withRef<
   'div',
@@ -42,8 +38,7 @@ export const ColorPickerContent = withRef<
   ) => {
     return (
       <div ref={ref} className={cn('flex flex-col', className)} {...props}>
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Custom Colors</DropdownMenuLabel>
+        <DropdownMenuGroup label="Custom Colors">
           <ColorCustom
             color={color}
             className="px-2"
@@ -53,8 +48,7 @@ export const ColorPickerContent = withRef<
             updateCustomColor={updateCustomColor}
           />
         </DropdownMenuGroup>
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Default Colors</DropdownMenuLabel>
+        <DropdownMenuGroup label="Default Colors">
           <ColorDropdownMenuItems
             color={color}
             className="px-2"

diff --git a/src/components/plate-ui/dropdown-menu.tsx b/src/components/plate-ui/dropdown-menu.tsx
@@ -19,7 +19,36 @@ export const DropdownMenu = DropdownMenuPrimitive.Root;
 
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-export const DropdownMenuGroup = withCn(DropdownMenuPrimitive.Group, 'py-1.5');
+export const DropdownMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  { label?: React.ReactNode } & React.ComponentPropsWithoutRef<
+    typeof DropdownMenuPrimitive.Group
+  >
+>(({ label, ...props }, ref) => {
+  return (
+    <>
+      <DropdownMenuSeparator
+        className={cn(
+          'hidden',
+          'mb-0 shrink-0 peer-has-[[role=menuitem]]/menu-group:block peer-has-[[role=menuitemcheckbox]]/menu-group:block peer-has-[[role=option]]/menu-group:block'
+        )}
+      />
+
+      <DropdownMenuPrimitive.Group
+        ref={ref}
+        {...props}
+        className={cn(
+          'hidden',
+          'peer/menu-group group/menu-group my-1.5 has-[[role=menuitem]]:block has-[[role=menuitemcheckbox]]:block has-[[role=option]]:block',
+          props.className
+        )}
+      >
+        {label && <DropdownMenuLabel>{label}</DropdownMenuLabel>}
+        {props.children}
+      </DropdownMenuPrimitive.Group>
+    </>
+  );
+});
 
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 

diff --git a/src/components/plate-ui/insert-dropdown-menu.tsx b/src/components/plate-ui/insert-dropdown-menu.tsx
@@ -19,10 +19,6 @@ import { TocPlugin } from '@udecode/plate-heading/react';
 import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
 import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';
 import { LinkPlugin } from '@udecode/plate-link/react';
-import {
-  EquationPlugin,
-  InlineEquationPlugin,
-} from '@udecode/plate-math/react';
 import { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';
 import { TablePlugin } from '@udecode/plate-table/react';
 import { TogglePlugin } from '@udecode/plate-toggle/react';
@@ -44,7 +40,6 @@ import {
   PilcrowIcon,
   PlusIcon,
   QuoteIcon,
-  RadicalIcon,
   SquareIcon,
   TableIcon,
   TableOfContentsIcon,
@@ -59,9 +54,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
+  DropdownMenuItem,
   DropdownMenuTrigger,
   useOpenState,
 } from './dropdown-menu';
@@ -199,12 +192,12 @@ const groups: Group[] = [
         label: '3 columns',
         value: 'action_three_columns',
       },
-      {
-        focusEditor: false,
-        icon: <RadicalIcon />,
-        label: 'Equation',
-        value: EquationPlugin.key,
-      },
+      // {
+      //   focusEditor: false,
+      //   icon: <RadicalIcon />,
+      //   label: 'Equation',
+      //   value: EquationPlugin.key,
+      // },
     ].map((item) => ({
       ...item,
       onSelect: (editor, value) => {
@@ -226,12 +219,12 @@ const groups: Group[] = [
         label: 'Date',
         value: DatePlugin.key,
       },
-      {
-        focusEditor: false,
-        icon: <RadicalIcon />,
-        label: 'Inline Equation',
-        value: InlineEquationPlugin.key,
-      },
+      // {
+      //   focusEditor: false,
+      //   icon: <RadicalIcon />,
+      //   label: 'Inline Equation',
+      //   value: InlineEquationPlugin.key,
+      // },
     ].map((item) => ({
       ...item,
       onSelect: (editor, value) => {
@@ -253,44 +246,28 @@ export function InsertDropdownMenu(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuPortal>
-        <DropdownMenuGroup>
-          <DropdownMenuContent
-            className="ignore-click-outside/toolbar max-h-[500px] min-w-0 overflow-y-auto"
-            align="start"
-          >
-            {groups.map(({ group, items: nestedItems }) => (
-              <DropdownMenuGroup key={group}>
-                <DropdownMenuRadioGroup
-                  onValueChange={(value) => {
-                    const item = nestedItems.find((i) => i.value === value);
-
-                    if (item) {
-                      const { focusEditor: isFocusEditor = true, onSelect } =
-                        item;
-
-                      onSelect(editor, value);
-                      isFocusEditor && focusEditor(editor);
-                    }
-                  }}
-                  label={group}
-                >
-                  {nestedItems.map(({ icon, label, value }) => (
-                    <DropdownMenuRadioItem
-                      key={value}
-                      className="min-w-[180px]"
-                      value={value}
-                    >
-                      {icon}
-                      {label}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuGroup>
+      <DropdownMenuContent
+        className="flex max-h-[500px] min-w-0 flex-col overflow-y-auto"
+        align="start"
+      >
+        {groups.map(({ group, items: nestedItems }) => (
+          <DropdownMenuGroup key={group} label={group}>
+            {nestedItems.map(({ icon, label, value, onSelect }) => (
+              <DropdownMenuItem
+                key={value}
+                className="min-w-[180px]"
+                onSelect={() => {
+                  onSelect(editor, value);
+                  focusEditor(editor);
+                }}
+              >
+                {icon}
+                {label}
+              </DropdownMenuItem>
             ))}
-          </DropdownMenuContent>
-        </DropdownMenuGroup>
-      </DropdownMenuPortal>
+          </DropdownMenuGroup>
+        ))}
+      </DropdownMenuContent>
     </DropdownMenu>
   );
 }
diff --git a/src/components/plate-ui/turn-into-dropdown-menu.tsx b/src/components/plate-ui/turn-into-dropdown-menu.tsx
@@ -38,8 +38,6 @@ import {
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
@@ -140,36 +138,33 @@ export function TurnIntoDropdownMenu(props: DropdownMenuProps) {
         </ToolbarButton>
       </DropdownMenuTrigger>
 
-      <DropdownMenuPortal>
-        <DropdownMenuGroup>
-          <DropdownMenuContent
-            className="ignore-click-outside/toolbar min-w-0"
-            align="start"
-          >
-            <DropdownMenuGroup>
-              <DropdownMenuRadioGroup
-                value={value}
-                onValueChange={(type) => {
-                  setBlockType(editor, type);
-                  focusEditor(editor);
-                }}
-                label="Turn into"
-              >
-                {turnIntoItems.map(({ icon, label, value: itemValue }) => (
-                  <DropdownMenuRadioItem
-                    key={itemValue}
-                    className="min-w-[180px]"
-                    value={itemValue}
-                  >
-                    {icon}
-                    {label}
-                  </DropdownMenuRadioItem>
-                ))}
-              </DropdownMenuRadioGroup>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenuGroup>
-      </DropdownMenuPortal>
+      <DropdownMenuContent
+        className="ignore-click-outside/toolbar min-w-0"
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          focusEditor(editor);
+        }}
+        align="start"
+      >
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(type) => {
+            setBlockType(editor, type);
+          }}
+          label="Turn into"
+        >
+          {turnIntoItems.map(({ icon, label, value: itemValue }) => (
+            <DropdownMenuRadioItem
+              key={itemValue}
+              className="min-w-[180px]"
+              value={itemValue}
+            >
+              {icon}
+              {label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
     </DropdownMenu>
   );
 }