From 2d16d113f1570e574e8b3165afe9cb681b5fc25b Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Tue, 21 Nov 2023 17:27:01 +0800 Subject: [PATCH 1/5] :sparkles: feat: add Markdown new Components --- package.json | 4 + src/Markdown/CodeBlock.tsx | 74 ++++++++++++++++ src/Markdown/demos/data.ts | 88 +++++++++++++++++++ src/Markdown/demos/index.tsx | 7 ++ src/Markdown/index.md | 14 +++ src/Markdown/index.tsx | 66 ++++++++++++++ src/Markdown/style.ts | 166 +++++++++++++++++++++++++++++++++++ src/index.ts | 1 + 8 files changed, 420 insertions(+) create mode 100644 src/Markdown/CodeBlock.tsx create mode 100644 src/Markdown/demos/data.ts create mode 100644 src/Markdown/demos/index.tsx create mode 100644 src/Markdown/index.md create mode 100644 src/Markdown/index.tsx create mode 100644 src/Markdown/style.ts diff --git a/package.json b/package.json index 5dae21d0..b8db6b84 100644 --- a/package.json +++ b/package.json @@ -103,8 +103,12 @@ "react-copy-to-clipboard": "^5.1.0", "react-hotkeys-hook": "^4.4.1", "react-layout-kit": "^1.7.1", + "react-markdown": "^8.0.1", "react-rnd": "^10.4.1", "reactflow": "^11.8.3", + "rehype-katex": "^6.0.0", + "remark-gfm": "^3.0.0", + "remark-math": "^5.0.0", "rxjs": "^7.8.1", "shikiji": "^0.6.12", "type-fest": "^3.13.1", diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx new file mode 100644 index 00000000..95c03d40 --- /dev/null +++ b/src/Markdown/CodeBlock.tsx @@ -0,0 +1,74 @@ +import { createStyles } from 'antd-style'; +import { memo } from 'react'; + +import { Highlight, Snippet } from '@ant-design/pro-editor'; + +const useStyles = createStyles(({ css }) => ({ + 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; + } + `, + snippet: css` + display: flex; + `, +})); + +const countLines = (str: string): number => { + const regex = /\n/g; + const matches = str.match(regex); + return matches ? matches.length : 1; +}; + +const Code = memo(({ fullFeatured, ...properties }: any) => { + const { styles, cx } = useStyles(); + + if (!properties.children[0]) return; + + const { children, className } = properties.children[0].props; + + if (!children) return; + + const content = Array.isArray(children) ? (children[0] as string) : children; + const lang = className?.replace('language-', '') || 'txt'; + if (countLines(content) === 1 && content.length <= 60) { + return ( + + {content} + + ); + } + + return ( + + {content} + + ); +}); + +export const CodeLite = memo((properties: any) => { + return ; +}); + +export const CodeFullFeatured = memo((properties: any) => { + return ; +}); diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts new file mode 100644 index 00000000..b417e0ad --- /dev/null +++ b/src/Markdown/demos/data.ts @@ -0,0 +1,88 @@ +export const content = `# This is an H1 +## This is an H2 +### This is an H3 +#### This is an H4 +##### This is an H5 + +The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text. + +--- + +> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, +> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. +> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. +> +> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse +> id sem consectetuer libero luctus adipiscing. + +--- + +an example | *an example* | **an example** + +--- + +1. Bird +1. McHale +1. Parish + 1. Bird + 1. McHale + 1. Parish + +--- + +- Red +- Green +- Blue + - Red + - Green + - Blue + +--- + +This is [an example](http://example.com/ "Title") inline link. + + + + +| title | title | title | +| --- | --- | --- | +| content | content | content | + + +\`\`\`bash +$ pnpm install +\`\`\` + + +\`\`\`javascript +import { renderHook } from '@testing-library/react-hooks'; +import { act } from 'react-dom/test-utils'; +import { useDropNodeOnCanvas } from './useDropNodeOnCanvas'; +\`\`\` + +--- + +以下是一段Markdown格式的LaTeX数学公式： + +我是一个行内公式：$E=mc^2$ + +我是一个独立公式： +$$ +\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n +$$ + +我是一个带有分式的公式： +$$ +\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k} +$$ + +我是一个带有上下标的公式： +$$ +x^{2} + y^{2} = r^{2} +$$ + +我是一个带有积分符号的公式： +$$ +\\int_{a}^{b} f(x) \\, dx +$$ +`; diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx new file mode 100644 index 00000000..a14a0b0f --- /dev/null +++ b/src/Markdown/demos/index.tsx @@ -0,0 +1,7 @@ +import { Markdown } from '@ant-design/pro-editor'; + +import { content } from './data'; + +export default () => { + return {content}; +}; diff --git a/src/Markdown/index.md b/src/Markdown/index.md new file mode 100644 index 00000000..56511a70 --- /dev/null +++ b/src/Markdown/index.md @@ -0,0 +1,14 @@ +--- +nav: 组件 +group: Content +title: Markdown +description: Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications. +--- + +## Default + + + +## APIs + + diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx new file mode 100644 index 00000000..a10c9d67 --- /dev/null +++ b/src/Markdown/index.tsx @@ -0,0 +1,66 @@ +import { Collapse, Divider, Image, Typography } from 'antd'; +import { CSSProperties, memo } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; +import ReactMarkdown from 'react-markdown'; +import rehypeKatex from 'rehype-katex'; +import remarkGfm from 'remark-gfm'; +import remarkMath from 'remark-math'; + +import { CodeFullFeatured, CodeLite } from './CodeBlock'; +import { useStyles } from './style'; + +export interface MarkdownProps { + /** + * @description The markdown content to be rendered + */ + children: string; + /** + * @description The class name for the Markdown component + */ + className?: string; + fullFeaturedCodeBlock?: boolean; + onDoubleClick?: () => void; + style?: CSSProperties; +} + +const Markdown = memo( + ({ children, className, style, fullFeaturedCodeBlock, onDoubleClick, ...props }) => { + const { styles } = useStyles(); + const components: any = { + a: Typography.Link, + details: Collapse, + hr: () => , + img: Image, + pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite, + }; + + return ( + + + {children} + + } + > + + {children} + + + + ); + }, +); + +export default Markdown; diff --git a/src/Markdown/style.ts b/src/Markdown/style.ts new file mode 100644 index 00000000..bcabe76e --- /dev/null +++ b/src/Markdown/style.ts @@ -0,0 +1,166 @@ +import { createStyles } from 'antd-style'; + +export const useStyles = createStyles(({ css, token }) => { + return { + markdown: css` + color: ${token.colorText}; + + h1, + h2, + h3, + h4, + h5 { + font-weight: 600; + } + + p { + margin-block-start: 0; + margin-block-end: 0; + + font-size: 14px; + line-height: 1.8; + color: ${token.colorText}; + word-break: break-all; + word-wrap: break-word; + + + * { + margin-block-end: 0.5em; + } + } + + > *:last-child { + margin-bottom: 0 !important; + } + + blockquote { + margin: 16px 0; + padding: 0 12px; + + p { + font-style: italic; + color: ${token.colorTextDescription}; + } + } + + p:not(:last-child) { + margin-bottom: 1em; + } + + a { + color: ${token.colorLink}; + + &:hover { + color: ${token.colorLinkHover}; + } + + &:active { + color: ${token.colorLinkActive}; + } + } + + img { + max-width: 100%; + } + + pre, + [data-code-type='highlighter'] { + border: none; + border-radius: ${token.borderRadius}px; + + > code { + padding: 0 !important; + border: none !important; + } + } + + > :not([data-code-type='highlighter']) code { + padding: 2px 6px; + + font-size: ${token.fontSizeSM}px; + border-radius: ${token.borderRadiusSM}px; + } + + table { + border-spacing: 0; + + width: 100%; + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0; + margin-inline-end: 0; + padding: 8px; + + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadius}px; + + code { + display: inline-flex; + } + } + + th, + td { + padding-block-start: 10px; + padding-block-end: 10px; + padding-inline-start: 16px; + padding-inline-end: 16px; + } + + thead { + tr { + th { + background: ${token.colorFillTertiary}; + + &:first-child { + border-top-left-radius: ${token.borderRadius}px; + border-bottom-left-radius: ${token.borderRadius}px; + } + + &:last-child { + border-top-right-radius: ${token.borderRadius}px; + border-bottom-right-radius: ${token.borderRadius}px; + } + } + } + } + + > ol > li::marker { + color: ${token.colorPrimary} !important; + } + + > ul > li { + line-height: 1.8; + list-style-type: disc; + + &::marker { + color: ${token.colorPrimary} !important; + } + } + + ol, + ul { + > li::marker { + color: ${token.colorTextDescription}; + } + } + + details { + margin-bottom: 1em; + padding: 12px 16px; + + background: ${token.colorFillTertiary}; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusLG}px; + + transition: all 400ms ${token.motionEaseOut}; + } + + details[open] { + summary { + padding-bottom: 12px; + border-bottom: 1px solid ${token.colorBorder}; + } + } + `, + }; +}); diff --git a/src/index.ts b/src/index.ts index 517b94c1..91f56c73 100644 --- a/src/index.ts +++ b/src/index.ts @@ -26,6 +26,7 @@ export { default as InteractContainer } from './InteractContainer'; export type { CanvasInteractRule, InteractStatus, InteractStatusNode } from './InteractContainer'; export { default as LevaPanel } from './LevaPanel'; export type { LevaPanelProps } from './LevaPanel'; +export { default as Markdown, type MarkdownProps } from './Markdown'; export * from './ProBuilder'; export * from './Snippet'; export * from './SortableList'; From 7889fa5c18dfd4161d9bbf101b60d13f7819743a Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Tue, 21 Nov 2023 18:22:33 +0800 Subject: [PATCH 2/5] :sparkles: feat: add more doc & change as a theme token --- src/Highlight/index.tsx | 30 ++++++++++++++++++++++++++---- src/Highlight/style.ts | 8 -------- src/Highlight/wrapper.tsx | 9 ++++----- src/Markdown/index.md | 10 ++++++++-- src/Markdown/index.tsx | 2 +- 5 files changed, 39 insertions(+), 20 deletions(-) diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx index 08675963..11e46026 100644 --- a/src/Highlight/index.tsx +++ b/src/Highlight/index.tsx @@ -1,11 +1,33 @@ +import { ConfigProvider } from '../ConfigProvider'; import { HighlightBase, HighlightProps } from './defalut'; +import { useStyles } from './style'; import FullFeatureWrapper from './wrapper'; const Highlight = (props: HighlightProps) => { - if (props?.containerWrapper) { - return ; - } - return ; + const { prefixCls, type, theme, containerWrapper } = props; + const { theme: token } = useStyles({ + prefixCls, + type, + theme, + }); + + return ( + + {containerWrapper ? : } + + ); }; export * from './defalut'; diff --git a/src/Highlight/style.ts b/src/Highlight/style.ts index 29f4e3ea..f4849cd1 100644 --- a/src/Highlight/style.ts +++ b/src/Highlight/style.ts @@ -102,14 +102,6 @@ export const useStyles = createStyles( transition: opacity 0.1s; `, ), - expandIcon: css` - color: ${colorText}; - &:hover { - .${STUDIO_UI_PREFIX}-btn-icon { - color: ${colorText} !important; - } - } - `, select: css` min-width: 100px; .${STUDIO_UI_PREFIX}-btn { diff --git a/src/Highlight/wrapper.tsx b/src/Highlight/wrapper.tsx index 40b71aeb..38293b71 100644 --- a/src/Highlight/wrapper.tsx +++ b/src/Highlight/wrapper.tsx @@ -1,10 +1,10 @@ +import CopyButton from '@/components/CopyButton'; import { DownOutlined, RightOutlined } from '@ant-design/icons'; import { ActionIcon, Button, 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 { getPrefixCls } from '..'; -import CopyButton from './components/CopyButton'; import { HighlightBase, HighlightProps } from './defalut'; import { languageMap } from './hooks/useHighlight'; import { useStyles } from './style'; @@ -46,10 +46,9 @@ export const FullFeatureWrapper = memo }); return ( -
+
: } onClick={() => setExpand(!expand)} size={24} @@ -74,12 +73,12 @@ export const FullFeatureWrapper = memo suffixIcon={false} value={lang.toLowerCase()} /> - {copyable && } + {copyable && } diff --git a/src/Markdown/index.md b/src/Markdown/index.md index 56511a70..c328d27e 100644 --- a/src/Markdown/index.md +++ b/src/Markdown/index.md @@ -2,7 +2,7 @@ nav: 组件 group: Content title: Markdown -description: Markdown is a React component used to render markdown text. It supports various markdown syntax such as headings, lists, links, images, code blocks and more. It is commonly used in documentation, blogs, and other text-heavy applications. +description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。 --- ## Default @@ -11,4 +11,10 @@ description: Markdown is a React component used to render markdown text. It supp ## APIs - +| 属性名 | 类型 | 描述 | +| --------------------- | ------------- | -------------------------- | +| children | string | 要渲染的 Markdown 内容。 | +| className | string | Markdown 组件的类名。 | +| fullFeaturedCodeBlock | boolean | 是否启用完整功能的代码块。 | +| onDoubleClick | () => void | 双击事件处理函数。 | +| style | CSSProperties | Markdown 组件的样式。 | diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx index a10c9d67..db4c1aa7 100644 --- a/src/Markdown/index.tsx +++ b/src/Markdown/index.tsx @@ -24,7 +24,7 @@ export interface MarkdownProps { } const Markdown = memo( - ({ children, className, style, fullFeaturedCodeBlock, onDoubleClick, ...props }) => { + ({ children, className, style, fullFeaturedCodeBlock = true, onDoubleClick, ...props }) => { const { styles } = useStyles(); const components: any = { a: Typography.Link, From 71ffd2b11e9b5eb02a8e2fa039ee0eea892912b8 Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Tue, 21 Nov 2023 18:28:14 +0800 Subject: [PATCH 3/5] :camera_flash: feat: udpate snapshot --- tests/__snapshots__/demo.test.tsx.snap | 3175 +++++++++++++++++++++--- 1 file changed, 2874 insertions(+), 301 deletions(-) diff --git a/tests/__snapshots__/demo.test.tsx.snap b/tests/__snapshots__/demo.test.tsx.snap index 665ff53a..c9563bad 100644 --- a/tests/__snapshots__/demo.test.tsx.snap +++ b/tests/__snapshots__/demo.test.tsx.snap @@ -16592,7 +16592,7 @@ exports[` > renders basic.tsx correctly 1`] = `
> renders wrapper.tsx correctly 1`] = ` } .emotion-3 { - color: #dddddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -18346,10 +18345,6 @@ exports[` > renders wrapper.tsx correctly 1`] = ` height: 24px!important; } -.emotion-3:hover .studio-btn-icon { - color: #dddddd!important; -} - .emotion-3:hover { color: rgba(0, 0, 0, 0.88)!important; } @@ -18449,48 +18444,32 @@ exports[` > renders wrapper.tsx correctly 1`] = ` } .emotion-6 { - 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: #2b303b; + -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; + -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); } .emotion-6:hover { - opacity: 0.8; -} - -.emotion-7 { - width: 16px; - color: #dddddd; - height: 16px; - font-size: 16px; + color: rgba(0, 0, 0, 0.88)!important; } -.emotion-7.scoll { - -webkit-animation: copy-button-trans 2s; - animation: copy-button-trans 2s; - -webkit-animation-play-state: running; - animation-play-state: running; +.emotion-6:active { + scale: 0.8; + color: rgba(0, 0, 0, 0.88); } -.emotion-9 { +.emotion-7 { background-color: #2b303b; border: 1px solid #2b303b; position: relative; @@ -18501,89 +18480,89 @@ exports[` > renders wrapper.tsx correctly 1`] = ` transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); } -.emotion-9:not(:hover) .studio-highlight-copy { +.emotion-7:not(:hover) .studio-highlight-copy { visibility: hidden; opacity: 0; } -.emotion-9:not(:hover) .studio-highlight-tag { +.emotion-7:not(:hover) .studio-highlight-tag { visibility: hidden; opacity: 0; } -.emotion-9 pre { +.emotion-7 pre { margin: 0!important; padding: 16px 24px!important; background: none!important; } -.emotion-9 code { +.emotion-7 code { background: transparent!important; } -.emotion-10 { +.emotion-8 { display: block; overflow-x: auto; color: #dddddd; background-color: #777777; } -.emotion-10 .hljs-comment, -.emotion-10 .hljs-quote { +.emotion-8 .hljs-comment, +.emotion-8 .hljs-quote { color: #555555; } -.emotion-10 .hljs-variable, -.emotion-10 .hljs-attribute, -.emotion-10 .hljs-template-variable, -.emotion-10 .hljs-tag, -.emotion-10 .hljs-name, -.emotion-10 .hljs-selector-id, -.emotion-10 .hljs-selector-class, -.emotion-10 .hljs-regexp, -.emotion-10 .hljs-title, -.emotion-10 .hljs-deletion { +.emotion-8 .hljs-variable, +.emotion-8 .hljs-attribute, +.emotion-8 .hljs-template-variable, +.emotion-8 .hljs-tag, +.emotion-8 .hljs-name, +.emotion-8 .hljs-selector-id, +.emotion-8 .hljs-selector-class, +.emotion-8 .hljs-regexp, +.emotion-8 .hljs-title, +.emotion-8 .hljs-deletion { color: #f04f88; } -.emotion-10 .hljs-builtin-name, -.emotion-10 .hljs-literal, -.emotion-10 .hljs-type, -.emotion-10 .hljs-params, -.emotion-10 .hljs-meta, -.emotion-10 .hljs-link { +.emotion-8 .hljs-builtin-name, +.emotion-8 .hljs-literal, +.emotion-8 .hljs-type, +.emotion-8 .hljs-params, +.emotion-8 .hljs-meta, +.emotion-8 .hljs-link { color: #ffcb47; } -.emotion-10 .hljs-string, -.emotion-10 .hljs-number, -.emotion-10 .hljs-symbol, -.emotion-10 .hljs-bullet, -.emotion-10 .hljs-addition { +.emotion-8 .hljs-string, +.emotion-8 .hljs-number, +.emotion-8 .hljs-symbol, +.emotion-8 .hljs-bullet, +.emotion-8 .hljs-addition { color: #c4f042; } -.emotion-10 .hljs-keyword, -.emotion-10 .hljs-doctag, -.emotion-10 .hljs-built_in, -.emotion-10 .hljs-selector-tag, -.emotion-10 .hljs-section { +.emotion-8 .hljs-keyword, +.emotion-8 .hljs-doctag, +.emotion-8 .hljs-built_in, +.emotion-8 .hljs-selector-tag, +.emotion-8 .hljs-section { color: #8ae8ff; } -.emotion-10 .hljs-emphasis { +.emotion-8 .hljs-emphasis { font-style: italic; } -.emotion-10 .hljs-strong { +.emotion-8 .hljs-strong { font-weight: bold; } -.emotion-11 { +.emotion-9 { width: 100%; } -.emotion-16 { +.emotion-14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -18602,7 +18581,7 @@ exports[` > renders wrapper.tsx correctly 1`] = ` gap: 8px; } -.emotion-17 { +.emotion-15 { -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); position: absolute; @@ -18627,104 +18606,71 @@ exports[` > renders wrapper.tsx correctly 1`] = ` border-radius: 6; } -.emotion-18 { +.emotion-16 { color: #555555; } -.emotion-19 { +.emotion-17 { background-color: hsla(0, 0%, 98%, 0.9); border-radius: 6px; } -.emotion-19 .studio-highlight-copy { +.emotion-17 .studio-highlight-copy { background-color: transparent; position: inherit; width: 30px; padding-left: 6px; } -.emotion-22 { - color: #333333; - 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; - -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); - transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); - width: 24px!important; - height: 24px!important; -} - -.emotion-22:hover .studio-btn-icon { - color: #333333!important; -} - -.emotion-22:hover { - color: rgba(0, 0, 0, 0.88)!important; -} - -.emotion-22:active { - scale: 0.8; - color: rgba(0, 0, 0, 0.88); -} - -.emotion-23 { +.emotion-21 { min-width: 100px; } -.emotion-23.studio-select-multiple:not(.emotion-23.studio-select-customize-input) .emotion-23.studio-select.studio-select-selector:hover { +.emotion-21.studio-select-multiple:not(.emotion-21.studio-select-customize-input) .emotion-21.studio-select.studio-select-selector:hover { color: rgba(0, 0, 0, 0.88); background-color: rgba(0, 0, 0, 0.04); border-color: transparent; } -.emotion-23.studio-select-multiple:not(.emotion-23.studio-select-customize-input) .emotion-23.studio-select.studio-select-selector:focus { +.emotion-21.studio-select-multiple:not(.emotion-21.studio-select-customize-input) .emotion-21.studio-select.studio-select-selector:focus { color: rgba(0, 0, 0, 0.88)!important; background-color: rgba(0, 0, 0, 0.02)!important; border-color: #1677ff!important; box-shadow: none; } -.emotion-23.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { +.emotion-21.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { border-color: transparent; } -.emotion-23.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover { +.emotion-21.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover { color: rgba(0, 0, 0, 0.88); background-color: rgba(0, 0, 0, 0.04); border-color: transparent; } -.emotion-23.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus { +.emotion-21.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus { color: rgba(0, 0, 0, 0.88)!important; background-color: rgba(0, 0, 0, 0.02)!important; border-color: #1677ff!important; box-shadow: none; } -.emotion-23.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { +.emotion-21.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { color: rgba(0, 0, 0, 0.88)!important; background-color: rgba(0, 0, 0, 0.02)!important; border-color: #1677ff!important; box-shadow: none; } -.emotion-23.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector { +.emotion-21.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector { color: rgba(0, 0, 0, 0.88)!important; background-color: rgba(0, 0, 0, 0.02)!important; border-color: #1677ff!important; box-shadow: none; } -.emotion-23 .studio-select-arrow { +.emotion-21 .studio-select-arrow { top: 13px; right: 8px; width: 10px; @@ -18732,66 +18678,24 @@ exports[` > renders wrapper.tsx correctly 1`] = ` font-size: 10px; } -.emotion-23 .studio-btn { +.emotion-21 .studio-btn { color: #333333; } -.emotion-23 .studio-btn:hover { +.emotion-21 .studio-btn:hover { color: #666666!important; } -.emotion-23 .studio-select-selector { +.emotion-21 .studio-select-selector { -webkit-padding-end: 4px!important; padding-inline-end: 4px!important; } -.emotion-23 .studio-select-selection-overflow-item-suffix .studio-select-selection-search { +.emotion-21 .studio-select-selection-overflow-item-suffix .studio-select-selection-search { display: none; } -.emotion-25 { - 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-25:hover { - opacity: 0.8; -} - -.emotion-26 { - width: 16px; - color: #333333; - height: 16px; - font-size: 16px; -} - -.emotion-26.scoll { - -webkit-animation: copy-button-trans 2s; - animation: copy-button-trans 2s; - -webkit-animation-play-state: running; - animation-play-state: running; -} - -.emotion-28 { +.emotion-24 { background-color: #fafafa; border: 1px solid #fafafa; position: relative; @@ -18802,85 +18706,85 @@ exports[` > renders wrapper.tsx correctly 1`] = ` transition: background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); } -.emotion-28:not(:hover) .studio-highlight-copy { +.emotion-24:not(:hover) .studio-highlight-copy { visibility: hidden; opacity: 0; } -.emotion-28:not(:hover) .studio-highlight-tag { +.emotion-24:not(:hover) .studio-highlight-tag { visibility: hidden; opacity: 0; } -.emotion-28 pre { +.emotion-24 pre { margin: 0!important; padding: 16px 24px!important; background: none!important; } -.emotion-28 code { +.emotion-24 code { background: transparent!important; } -.emotion-29 { +.emotion-25 { display: block; overflow-x: auto; color: #333333; background-color: #666666; } -.emotion-29 .hljs-comment, -.emotion-29 .hljs-quote { +.emotion-25 .hljs-comment, +.emotion-25 .hljs-quote { color: #aaaaaa; } -.emotion-29 .hljs-variable, -.emotion-29 .hljs-attribute, -.emotion-29 .hljs-template-variable, -.emotion-29 .hljs-tag, -.emotion-29 .hljs-name, -.emotion-29 .hljs-selector-id, -.emotion-29 .hljs-selector-class, -.emotion-29 .hljs-regexp, -.emotion-29 .hljs-title, -.emotion-29 .hljs-deletion { +.emotion-25 .hljs-variable, +.emotion-25 .hljs-attribute, +.emotion-25 .hljs-template-variable, +.emotion-25 .hljs-tag, +.emotion-25 .hljs-name, +.emotion-25 .hljs-selector-id, +.emotion-25 .hljs-selector-class, +.emotion-25 .hljs-regexp, +.emotion-25 .hljs-title, +.emotion-25 .hljs-deletion { color: #ec5e41; } -.emotion-29 .hljs-builtin-name, -.emotion-29 .hljs-literal, -.emotion-29 .hljs-type, -.emotion-29 .hljs-params, -.emotion-29 .hljs-meta, -.emotion-29 .hljs-link { +.emotion-25 .hljs-builtin-name, +.emotion-25 .hljs-literal, +.emotion-25 .hljs-type, +.emotion-25 .hljs-params, +.emotion-25 .hljs-meta, +.emotion-25 .hljs-link { color: #ff802b; } -.emotion-29 .hljs-string, -.emotion-29 .hljs-number, -.emotion-29 .hljs-symbol, -.emotion-29 .hljs-bullet, -.emotion-29 .hljs-addition { +.emotion-25 .hljs-string, +.emotion-25 .hljs-number, +.emotion-25 .hljs-symbol, +.emotion-25 .hljs-bullet, +.emotion-25 .hljs-addition { color: #55b467; } -.emotion-29 .hljs-keyword, -.emotion-29 .hljs-doctag, -.emotion-29 .hljs-built_in, -.emotion-29 .hljs-selector-tag, -.emotion-29 .hljs-section { +.emotion-25 .hljs-keyword, +.emotion-25 .hljs-doctag, +.emotion-25 .hljs-built_in, +.emotion-25 .hljs-selector-tag, +.emotion-25 .hljs-section { color: #369eff; } -.emotion-29 .hljs-emphasis { +.emotion-25 .hljs-emphasis { font-style: italic; } -.emotion-29 .hljs-strong { +.emotion-25 .hljs-strong { font-weight: bold; } -.emotion-36 { +.emotion-32 { -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); position: absolute; @@ -18905,7 +18809,7 @@ exports[` > renders wrapper.tsx correctly 1`] = ` border-radius: 6; } -.emotion-37 { +.emotion-33 { color: #aaaaaa; } @@ -18918,8 +18822,6 @@ exports[` > renders wrapper.tsx correctly 1`] = ` >
> renders wrapper.tsx correctly 1`] = ` /> 
              > renders wrapper.tsx correctly 1`] = `
               
@@ -19178,11 +19065,11 @@ exports[` > renders wrapper.tsx correctly 1`] = `
             

                 

                   
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                         
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                           System.out.println(
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                         }
                   
                 

                 

                   
                       }
> renders wrapper.tsx correctly 1`] = ` class="studio-space-item" >
> renders wrapper.tsx correctly 1`] = ` /> 
              > renders wrapper.tsx correctly 1`] = `
               
@@ -19469,11 +19339,11 @@ exports[` > renders wrapper.tsx correctly 1`] = `
             

                 

                   
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                         
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                           System.out.println(
                      > renders wrapper.tsx correctly 1`] = `
                 

                 

                   
                         }
                   
                 

                 

                   
                       }
