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",