From 0761eaad1e5f15e8283c4043f4339093cba2c036 Mon Sep 17 00:00:00 2001
From: Arthals <36695271+zhuozhiyongde@users.noreply.github.com>
Date: Sun, 3 Mar 2024 22:48:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20language=20support=20&=20fix:=20T?=
 =?UTF-8?q?ooltip=20now=20hides=20when=20scrolling=20to=E2=80=A6=20(#305)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add language support & fix: Tooltip now hides when scrolling to bottom

* fix: use css control

* fix: sort class

* fix: single line copy overflow
---
 .../ui/code-highlighter/shiki/Shiki.tsx       | 38 ++++++++++++-------
 .../ui/code-highlighter/shiki/utils.tsx       |  9 +++++
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
index 98d6f3d4af..08a52e77ca 100644
--- a/src/components/ui/code-highlighter/shiki/Shiki.tsx
+++ b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -63,6 +63,10 @@ export const ShikiHighLighter: FC<Props> = (props) => {
           () => import('shiki/langs/markdown.mjs'),
           () => import('shiki/langs/vue.mjs'),
           () => import('shiki/langs/html.mjs'),
+          () => import('shiki/langs/asm.mjs'),
+          () => import('shiki/langs/bash.mjs'),
+          () => import('shiki/langs/ps.mjs'),
+          () => import('shiki/langs/ps1.mjs'),
         ],
         loadWasm: getWasm,
       })
@@ -114,7 +118,7 @@ export const ShikiHighLighter: FC<Props> = (props) => {
   return (
     <div className={clsx(styles['code-card'], 'group')}>
       {!!filename && (
-        <div className="flex w-full items-center justify-between rounded-t-xl bg-accent/20 px-4 py-2 text-sm">
+        <div className="z-10 flex w-full items-center justify-between rounded-t-xl bg-accent/20 px-4 py-2 text-sm">
           <span className="shrink-0 flex-grow truncate">{filename}</span>
           <span
             className="pointer-events-none flex-shrink-0 flex-grow-0"
@@ -129,25 +133,25 @@ export const ShikiHighLighter: FC<Props> = (props) => {
         <div
           aria-hidden
           className={clsxm(
-            'pointer-events-none absolute bottom-2 right-2 text-sm opacity-60',
+            'pointer-events-none absolute bottom-2 right-2 z-10 text-sm opacity-60',
             isOverflow ? 'right-6' : '',
           )}
         >
           {language.toUpperCase()}
         </div>
       )}
-      <div className="bg-accent/10 py-2">
+      <div className="bg-accent/10 py-4">
+        <MotionButtonBase
+          onClick={handleCopy}
+          className={clsx(
+            'text-xscenter absolute right-2 top-[calc(1rem-3px)] z-[1] flex rounded border border-current p-2',
+            'dark:bg-primary-300/10 rounded-md border border-black/5 bg-accent/5 p-1.5 text-gray-600 duration-200 hover:text-gray-900 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50',
+            'opacity-0 group-hover:opacity-60',
+          )}
+        >
+          <i className="icon-[mingcute--copy-2-fill] h-4 w-4" />
+        </MotionButtonBase>
         <AutoResizeHeight className="relative">
-          <MotionButtonBase
-            onClick={handleCopy}
-            className={clsx(
-              'text-xscenter absolute right-1 top-1 z-[1] flex rounded border border-current p-2',
-              'dark:bg-primary-300/10 rounded-md border border-black/5 bg-accent/5 p-1.5 text-gray-600 duration-200 hover:text-gray-900 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50',
-              'opacity-0 group-hover:opacity-60',
-            )}
-          >
-            <i className="icon-[mingcute--copy-2-fill] h-4 w-4" />
-          </MotionButtonBase>
           <div
             ref={setCodeBlockRef}
             className={clsxm(
@@ -170,7 +174,13 @@ export const ShikiHighLighter: FC<Props> = (props) => {
           </div>
 
           {isOverflow && isCollapsed && (
-            <div className="absolute bottom-0 left-0 right-0 flex justify-center py-2">
+            <div
+              className={`absolute bottom-0 left-0 right-0 flex justify-center py-2 duration-200 ${
+                ['mask-both-lg', 'mask-b-lg'].includes(maskClassName)
+                  ? ''
+                  : 'opacity-0'
+              }`}
+            >
               <button
                 onClick={() => setIsCollapsed(false)}
                 aria-hidden
diff --git a/src/components/ui/code-highlighter/shiki/utils.tsx b/src/components/ui/code-highlighter/shiki/utils.tsx
index ba42fa3bc3..2d5f068cdd 100644
--- a/src/components/ui/code-highlighter/shiki/utils.tsx
+++ b/src/components/ui/code-highlighter/shiki/utils.tsx
@@ -75,5 +75,14 @@ export const isSupportedShikiLang = (lang: string) => {
     'cpp',
     'c',
     'html',
+    'asm',
+    'bash',
+    'ps',
+    'ps1',
+    // plain text
+    'text',
+    'plaintext',
+    'txt',
+    'plain',
   ].includes(lang)
 }