> renders button.tsx correctly 1`] = `
`; +exports[` > renders index.tsx correctly 1`] = ` +.emotion-0 { + color: rgba(0, 0, 0, 0.88); +} + +.emotion-0 h1, +.emotion-0 h2, +.emotion-0 h3, +.emotion-0 h4, +.emotion-0 h5 { + font-weight: 600; +} + +.emotion-0 p { + margin-block-start: 0; + margin-block-end: 0; + font-size: 14px; + line-height: 1.8; + color: rgba(0, 0, 0, 0.88); + word-break: break-all; + word-wrap: break-word; +} + +.emotion-0 p+* { + margin-block-end: 0.5em; +} + +.emotion-0>*:last-child { + margin-bottom: 0!important; +} + +.emotion-0 blockquote { + margin: 16px 0; + padding: 0 12px; +} + +.emotion-0 blockquote p { + font-style: italic; + color: rgba(0, 0, 0, 0.45); +} + +.emotion-0 p:not(:last-child) { + margin-bottom: 1em; +} + +.emotion-0 a { + color: #1677ff; +} + +.emotion-0 a:hover { + color: #69b1ff; +} + +.emotion-0 a:active { + color: #0958d9; +} + +.emotion-0 img { + max-width: 100%; +} + +.emotion-0 pre, +.emotion-0 [data-code-type='highlighter'] { + border: none; + border-radius: 6px; +} + +.emotion-0 pre>code, +.emotion-0 [data-code-type='highlighter']>code { + padding: 0!important; + border: none!important; +} + +.emotion-0>:not([data-code-type='highlighter']) code { + padding: 2px 6px; + font-size: 10px; + border-radius: 4px; +} + +.emotion-0 table { + border-spacing: 0; + width: 100%; + margin-block-start: 1em; + margin-block-end: 1em; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0; + margin-inline-end: 0; + padding: 8px; + border: 1px solid #f0f0f0; + border-radius: 6px; +} + +.emotion-0 table code { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; +} + +.emotion-0 th, +.emotion-0 td { + padding-block-start: 10px; + padding-block-end: 10px; + -webkit-padding-start: 16px; + padding-inline-start: 16px; + -webkit-padding-end: 16px; + padding-inline-end: 16px; +} + +.emotion-0 thead tr th { + background: rgba(0, 0, 0, 0.04); +} + +.emotion-0 thead tr th:first-child { + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; +} + +.emotion-0 thead tr th:last-child { + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; +} + +.emotion-0>ol>li::marker { + color: #1677ff!important; +} + +.emotion-0>ul>li { + line-height: 1.8; + list-style-type: disc; +} + +.emotion-0>ul>li::marker { + color: #1677ff!important; +} + +.emotion-0 ol>li::marker, +.emotion-0 ul>li::marker { + color: rgba(0, 0, 0, 0.45); +} + +.emotion-0 details { + margin-bottom: 1em; + padding: 12px 16px; + background: rgba(0, 0, 0, 0.04); + border: 1px solid #f0f0f0; + border-radius: 8px; + -webkit-transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.emotion-0 details[open] summary { + padding-bottom: 12px; + border-bottom: 1px solid #d9d9d9; +} + +.emotion-1 { + background-color: rgba(0, 0, 0, 0.04); + border: 1px solid transparent; + position: relative; + overflow: hidden; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + gap: 8px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + max-width: 100%; + height: 38px; + padding: 0 8px 0 12px; + 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); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.emotion-1:hover { + background-color: rgba(0, 0, 0, 0.04); +} + +.emotion-1 .studio-snippet-shiki { + position: relative; + overflow: hidden; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-1 pre { + overflow-x: auto!important; + overflow-y: hidden!important; + 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; + width: 100%; + height: 36px!important; + margin: 0!important; + line-height: 1; + background: none!important; +} + +.emotion-1 code[class*='language-'] { + background: none!important; +} + +.emotion-1:not(:last-child) { + margin-block-start: 1em; + margin-block-end: 1em; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0; + margin-inline-end: 0; +} + +.emotion-2 { + display: block; + overflow-x: auto; + color: #333333; + background-color: #666666; +} + +.emotion-2 .hljs-comment, +.emotion-2 .hljs-quote { + color: #aaaaaa; +} + +.emotion-2 .hljs-variable, +.emotion-2 .hljs-attribute, +.emotion-2 .hljs-template-variable, +.emotion-2 .hljs-tag, +.emotion-2 .hljs-name, +.emotion-2 .hljs-selector-id, +.emotion-2 .hljs-selector-class, +.emotion-2 .hljs-regexp, +.emotion-2 .hljs-title, +.emotion-2 .hljs-deletion { + color: #ec5e41; +} + +.emotion-2 .hljs-builtin-name, +.emotion-2 .hljs-literal, +.emotion-2 .hljs-type, +.emotion-2 .hljs-params, +.emotion-2 .hljs-meta, +.emotion-2 .hljs-link { + color: #ff802b; +} + +.emotion-2 .hljs-string, +.emotion-2 .hljs-number, +.emotion-2 .hljs-symbol, +.emotion-2 .hljs-bullet, +.emotion-2 .hljs-addition { + color: #55b467; +} + +.emotion-2 .hljs-keyword, +.emotion-2 .hljs-doctag, +.emotion-2 .hljs-built_in, +.emotion-2 .hljs-selector-tag, +.emotion-2 .hljs-section { + color: #369eff; +} + +.emotion-2 .hljs-emphasis { + font-style: italic; +} + +.emotion-2 .hljs-strong { + font-weight: bold; +} + +.emotion-3 { + width: 100%; +} + +.emotion-5 { + 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-6 { + -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-7 { + color: #aaaaaa; +} + +.emotion-8 { + 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; + -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); +} + +.emotion-8:hover { + color: rgba(0, 0, 0, 0.88)!important; +} + +.emotion-8:active { + scale: 0.8; + color: rgba(0, 0, 0, 0.88); +} + +.emotion-9 { + background-color: hsla(0, 0%, 98%, 0.9); + border-radius: 6px; +} + +.emotion-9 .studio-highlight-copy { + background-color: transparent; + position: inherit; + width: 30px; + padding-left: 6px; +} + +.emotion-10:not(:last-child) { + margin-block-start: 1em; + margin-block-end: 1em; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0; + margin-inline-end: 0; +} + +.emotion-10 pre { + padding: 12px!important; +} + +.emotion-11 { + 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: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.emotion-12 { + padding: 4px 8px; + background: rgba(0, 0, 0, 0.02); + width: auto!important; +} + +.emotion-13 { + 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; + -webkit-transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + transition: color 600ms cubic-bezier(0.215, 0.61, 0.355, 1),scale 400ms cubic-bezier(0.215, 0.61, 0.355, 1),background-color 100ms cubic-bezier(0.215, 0.61, 0.355, 1); + width: 24px!important; + height: 24px!important; +} + +.emotion-13:hover { + color: rgba(0, 0, 0, 0.88)!important; +} + +.emotion-13:active { + scale: 0.8; + color: rgba(0, 0, 0, 0.88); +} + +.emotion-14 { + min-width: 100px; +} + +.emotion-14.studio-select-multiple:not(.emotion-14.studio-select-customize-input) .emotion-14.studio-select.studio-select-selector:hover { + color: rgba(0, 0, 0, 0.88); + background-color: rgba(0, 0, 0, 0.04); + border-color: transparent; +} + +.emotion-14.studio-select-multiple:not(.emotion-14.studio-select-customize-input) .emotion-14.studio-select.studio-select-selector:focus { + color: rgba(0, 0, 0, 0.88)!important; + background-color: rgba(0, 0, 0, 0.02)!important; + border-color: #1677ff!important; + box-shadow: none; +} + +.emotion-14.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { + border-color: transparent; +} + +.emotion-14.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:hover { + color: rgba(0, 0, 0, 0.88); + background-color: rgba(0, 0, 0, 0.04); + border-color: transparent; +} + +.emotion-14.studio-select:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector:focus { + color: rgba(0, 0, 0, 0.88)!important; + background-color: rgba(0, 0, 0, 0.02)!important; + border-color: #1677ff!important; + box-shadow: none; +} + +.emotion-14.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input):hover .studio-select-selector { + color: rgba(0, 0, 0, 0.88)!important; + background-color: rgba(0, 0, 0, 0.02)!important; + border-color: #1677ff!important; + box-shadow: none; +} + +.emotion-14.studio-select-focused:not(.studio-select-disabled):not(.studio-select-customize-input) .studio-select-selector { + color: rgba(0, 0, 0, 0.88)!important; + background-color: rgba(0, 0, 0, 0.02)!important; + border-color: #1677ff!important; + box-shadow: none; +} + +.emotion-14 .studio-select-arrow { + top: 13px; + right: 8px; + width: 10px; + height: 10px; + font-size: 10px; +} + +.emotion-14 .studio-btn { + color: #333333; +} + +.emotion-14 .studio-btn:hover { + color: #666666!important; +} + +.emotion-14 .studio-select-selector { + -webkit-padding-end: 4px!important; + padding-inline-end: 4px!important; +} + +.emotion-14 .studio-select-selection-overflow-item-suffix .studio-select-selection-search { + display: none; +} + +.emotion-15 { + min-width: 100px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; +} + +.emotion-15 span { + font-family: 'SFMono-Regular',Consolas,'Liberation Mono',Menlo,Courier,monospace!important; +} + +.emotion-17 { + background-color: #fafafa; + border: 1px solid #fafafa; + position: relative; + overflow: auto; + 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-17:not(:hover) .studio-highlight-copy { + visibility: hidden; + opacity: 0; +} + +.emotion-17:not(:hover) .studio-highlight-tag { + visibility: hidden; + opacity: 0; +} + +.emotion-17 pre { + margin: 0!important; + padding: 16px 24px!important; + background: none!important; +} + +.emotion-17 code { + background: transparent!important; +} + +
+
+
+

+ This is an H1 +

+ + +

+ This is an H2 +

+ + +

+ This is an H3 +

+ + +

+ This is an H4 +

+ + +
+ This is an H5 +
+ + +

+ The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw + + HTML + + , it’s 234 characters. In the raw + + HTML + + , there’s more markup than there is text. +

+ + +
+
+`; + exports[` > renders index.tsx correctly 1`] = ` .emotion-0 { background-color: transparent; From 1b14b65e9f5831e73f0024c88cf928ab90e9ee92 Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Wed, 22 Nov 2023 14:21:05 +0800 Subject: [PATCH 4/5] :recycle: feat: reflact some components props & api --- src/Highlight/defalut.tsx | 2 +- src/Highlight/wrapper.tsx | 2 +- src/Markdown/CodeBlock.tsx | 13 ++++--------- src/Markdown/demos/index.tsx | 10 +++++++++- src/Markdown/index.md | 24 +++++++++++++++--------- src/Markdown/index.tsx | 27 ++++++++++++++++++--------- 6 files changed, 48 insertions(+), 30 deletions(-) diff --git a/src/Highlight/defalut.tsx b/src/Highlight/defalut.tsx index 30a10e3b..952d6457 100644 --- a/src/Highlight/defalut.tsx +++ b/src/Highlight/defalut.tsx @@ -30,7 +30,7 @@ export interface HighlightProps { * @renderType select * @default "typescript" */ - language: string; + language?: string; /** * @title 主题 * @description 主题颜色, dark 黑色主题，light 白色主题 diff --git a/src/Highlight/wrapper.tsx b/src/Highlight/wrapper.tsx index 38293b71..456a6337 100644 --- a/src/Highlight/wrapper.tsx +++ b/src/Highlight/wrapper.tsx @@ -18,7 +18,7 @@ export interface HighlighterWrapperProps extends DivProps { /** * @description The language of the code content */ - language: string; + language?: string; } const options: SelectProps['options'] = Object.keys(languageMap).map((key) => ({ label: key, diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx index 95c03d40..d2fb8631 100644 --- a/src/Markdown/CodeBlock.tsx +++ b/src/Markdown/CodeBlock.tsx @@ -28,7 +28,7 @@ const countLines = (str: string): number => { return matches ? matches.length : 1; }; -const Code = memo(({ fullFeatured, ...properties }: any) => { +const Code = memo(({ highlight, snippet, ...properties }: any) => { const { styles, cx } = useStyles(); if (!properties.children[0]) return; @@ -47,6 +47,7 @@ const Code = memo(({ fullFeatured, ...properties }: any) => { language={lang} symbol={''} type={'block'} + {...snippet} > {content} @@ -56,19 +57,13 @@ const Code = memo(({ fullFeatured, ...properties }: any) => { return ( {content} ); }); -export const CodeLite = memo((properties: any) => { - return ; -}); - -export const CodeFullFeatured = memo((properties: any) => { - return ; -}); +export { Code }; diff --git a/src/Markdown/demos/index.tsx b/src/Markdown/demos/index.tsx index a14a0b0f..008f091a 100644 --- a/src/Markdown/demos/index.tsx +++ b/src/Markdown/demos/index.tsx @@ -3,5 +3,13 @@ import { Markdown } from '@ant-design/pro-editor'; import { content } from './data'; export default () => { - return {content}; + return ( + + {content} + + ); }; diff --git a/src/Markdown/index.md b/src/Markdown/index.md index c328d27e..80e488f0 100644 --- a/src/Markdown/index.md +++ b/src/Markdown/index.md @@ -1,20 +1,26 @@ --- nav: 组件 -group: Content -title: Markdown +group: 基础组件 +title: Markdown 文档展示 +atomId: Markdown description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。 --- ## Default +ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，使用我们自己的 Highlight 和 Snippet 进行代码块的渲染 + +你也可以通过自己传入 components 等 React-Markdown 的 Props 来进行自定义，多余的会透传过去。 + ## APIs -| 属性名 | 类型 | 描述 | -| --------------------- | ------------- | -------------------------- | -| children | string | 要渲染的 Markdown 内容。 | -| className | string | Markdown 组件的类名。 | -| fullFeaturedCodeBlock | boolean | 是否启用完整功能的代码块。 | -| onDoubleClick | () => void | 双击事件处理函数。 | -| style | CSSProperties | Markdown 组件的样式。 | +| 属性名 | 类型 | 描述 | +| ------------- | --------------- | ------------------------------ | +| children | string | 要渲染的 Markdown 内容。 | +| className | string | Markdown 组件的类名。 | +| onDoubleClick | () => void | 双击事件处理函数。 | +| style | CSSProperties | Markdown 组件的样式。 | +| highlight | Highlight Props | Highlight 的配置，会默认透传。 | +| snippet | snippet Props | Snippet 的配置，会默认透传 | diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx index db4c1aa7..8bef3ca0 100644 --- a/src/Markdown/index.tsx +++ b/src/Markdown/index.tsx @@ -6,32 +6,41 @@ import rehypeKatex from 'rehype-katex'; import remarkGfm from 'remark-gfm'; import remarkMath from 'remark-math'; -import { CodeFullFeatured, CodeLite } from './CodeBlock'; +import { HighlightProps, SnippetProps } from '@ant-design/pro-editor'; +import { Code } from './CodeBlock'; import { useStyles } from './style'; export interface MarkdownProps { - /** - * @description The markdown content to be rendered - */ children: string; /** - * @description The class name for the Markdown component + * @description ClassName */ className?: string; fullFeaturedCodeBlock?: boolean; onDoubleClick?: () => void; style?: CSSProperties; + // Highlight 的配置，会默认透传 + highlight?: HighlightProps; + // Snippet 的配置，会默认透传 + snippet?: SnippetProps; } const Markdown = memo( - ({ children, className, style, fullFeaturedCodeBlock = true, onDoubleClick, ...props }) => { + ({ children, className, style, onDoubleClick, highlight = {}, snippet = {}, ...rest }) => { const { styles } = useStyles(); const components: any = { a: Typography.Link, details: Collapse, hr: () => , img: Image, - pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite, + pre: (props) => { + const { children, ...rest } = props; + return ( + + {children} + + ); + }, }; return ( @@ -42,7 +51,7 @@ const Markdown = memo( className={styles.markdown} components={components} remarkPlugins={[remarkGfm]} - {...props} + {...rest} > {children} @@ -53,7 +62,7 @@ const Markdown = memo( components={components} rehypePlugins={[rehypeKatex]} remarkPlugins={[remarkGfm, remarkMath]} - {...props} + {...rest} > {children} From ea44085e1228d28f49782a1337edf41fec495afa Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Wed, 22 Nov 2023 14:27:14 +0800 Subject: [PATCH 5/5] :bricks: fix: delete normal Errorboundary --- src/Markdown/index.tsx | 30 ++++++++---------------------- 1 file changed, 8 insertions(+), 22 deletions(-) diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx index 8bef3ca0..fa631748 100644 --- a/src/Markdown/index.tsx +++ b/src/Markdown/index.tsx @@ -1,6 +1,5 @@ import { Collapse, Divider, Image, Typography } from 'antd'; import { CSSProperties, memo } from 'react'; -import { ErrorBoundary } from 'react-error-boundary'; import ReactMarkdown from 'react-markdown'; import rehypeKatex from 'rehype-katex'; import remarkGfm from 'remark-gfm'; @@ -45,28 +44,15 @@ const Markdown = memo( return ( - - {children} - - } + - - {children} - - + {children} + ); },