diff --git a/app/components/markdown.tsx b/app/components/markdown.tsx
index 22664df8acc..8e744b441d0 100644
--- a/app/components/markdown.tsx
+++ b/app/components/markdown.tsx
@@ -190,6 +190,16 @@ function CustomCode(props: { children: any; className?: string }) {
const toggleCollapsed = () => {
setCollapsed((collapsed) => !collapsed);
};
+ const renderShowMoreButton = () => {
+ if (showToggle && enableCodeFold && collapsed) {
+ return (
+
+
+
+ );
+ }
+ return null;
+ };
return (
<>
{props.children}
- {showToggle && enableCodeFold && collapsed && (
-
-
-
- )}
+
+ {renderShowMoreButton()}
>
);
}
diff --git a/app/components/settings.tsx b/app/components/settings.tsx
index 5f478374edf..e2464481341 100644
--- a/app/components/settings.tsx
+++ b/app/components/settings.tsx
@@ -1517,6 +1517,7 @@ export function Settings() {
aria-label={Locale.Mask.Config.CodeFold.Title}
type="checkbox"
checked={config.enableCodeFold}
+ data-testid="enable-code-fold-checkbox"
onChange={(e) =>
updateConfig(
(config) => (config.enableCodeFold = e.currentTarget.checked),
diff --git a/app/locales/cn.ts b/app/locales/cn.ts
index 3ba8dd80b3e..09eafe492c7 100644
--- a/app/locales/cn.ts
+++ b/app/locales/cn.ts
@@ -666,8 +666,8 @@ const cn = {
SubTitle: "启用之后可以直接渲染HTML页面",
},
CodeFold: {
- Title: "启用CodeFold",
- SubTitle: "启用之后可以折叠/展开过长的代码块",
+ Title: "启用代码折叠",
+ SubTitle: "启用之后可以自动折叠/展开过长的代码块",
},
Share: {
Title: "分享此面具",
diff --git a/app/locales/en.ts b/app/locales/en.ts
index 40782be7ad0..8dfe8ed9348 100644
--- a/app/locales/en.ts
+++ b/app/locales/en.ts
@@ -678,7 +678,7 @@ const en: LocaleType = {
CodeFold: {
Title: "Enable CodeFold",
SubTitle:
- "Automatically collapse/expand overly long code block when enable CodeFold",
+ "Automatically collapse/expand overly long code blocks when CodeFold is enabled",
},
Share: {
Title: "Share This Mask",