From 92702f1336bc5114c729aa49ef721bb81bb314a1 Mon Sep 17 00:00:00 2001 From: one Date: Wed, 21 May 2025 23:39:23 +0800 Subject: [PATCH] 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 | 1 - .../components/CodeBlockView/CodePreview.tsx | 39 +++++++++---------- .../src/components/CodeBlockView/index.tsx | 33 ++++------------ .../src/components/CodeEditor/index.tsx | 2 - .../CodeToolbar/usePreviewTools.tsx | 12 +----- 5 files changed, 27 insertions(+), 60 deletions(-) diff --git a/src/renderer/src/assets/styles/markdown.scss b/src/renderer/src/assets/styles/markdown.scss index 40c0255468..aed4919e85 100644 --- a/src/renderer/src/assets/styles/markdown.scss +++ b/src/renderer/src/assets/styles/markdown.scss @@ -321,7 +321,6 @@ mjx-container { .cm-lineWrapping * { word-wrap: break-word; - white-space: pre-wrap; } } } diff --git a/src/renderer/src/components/CodeBlockView/CodePreview.tsx b/src/renderer/src/components/CodeBlockView/CodePreview.tsx index 965d6ad14b..3b55b9901a 100644 --- a/src/renderer/src/components/CodeBlockView/CodePreview.tsx +++ b/src/renderer/src/components/CodeBlockView/CodePreview.tsx @@ -165,13 +165,11 @@ const CodePreview = ({ children, language }: CodePreviewProps) => { return ( {tokenLines.length > 0 ? ( @@ -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' diff --git a/src/renderer/src/components/CodeBlockView/index.tsx b/src/renderer/src/components/CodeBlockView/index.tsx index 3b9f34ceba..19b8796d09 100644 --- a/src/renderer/src/components/CodeBlockView/index.tsx +++ b/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%; } ` diff --git a/src/renderer/src/components/CodeEditor/index.tsx b/src/renderer/src/components/CodeEditor/index.tsx index 867d32e17e..6000e91b49 100644 --- a/src/renderer/src/components/CodeEditor/index.tsx +++ b/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, diff --git a/src/renderer/src/components/CodeToolbar/usePreviewTools.tsx b/src/renderer/src/components/CodeToolbar/usePreviewTools.tsx index 7cd49f95da..d1af8f49f2 100644 --- a/src/renderer/src/components/CodeToolbar/usePreviewTools.tsx +++ b/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]) }