Merge branch 'work' into ci/test-satori

Author: GZTimeWalker

src/GZCTF/ClientApp/package.json

@@ -14,16 +14,16 @@
   "dependencies": {
     "@babel/core": "^7.27.4",
     "@emotion/react": "^11.14.0",
-    "@mantine/carousel": "^8.0.2",
-    "@mantine/colors-generator": "^8.0.2",
-    "@mantine/core": "^8.0.2",
-    "@mantine/dates": "^8.0.2",
-    "@mantine/dropzone": "^8.0.2",
-    "@mantine/emotion": "^8.0.2",
-    "@mantine/form": "^8.0.2",
-    "@mantine/hooks": "^8.0.2",
-    "@mantine/modals": "^8.0.2",
-    "@mantine/notifications": "^8.0.2",
+    "@mantine/carousel": "^8.1.0",
+    "@mantine/colors-generator": "^8.1.0",
+    "@mantine/core": "^8.1.0",
+    "@mantine/dates": "^8.1.0",
+    "@mantine/dropzone": "^8.1.0",
+    "@mantine/emotion": "^8.1.0",
+    "@mantine/form": "^8.1.0",
+    "@mantine/hooks": "^8.1.0",
+    "@mantine/modals": "^8.1.0",
+    "@mantine/notifications": "^8.1.0",
     "@marsidev/react-turnstile": "^1.1.0",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
@@ -44,46 +44,45 @@
     "katex": "^0.16.22",
     "lz-string": "^1.5.0",
     "marked": "^15.0.12",
-    "marked-highlight": "^2.2.1",
     "pdfjs-dist": "4.8.69",
-    "prismjs": "^1.30.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^15.5.2",
     "react-pdf": "^9.2.1",
     "react-router": "^7.6.2",
+    "shiki": "^3.6.0",
     "swr": "^2.3.3"
   },
   "devDependencies": {
+    "@shikijs/transformers": "^3.6.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/chroma-js": "^3.1.1",
     "@types/katex": "^0.16.7",
-    "@types/node": "^22.15.30",
+    "@types/node": "^24.0.0",
     "@types/prismjs": "^1.26.5",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "axios": "^1.9.0",
     "babel-plugin-prismjs": "^2.1.0",
     "form-data": "~4.0.3",
     "globals": "^16.2.0",
     "lodash": "^4.17.21",
-    "oxlint": "^0.18.0",
+    "oxlint": "^1.0.0",
     "postcss": "^8.5.4",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "~3.5.3",
     "prettier-plugin-sort-json": "^4.1.1",
     "rollup": "^4.42.0",
-    "swagger-typescript-api": "^13.2.0",
+    "swagger-typescript-api": "^13.2.1",
     "tslib": "^2.8.1",
     "typescript": "5.8.3",
     "vite": "npm:rolldown-vite@^6.3.18",
     "vite-plugin-banner": "^0.8.1",
     "vite-plugin-optimize-css-modules": "^1.2.0",
     "vite-plugin-pages": "^0.33.0",
-    "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-webfont-dl": "^3.10.5",
     "vite-tsconfig-paths": "^5.1.4"
   },

src/GZCTF/ClientApp/pnpm-lock.yaml

@@ -10,14 +10,13 @@ import {
   Title,
   useMantineTheme,
   ScrollAreaAutosize,
-  Skeleton,
 } from '@mantine/core'
 import { mdiLightbulbOnOutline, mdiOpenInNew, mdiPackageVariantClosed } from '@mdi/js'
 import Icon from '@mdi/react'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { InstanceEntry } from '@Components/InstanceEntry'
-import { InlineMarkdown, Markdown } from '@Components/MarkdownRenderer'
+import { ContentPlaceholder, InlineMarkdown, Markdown } from '@Components/MarkdownRenderer'
 import { ChallengeCategoryItemProps } from '@Utils/Shared'
 import { ChallengeDetailModel, ChallengeType } from '@Api'
 import classes from '@Styles/ChallengeModal.module.css'
