From 0295322564a8a2908063e2fbd04e3ec159038dc7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 19:00:06 +0800 Subject: [PATCH] docs: prevent highlight code initially (#44344) --- .../builtins/Previewer/CodePreviewer.tsx | 48 ++------- .dumi/theme/builtins/Previewer/index.tsx | 38 ++++--- .dumi/theme/common/CodePreview.tsx | 100 ++++++++++++++---- 3 files changed, 109 insertions(+), 77 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 9bbd9b08d2dc..66033bec7dde 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; -import toReactElement from 'jsonml-to-react-element'; -import JsonML from 'jsonml.js/lib/utils'; import LZString from 'lz-string'; -import Prism from 'prismjs'; import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Alert, Badge, Space, Tooltip } from 'antd'; @@ -31,28 +28,6 @@ import { ping } from '../../utils'; const { ErrorBoundary } = Alert; -function toReactComponent(jsonML: any) { - return toReactElement(jsonML, [ - [ - (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), - ); - }, - ], - ]); -} - function compress(string: string): string { return LZString.compressToBase64(string) .replace(/\+/g, '-') // Convert '+' to '-' @@ -130,13 +105,6 @@ const CodePreviewer: React.FC = (props) => { const [showOnlineUrl, setShowOnlineUrl] = useState(false); - const highlightedCodes = { - jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'), - tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'), - }; - - const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : ''; - useEffect(() => { const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses setShowOnlineUrl( @@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(); {codeExpand && (
setCodeType(type)} /> - {highlightedStyle ? ( -
- 
-                
-
-
- ) : null}
)} @@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(); // resulting in some response delays like following issue: // https://github.com/ant-design/ant-design/issues/39995 // So we insert style tag into head tag. - if (!style) return; + if (!style) { + return; + } const styleTag = document.createElement('style'); styleTag.type = 'text/css'; styleTag.innerHTML = style; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index b987d57bc3f0..e36c556112f8 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,8 +1,10 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { Skeleton } from 'antd'; +import { Skeleton, Alert } from 'antd'; import { createStyles } from 'antd-style'; +const { ErrorBoundary } = Alert; + const Previewer = React.lazy(() => import('./Previewer')); const useStyle = createStyles(({ css }) => ({ @@ -16,21 +18,23 @@ const useStyle = createStyles(({ css }) => ({ export default (props: IPreviewerProps) => { const { styles } = useStyle(); return ( - - {' '} - - } - > - - + + + {' '} + + } + > + + + ); }; diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index 93c9c4580710..b69303dae1fe 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,37 +1,101 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; +import Prism from 'prismjs'; +import toReactElement from 'jsonml-to-react-element'; +import JsonML from 'jsonml.js/lib/utils'; import { Tabs } from 'antd'; const LANGS = { tsx: 'TypeScript', jsx: 'JavaScript', + style: 'CSS', }; interface CodePreviewProps { - codes?: Record; - toReactComponent?: (node: any) => React.ReactNode; + sourceCode?: string; + jsxCode?: string; + styleCode?: string; onCodeTypeChange?: (activeKey: string) => void; } -const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { - const langList = Object.keys(codes).sort().reverse(); +function toReactComponent(jsonML: any) { + return toReactElement(jsonML, [ + [ + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: any) => { + // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + const attr = JsonML.getAttributes(node); + return React.createElement( + 'pre', + { + key: index, + className: `language-${attr.lang}`, + }, + React.createElement('code', { + dangerouslySetInnerHTML: { __html: attr.highlighted }, + }), + ); + }, + ], + ]); +} + +const CodePreview: React.FC = ({ + sourceCode = '', + jsxCode = '', + styleCode = '', + onCodeTypeChange, +}) => { + // 避免 Tabs 数量不稳定的闪动问题 + const initialCodes = {}; + if (sourceCode) { + initialCodes.tsx = ''; + } + if (jsxCode) { + initialCodes.jsx = ''; + } + if (styleCode) { + initialCodes.style = ''; + } + const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes); + + useEffect(() => { + const codes = { + tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'), + jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'), + style: Prism.highlight(styleCode, Prism.languages.css, 'css'), + }; + // 去掉空的代码类型 + Object.keys(codes).forEach((key) => { + if (!codes[key]) { + delete codes[key]; + } + }); + setHighlightedCodes(codes); + }, [jsxCode, sourceCode, styleCode]); + + const langList = Object.keys(highlightedCodes); + const items = useMemo( + () => + langList.map((lang) => ({ + label: LANGS[lang], + key: lang, + children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]), + })), + [JSON.stringify(highlightedCodes)], + ); + + if (!langList.length) { + return null; + } + if (langList.length === 1) { return toReactComponent([ 'pre', - { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' }, + { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' }, ]); } - return ( - ({ - label: LANGS[lang], - key: lang, - children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]), - }))} - /> - ); + + return ; }; export default CodePreview;