diff --git a/.vscode/settings.json b/.vscode/settings.json index bb7889776d..47640bff09 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,7 +1,8 @@ { "editor.formatOnSave": true, "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" + "source.fixAll.eslint": "explicit", + "source.organizeImports": "explicit" }, "search.exclude": { "**/dist/**": true, diff --git a/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch b/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch new file mode 100644 index 0000000000..d5f7a89edb --- /dev/null +++ b/.yarn/patches/antd-npm-5.24.7-356a553ae5.patch @@ -0,0 +1,69 @@ +diff --git a/es/dropdown/dropdown.js b/es/dropdown/dropdown.js +index 986877a762b9ad0aca596a8552732cd12d2eaabb..1f18aa2ea745e68950e4cee16d4d655f5c835fd5 100644 +--- a/es/dropdown/dropdown.js ++++ b/es/dropdown/dropdown.js +@@ -2,7 +2,7 @@ + + import * as React from 'react'; + import LeftOutlined from "@ant-design/icons/es/icons/LeftOutlined"; +-import RightOutlined from "@ant-design/icons/es/icons/RightOutlined"; ++import { ChevronRight } from 'lucide-react'; + import classNames from 'classnames'; + import RcDropdown from 'rc-dropdown'; + import useEvent from "rc-util/es/hooks/useEvent"; +@@ -158,8 +158,10 @@ const Dropdown = props => { + className: `${prefixCls}-menu-submenu-arrow` + }, direction === 'rtl' ? (/*#__PURE__*/React.createElement(LeftOutlined, { + className: `${prefixCls}-menu-submenu-arrow-icon` +- })) : (/*#__PURE__*/React.createElement(RightOutlined, { +- className: `${prefixCls}-menu-submenu-arrow-icon` ++ })) : (/*#__PURE__*/React.createElement(ChevronRight, { ++ size: 16, ++ strokeWidth: 1.8, ++ className: `${prefixCls}-menu-submenu-arrow-icon lucide-custom` + }))), + mode: "vertical", + selectable: false, +diff --git a/es/dropdown/style/index.js b/es/dropdown/style/index.js +index 768c01783002c6901c85a73061ff6b3e776a60ce..39b1b95a56cdc9fb586a193c3adad5141f5cf213 100644 +--- a/es/dropdown/style/index.js ++++ b/es/dropdown/style/index.js +@@ -240,7 +240,8 @@ const genBaseStyle = token => { + marginInlineEnd: '0 !important', + color: token.colorTextDescription, + fontSize: fontSizeIcon, +- fontStyle: 'normal' ++ fontStyle: 'normal', ++ marginTop: 3, + } + } + }), +diff --git a/es/select/useIcons.js b/es/select/useIcons.js +index 959115be936ef8901548af2658c5dcfdc5852723..c812edd52123eb0faf4638b1154fcfa1b05b513b 100644 +--- a/es/select/useIcons.js ++++ b/es/select/useIcons.js +@@ -4,10 +4,10 @@ import * as React from 'react'; + import CheckOutlined from "@ant-design/icons/es/icons/CheckOutlined"; + import CloseCircleFilled from "@ant-design/icons/es/icons/CloseCircleFilled"; + import CloseOutlined from "@ant-design/icons/es/icons/CloseOutlined"; +-import DownOutlined from "@ant-design/icons/es/icons/DownOutlined"; + import LoadingOutlined from "@ant-design/icons/es/icons/LoadingOutlined"; + import SearchOutlined from "@ant-design/icons/es/icons/SearchOutlined"; + import { devUseWarning } from '../_util/warning'; ++import { ChevronDown } from 'lucide-react'; + export default function useIcons(_ref) { + let { + suffixIcon, +@@ -56,8 +56,10 @@ export default function useIcons(_ref) { + className: iconCls + })); + } +- return getSuffixIconNode(/*#__PURE__*/React.createElement(DownOutlined, { +- className: iconCls ++ return getSuffixIconNode(/*#__PURE__*/React.createElement(ChevronDown, { ++ size: 16, ++ strokeWidth: 1.8, ++ className: `${iconCls} lucide-custom` + })); + }; + } diff --git a/README.md b/README.md index b589376b7b..f08ad88fda 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,33 @@ +
-
- {tokenLines.map((lineTokens, lineIndex) => (
-
+ return (
+
+
+ {tokenLines.map((lineTokens, lineIndex) => (
+
+ {showLineNumbers && {lineIndex + 1}}
+
{lineTokens.map((token, tokenIndex) => (
{token.content}
))}
- ))}
-
-
- )
- }
-)
+
+ ))}
+
+
+ )
+})
const ContentContainer = styled.div<{
- $lineNumbers: boolean
$wrap: boolean
$fadeIn: boolean
}>`
@@ -241,6 +244,9 @@ const ContentContainer = styled.div<{
border-radius: inherit;
margin-top: 0;
+ /* gutter 宽度默认值 */
+ --gutter-width: 0.6rem;
+
.shiki {
padding: 1em;
border-radius: inherit;
@@ -250,38 +256,35 @@ const ContentContainer = styled.div<{
flex-direction: column;
.line {
- display: block;
+ display: flex;
+ align-items: flex-start;
min-height: 1.3rem;
- padding-left: ${(props) => (props.$lineNumbers ? '2rem' : '0')};
- * {
- overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')};
- white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')};
+ .line-number {
+ width: var(--gutter-width);
+ text-align: right;
+ opacity: 0.35;
+ margin-right: 1rem;
+ user-select: none;
+ flex-shrink: 0;
+ overflow: hidden;
+ line-height: inherit;
+ font-family: inherit;
+ font-variant-numeric: tabular-nums;
+ }
+
+ .line-content {
+ flex: 1;
+
+ * {
+ overflow-wrap: ${(props) => (props.$wrap ? 'break-word' : 'normal')};
+ white-space: ${(props) => (props.$wrap ? 'pre-wrap' : 'pre')};
+ }
}
}
}
}
- ${(props) =>
- props.$lineNumbers &&
- `
- code {
- counter-reset: step;
- counter-increment: step 0;
- position: relative;
- }
-
- code .line::before {
- content: counter(step);
- counter-increment: step;
- width: 1rem;
- position: absolute;
- left: 0;
- text-align: right;
- opacity: 0.35;
- }
- `}
-
@keyframes contentFadeIn {
from {
opacity: 0;
@@ -291,7 +294,7 @@ const ContentContainer = styled.div<{
}
}
- animation: ${(props) => (props.$fadeIn ? 'contentFadeIn 0.3s ease-in-out forwards' : 'none')};
+ animation: ${(props) => (props.$fadeIn ? 'contentFadeIn 0.1s ease-in forwards' : 'none')};
`
const CodePlaceholder = styled.div`
diff --git a/src/renderer/src/components/CodeBlockView/index.tsx b/src/renderer/src/components/CodeBlockView/index.tsx
index 64a3bb6c02..074616a8b8 100644
--- a/src/renderer/src/components/CodeBlockView/index.tsx
+++ b/src/renderer/src/components/CodeBlockView/index.tsx
@@ -4,7 +4,7 @@ import { CodeTool, CodeToolbar, TOOL_SPECS, useCodeTool } from '@renderer/compon
import { useSettings } from '@renderer/hooks/useSettings'
import { pyodideService } from '@renderer/services/PyodideService'
import { extractTitle } from '@renderer/utils/formats'
-import { isValidPlantUML } from '@renderer/utils/markdown'
+import { getExtensionByLanguage, isValidPlantUML } from '@renderer/utils/markdown'
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'
@@ -67,23 +67,21 @@ const CodeBlockView: React.FC