chore: update logic

zouhangwithsweet · Feb 25, 2024 · f54847d · f54847d
1 parent ec4f0a1
commit f54847d
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/entrypoints/injected/components/Code.tsx b/entrypoints/injected/components/Code.tsx
@@ -1,8 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Clipboard } from 'react-feather'
-import { getHighlighterCore } from 'shiki/core'
-import getWasm from 'shiki/wasm'
 import { toTailwindcss } from 'transform-to-tailwindcss-core'
 import { toUnocssClass } from 'transform-to-unocss-core'
 import { useCopyToClipboard } from 'usehooks-ts'
@@ -18,8 +16,6 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
   const [, setCurrentSelection] = useAtom(currentSelection)
   const [unoResult, setUnoResult] = useState<{ title: string; code: string }[]>()
 
-  const [highlighCode, setHighlightCode] = useState(' ')
-
   const handleSelectionChange = useCallback(async () => {
     const node = figma.currentPage?.selection?.[0]
     setCurrentSelection(node ?? null)
@@ -78,25 +74,6 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
         code: cssCode,
       },
     ])
-
-    const highlighter = await getHighlighterCore({
-      themes: [
-        // or a dynamic import if you want to do chunk splitting
-        import('shiki/themes/vitesse-light.mjs'),
-      ],
-      langs: [import('shiki/langs/css.mjs')],
-      loadWasm: getWasm,
-    })
-
-    // optionally, load themes and languages after creation
-    await highlighter.loadTheme(import('shiki/themes/vitesse-light.mjs'))
-
-    const code = highlighter.codeToHtml(`html{${cssCode}}`, {
-      lang: 'css',
-      theme: 'vitesse-light',
-    })
-
-    setHighlightCode(code)
   }, [engine, isRem, setCurrentSelection])
 
   useEffect(() => {
@@ -181,7 +158,7 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
                     ref={inputRef}
                     rows={1}
                     autoComplete="off"
-                    className="hidden px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] resize-none scrollbar-hide"
+                    className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] resize-none scrollbar-hide"
                     value={u.code}
                     readOnly
                     onSelect={(e) => {
@@ -191,12 +168,6 @@ export const CodeArea = memo((props: { minimized?: boolean }) => {
                       handleCopy(selection)()
                     }}
                   ></textarea>
-                  <div
-                    className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] scrollbar-hide [&_pre]:bg-transparent! [&_pre]:overflow-auto"
-                    dangerouslySetInnerHTML={{
-                      __html: highlighCode.replace('html', '').replace('{', '').replace('}', ''),
-                    }}
-                  ></div>
                 </>
               )}
             </div>

diff --git a/entrypoints/injected/components/HighLighter.tsx b/entrypoints/injected/components/HighLighter.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react'
+import { getHighlighterCore } from 'shiki/core'
+import getWasm from 'shiki/wasm'
+
+export const HighLighter = (props: { cssCode: string }) => {
+  const [highlighCode, setHighlightCode] = useState(' ')
+
+  useEffect(() => {
+    ;(async () => {
+      const highlighter = await getHighlighterCore({
+        themes: [
+          // or a dynamic import if you want to do chunk splitting
+          import('shiki/themes/vitesse-light.mjs'),
+        ],
+        langs: [import('shiki/langs/css.mjs')],
+        loadWasm: getWasm,
+      })
+
+      // optionally, load themes and languages after creation
+      await highlighter.loadTheme(import('shiki/themes/vitesse-light.mjs'))
+
+      const code = highlighter.codeToHtml(`html{${props.cssCode}}`, {
+        lang: 'css',
+        theme: 'vitesse-light',
+      })
+
+      setHighlightCode(code)
+    })()
+  })
+
+  return (
+    <div
+      className="px-4 h-auto py-4 lh-4.5 bg-#f5f5f5 cursor-text font-['Roboto_Mono'] scrollbar-hide [&_pre]:bg-transparent! [&_pre]:overflow-auto"
+      dangerouslySetInnerHTML={{
+        __html: highlighCode.replace('html', '').replace('{', '').replace('}', ''),
+      }}
+    ></div>
+  )
+}