🐛 fix: code panel scroll

ant-design · Feb 11, 2024 · 80a20b7 · 80a20b7
1 parent 8bce246
commit 80a20b7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts
@@ -183,6 +183,10 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => {
         border-radius: ${token.borderRadius}px;
       `,
     ),
+    highlighter: css`
+      max-height: 400px;
+      overflow: scroll;
+    `,
     header: cx(
       `${prefix}-header`,
       css`

diff --git a/src/Markdown/wrapper.tsx b/src/Markdown/wrapper.tsx
@@ -45,13 +45,7 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => {
 
   const highlightBlock = useMemo(() => {
     return (
-      <Highlight
-        language={lang?.toLowerCase()}
-        copyable={false}
-        showLanguage={false}
-        type="block"
-        style={{ maxHeight: 400, overflowY: 'scroll' }}
-      >
+      <Highlight language={lang?.toLowerCase()} copyable={false} showLanguage={false} type="block">
         {children}
       </Highlight>
     );
@@ -87,7 +81,7 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => {
         />
         <CopyButton className={styles.copy} content={children} />
       </Flexbox>
-      {expand ? highlightBlock : null}
+      <div className={styles.highlighter}>{expand ? highlightBlock : null}</div>
     </div>
   );
 });

diff --git a/src/ProBuilder/components/Code/index.tsx b/src/ProBuilder/components/Code/index.tsx
@@ -61,13 +61,14 @@ export const CodePanel: FC<CodePanelProps> = memo((props) => {
           {/* 右侧按钮区域 */}
         </Flexbox>
       </Flexbox>
-      <Flexbox className={styles.code} style={{ height: `calc(100% - ${HEADER_HEIGHT}px)` }}>
+      <Flexbox className={styles.code}>
         <Highlight
           theme={isDarkMode ? 'dark' : 'light'}
           lineNumber
           language="tsx"
           onCopy={onCopy}
-          style={{ height: '100%' }}
+          showLanguage={false}
+          style={{ height: '100%', overflow: 'auto' }}
         >
           {configCode}
         </Highlight>

diff --git a/src/ProBuilder/components/Code/style.ts b/src/ProBuilder/components/Code/style.ts
@@ -29,7 +29,7 @@ export const useStyles = createStyles(({ token, stylish, css }) => {
     `,
     code: css`
       background: ${token.colorFillQuaternary};
-      overflow: scroll;
+      height: 100%;
     `,
   };
 });