fix: show x-scrollbar in codeblock if unwrapped, simplify style definitions (#6266)

* fix: show x-scrollbar in codeblock if unwrapped, simplify style definitions

* chore: clean up useless code

src/renderer/src/assets/styles/markdown.scss

@@ -321,7 +321,6 @@ mjx-container {
 
     .cm-lineWrapping * {
       word-wrap: break-word;
-      white-space: pre-wrap;
     }
   }
 }

src/renderer/src/components/CodeBlockView/CodePreview.tsx

@@ -165,13 +165,11 @@ const CodePreview = ({ children, language }: CodePreviewProps) => {
   return (
     <ContentContainer
       ref={codeContentRef}
-      $isShowLineNumbers={codeShowLineNumbers}
-      $isUnwrapped={isUnwrapped}
-      $isCodeWrappable={codeWrappable}
+      $lineNumbers={codeShowLineNumbers}
+      $wrap={codeWrappable && !isUnwrapped}
       style={{
         fontSize: fontSize - 1,
-        maxHeight: codeCollapsible && !isExpanded ? '350px' : 'none',
-        overflow: codeCollapsible && !isExpanded ? 'auto' : 'visible'
+        maxHeight: codeCollapsible && !isExpanded ? '350px' : 'none'
       }}>
       {tokenLines.length > 0 ? (
         <ShikiTokensRenderer language={language} tokenLines={tokenLines} />
@@ -223,16 +221,22 @@ const ShikiTokensRenderer: React.FC<{ language: string; tokenLines: ThemedToken[
 )
 
 const ContentContainer = styled.div<{
-  $isShowLineNumbers: boolean
-  $isUnwrapped: boolean
-  $isCodeWrappable: boolean
+  $lineNumbers: boolean
+  $wrap: boolean
 }>`
   position: relative;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
   border: 0.5px solid transparent;
   border-radius: 5px;
   margin-top: 0;
   transition: opacity 0.3s ease;
 
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+  }
+
   .shiki {
     padding: 1em;
 
@@ -244,13 +248,18 @@ const ContentContainer = styled.div<{
       .line {
         display: block;
         min-height: 1.3rem;
-        padding-left: ${(props) => (props.$isShowLineNumbers ? '2rem' : '0')};
+        padding-left: ${(props) => (props.$lineNumbers ? '2rem' : '0')};
+
+        * {
+          word-wrap: ${(props) => (props.$wrap ? 'break-word' : undefined)};
+          white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')};
+        }
       }
     }
   }
 
   ${(props) =>
-    props.$isShowLineNumbers &&
+    props.$lineNumbers &&
     `
       code {
         counter-reset: step;
@@ -268,16 +277,6 @@ const ContentContainer = styled.div<{
         opacity: 0.35;
       }
     `}
-
-  ${(props) =>
-    props.$isCodeWrappable &&
-    !props.$isUnwrapped &&
-    `
-      code .line * {
-        word-wrap: break-word;
-        white-space: pre-wrap;
-      }
-    `}
 `
 
 CodePreview.displayName = 'CodePreview'

src/renderer/src/components/CodeBlockView/index.tsx

@@ -9,7 +9,7 @@ import dayjs from 'dayjs'
 import { CirclePlay, CodeXml, Copy, Download, Eye, Square, SquarePen, SquareSplitHorizontal } from 'lucide-react'
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 import CodePreview from './CodePreview'
 import HtmlArtifacts from './HtmlArtifacts'
@@ -258,6 +258,9 @@ const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
   position: relative;
 
   .code-toolbar {
+    margin-top: ${(props) => (props.$isInSpecialView ? '20px' : '0')};
+    background-color: ${(props) => (props.$isInSpecialView ? 'transparent' : 'var(--color-background-mute)')};
+    border-radius: ${(props) => (props.$isInSpecialView ? '0' : '4px')};
     opacity: 0;
     transition: opacity 0.2s ease;
     transform: translateZ(0);
@@ -271,23 +274,6 @@ const CodeBlockWrapper = styled.div<{ $isInSpecialView: boolean }>`
       opacity: 1;
     }
   }
-
-  ${(props) =>
-    props.$isInSpecialView &&
-    css`
-      .code-toolbar {
-        margin-top: 20px;
-      }
-    `}
-
-  ${(props) =>
-    !props.$isInSpecialView &&
-    css`
-      .code-toolbar {
-        background-color: var(--color-background-mute);
-        border-radius: 4px;
-      }
-    `}
 `
 
 const CodeHeader = styled.div<{ $isInSpecialView: boolean }>`
@@ -297,16 +283,10 @@ const CodeHeader = styled.div<{ $isInSpecialView: boolean }>`
   color: var(--color-text);
   font-size: 14px;
   font-weight: bold;
-  height: 34px;
   padding: 0 10px;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
-
-  ${(props) =>
-    props.$isInSpecialView &&
-    css`
-      height: 16px;
-    `}
+  height: ${(props) => (props.$isInSpecialView ? '16px' : '34px')};
 `
 
 const SplitViewWrapper = styled.div`
@@ -315,8 +295,9 @@ const SplitViewWrapper = styled.div`
 
   > * {
     flex: 1 1 0;
+    width: 0;
     min-width: 0;
-    overflow: auto;
+    max-width: 100%;
   }
 `
 

src/renderer/src/components/CodeEditor/index.tsx

@@ -223,8 +223,6 @@ const CodeEditor = ({
       }}
       style={{
         fontSize: `${fontSize - 1}px`,
-        overflow: collapsible && !isExpanded ? 'auto' : 'visible',
-        position: 'relative',
         border: '0.5px solid transparent',
         borderRadius: '5px',
         marginTop: 0,

src/renderer/src/components/CodeToolbar/usePreviewTools.tsx

@@ -284,16 +284,6 @@ export const usePreviewTools = ({ handleZoom, handleCopyImage, handleDownload }:
   const { t } = useTranslation()
   const { registerTool, removeTool } = useCodeToolbar()
 
-  const toolIds = useCallback(() => {
-    return {
-      zoomIn: 'preview-zoom-in',
-      zoomOut: 'preview-zoom-out',
-      copyImage: 'preview-copy-image',
-      downloadSvg: 'preview-download-svg',
-      downloadPng: 'preview-download-png'
-    }
-  }, [])
-
   useEffect(() => {
     // 根据提供的功能有选择性地注册工具
     if (handleZoom) {
@@ -356,5 +346,5 @@ export const usePreviewTools = ({ handleZoom, handleCopyImage, handleDownload }:
         removeTool(TOOL_SPECS['download-png'].id)
       }
     }
-  }, [handleCopyImage, handleDownload, handleZoom, registerTool, removeTool, t, toolIds])
+  }, [handleCopyImage, handleDownload, handleZoom, registerTool, removeTool, t])
 }