From 86ec1fcbba3880b8f182ae2d5b6fe22fbd1cc497 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 20 Oct 2024 18:09:54 +0800
Subject: [PATCH] chore(docs): resolve pr comments

---
 .../components/docs/components/codeblock.tsx   |  4 ++--
 apps/docs/components/docs/components/helper.ts | 18 ++++++++++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/docs/components/docs/components/codeblock.tsx b/apps/docs/components/docs/components/codeblock.tsx
index 65e05ba353..43761c523a 100644
--- a/apps/docs/components/docs/components/codeblock.tsx
+++ b/apps/docs/components/docs/components/codeblock.tsx
@@ -213,7 +213,7 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
                       const isCopy = token.types.includes("copy");
 
                       return isCopy ? (
-                        <span className="copy-token" style={{whiteSpace: "inherit"}}>
+                        <span key={key} className="copy-token" style={{whiteSpace: "inherit"}}>
                           {token.folderContent?.map((folderTokens) => {
                             return folderTokens.map((token, index) => {
                               // Hack for wrap line
@@ -257,7 +257,7 @@ const Codeblock = forwardRef<HTMLPreElement, CodeblockProps>(
               };
 
               return isFolder ? (
-                <details open={folderLine.open ? true : undefined}>
+                <details key={`${folderLine.index}`} open={folderLine.open ? true : undefined}>
                   <summary className="cursor-pointer">
                     {renderLine(folderLine.summaryContent as any, folderLine.index!, "span")}
                   </summary>
diff --git a/apps/docs/components/docs/components/helper.ts b/apps/docs/components/docs/components/helper.ts
index 9d44a5c5c6..451c106139 100644
--- a/apps/docs/components/docs/components/helper.ts
+++ b/apps/docs/components/docs/components/helper.ts
@@ -35,7 +35,7 @@ export function transformTokens(tokens: TransformTokens, folderLine = 10) {
     }
 
     let startToken: TransformTokens[0][0] = null as any;
-    let mergedStarFlagList = [...startFlag];
+    let mergedStartFlagList = [...startFlag];
 
     token.forEach((t) => {
       if (defaultFoldFlagList.some((text) => t.content.includes(text))) {
@@ -53,10 +53,10 @@ export function transformTokens(tokens: TransformTokens, folderLine = 10) {
         }
 
         fold = true;
-        mergedStarFlagList.push(...specialStartFlag);
+        mergedStartFlagList.push(...specialStartFlag);
       }
 
-      if (mergedStarFlagList.includes(t.content)) {
+      if (mergedStartFlagList.includes(t.content)) {
         startToken = t;
       }
 
@@ -113,7 +113,9 @@ export function transformTokens(tokens: TransformTokens, folderLine = 10) {
           ...endToken,
         ];
         (startToken as TransformTokensTypes).index = index;
-        isShowFolder && !fold && ((startToken as TransformTokensTypes).open = true);
+        if (isShowFolder && !fold) {
+          (startToken as TransformTokensTypes).open = true;
+        }
 
         result.push([startToken]);
 
@@ -142,11 +144,11 @@ function checkIsFolder(
   {specialStartFlag, specialEndFlag}: SpecialOptions = {},
 ) {
   const stack: string[] = [];
-  const mergedStarFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
+  const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
   const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
 
   for (const t of token) {
-    if (mergedStarFlagList.includes(t.content)) {
+    if (mergedStartFlagList.includes(t.content)) {
       stack.push(t.content);
     } else if (mergedEndFlagList.includes(t.content)) {
       stack.pop();
@@ -162,7 +164,7 @@ function findEndIndex(
   {specialStartFlag, specialEndFlag}: SpecialOptions = {},
 ) {
   const stack: string[] = ["flag"];
-  const mergedStarFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
+  const mergedStartFlagList = specialStartFlag ? [...startFlag, ...specialStartFlag] : startFlag;
   const mergedEndFlagList = specialEndFlag ? [...endFlag, ...specialEndFlag] : endFlag;
 
   for (let i = startIndex; i < tokens.length; i++) {
@@ -171,7 +173,7 @@ function findEndIndex(
     for (const line of token) {
       const transformLine = line.content.replace(/\$/g, "");
 
-      if (mergedStarFlagList.includes(transformLine)) {
+      if (mergedStartFlagList.includes(transformLine)) {
         stack.push("flag");
       } else if (mergedEndFlagList.includes(transformLine)) {
         stack.pop();