feat: shiki block expand attr

Signed-off-by: Innei <i@innei.in>
Innei · May 2, 2024 · f6b0d1d · f6b0d1d
1 parent 32d5703
commit f6b0d1d
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 5 deletions.
diff --git a/src/components/modules/shared/CodeBlock.tsx b/src/components/modules/shared/CodeBlock.tsx
@@ -6,6 +6,7 @@ import type { ReactNode } from 'react'
 
 import { HighLighterPrismCdn } from '~/components/ui/code-highlighter'
 import { ShikiHighLighterWrapper } from '~/components/ui/code-highlighter/shiki/ShikiWrapper'
+import { parseShouldCollapsedFromAttrs } from '~/components/ui/code-highlighter/shiki/utils'
 import { ExcalidrawLoading } from '~/components/ui/excalidraw/ExcalidrawLoading'
 import { isClientSide } from '~/lib/env'
 
@@ -77,7 +78,10 @@ export const CodeBlockRender = (props: {
           }
 
           const fallback = (
-            <ShikiHighLighterWrapper {...nextProps}>
+            <ShikiHighLighterWrapper
+              {...nextProps}
+              shouldCollapsed={parseShouldCollapsedFromAttrs(props.attrs || '')}
+            >
               <pre className="bg-transparent px-5">
                 <code className="!px-5 !text-base-content">
                   {nextProps.content}

diff --git a/src/components/ui/code-highlighter/shiki/Shiki.tsx b/src/components/ui/code-highlighter/shiki/Shiki.tsx
@@ -4,6 +4,7 @@ import type { FC } from 'react'
 import { isServerSide } from '~/lib/env'
 
 import { ShikiHighLighterWrapper } from './ShikiWrapper'
+import { parseShouldCollapsedFromAttrs } from './utils'
 
 export interface ShikiProps {
   lang: string | undefined
@@ -94,6 +95,7 @@ export const ShikiHighLighter: FC<ShikiProps> = (props) => {
 
   return (
     <ShikiHighLighterWrapper
+      shouldCollapsed={parseShouldCollapsedFromAttrs(attrs || '')}
       {...props}
       renderedHTML={renderedHtml}
       ref={setCodeBlockRef}

diff --git a/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx b/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx
@@ -30,9 +30,18 @@ interface Props {
 
 export const ShikiHighLighterWrapper = forwardRef<
   HTMLDivElement,
-  PropsWithChildren<Props>
+  PropsWithChildren<
+    Props & {
+      shouldCollapsed?: boolean
+    }
+  >
 >((props, ref) => {
-  const { lang: language, content: value, attrs } = props
+  const {
+    shouldCollapsed = true,
+    lang: language,
+    content: value,
+    attrs,
+  } = props
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(value)
@@ -43,9 +52,12 @@ export const ShikiHighLighterWrapper = forwardRef<
 
   useImperativeHandle(ref, () => codeBlockRef!)
 
-  const [isCollapsed, setIsCollapsed] = useState(true)
+  const [isCollapsed, setIsCollapsed] = useState(shouldCollapsed)
   const [isOverflow, setIsOverflow] = useState(false)
   useEffect(() => {
+    if (!shouldCollapsed) {
+      return
+    }
     const $el = codeBlockRef
 
     if (!$el) return
@@ -110,7 +122,7 @@ export const ShikiHighLighterWrapper = forwardRef<
         <MotionButtonBase
           onClick={handleCopy}
           className={clsx(
-            'absolute right-2 top-2 z-[1] flex text-xs center',
+            'center absolute right-2 top-2 z-[1] flex text-xs',
             'rounded-md border border-accent/5 bg-accent/80 p-1.5 text-white backdrop-blur duration-200',
             'opacity-0 group-hover:opacity-100',
             filename && '!top-12',

diff --git a/src/components/ui/code-highlighter/shiki/utils.tsx b/src/components/ui/code-highlighter/shiki/utils.tsx
@@ -10,6 +10,11 @@ export const parseFilenameFromAttrs = (attrs: string) => {
   return null
 }
 
+export const parseShouldCollapsedFromAttrs = (attrs: string) => {
+  // collapsed
+  return attrs.includes('collapsed') || !attrs.includes('expand')
+}
+
 // const shikiSupportLangSet = new Set(Object.keys(bundledLanguages))
 export const isSupportedShikiLang = (lang: string) => {
   // require esm error, fuck nextjs 14.12.x