From 8645b3f342951fbde86b9b6f0299343f66aeb04e Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Thu, 1 Feb 2024 17:32:35 +0800 Subject: [PATCH 01/25] :memo: docs: add codeemitter --- .../demos/buttonAsset/codeEmitter.tsx | 27 ++++++++++++++++++ docs/pro-editor/demos/buttonAsset/format.ts | 28 +++++++++++++++++++ docs/pro-editor/demos/buttonAsset/index.ts | 8 ++---- 3 files changed, 58 insertions(+), 5 deletions(-) create mode 100644 docs/pro-editor/demos/buttonAsset/codeEmitter.tsx create mode 100644 docs/pro-editor/demos/buttonAsset/format.ts diff --git a/docs/pro-editor/demos/buttonAsset/codeEmitter.tsx b/docs/pro-editor/demos/buttonAsset/codeEmitter.tsx new file mode 100644 index 00000000..519fd602 --- /dev/null +++ b/docs/pro-editor/demos/buttonAsset/codeEmitter.tsx @@ -0,0 +1,27 @@ +import { generateJSXCode } from '@ant-design/pro-editor'; +import template from 'lodash.template'; +import { prettier } from './format'; + +const codeTemplate = ` +import { Button } from 'antd'; + +export default () => <%= component %>; +`; + +interface TemplateParams { + iconDeps?: string; + component: string; +} + +const emitter: (params: TemplateParams) => string = template(codeTemplate); + +const codeEmitter = (config) => { + const code = emitter({ + component: generateJSXCode('Button', { + ...config, + }), + }); + return prettier(code); +}; + +export default codeEmitter; diff --git a/docs/pro-editor/demos/buttonAsset/format.ts b/docs/pro-editor/demos/buttonAsset/format.ts new file mode 100644 index 00000000..18141aa7 --- /dev/null +++ b/docs/pro-editor/demos/buttonAsset/format.ts @@ -0,0 +1,28 @@ +/** + * 代码格式化 + * @param configCode + * @returns + */ +export const prettier = (configCode: string) => { + let prettierCode = ''; + try { + const prettier = require('prettier'); + const plugins = [require('prettier/parser-typescript')]; + + prettierCode = prettier.format(configCode, { + parser: 'typescript', + plugins, + // 以下参考 Bigfish 配置 + semi: true, + singleQuote: true, + printWidth: 100, + trailingComma: 'all', + proseWrap: 'never', + endOfLine: 'lf', + }); + } catch (err) { + console.error('err', err); + prettierCode = `代码格式化失败，格式化前为:\n ${configCode}`; + } + return prettierCode; +}; diff --git a/docs/pro-editor/demos/buttonAsset/index.ts b/docs/pro-editor/demos/buttonAsset/index.ts index 22f9b463..d8c11ff0 100644 --- a/docs/pro-editor/demos/buttonAsset/index.ts +++ b/docs/pro-editor/demos/buttonAsset/index.ts @@ -1,11 +1,9 @@ import type { ComponentAssetParams } from '@ant-design/pro-editor'; - import { ButtonComponent } from './_Component'; import { ButtonPanel } from './_Panel'; - -import { createStore } from './store'; - +import codeEmitter from './codeEmitter'; import { ButtonConfig, buttonModel } from './models'; +import { createStore } from './store'; export const buttonAssetParams: ComponentAssetParams = { id: 'Button', @@ -27,5 +25,5 @@ export const buttonAssetParams: ComponentAssetParams = { devtools: { name: 'ButtonAssetStore' }, }, - codeEmitter: () => '', + codeEmitter, }; From 6b871976169b146568fcbc0262612ed5030ba025 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Thu, 1 Feb 2024 17:42:58 +0800 Subject: [PATCH 02/25] :bug: fix: ProBuilder highlight code --- src/ProBuilder/components/Code/index.tsx | 8 +------- src/ProBuilder/components/Code/style.ts | 1 + 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/ProBuilder/components/Code/index.tsx b/src/ProBuilder/components/Code/index.tsx index 279891f1..9de6e478 100644 --- a/src/ProBuilder/components/Code/index.tsx +++ b/src/ProBuilder/components/Code/index.tsx @@ -62,13 +62,7 @@ export const CodePanel: FC = memo((props) => { - + {configCode} diff --git a/src/ProBuilder/components/Code/style.ts b/src/ProBuilder/components/Code/style.ts index 9c248fd7..9ec8477d 100644 --- a/src/ProBuilder/components/Code/style.ts +++ b/src/ProBuilder/components/Code/style.ts @@ -30,6 +30,7 @@ export const useStyles = createStyles(({ token, stylish, css }) => { code: css` background: ${token.colorFillQuaternary}; height: 100%; + overflow: scroll; `, }; }); From a909e44d36251c2c6dc52218569a6ebd0aa310cd Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Fri, 2 Feb 2024 18:53:45 +0800 Subject: [PATCH 03/25] :camera_flash: chore: update snapshot --- .../store/__snapshots__/store.test.ts.snap | 336 ++++++++++++++++++ 1 file changed, 336 insertions(+) diff --git a/src/IconPicker/store/__snapshots__/store.test.ts.snap b/src/IconPicker/store/__snapshots__/store.test.ts.snap index 008c58b7..1de8df1a 100644 --- a/src/IconPicker/store/__snapshots__/store.test.ts.snap +++ b/src/IconPicker/store/__snapshots__/store.test.ts.snap @@ -176,6 +176,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "BackwardOutlined", "type": "antd", }, + { + "componentName": "BaiduOutlined", + "type": "antd", + }, { "componentName": "BankFilled", "type": "antd", @@ -224,6 +228,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "BgColorsOutlined", "type": "antd", }, + { + "componentName": "BilibiliFilled", + "type": "antd", + }, + { + "componentName": "BilibiliOutlined", + "type": "antd", + }, { "componentName": "BlockOutlined", "type": "antd", @@ -700,6 +712,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "DisconnectOutlined", "type": "antd", }, + { + "componentName": "DiscordFilled", + "type": "antd", + }, + { + "componentName": "DiscordOutlined", + "type": "antd", + }, { "componentName": "DislikeFilled", "type": "antd", @@ -708,6 +728,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "DislikeOutlined", "type": "antd", }, + { + "componentName": "DockerOutlined", + "type": "antd", + }, { "componentName": "DollarCircleFilled", "type": "antd", @@ -724,6 +748,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "DotChartOutlined", "type": "antd", }, + { + "componentName": "DotNetOutlined", + "type": "antd", + }, { "componentName": "DoubleLeftOutlined", "type": "antd", @@ -1244,6 +1272,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "GroupOutlined", "type": "antd", }, + { + "componentName": "HarmonyOSOutlined", + "type": "antd", + }, { "componentName": "HddFilled", "type": "antd", @@ -1392,10 +1424,22 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "ItalicOutlined", "type": "antd", }, + { + "componentName": "JavaOutlined", + "type": "antd", + }, + { + "componentName": "JavaScriptOutlined", + "type": "antd", + }, { "componentName": "KeyOutlined", "type": "antd", }, + { + "componentName": "KubernetesOutlined", + "type": "antd", + }, { "componentName": "LaptopOutlined", "type": "antd", @@ -1460,6 +1504,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "LinkedinOutlined", "type": "antd", }, + { + "componentName": "LinuxOutlined", + "type": "antd", + }, { "componentName": "Loading3QuartersOutlined", "type": "antd", @@ -1552,6 +1600,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "MergeCellsOutlined", "type": "antd", }, + { + "componentName": "MergeFilled", + "type": "antd", + }, + { + "componentName": "MergeOutlined", + "type": "antd", + }, { "componentName": "MessageFilled", "type": "antd", @@ -1600,10 +1656,26 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "MonitorOutlined", "type": "antd", }, + { + "componentName": "MoonFilled", + "type": "antd", + }, + { + "componentName": "MoonOutlined", + "type": "antd", + }, { "componentName": "MoreOutlined", "type": "antd", }, + { + "componentName": "MutedFilled", + "type": "antd", + }, + { + "componentName": "MutedOutlined", + "type": "antd", + }, { "componentName": "NodeCollapseOutlined", "type": "antd", @@ -1632,6 +1704,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "OneToOneOutlined", "type": "antd", }, + { + "componentName": "OpenAIFilled", + "type": "antd", + }, + { + "componentName": "OpenAIOutlined", + "type": "antd", + }, { "componentName": "OrderedListOutlined", "type": "antd", @@ -1704,6 +1784,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "PieChartOutlined", "type": "antd", }, + { + "componentName": "PinterestFilled", + "type": "antd", + }, + { + "componentName": "PinterestOutlined", + "type": "antd", + }, { "componentName": "PlayCircleFilled", "type": "antd", @@ -1764,6 +1852,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "PrinterOutlined", "type": "antd", }, + { + "componentName": "ProductFilled", + "type": "antd", + }, + { + "componentName": "ProductOutlined", + "type": "antd", + }, { "componentName": "ProfileFilled", "type": "antd", @@ -1800,6 +1896,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "PushpinOutlined", "type": "antd", }, + { + "componentName": "PythonOutlined", + "type": "antd", + }, { "componentName": "QqCircleFilled", "type": "antd", @@ -1960,6 +2060,10 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "RotateRightOutlined", "type": "antd", }, + { + "componentName": "RubyOutlined", + "type": "antd", + }, { "componentName": "SafetyCertificateFilled", "type": "antd", @@ -2060,6 +2164,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "SignalFilled", "type": "antd", }, + { + "componentName": "SignatureFilled", + "type": "antd", + }, + { + "componentName": "SignatureOutlined", + "type": "antd", + }, { "componentName": "SisternodeOutlined", "type": "antd", @@ -2160,6 +2272,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "SplitCellsOutlined", "type": "antd", }, + { + "componentName": "SpotifyFilled", + "type": "antd", + }, + { + "componentName": "SpotifyOutlined", + "type": "antd", + }, { "componentName": "StarFilled", "type": "antd", @@ -2204,6 +2324,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "SubnodeOutlined", "type": "antd", }, + { + "componentName": "SunFilled", + "type": "antd", + }, + { + "componentName": "SunOutlined", + "type": "antd", + }, { "componentName": "SwapLeftOutlined", "type": "antd", @@ -2284,6 +2412,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "ThunderboltOutlined", "type": "antd", }, + { + "componentName": "TikTokFilled", + "type": "antd", + }, + { + "componentName": "TikTokOutlined", + "type": "antd", + }, { "componentName": "ToTopOutlined", "type": "antd", @@ -2324,6 +2460,22 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "TrophyOutlined", "type": "antd", }, + { + "componentName": "TruckFilled", + "type": "antd", + }, + { + "componentName": "TruckOutlined", + "type": "antd", + }, + { + "componentName": "TwitchFilled", + "type": "antd", + }, + { + "componentName": "TwitchOutlined", + "type": "antd", + }, { "componentName": "TwitterCircleFilled", "type": "antd", @@ -2476,6 +2628,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "WechatOutlined", "type": "antd", }, + { + "componentName": "WechatWorkFilled", + "type": "antd", + }, + { + "componentName": "WechatWorkOutlined", + "type": "antd", + }, { "componentName": "WeiboCircleFilled", "type": "antd", @@ -2516,6 +2676,14 @@ exports[`IconPicker Store > State：组件状态 > Hooks 初始值 1`] = ` "componentName": "WomanOutlined", "type": "antd", }, + { + "componentName": "XFilled", + "type": "antd", + }, + { + "componentName": "XOutlined", + "type": "antd", + }, { "componentName": "YahooFilled", "type": "antd", @@ -2757,6 +2925,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "BackwardOutlined", "type": "antd", }, + { + "componentName": "BaiduOutlined", + "type": "antd", + }, { "componentName": "BankFilled", "type": "antd", @@ -2805,6 +2977,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "BgColorsOutlined", "type": "antd", }, + { + "componentName": "BilibiliFilled", + "type": "antd", + }, + { + "componentName": "BilibiliOutlined", + "type": "antd", + }, { "componentName": "BlockOutlined", "type": "antd", @@ -3281,6 +3461,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "DisconnectOutlined", "type": "antd", }, + { + "componentName": "DiscordFilled", + "type": "antd", + }, + { + "componentName": "DiscordOutlined", + "type": "antd", + }, { "componentName": "DislikeFilled", "type": "antd", @@ -3289,6 +3477,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "DislikeOutlined", "type": "antd", }, + { + "componentName": "DockerOutlined", + "type": "antd", + }, { "componentName": "DollarCircleFilled", "type": "antd", @@ -3305,6 +3497,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "DotChartOutlined", "type": "antd", }, + { + "componentName": "DotNetOutlined", + "type": "antd", + }, { "componentName": "DoubleLeftOutlined", "type": "antd", @@ -3825,6 +4021,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "GroupOutlined", "type": "antd", }, + { + "componentName": "HarmonyOSOutlined", + "type": "antd", + }, { "componentName": "HddFilled", "type": "antd", @@ -3973,10 +4173,22 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "ItalicOutlined", "type": "antd", }, + { + "componentName": "JavaOutlined", + "type": "antd", + }, + { + "componentName": "JavaScriptOutlined", + "type": "antd", + }, { "componentName": "KeyOutlined", "type": "antd", }, + { + "componentName": "KubernetesOutlined", + "type": "antd", + }, { "componentName": "LaptopOutlined", "type": "antd", @@ -4041,6 +4253,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "LinkedinOutlined", "type": "antd", }, + { + "componentName": "LinuxOutlined", + "type": "antd", + }, { "componentName": "Loading3QuartersOutlined", "type": "antd", @@ -4133,6 +4349,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "MergeCellsOutlined", "type": "antd", }, + { + "componentName": "MergeFilled", + "type": "antd", + }, + { + "componentName": "MergeOutlined", + "type": "antd", + }, { "componentName": "MessageFilled", "type": "antd", @@ -4181,10 +4405,26 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "MonitorOutlined", "type": "antd", }, + { + "componentName": "MoonFilled", + "type": "antd", + }, + { + "componentName": "MoonOutlined", + "type": "antd", + }, { "componentName": "MoreOutlined", "type": "antd", }, + { + "componentName": "MutedFilled", + "type": "antd", + }, + { + "componentName": "MutedOutlined", + "type": "antd", + }, { "componentName": "NodeCollapseOutlined", "type": "antd", @@ -4213,6 +4453,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "OneToOneOutlined", "type": "antd", }, + { + "componentName": "OpenAIFilled", + "type": "antd", + }, + { + "componentName": "OpenAIOutlined", + "type": "antd", + }, { "componentName": "OrderedListOutlined", "type": "antd", @@ -4285,6 +4533,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "PieChartOutlined", "type": "antd", }, + { + "componentName": "PinterestFilled", + "type": "antd", + }, + { + "componentName": "PinterestOutlined", + "type": "antd", + }, { "componentName": "PlayCircleFilled", "type": "antd", @@ -4345,6 +4601,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "PrinterOutlined", "type": "antd", }, + { + "componentName": "ProductFilled", + "type": "antd", + }, + { + "componentName": "ProductOutlined", + "type": "antd", + }, { "componentName": "ProfileFilled", "type": "antd", @@ -4381,6 +4645,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "PushpinOutlined", "type": "antd", }, + { + "componentName": "PythonOutlined", + "type": "antd", + }, { "componentName": "QqCircleFilled", "type": "antd", @@ -4541,6 +4809,10 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "RotateRightOutlined", "type": "antd", }, + { + "componentName": "RubyOutlined", + "type": "antd", + }, { "componentName": "SafetyCertificateFilled", "type": "antd", @@ -4641,6 +4913,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "SignalFilled", "type": "antd", }, + { + "componentName": "SignatureFilled", + "type": "antd", + }, + { + "componentName": "SignatureOutlined", + "type": "antd", + }, { "componentName": "SisternodeOutlined", "type": "antd", @@ -4741,6 +5021,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "SplitCellsOutlined", "type": "antd", }, + { + "componentName": "SpotifyFilled", + "type": "antd", + }, + { + "componentName": "SpotifyOutlined", + "type": "antd", + }, { "componentName": "StarFilled", "type": "antd", @@ -4785,6 +5073,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "SubnodeOutlined", "type": "antd", }, + { + "componentName": "SunFilled", + "type": "antd", + }, + { + "componentName": "SunOutlined", + "type": "antd", + }, { "componentName": "SwapLeftOutlined", "type": "antd", @@ -4865,6 +5161,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "ThunderboltOutlined", "type": "antd", }, + { + "componentName": "TikTokFilled", + "type": "antd", + }, + { + "componentName": "TikTokOutlined", + "type": "antd", + }, { "componentName": "ToTopOutlined", "type": "antd", @@ -4905,6 +5209,22 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "TrophyOutlined", "type": "antd", }, + { + "componentName": "TruckFilled", + "type": "antd", + }, + { + "componentName": "TruckOutlined", + "type": "antd", + }, + { + "componentName": "TwitchFilled", + "type": "antd", + }, + { + "componentName": "TwitchOutlined", + "type": "antd", + }, { "componentName": "TwitterCircleFilled", "type": "antd", @@ -5057,6 +5377,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "WechatOutlined", "type": "antd", }, + { + "componentName": "WechatWorkFilled", + "type": "antd", + }, + { + "componentName": "WechatWorkOutlined", + "type": "antd", + }, { "componentName": "WeiboCircleFilled", "type": "antd", @@ -5097,6 +5425,14 @@ exports[`IconPicker Store > State：组件状态 > 默认初始值 1`] = ` "componentName": "WomanOutlined", "type": "antd", }, + { + "componentName": "XFilled", + "type": "antd", + }, + { + "componentName": "XOutlined", + "type": "antd", + }, { "componentName": "YahooFilled", "type": "antd", From aa7d96362a8fe9e1ef5c3a4782668c050880ee19 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Thu, 8 Feb 2024 17:47:09 +0800 Subject: [PATCH 04/25] :bug: fix: remove highlight wrapper --- .../components/HighLightJS/index.tsx | 2 +- .../components/HighLighter/index.tsx | 2 +- src/Highlight/defalut.tsx | 111 --------------- src/Highlight/demos/wrapper.tsx | 39 ------ src/Highlight/hooks/useShiki.tsx | 19 +-- src/Highlight/index.en-US.md | 6 - src/Highlight/index.tsx | 127 +++++++++++++----- src/Highlight/index.zh-CN.md | 6 - src/Highlight/style.ts | 80 +---------- src/Markdown/CodeBlock.tsx | 13 +- src/Markdown/style.ts | 77 ++++++++++- src/{Highlight => Markdown}/wrapper.tsx | 60 ++++----- 12 files changed, 209 insertions(+), 333 deletions(-) delete mode 100644 src/Highlight/defalut.tsx delete mode 100644 src/Highlight/demos/wrapper.tsx rename src/{Highlight => Markdown}/wrapper.tsx (60%) diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx index 31557f4e..c6b3c860 100644 --- a/src/Highlight/components/HighLightJS/index.tsx +++ b/src/Highlight/components/HighLightJS/index.tsx @@ -6,8 +6,8 @@ */ import classNames from 'classnames'; import { memo, useEffect, useState } from 'react'; -import { HighlightProps } from '../../defalut'; import { useHighlight } from '../../hooks/useHighlight'; +import { HighlightProps } from '../../index'; import { THEME_LIGHT } from '../../theme'; import HighlightCell from '../HighlightCell'; import { useStyles } from './style'; diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx index 92d972f2..b71feef1 100644 --- a/src/Highlight/components/HighLighter/index.tsx +++ b/src/Highlight/components/HighLighter/index.tsx @@ -9,8 +9,8 @@ import { Loading3QuartersOutlined as Loading } from '@ant-design/icons'; import classNames from 'classnames'; import { memo } from 'react'; import { Center } from 'react-layout-kit'; -import { HighlightProps } from '../../defalut'; import { useShiki } from '../../hooks/useShiki'; +import { HighlightProps } from '../../index'; import HighLightJS from '../HighLightJS'; import { useStyles } from './style'; diff --git a/src/Highlight/defalut.tsx b/src/Highlight/defalut.tsx deleted file mode 100644 index bb474bd9..00000000 --- a/src/Highlight/defalut.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import classNames from 'classnames'; -import { createRef, memo } from 'react'; -import CopyButton from './components/CopyButton'; -import HighLighter from './components/HighLighter'; -import LanguageTag from './components/LanguageTag'; -import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent'; -import { useStyles } from './style'; -import { ThemeType } from './theme'; - -export interface HighlightProps { - /** - * @description 样式 - * @ignore - */ - style?: React.CSSProperties; - /** - * @description className 类名 - * @ignore - */ - className?: string; - /** - * @description 类名前缀 - * @ignore - */ - prefixCls?: string; - /** - * @title 指定语言 - * @description 指定语言 - * @renderType select - * @default "typescript" - */ - language?: string; - /** - * @title 主题 - * @description 主题颜色, dark 黑色主题，light 白色主题 - * @default "light" - */ - theme?: ThemeType; - /** - * @title 高亮内容 - * @description 高亮内容 - */ - children?: any; - /** - * @title 是否使用要使用行号 - * @description 是否需要展示代码块左侧的行号 - * @default false - */ - lineNumber?: boolean; - /** - * @title 是否展示复制按钮 - * @description 是否需要展示复制按钮 - * @default true - */ - copyable?: boolean; - /** - * @title 复制按钮点击后回调 - */ - onCopy?: (children: any) => void; - /** - * 高亮类型 - */ - type?: 'pure' | 'block'; - /** - * 是否需要默认外层 wrapper - */ - containerWrapper?: boolean; - /** - * 是否需默认展示语言种类 - */ - showLanguage?: boolean; -} - -const HighlightBase: React.FC = memo((props) => { - const { - children, - style, - className, - lineNumber = false, - copyable = true, - theme, - language = 'tsx', - showLanguage = true, - type = 'block', - onCopy, - } = props; - const { styles } = useStyles({ theme, type }); - const codeRef = createRef(); - useKeyDownCopyEvent(codeRef, onCopy); - - return ( - <> -
- {copyable && } - {showLanguage && language && ( - {language.toLowerCase()} - )} - - {children} - -
- - ); -}); - -export { HighlightBase }; diff --git a/src/Highlight/demos/wrapper.tsx b/src/Highlight/demos/wrapper.tsx deleted file mode 100644 index 2d164273..00000000 --- a/src/Highlight/demos/wrapper.tsx +++ /dev/null @@ -1,39 +0,0 @@ -/** - * title: wrapper used - */ - -import { Highlight } from '@ant-design/pro-editor'; -import { Space } from 'antd'; - -export default () => ( - - { - console.log('复制代码', children); - }} - > - {`public class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello World!"); - } - }`} - - { - console.log('复制代码', children); - }} - > - {`public class HelloWorld { - public static void main(String[] args) { - System.out.println("Hello World!"); - } - }`} - - -); diff --git a/src/Highlight/hooks/useShiki.tsx b/src/Highlight/hooks/useShiki.tsx index 70d63194..290e5d65 100644 --- a/src/Highlight/hooks/useShiki.tsx +++ b/src/Highlight/hooks/useShiki.tsx @@ -1,30 +1,17 @@ import { useEffect, useState } from 'react'; import { getHighlighter, type Highlighter } from 'shikiji'; import { themeConfig } from '../theme'; +import { languageMap } from './useHighlight'; // 目前支持的语言列表 -export const languageMap = [ - 'javascript', - 'typescript', - 'css', - 'json', - 'markdown', - 'xml', - 'yaml', - 'tsx', - 'jsx', - 'java', - 'python', - 'sql', - 'sh', -]; +export const languageList = Object.keys(languageMap); export const useShiki = (language, theme) => { const [shiki, setShiki] = useState(null); const initShiki = async () => { const highlighter = await getHighlighter({ - langs: languageMap as any, + langs: languageList as any, themes: [themeConfig(true), themeConfig(false)], }); setShiki(highlighter); diff --git a/src/Highlight/index.en-US.md b/src/Highlight/index.en-US.md index 88f01eb7..cfc9bf17 100644 --- a/src/Highlight/index.en-US.md +++ b/src/Highlight/index.en-US.md @@ -33,12 +33,6 @@ You can view the effects of different languages in different themes through this -### Default Container Wrapper - -You can use `containerWrapper` to render a default outer container, which provides some basic capabilities such as expand/collapse and language switching. - - - ## API Parameters ### Highlight diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx index d021a307..8447a412 100644 --- a/src/Highlight/index.tsx +++ b/src/Highlight/index.tsx @@ -1,44 +1,111 @@ import { useThemeMode } from 'antd-style'; -import { memo } from 'react'; -import { ConfigProvider } from '../ConfigProvider'; -import { HighlightBase, HighlightProps } from './defalut'; +import classNames from 'classnames'; +import { createRef, memo } from 'react'; +import CopyButton from './components/CopyButton'; +import HighLighter from './components/HighLighter'; +import LanguageTag from './components/LanguageTag'; +import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent'; import { useStyles } from './style'; -import { THEME_AUTO } from './theme'; -import FullFeatureWrapper from './wrapper'; +import { THEME_AUTO, ThemeType } from './theme'; -const Highlight = memo((props: HighlightProps) => { - const { type, theme: outTheme = THEME_AUTO, containerWrapper } = props; +export interface HighlightProps { + /** + * @description 样式 + * @ignore + */ + style?: React.CSSProperties; + /** + * @description className 类名 + * @ignore + */ + className?: string; + /** + * @description 类名前缀 + * @ignore + */ + prefixCls?: string; + /** + * @title 指定语言 + * @description 指定语言 + * @renderType select + * @default "typescript" + */ + language?: string; + /** + * @title 主题 + * @description 主题颜色, dark 黑色主题，light 白色主题 + * @default "light" + */ + theme?: ThemeType; + /** + * @title 高亮内容 + * @description 高亮内容 + */ + children?: any; + /** + * @title 是否使用要使用行号 + * @description 是否需要展示代码块左侧的行号 + * @default false + */ + lineNumber?: boolean; + /** + * @title 是否展示复制按钮 + * @description 是否需要展示复制按钮 + * @default true + */ + copyable?: boolean; + /** + * @title 复制按钮点击后回调 + */ + onCopy?: (children: any) => void; + /** + * 高亮类型 + */ + type?: 'pure' | 'block'; + /** + * 是否需默认展示语言种类 + */ + showLanguage?: boolean; +} + +const Highlight: React.FC = memo((props) => { + const { + children, + style, + className, + lineNumber = false, + copyable = true, + theme: outTheme = THEME_AUTO, + language = 'tsx', + showLanguage = true, + type = 'block', + onCopy, + } = props; // 当为 auto 的时候，根据系统主题来判断 const { appearance } = useThemeMode(); const ProviderTheme = appearance === 'dark' ? 'dark' : 'light'; const theme = outTheme === THEME_AUTO ? ProviderTheme : outTheme; - const { theme: token } = useStyles({ - type, - theme, - }); + const { styles } = useStyles({ theme, type }); + + const codeRef = createRef(); + useKeyDownCopyEvent(codeRef, onCopy); + return ( - - {containerWrapper ? ( - - ) : ( - + {copyable && } + {showLanguage && language && ( + {language.toLowerCase()} )} - + + {children} + + ); }); -export * from './defalut'; -export * from './wrapper'; export { Highlight }; diff --git a/src/Highlight/index.zh-CN.md b/src/Highlight/index.zh-CN.md index c79daec0..602f36c2 100644 --- a/src/Highlight/index.zh-CN.md +++ b/src/Highlight/index.zh-CN.md @@ -34,12 +34,6 @@ group: 基础组件 -### 外层默认容器包裹 - -你可以通过 `containerWrapper` 来默认渲染一个外层的容器，改容器提供一些基本能力：展开关闭、语言切换 - - - ## API 参数 ### Highlight diff --git a/src/Highlight/style.ts b/src/Highlight/style.ts index 95204562..2c2e5d1e 100644 --- a/src/Highlight/style.ts +++ b/src/Highlight/style.ts @@ -1,4 +1,3 @@ -import Color from 'color'; import { createStyles } from '../theme'; import { getThemeColor } from './theme/colors'; @@ -11,55 +10,13 @@ export const useStyles = createStyles( ({ css, cx, token, prefixCls }, { theme, type }: IHighlightStyleProps) => { const prefix = `${prefixCls}-${token?.editorPrefix}-highlight`; - const { colorFillTertiary, colorText, colorTextSecondary } = getThemeColor(theme === 'dark'); + const { colorFillTertiary } = getThemeColor(theme === 'dark'); const typeStylish = css` background-color: ${type === 'block' ? colorFillTertiary : 'transparent'}; `; - const lighterTypeStylish = css` - background-color: ${type === 'block' - ? Color(colorFillTertiary).alpha(0.9).hsl().string() - : 'transparent'}; - `; - return { - wrapper: cx( - `${prefix}-wrapper`, - lighterTypeStylish, - css` - border-radius: ${token.borderRadius}px; - .${prefix}-copy { - background-color: transparent; - position: inherit; - width: 30px; - padding-left: 6px; - } - `, - ), - expland: css` - color: ${Color(colorText).alpha(0.8).hsl().string()}; - `, - - copy: css` - color: ${Color(colorText).alpha(0.6).hsl().string()}; - `, - header: cx( - `${prefix}-header`, - css` - background-color: ${type === 'block' ? token.colorFillTertiary : 'transparent'}; - padding: 4px 8px; - border-radius: ${token.borderRadius}px; - width: auto !important; // override self width - `, - css` - .${prefix}-btn { - &:hover { - color: ${colorTextSecondary} !important; - } - } - `, - ), container: cx( `${prefix}-container`, typeStylish, @@ -92,41 +49,6 @@ export const useStyles = createStyles( } `, ), - trigger: css` - min-width: 100px; - display: flex; - justify-content: center; - span { - font-family: ${token.fontFamilyCode} !important; - } - `, - lang: cx( - css` - position: absolute; - z-index: 2; - right: 0; - bottom: 8px; - - font-family: ${token.fontFamilyCode}; - color: ${token.colorTextSecondary}; - - transition: opacity 0.1s; - `, - ), - select: css` - min-width: 100px; - .${prefixCls}-btn { - color: ${colorText}; - } - .${prefixCls}-select-selector { - padding-inline-end: 4px !important; - } - .${prefixCls}-select-selection-overflow-item-suffix { - .${prefixCls}-select-selection-search { - display: none; - } - } - `, }; }, ); diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx index a58f3bf9..16d86a09 100644 --- a/src/Markdown/CodeBlock.tsx +++ b/src/Markdown/CodeBlock.tsx @@ -1,7 +1,7 @@ +import { Snippet } from '@ant-design/pro-editor'; import { createStyles } from 'antd-style'; import { memo } from 'react'; - -import { Highlight, Snippet } from '@ant-design/pro-editor'; +import HighlightWrapper from './wrapper'; const useStyles = createStyles(({ css }) => ({ container: css` @@ -55,13 +55,8 @@ export const Code = memo((properties: any) => { } return ( - + {content} - + ); }); diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts index 87776278..9c97ef3f 100644 --- a/src/Markdown/style.ts +++ b/src/Markdown/style.ts @@ -1,7 +1,22 @@ import { createStyles } from '../theme'; -export const useStyles = createStyles(({ css, token }) => { +export const useStyles = createStyles(({ css, cx, token, prefixCls }) => { + const prefix = `${prefixCls}-${token?.editorPrefix}-markdown`; + return { + container: css` + :not(:last-child) { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + } + `, + highlight: css` + pre { + padding: 12px !important; + } + `, markdown: css` color: ${token.colorText}; @@ -162,5 +177,65 @@ export const useStyles = createStyles(({ css, token }) => { } } `, + wrapper: cx( + css` + background-color: 'transparent'; + border-radius: ${token.borderRadius}px; + `, + ), + header: cx( + `${prefix}-header`, + css` + background-color: ${token.colorFillTertiary}; + padding: 4px 8px; + border-radius: ${token.borderRadius}px; + width: auto !important; // override self width + `, + css` + .${prefix}-btn { + &:hover { + color: ${token.colorTextSecondary} !important; + } + } + `, + ), + copy: css` + background-color: transparent; + position: inherit; + width: 30px; + padding-left: 6px; + `, + select: css` + min-width: 100px; + .${prefixCls}-select-selector { + padding-inline-end: 4px !important; + } + .${prefixCls}-select-selection-overflow-item-suffix { + .${prefixCls}-select-selection-search { + display: none; + } + } + `, + trigger: css` + min-width: 100px; + display: flex; + justify-content: center; + span { + font-family: ${token.fontFamilyCode} !important; + } + `, + lang: cx( + css` + position: absolute; + z-index: 2; + right: 0; + bottom: 8px; + + font-family: ${token.fontFamilyCode}; + color: ${token.colorTextSecondary}; + + transition: opacity 0.1s; + `, + ), }; }); diff --git a/src/Highlight/wrapper.tsx b/src/Markdown/wrapper.tsx similarity index 60% rename from src/Highlight/wrapper.tsx rename to src/Markdown/wrapper.tsx index 09c77bc7..bf1eca2a 100644 --- a/src/Highlight/wrapper.tsx +++ b/src/Markdown/wrapper.tsx @@ -1,15 +1,17 @@ import CopyButton from '@/components/CopyButton'; import { DownOutlined, RightOutlined } from '@ant-design/icons'; -import { ActionIcon, Button, Select, type SelectProps } from '@ant-design/pro-editor'; +import { ActionIcon, Button, Highlight, Select, type SelectProps } from '@ant-design/pro-editor'; import classNames from 'classnames'; import { memo, useState } from 'react'; -import { DivProps, Flexbox } from 'react-layout-kit'; -import { HighlightBase, HighlightProps } from './defalut'; -import { languageMap } from './hooks/useHighlight'; +import { Flexbox } from 'react-layout-kit'; import { useStyles } from './style'; -import { THEME_LIGHT } from './theme'; -export interface HighlighterWrapperProps extends DivProps { +const options: SelectProps['options'] = Object.keys(languageMap).map((key) => ({ + label: key, + value: key.toLowerCase(), +})); + +export interface HighlightWrapperProps { /** * @description The code content to be highlighted */ @@ -18,34 +20,26 @@ export interface HighlighterWrapperProps extends DivProps { * @description The language of the code content */ language?: string; + /** + * classNames + */ + className?: string; + /** + * style + */ + style?: React.CSSProperties; } -const options: SelectProps['options'] = Object.keys(languageMap).map((key) => ({ - label: key, - value: key.toLowerCase(), -})); -export const FullFeatureWrapper = memo((props) => { - const { - children, - language = 'markdown', - className, - style, - theme = THEME_LIGHT, - copyable = true, - type = 'block', - } = props || {}; +const HighlightWrapper = memo((props: HighlightWrapperProps) => { + const { children, language = 'markdown', className, style } = props || {}; const [expand, setExpand] = useState(true); const [lang, setLang] = useState(language); - const { styles } = useStyles({ - theme, - type, - }); + const { styles } = useStyles(); return (
: } onClick={() => setExpand(!expand)} size={24} @@ -70,17 +64,15 @@ export const FullFeatureWrapper = memo suffixIcon={false} value={[lang.toLowerCase()]} /> - {copyable && } + - + {expand ? ( + + {children} + + ) : null}
); }); -export default FullFeatureWrapper; +export default HighlightWrapper; From 7125595143d7e8c88b1f6c6536676ae853cd28ec Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Thu, 8 Feb 2024 20:52:05 +0800 Subject: [PATCH 05/25] :sparkles: feat: add Markdown code render --- src/Highlight/demos/config.js | 5 -- src/Highlight/hooks/useShiki.tsx | 4 +- src/Highlight/index.tsx | 3 +- src/Markdown/demos/code.tsx | 10 ++++ src/Markdown/demos/data.ts | 83 +++++++++++++++++++++++++++++++- src/Markdown/demos/index.tsx | 4 ++ src/Markdown/index.zh-CN.md | 18 +++++-- src/Markdown/style.ts | 4 +- src/Markdown/wrapper.tsx | 33 ++++++++++--- 9 files changed, 139 insertions(+), 25 deletions(-) create mode 100644 src/Markdown/demos/code.tsx diff --git a/src/Highlight/demos/config.js b/src/Highlight/demos/config.js index 58e12d18..4dd21264 100644 --- a/src/Highlight/demos/config.js +++ b/src/Highlight/demos/config.js @@ -4,11 +4,6 @@ const configs = [ text: 'Bash', code: '#!/bin/bash\n\n###### CONFIG\nACCEPTED_HOSTS="/root/.hag_accepted.conf"\nBE_VERBOSE=false\n\nif [ "$UID" -ne 0 ]\nthen\n echo "Superuser rights required"\n exit 2\nfi\n\ngenApacheConf(){\n echo -e "# Host ${HOME_DIR}$1/$2 :"\n}\n\necho \'"quoted"\' | tr -d \\\\/" > text.txt\n\n', }, - { - language: 'cpp', - text: 'Cpp', - code: '#include \n\nint main(int argc, char *argv[]) {\n\n /* An annoying "Hello World" example */\n for (auto i = 0; i < 0xFFFF; i++)\n cout << "Hello, World!" << endl;\n\n char c = \'\\n\';\n unordered_map > m;\n m["key"] = "\\\\\\\\"; // this is an error\n\n return -2e3 + 12l;\n}', - }, { language: 'css', text: 'Css', diff --git a/src/Highlight/hooks/useShiki.tsx b/src/Highlight/hooks/useShiki.tsx index 290e5d65..882957fe 100644 --- a/src/Highlight/hooks/useShiki.tsx +++ b/src/Highlight/hooks/useShiki.tsx @@ -4,14 +4,14 @@ import { themeConfig } from '../theme'; import { languageMap } from './useHighlight'; // 目前支持的语言列表 -export const languageList = Object.keys(languageMap); +export const HIGHLIGHT_LANGUAGES = Object.keys(languageMap); export const useShiki = (language, theme) => { const [shiki, setShiki] = useState(null); const initShiki = async () => { const highlighter = await getHighlighter({ - langs: languageList as any, + langs: HIGHLIGHT_LANGUAGES as any, themes: [themeConfig(true), themeConfig(false)], }); setShiki(highlighter); diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx index 8447a412..4bf7fd3e 100644 --- a/src/Highlight/index.tsx +++ b/src/Highlight/index.tsx @@ -5,6 +5,7 @@ import CopyButton from './components/CopyButton'; import HighLighter from './components/HighLighter'; import LanguageTag from './components/LanguageTag'; import { useKeyDownCopyEvent } from './hooks/useKeyDownCopyEvent'; +import { HIGHLIGHT_LANGUAGES } from './hooks/useShiki'; import { useStyles } from './style'; import { THEME_AUTO, ThemeType } from './theme'; @@ -108,4 +109,4 @@ const Highlight: React.FC = memo((props) => { ); }); -export { Highlight }; +export { HIGHLIGHT_LANGUAGES, Highlight }; diff --git a/src/Markdown/demos/code.tsx b/src/Markdown/demos/code.tsx new file mode 100644 index 00000000..44135e3b --- /dev/null +++ b/src/Markdown/demos/code.tsx @@ -0,0 +1,10 @@ +/** + * title: 代码渲染 + * description: Markdown 内置 `Highlight` 代码渲染 + */ +import { Markdown } from '@ant-design/pro-editor'; +import { codeContent } from './data'; + +export default () => { + return {codeContent}; +}; diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts index e5e5e073..76bdb3cb 100644 --- a/src/Markdown/demos/data.ts +++ b/src/Markdown/demos/data.ts @@ -106,4 +106,85 @@ const htmlContent = ` `; -export { content, htmlContent }; +const codeContent = ` +\`\`\`bash +$ pnpm install +\`\`\` + + +\`\`\`javascript +import { Collapse, Divider, Typography } from 'antd'; +import { CSSProperties, memo } from 'react'; +import ReactMarkdown from 'react-markdown'; +import rehypeKatex from 'rehype-katex'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; + +import { PluggableList } from 'react-markdown/lib/react-markdown'; +import { withProvider } from '..'; +import { Code } from './CodeBlock'; +import { useStyles } from './style'; + +export interface MarkdownProps { + children: string; + /** + * @description ClassName + */ + className?: string; + onDoubleClick?: () => void; + style?: CSSProperties; + rehypePlugins?: PluggableList; + remarkPlugins?: PluggableList; +} + +const MemoHr = memo((props) => ( + +)); +const MemoDetails = memo((props) => ); +const MemoImage = memo((props) => ); +const MemoAlink = memo((props) => ); + +const Markdown = memo( + ({ + children, + className, + style, + onDoubleClick, + rehypePlugins: outRehypePlugins, + remarkPlugins: outRemarkPlugins, + ...rest + }) => { + const { styles } = useStyles(); + const components: any = { + details: MemoDetails, + hr: MemoHr, + a: MemoAlink, + img: MemoImage, + pre: Code, + }; + + const rehypePlugins = [rehypeKatex, ...(outRehypePlugins || [])]; + const remarkPlugins = [remarkGfm, remarkMath, ...(outRemarkPlugins || [])]; + + return ( + + + {children} + + + ); + }, +); + +export default withProvider(Markdown) as React.FC; + +\`\`\` +`; + +export { codeContent, content, htmlContent }; diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx index a14a0b0f..62d6230b 100644 --- a/src/Markdown/demos/index.tsx +++ b/src/Markdown/demos/index.tsx @@ -1,3 +1,7 @@ +/** + * title: 自定义操作 + * description: 可以通过自己传入 components 等 `React-Markdown` 的 Props 来进行自定义，多余的会透传过去。 + */ import { Markdown } from '@ant-design/pro-editor'; import { content } from './data'; diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md index 7dce50c4..afeea452 100644 --- a/src/Markdown/index.zh-CN.md +++ b/src/Markdown/index.zh-CN.md @@ -3,18 +3,26 @@ nav: 组件 group: 基础组件 title: Markdown 文档展示 atomId: Markdown -description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。 +description: --- -## Default +# Markdown 文档展示 -ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，使用我们自己的 Highlight 和 Snippet 进行代码块的渲染 +## 何时使用 -你也可以通过自己传入 components 等 React-Markdown 的 Props 来进行自定义，多余的会透传过去。 +Markdown 是一个用于渲染 Markdown 文本的 React 组件。它支持各种 Markdown 语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。 + +## 代码演示 + +### 默认渲染 -## 自定义传入 Plugins +### 代码 + + + +### 自定义传入 Plugins 我们内置了一些对于 Markdown 转换的 Plugins，但是如果你有别的需求，你可以自定义传入 rehypePlugins 和 remarkPlugins 来扩充当前的渲染能力。 diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts index 9c97ef3f..a8080594 100644 --- a/src/Markdown/style.ts +++ b/src/Markdown/style.ts @@ -179,16 +179,14 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls }) => { `, wrapper: cx( css` - background-color: 'transparent'; + background-color: ${token.colorFillTertiary}; border-radius: ${token.borderRadius}px; `, ), header: cx( `${prefix}-header`, css` - background-color: ${token.colorFillTertiary}; padding: 4px 8px; - border-radius: ${token.borderRadius}px; width: auto !important; // override self width `, css` diff --git a/src/Markdown/wrapper.tsx b/src/Markdown/wrapper.tsx index bf1eca2a..a854b62c 100644 --- a/src/Markdown/wrapper.tsx +++ b/src/Markdown/wrapper.tsx @@ -1,12 +1,19 @@ import CopyButton from '@/components/CopyButton'; import { DownOutlined, RightOutlined } from '@ant-design/icons'; -import { ActionIcon, Button, Highlight, Select, type SelectProps } from '@ant-design/pro-editor'; +import { + ActionIcon, + Button, + HIGHLIGHT_LANGUAGES, + Highlight, + Select, + type SelectProps, +} from '@ant-design/pro-editor'; import classNames from 'classnames'; -import { memo, useState } from 'react'; +import { memo, useMemo, useState } from 'react'; import { Flexbox } from 'react-layout-kit'; import { useStyles } from './style'; -const options: SelectProps['options'] = Object.keys(languageMap).map((key) => ({ +const options: SelectProps['options'] = HIGHLIGHT_LANGUAGES.map((key) => ({ label: key, value: key.toLowerCase(), })); @@ -36,6 +43,20 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => { const [lang, setLang] = useState(language); const { styles } = useStyles(); + const highlightBlock = useMemo(() => { + return ( + + {children} + + ); + }, [lang, children]); + return (
@@ -66,11 +87,7 @@ const HighlightWrapper = memo((props: HighlightWrapperProps) => { /> - {expand ? ( - - {children} - - ) : null} + {expand ? highlightBlock : null}
); }); From d373ffe025a7bfbf42d5de0a3f9ac8bb6436c4d9 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Thu, 8 Feb 2024 22:35:45 +0800 Subject: [PATCH 06/25] :memo: docs: remove interaction container --- .i18nrc.js | 3 ++- src/InteractContainer/index.en-US.md | 39 --------------------------- src/InteractContainer/index.zh-CN.md | 40 ---------------------------- 3 files changed, 2 insertions(+), 80 deletions(-) delete mode 100644 src/InteractContainer/index.en-US.md delete mode 100644 src/InteractContainer/index.zh-CN.md diff --git a/.i18nrc.js b/.i18nrc.js index 23796699..7d0db0bc 100644 --- a/.i18nrc.js +++ b/.i18nrc.js @@ -1,4 +1,5 @@ /** + * * @type {import("@lobehub/i18n-cli").Config} */ module.exports = { @@ -9,5 +10,5 @@ module.exports = { entryExtension: '.zh-CN.md', outputLocales: ['en-US'], }, - modelName: 'gpt-3.5-turbo-1106', + modelName: 'gpt-4', }; diff --git a/src/InteractContainer/index.en-US.md b/src/InteractContainer/index.en-US.md deleted file mode 100644 index 8f8c3dd8..00000000 --- a/src/InteractContainer/index.en-US.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: InteractContainer -group: Panel ---- - -# InteractContainer Interactive Container - -Component that gives interactive capabilities to subsets - -## Demo - - - -### Set Container - - - -### Controlled Mode - - - -## Writing Rules - -```ts -export type InteractionType = 'click' | 'hover' | 'rightClick' | 'keyboard'; - -export interface CanvasInteractRule { - /** - * Used for selecting objects - * Supports using class, id selectors - */ - selectors: string[]; - /** - * Supported interaction behaviors - * Default is ["hover", "click"] - */ - actions?: InteractionType[]; -} -``` diff --git a/src/InteractContainer/index.zh-CN.md b/src/InteractContainer/index.zh-CN.md deleted file mode 100644 index f6deb937..00000000 --- a/src/InteractContainer/index.zh-CN.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: InteractContainer 交互容器 -atomId: InteractContainer -group: 面板模块 ---- - -# InteractContainer 交互容器 - -赋予子集可交互能力的组件 - -## Demo 示例 - - - -### 设置容器 - - - -### 受控模式 - - - -## 编写规则 - -```ts -export type InteractionType = 'click' | 'hover' | 'rightClick' | 'keyboard'; - -export interface CanvasInteractRule { - /** - * 用于选择对象 - * 支持使用 类、id 选择器 - */ - selectors: string[]; - /** - * 支持的交互行为 - * 默认为 ["hover", "click"] - */ - actions?: InteractionType[]; -} -``` From 16ae5e5a1b76f73bdc277f7e1b22dde47220a395 Mon Sep 17 00:00:00 2001 From: rdmclin2 Date: Fri, 9 Feb 2024 00:19:30 +0800 Subject: [PATCH 07/25] :sparkles: feat: add Highlight shiki --- .../components/HighLighter/index.tsx | 30 +++++++++++-------- src/Highlight/demos/auto.tsx | 1 + src/Highlight/demos/basic.tsx | 3 +- src/Highlight/demos/lineNumber.tsx | 1 + src/Highlight/demos/shiki.tsx | 16 ++++++++++ src/Highlight/demos/theme.tsx | 5 ++-- src/Highlight/hooks/useHighlight.tsx | 3 +- src/Highlight/hooks/useShiki.tsx | 6 ++-- src/Highlight/index.tsx | 7 ++++- src/Highlight/index.zh-CN.md | 14 ++++----- 10 files changed, 55 insertions(+), 31 deletions(-) create mode 100644 src/Highlight/demos/shiki.tsx diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx index b71feef1..866634fd 100644 --- a/src/Highlight/components/HighLighter/index.tsx +++ b/src/Highlight/components/HighLighter/index.tsx @@ -7,7 +7,7 @@ import { THEME_LIGHT } from '@/Highlight/theme'; import { Loading3QuartersOutlined as Loading } from '@ant-design/icons'; import classNames from 'classnames'; -import { memo } from 'react'; +import { memo, useMemo } from 'react'; import { Center } from 'react-layout-kit'; import { useShiki } from '../../hooks/useShiki'; import { HighlightProps } from '../../index'; @@ -16,25 +16,29 @@ import { useStyles } from './style'; export type ShikiProps = Pick< HighlightProps, - 'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber' + 'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber' | 'shiki' >; const HighLighter: React.FC = memo((props) => { - const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props; + const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls, shiki } = props; const { styles } = useStyles({ outPrefix: prefixCls, lineNumber, theme }); - const { renderShiki, loading } = useShiki(language, theme); + const { renderShiki, loading } = useShiki(language, theme, shiki); - return ( + const HighlightJSBlock = useMemo( + () => ( + + {children} + + ), + [lineNumber, theme, language, prefixCls, children], + ); + + return shiki === false ? ( + HighlightJSBlock + ) : ( <> {loading ? ( - - {children} - + HighlightJSBlock ) : (
( + + {`public class HelloWorld { + public static void main(String[] args) { + System.out.println("Hello World!"); + } + }`} + +); diff --git a/src/Highlight/demos/theme.tsx b/src/Highlight/demos/theme.tsx index 2905bd10..8adef105 100644 --- a/src/Highlight/demos/theme.tsx +++ b/src/Highlight/demos/theme.tsx @@ -1,5 +1,6 @@ /** * title: 切换语言与主题 + * description: 你可以通过这个示例查看不同语言在不同主题下的效果 */ import { Highlight } from '@ant-design/pro-editor'; @@ -43,8 +44,8 @@ export default () => { style={{ width: 120 }} onChange={(value) => setTheme(value)} > - - + + 展示行号: - - + public + + + + + class + + + + HelloWorld + + + + { + + + + - Typescript - -
- - - - -
- 主题选择: + "Hello World!" + + ); + + + + + } + + + + + } + + + + + +
+ +`; + +exports[` > renders theme.tsx correctly 1`] = ` +.emotion-0 { + background-color: #fafafa; + position: relative; + margin: 0; + border-radius: 6px; + -webkit-transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.emotion-0:not(:hover) .ant-editor-highlight-copy { + visibility: hidden; + opacity: 0; +} + +.emotion-0:not(:hover) .ant-editor-highlight-tag { + visibility: hidden; + opacity: 0; +} + +.emotion-0 pre { + margin: 0!important; + padding: 16px 24px!important; + background: none!important; +} + +.emotion-0 code { + background: transparent!important; +} + +.emotion-1 { + position: absolute; + top: 16px; + right: 16px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 16px; + height: 16px; + padding: 0; + overflow: hidden; + border: 0; + outline: none; + cursor: pointer; + opacity: 0.6; + -webkit-transition: opacity 0.2s; + transition: opacity 0.2s; + background-color: #fafafa; +} + +.emotion-1:hover { + opacity: 0.8; +} + +.emotion-2 { + width: 16px; + color: #333333; + height: 16px; + font-size: 16px; +} + +.emotion-2.scoll { + -webkit-animation: copy-button-trans 2s; + animation: copy-button-trans 2s; + -webkit-animation-play-state: running; + animation-play-state: running; +} + +.emotion-4 { + color: #333333!important; + border-radius: 6px; + position: absolute; + z-index: 2; + right: 0; + bottom: 8px; + background-color: hsla(0, 0%, 95.1%, 0.9); + font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace; + color: #666666; + -webkit-transition: opacity 0.1s; + transition: opacity 0.1s; +} + +P .emotion-4:hover { + color: #333333; + background: rgba(0, 0, 0, 0.15); +} + +.emotion-5 { + display: block; + overflow-x: auto; + color: #333333; + background-color: #666666; +} + +.emotion-5 .hljs-comment, +.emotion-5 .hljs-quote { + color: #aaaaaa; +} + +.emotion-5 .hljs-variable, +.emotion-5 .hljs-attribute, +.emotion-5 .hljs-template-variable, +.emotion-5 .hljs-tag, +.emotion-5 .hljs-name, +.emotion-5 .hljs-selector-id, +.emotion-5 .hljs-selector-class, +.emotion-5 .hljs-regexp, +.emotion-5 .hljs-title, +.emotion-5 .hljs-deletion { + color: #ec5e41; +} + +.emotion-5 .hljs-builtin-name, +.emotion-5 .hljs-literal, +.emotion-5 .hljs-type, +.emotion-5 .hljs-params, +.emotion-5 .hljs-meta, +.emotion-5 .hljs-link { + color: #ff802b; +} + +.emotion-5 .hljs-string, +.emotion-5 .hljs-number, +.emotion-5 .hljs-symbol, +.emotion-5 .hljs-bullet, +.emotion-5 .hljs-addition { + color: #55b467; +} + +.emotion-5 .hljs-keyword, +.emotion-5 .hljs-doctag, +.emotion-5 .hljs-built_in, +.emotion-5 .hljs-selector-tag, +.emotion-5 .hljs-section { + color: #369eff; +} + +.emotion-5 .hljs-emphasis { + font-style: italic; +} + +.emotion-5 .hljs-strong { + font-weight: bold; +} + +.emotion-6 { + width: 100%; +} + +.emotion-20 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 8px; +} + +.emotion-21 { + -webkit-backdrop-filter: saturate(180%) blur(10px); + backdrop-filter: saturate(180%) blur(10px); + position: absolute; + top: 0; + right: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + height: 36px; + padding: 0 8px; + font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace; + color: #aaaaaa; + border-radius: 6; +} + +.emotion-22 { + color: #aaaaaa; +} + +
+
+
+
+ 语言选择:
- 白色主题 + Typescript
- 展示行号: + 主题选择:
- 不展示 + 亮色主题
- 展示类型: + 展示行号:
- block + 不展示
- -
+ 展示类型: +
+
+
+
+ + + + + block + +
+ +
+
+
+
+
+