feat: extension for code (#27)

huozhi · Feb 16, 2025 · b519c8d · b519c8d
1 parent 65fe566
commit b519c8d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/code/code.tsx b/src/code/code.tsx
@@ -20,14 +20,19 @@ const getPresetByExt = (ext: string) => {
   }
 }
 
+/** utils */
+export function getExtension(title: string | undefined) {
+  return (title || '').split('.').pop() || ''
+}
+
 function generateHighlightedLines(
   codeText: string,
   highlightLines: ([number, number] | number)[],
   lineNumbers: boolean,
   title: string | undefined,
+  extension: string | undefined
 ) {
-
-  const ext = (title || '').split('.').pop() || ''
+  const ext = extension || getExtension(title)
   const preset = getPresetByExt(ext)
   const childrenLines = generate(tokenize(codeText, preset))
 
@@ -115,7 +120,7 @@ export function CodeHeader({
 function CodeFrame({ 
   children, 
   preformatted,
-  asMarkup
+  asMarkup,
 }: { 
   children: React.ReactNode
   preformatted: boolean
@@ -142,6 +147,7 @@ export function Code({
   lineNumbersWidth,
   padding,
   asMarkup = false,
+  extension,
   ...props
 }: {
   children: string
@@ -155,15 +161,16 @@ export function Code({
   lineNumbersWidth?: string
   padding?: string
   asMarkup?: boolean
+  extension?: string
 } & React.HTMLAttributes<HTMLDivElement>) {
   const id = useId()
   const styles = css(id, { fontSize, lineNumbers, lineNumbersWidth, padding })
 
   const lineElements = useMemo(() => 
     asMarkup 
       ? code
-      : generateHighlightedLines(code, highlightLines, lineNumbers, title),
-    [code, highlightLines, lineNumbers, title, asMarkup]
+      : generateHighlightedLines(code, highlightLines, lineNumbers, title, extension),
+    [code, highlightLines, lineNumbers, title, extension, asMarkup]
   )
 
   return (

diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef, forwardRef } from 'react'
 import { Code } from '../code'
-import { CodeHeader } from '../code/code'
+import { CodeHeader, getExtension } from '../code/code'
 
 function composeRefs(...refs: React.Ref<HTMLElement>[]) {
   return (node: HTMLElement | null) => {
@@ -69,6 +69,7 @@ const Editor = forwardRef(function EditorComponent(
         {/* hide controls component inside Code to keep content matched with textarea */}
         <Code
           title={null}
+          extension={getExtension(title)}
           controls={false}
           lineNumbers={lineNumbers}
           lineNumbersWidth={lineNumbersWidth}