fix: 修复 AI 生成内容自带的样式被解析为 jsx 导致编译报错

longbridge · Sep 20, 2024 · 14e038a · 14e038a
1 parent 86d2080
commit 14e038a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/scripts/wiki/wiki-utils.ts b/scripts/wiki/wiki-utils.ts
@@ -112,9 +112,12 @@ export class WikiUtils {
     return processFileContent(string);
   }
 
-  static normalizeMDXContent(content: string) {
+  static normalizeMDXContent(content: string, skipJsxStyle?: boolean): string {
     let newContent = content;
-    newContent = WikiUtils.convertHTMLStyleToJSXStyle(newContent);
+    if (!skipJsxStyle) {
+      // AI 生成的内容样式不需要被转为 jsx
+      newContent = WikiUtils.convertHTMLStyleToJSXStyle(newContent);
+    }
     newContent = WikiUtils.normalizeBRHTMLDOM(newContent);
     return newContent;
   }
@@ -129,7 +132,7 @@ export class WikiUtils {
       jsxDesc: WikiUtils.normalizeHTMLDOM(
         WikiUtils.normalizeMDXContent(this.description)
       ),
-      jsxBody: WikiUtils.normalizeMDXContent(this.body),
+      jsxBody: WikiUtils.normalizeMDXContent(this.body, true),
       liteDesc: this.liteDesc,
       contentUpdatedAt: this.contentUpdatedAt,
       wikiAlias: JSON.stringify(this.wikiAlias),

diff --git a/src/components/ai-content/index.tsx b/src/components/ai-content/index.tsx
@@ -20,7 +20,7 @@ const LocalesMap = {
   },
 };
 export const AIContent: React.FC<AIContentProps> = ({ content, id }) => {
-  const [AIContent, setAIContent] = useState(content);
+  const [aiContent, setAIContent] = useState(content);
   const locale = useDefaultLocale() || "en";
 
   const {
@@ -30,7 +30,7 @@ export const AIContent: React.FC<AIContentProps> = ({ content, id }) => {
   } = useDocusaurusContext();
 
   useEffect(() => {
-    if (!apiProxyUrl || !id || AIContent) return;
+    if (!apiProxyUrl || !id || aiContent) return;
 
     get(`${apiProxyUrl}/v1/social/wiki/content`, { id }).then((resp) => {
       const { data } = resp;
@@ -40,14 +40,13 @@ export const AIContent: React.FC<AIContentProps> = ({ content, id }) => {
     });
   }, [apiProxyUrl, id]);
 
-  if (!AIContent) return <></>;
+  if (!aiContent) return null;
   return (
     <div className="ai-content pt-8 rounded-lg">
       <div
-        dangerouslySetInnerHTML={{ __html: AIContent }}
+        dangerouslySetInnerHTML={{ __html: aiContent }}
         className="border-solid border-t border-b-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)] pt-5"
       ></div>
-
       <div className="flex items-center space-x-4 pt-3 mb-3 border-solid border-t border-b-0 border-r-0 border-l-0 border-[var(--ifm-color-gray-300)]">
         <img
           src="https://assets.lbctrl.com/uploads/831466be-e4f8-46a7-aa0b-efcda7a424ff/portai.png"