feat: guide 引入github markdown樣式

apps/admin/src/view/Course/Create/Guide/index.tsx

@@ -69,7 +69,7 @@ const toolbar = [
 ];
 
 export default function Guide(props: IProps) {
-  const vditorRef = useRef<Vditor>();
+  const vditorRef = useRef<Vditor | null>(null);
 
   const submitTool = {
     name: "submit",
@@ -84,9 +84,9 @@ export default function Guide(props: IProps) {
     },
   };
 
-  useEffect(() => {
+  const renderEditor = () => {
     vditorRef.current = new Vditor("vditor", {
-      height: 600,
+      height: "100%",
       cache: {
         id: props.id,
         enable: false,
@@ -113,37 +113,20 @@ export default function Guide(props: IProps) {
         },
       },
     });
+  };
+
+  const destroyEditor = () => {
+    vditorRef.current = null;
+  };
+
+  useEffect(() => {
+    renderEditor();
+    return () => destroyEditor();
   }, []);
 
   useEffect(() => {
-    vditorRef.current = new Vditor("vditor", {
-      height: 600,
-      cache: {
-        id: props.id,
-        enable: false,
-      },
-      toolbar: [...toolbar, "|", submitTool],
-      value: props.defaultValue ?? "",
-      hint: { delay: 200, emoji },
-      counter: { enable: true },
-      preview: { actions: ["desktop", "mobile"] },
-      after: () => console.log("[info] vditor init success..."),
-      upload: {
-        accept: "image/*",
-        url: "/api/vod/oss/image/upload",
-        multiple: false,
-        success(_, res) {
-          const { code, data, msg } = JSON.parse(res);
-          if (code === 10000) {
-            message.success("上传成功");
-            const { name, url } = data;
-            vditorRef.current?.insertValue(`![${name}](${url})`);
-          } else {
-            message.error(msg);
-          }
-        },
-      },
-    });
+    renderEditor();
+    return () => destroyEditor();
   }, [props.defaultValue]);
 
   return (

apps/admin/src/view/Course/Create/index.tsx

@@ -104,7 +104,10 @@ const CourseCreate = () => {
           <Guide
             id="createCourseEditor"
             onChange={onGuideChange}
-            styles={{ display: current === 2 ? "block" : "none" }}
+            styles={{
+              display: current === 2 ? "block" : "none",
+              height: "600px",
+            }}
           />
         </div>
         <div style={{ textAlign: "right", marginTop: "40px" }}>

apps/admin/src/view/Course/List/index.tsx

@@ -560,7 +560,7 @@ export default function List() {
       >
         <Guide
           onChange={onGuideChange}
-          styles={{ display: "block" }}
+          styles={{ display: "block", height: "100%" }}
           id="editGuideEditor"
           defaultValue={editGuide.guide_value}
         />

apps/web/src/assets/base.less

@@ -196,6 +196,17 @@ input {
       background: transparent;
     }
   }
+  &.code-block {
+    .var {
+      color: #00b800;
+    }
+    .comment {
+      color: #ccc;
+    }
+    .func {
+      color: red;
+    }
+  }
 }
 
 @keyframes tooltip-appear {

apps/web/src/view/CourseDetail/components/Guide/index.tsx

@@ -1,6 +1,8 @@
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import "./index.less";
+import { LangCompiler } from "./util";
 
 interface IProps {
   mdText: string;
@@ -19,7 +21,7 @@ function Guide(props: IProps) {
         maxWidth: 1120,
         margin: "0 auto",
         overflow: "hidden",
-        padding: "0 24px",
+        padding: 24,
       }}
     >
       <ReactMarkdown
@@ -28,7 +30,7 @@ function Guide(props: IProps) {
         components={{
           code({ node, inline, className, children, ...props }) {
             return !inline ? (
-              <code className={`${className} bs code`} {...props}>
+              <code className={`${className} bs code-block`} {...props}>
                 {children}
               </code>
             ) : (

apps/web/src/view/CourseDetail/components/Guide/util.tsx

@@ -0,0 +1,27 @@
+export const LangCompiler = (code: string) => {
+  console.log(code);
+  const tdxFuncs = ["SUM", "IF", "MIN", "SUMBARS"];
+  const rules = {
+    comment: /{[^{}]+}/gim,
+    var: /^[a-zA-Z0-9_\u4e00-\u9fa5]+(?=:)/gim,
+    func: new RegExp(tdxFuncs.join("|"), "gmi"),
+  };
+  console.log(code);
+  const comments = code.match(rules.comment);
+  console.log(comments);
+  const vars = code.match(rules.var);
+
+  vars?.forEach((variable) => {
+    const re = new RegExp(variable, "gi");
+    console.log(re);
+    code = code.replace(re, `<span class="var">$&</span>`);
+  });
+
+  // const compose = code
+  //   // .replace(rules.var, `<span class="var">$&</span>`)
+  //   .replace(rules.comment, `<span class="comment">$&</span>`)
+  //   .replace(rules.func, `<span class="func">$&</span>`);
+  // // 变量名全局替换
+
+  return code;
+};

apps/web/src/view/CourseDetail/index.tsx

@@ -88,7 +88,7 @@ function CourseDetail() {
                       <DocumentChevronDouble20Regular />
                     </Icon>
                   ),
-                  view: <Guide mdText={guide.guide_html} />,
+                  view: <Guide mdText={guide.guide_value} />,
                 },
                 ...chapters2toc(chapterList),
               ],