Merge pull request #75 from markkop-halborn/fix-codeblock-language-list

hunghg255 · Oct 20, 2024 · 59c0f43 · 59c0f43
2 parents 5ed1ac5 + 2632e2a
commit 59c0f43
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'richtext-relative richtext-z-50 richtext-max-h-96 richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
+        'richtext-relative richtext-z-50 richtext-max-h-60 richtext-overflow-y-auto richtext-min-w-[8rem] richtext-overflow-hidden richtext-rounded-md richtext-border richtext-bg-popover richtext-text-popover-foreground richtext-shadow-md data-[state=open]:richtext-animate-in data-[state=closed]:richtext-animate-out data-[state=closed]:richtext-fade-out-0 data-[state=open]:richtext-fade-in-0 data-[state=closed]:richtext-zoom-out-95 data-[state=open]:richtext-zoom-in-95 data-[side=bottom]:richtext-slide-in-from-top-2 data-[side=left]:richtext-slide-in-from-right-2 data-[side=right]:richtext-slide-in-from-left-2 data-[side=top]:richtext-slide-in-from-bottom-2',
         position === 'popper'
         && 'data-[side=bottom]:richtext-translate-y-1 data-[side=left]:richtext--translate-x-1 data-[side=right]:richtext-translate-x-1 data-[side=top]:richtext--translate-y-1',
         className,

diff --git a/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx b/src/extensions/CodeBlock/components/CodeBlockActiveButton.tsx
@@ -4,10 +4,11 @@ import React, { useMemo } from 'react'
 import type { BundledLanguage } from 'shiki'
 import {
   ActionButton,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components'
 import { MAP_LANGUAGE_CODE_LABELS } from '@/constants'
 
@@ -41,26 +42,26 @@ function CodeBlockActiveButton({ action, languages, ...props }: Props) {
   }, [languages])
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger disabled={props?.disabled} asChild>
+    <Select>
+      <SelectTrigger disabled={props?.disabled} asChild>
         <ActionButton
           tooltip={props?.tooltip}
           disabled={props?.disabled}
           icon={props?.icon}
         />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className="richtext-w-full">
+      </SelectTrigger>
+      <SelectContent className="richtext-w-full richtext-max-h-60 richtext-overflow-y-auto">
         {langs?.map((item: any) => {
           return (
-            <DropdownMenuItem key={`codeblock-${item.title}`} onClick={() => onClick(item.language)}>
+            <SelectItem key={`codeblock-${item.title}`} onClick={() => onClick(item.language)}>
               <div className="richtext-h-full richtext-ml-1">
                 {item.title}
               </div>
-            </DropdownMenuItem>
+            </SelectItem>
           )
         })}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </SelectContent>
+    </Select>
   )
 }
 

diff --git a/src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx b/src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx
@@ -57,7 +57,7 @@ export function NodeViewCodeBlock({ editor, node: { attrs }, updateAttributes, e
             <SelectTrigger>
               <SelectValue placeholder="Language" />
             </SelectTrigger>
-            <SelectContent>
+            <SelectContent className="richtext-max-h-60 richtext-overflow-y-auto">
               <SelectItem value="auto">Auto</SelectItem>
 
               {listLang.map((lang: any, index: any) => (

diff --git a/src/extensions/CodeBlock/components/NodeViewCodeBlock/index.module.scss b/src/extensions/CodeBlock/components/NodeViewCodeBlock/index.module.scss
@@ -23,8 +23,6 @@
   }
 }
 
-
-
 .blockInfo {
   display: flex;
   align-items: center;
@@ -49,6 +47,11 @@
     outline-offset: 0px !important;
     color: white !important;
   }
+
+  .richtext-SelectContent {
+    max-height: 200px;
+    overflow-y: auto;
+  }
 }
 
 .btnCopy {