@@ -90,15 +89,7 @@ export const ChallengeModal: FC<ChallengeModalProps> = (props) => {
   const content = (
     <ScrollAreaAutosize mah="50vh" maw="100%" scrollbars="y" scrollbarSize={6} type="scroll">
       {challenge?.content === undefined ? (
-        <>
-          <Skeleton height={14} mt={8} radius="xl" />
-          <Skeleton height={14} mt={8} radius="xl" />
-          <Skeleton height={14} mt={8} width="60%" radius="xl" />
-
-          <Skeleton height={14} mt={8 + 14} radius="xl" />
-          <Skeleton height={14} mt={8} radius="xl" />
-          <Skeleton height={14} mt={8} width="30%" radius="xl" />
-        </>
+        <ContentPlaceholder />
       ) : (
         <>
           <Markdown source={challenge.content ?? ''} />

src/GZCTF/ClientApp/src/components/ChallengeModal.tsx

@@ -1,10 +1,9 @@
-import { Text, TextProps, TypographyStylesProvider } from '@mantine/core'
+import { Skeleton, Text, TextProps, TypographyStylesProvider } from '@mantine/core'
 import 'katex/dist/katex.min.css'
 import { Marked } from 'marked'
-import { markedHighlight } from 'marked-highlight'
-import Prism from 'prismjs'
-import { forwardRef } from 'react'
-import { KatexExtension } from '@Utils/KatexExtension'
+import { forwardRef, useMemo, use, Suspense, FC } from 'react'
+import { KatexExtension } from '@Utils/marked/KatexExtension'
+import { ShikiExtension } from '@Utils/marked/ShikiExtension'
 import classes from '@Styles/Typography.module.css'
 
 export interface MarkdownProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -17,48 +16,62 @@ interface InlineMarkdownProps extends TextProps {
 
 export const InlineMarkdown = forwardRef<HTMLParagraphElement, InlineMarkdownProps>((props, ref) => {
   const { source, ...others } = props
-  const marked = new Marked()
 
-  marked.use(KatexExtension()).setOptions({
-    silent: true,
-  })
+  const inlineMarked = useMemo(() => {
+    const instance = new Marked()
+    instance.use(KatexExtension()).setOptions({ silent: true })
+    return instance
+  }, [])
 
   return (
     <Text
       ref={ref}
       {...others}
       className={classes.inline}
       dangerouslySetInnerHTML={{
-        __html: marked.parseInline(source) ?? '',
+        __html: inlineMarked.parseInline(source) ?? '',
       }}
     />
   )
 })
 
-export const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props, ref) => {
-  const { source, ...others } = props
+export const ContentPlaceholder: FC = () => (
+  <>
+    <Skeleton height={14} mt={8} radius="xl" />
+    <Skeleton height={14} mt={8} radius="xl" />
+    <Skeleton height={14} mt={8} width="60%" radius="xl" />
+    <Skeleton height={14} mt={8 + 14} radius="xl" />
+    <Skeleton height={14} mt={8} radius="xl" />
+    <Skeleton height={14} mt={8} width="30%" radius="xl" />
+    <Skeleton height={14} mt={8 + 14} radius="xl" />
+    <Skeleton height={14} mt={8} width="80%" radius="xl" />
+  </>
+)
 
-  Prism.manual = true
+const MarkdownRenderer: FC<Pick<MarkdownProps, 'source'>> = (props) => {
+  const { source } = props
 
-  const marked = new Marked(
-    markedHighlight({
-      highlight(code, lang) {
-        if (lang && Prism.languages[lang]) {
-          return Prism.highlight(code, Prism.languages[lang], lang)
-        } else {
-          return code
-        }
-      },
-    })
-  )
+  const marked = useMemo(() => {
+    const instance = new Marked()
+    instance.use(KatexExtension()).use(ShikiExtension()).setOptions({ silent: true })
+    return instance
+  }, [])
+
+  const htmlPromise = useMemo(() => {
+    return marked.parse(source) as Promise<string>
+  }, [marked, source])
 
-  marked.use(KatexExtension()).setOptions({
-    silent: true,
-  })
+  return <div className={classes.root} dangerouslySetInnerHTML={{ __html: use(htmlPromise) }} />
+}
+
+export const Markdown = forwardRef<HTMLDivElement, MarkdownProps>((props, ref) => {
+  const { source, ...others } = props
 
   return (
     <TypographyStylesProvider ref={ref} {...others}>
-      <div className={classes.root} dangerouslySetInnerHTML={{ __html: marked.parse(source) }} />
+      <Suspense fallback={<ContentPlaceholder />}>
+        <MarkdownRenderer source={source} />
+      </Suspense>
     </TypographyStylesProvider>
   )
 })

src/GZCTF/ClientApp/src/components/MarkdownRenderer.tsx

@@ -4,7 +4,7 @@ import { mdiClose } from '@mdi/js'
 import { Icon } from '@mdi/react'
 import { Wsrx, WsrxError, WsrxErrorKind, WsrxFeature, WsrxOptions, WsrxState } from '@xdsec/wsrx'
 import { t } from 'i18next'
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import { createContext, useCallback, use, useEffect, useMemo, useState } from 'react'
 import { showErrorMsg } from '@Utils/Shared'
 import { useConfig } from '@Hooks/useConfig'
 
@@ -159,7 +159,7 @@ export const WsrxProvider: React.FC<React.PropsWithChildren> = ({ children }) =>
 }
 
 export const useWsrx = () => {
-  const context = useContext(WsrxContext)
+  const context = use(WsrxContext)
   if (!context) {
     throw new Error('useWsrx must be used within a WsrxProvider')
   }

src/GZCTF/ClientApp/src/components/WsrxProvider.tsx

@@ -85,85 +85,6 @@
     line-height: var(--mantine-line-height-sm);
     tab-size: 4;
     hyphens: none;
-
-    & :global(.namespace) {
-      opacity: 0.8;
-    }
-
-    & :global(.token.id),
-    & :global(.token.important),
-    & :global(.token.keyword) {
-      font-weight: bold;
-    }
-
-    & :global(.token.atrule),
-    & :global(.token.boolean),
-    & :global(.token.constant),
-    & :global(.token.function),
-    & :global(.token.id),
-    & :global(.token.important),
-    & :global(.token.keyword),
-    & :global(.token.symbol) {
-      color: light-dark(#7c4dff, #c792ea);
-    }
-
-    & :global(.token.attr-name),
-    & :global(.token.builtin),
-    & :global(.token.class) {
-      color: light-dark(#39adb5, #ffcb6b);
-    }
-
-    & :global(.token.attr-value),
-    & :global(.token.attribute),
-    & :global(.token.pseudo-class),
-    & :global(.token.pseudo-element) {
-      color: light-dark(#f6a434, #a5e844);
-    }
-
-    & :global(.token.cdata),
-    & :global(.token.char),
-    & :global(.token.inserted),
-    & :global(.token.operator),
-    & :global(.token.property) {
-      color: light-dark(#39adb5, #80cbc4);
-    }
-
-    & :global(.token.class-name),
-    & :global(.token.regex) {
-      color: light-dark(#6182b8, #f2ff00);
-    }
-
-    & :global(.token.comment),
-    & :global(.token.doctype),
-    & :global(.token.prolog) {
-      color: light-dark(#aabfc9, #616161);
-    }
-
-    & :global(.token.deleted),
-    & :global(.token.entity),
-    & :global(.token.selector),
-    & :global(.token.category),
-    & :global(.token.url),
-    & :global(.token.variable) {
-      color: light-dark(#e53935, #ff6666);
-    }
-
-    & :global(.token.hexcode) {
-      color: light-dark(#f76d47, #f2ff00);
-    }
-
-    & :global(.token.number),
-    & :global(.token.unit) {
-      color: light-dark(#f76d47, #fd9170);
-    }
-
-    & :global(.token.punctuation) {
-      color: light-dark(#39adb5, #89ddff);
-    }
-
-    & :global(.token.string) {
-      color: light-dark(#84a657, #a5e844);
-    }
   }
 }