♻️ refactor: remove interfaction container export and optimize Highlight

ant-design · Feb 9, 2024 · 14599ce · 14599ce
1 parent 803c8e2
commit 14599ce
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 101 deletions.
diff --git a/.i18nrc.js b/.i18nrc.js
@@ -10,5 +10,5 @@ module.exports = {
     entryExtension: '.zh-CN.md',
     outputLocales: ['en-US'],
   },
-  modelName: 'gpt-4',
+  modelName: 'gpt-3.5-turbo-1106',
 };
diff --git a/src/Highlight/components/HighLightJS/index.tsx b/src/Highlight/components/HighLightJS/index.tsx
@@ -14,11 +14,11 @@ import { useStyles } from './style';
 
 export type HighLighJSProps = Pick<
   HighlightProps,
-  'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber'
+  'language' | 'children' | 'theme' | 'lineNumber'
 >;
 
 const HighLighJS: React.FC<HighLighJSProps> = memo((props) => {
-  const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls } = props;
+  const { children, lineNumber = false, theme = THEME_LIGHT, language } = props;
   const [codeBlock, setCodeBlock] = useState(null);
   const { styles } = useStyles(theme);
   const { renderHighlight } = useHighlight(language);
@@ -41,7 +41,7 @@ const HighLighJS: React.FC<HighLighJSProps> = memo((props) => {
       rowList.map((src, index) => {
         return (
           <tr key={index}>
-            <HighlightCell lineNumber={lineNumber} data={src} prefixCls={prefixCls} />
+            <HighlightCell lineNumber={lineNumber} data={src} />
           </tr>
         );
       }),

diff --git a/src/Highlight/components/HighLighter/index.tsx b/src/Highlight/components/HighLighter/index.tsx
@@ -16,21 +16,21 @@ import { useStyles } from './style';
 
 export type ShikiProps = Pick<
   HighlightProps,
-  'language' | 'children' | 'theme' | 'prefixCls' | 'lineNumber' | 'shiki'
+  'language' | 'children' | 'theme' | 'lineNumber' | 'shiki'
 >;
 
 const HighLighter: React.FC<ShikiProps> = memo((props) => {
-  const { children, lineNumber = false, theme = THEME_LIGHT, language, prefixCls, shiki } = props;
-  const { styles } = useStyles({ outPrefix: prefixCls, lineNumber, theme });
+  const { children, lineNumber = false, theme = THEME_LIGHT, language, shiki = true } = props;
+  const { styles } = useStyles({ lineNumber, theme });
   const { renderShiki, loading } = useShiki(language, theme, shiki);
 
   const HighlightJSBlock = useMemo(
     () => (
-      <HighLightJS lineNumber={lineNumber} theme={theme} language={language} prefixCls={prefixCls}>
+      <HighLightJS lineNumber={lineNumber} theme={theme} language={language}>
         {children}
       </HighLightJS>
     ),
-    [lineNumber, theme, language, prefixCls, children],
+    [lineNumber, theme, language, children],
   );
 
   return shiki === false ? (

diff --git a/src/Highlight/components/HighLighter/style.ts b/src/Highlight/components/HighLighter/style.ts
@@ -1,61 +1,59 @@
 import { createStyles } from '../../../theme';
 import { getThemeColor } from '../../theme/colors';
 
-export const useStyles = createStyles(
-  ({ css, cx, token, prefixCls }, { lineNumber, theme, outPrefix }) => {
-    const prefix = `${prefixCls}-${token.editorPrefix}-${outPrefix ? outPrefix : 'highlight'}`;
-    const { colorTextTertiary } = getThemeColor(theme === 'dark');
+export const useStyles = createStyles(({ css, cx, token, prefixCls }, { lineNumber, theme }) => {
+  const prefix = `${prefixCls}-${token.editorPrefix}-highlight`;
+  const { colorTextTertiary } = getThemeColor(theme === 'dark');
 
-    const lineNumberStyle = css`
-      code {
-        counter-reset: step;
-        counter-increment: step 0;
-      }
+  const lineNumberStyle = css`
+    code {
+      counter-reset: step;
+      counter-increment: step 0;
+    }
 
-      code .line::before {
-        content: counter(step);
-        counter-increment: step;
-        width: 1rem;
-        margin-right: 1.5rem;
-        display: inline-block;
-        text-align: right;
-        color: rgba(115, 138, 148, 0.4);
-        user-select: none;
-      }
-    `;
-    return {
-      shiki: cx(
-        `${prefix}-shiki`,
-        css`
-          .shiki {
-            overflow-x: scroll;
-            background: none !important;
-            ${lineNumber ? lineNumberStyle : ''}
-          }
-        `,
-      ),
-      loading: cx(css`
-        color: ${colorTextTertiary};
-      `),
-      center: cx(
-        css`
-          backdrop-filter: saturate(180%) blur(10px);
-          position: absolute;
-          top: 0;
-          right: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
+    code .line::before {
+      content: counter(step);
+      counter-increment: step;
+      width: 1rem;
+      margin-right: 1.5rem;
+      display: inline-block;
+      text-align: right;
+      color: rgba(115, 138, 148, 0.4);
+      user-select: none;
+    }
+  `;
+  return {
+    shiki: cx(
+      `${prefix}-shiki`,
+      css`
+        .shiki {
+          overflow-x: scroll;
+          background: none !important;
+          ${lineNumber ? lineNumberStyle : ''}
+        }
+      `,
+    ),
+    loading: cx(css`
+      color: ${colorTextTertiary};
+    `),
+    center: cx(
+      css`
+        backdrop-filter: saturate(180%) blur(10px);
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
 
-          height: 36px;
-          padding: 0 8px;
+        height: 36px;
+        padding: 0 8px;
 
-          font-family: ${token.fontFamilyCode};
-          color: ${colorTextTertiary};
+        font-family: ${token.fontFamilyCode};
+        color: ${colorTextTertiary};
 
-          border-radius: ${token.borderRadius};
-        `,
-      ),
-    };
-  },
-);
+        border-radius: ${token.borderRadius};
+      `,
+    ),
+  };
+});
diff --git a/src/Highlight/components/HighlightCell/index.tsx b/src/Highlight/components/HighlightCell/index.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { useStyles } from './style';
 
 export interface HighlightCellProps {
-  prefixCls: string;
   data: { index: number; value: string };
   emptyText?: string;
   onMouseDown?: React.MouseEventHandler;

diff --git a/src/Highlight/index.en-US.md b/src/Highlight/index.en-US.md
@@ -1,36 +1,35 @@
 ---
 title: Highlight
+atomId: Highlight
 group: Basic
 ---
 
-# Highlight Code Highlighting
+# Highlight
 
 ## When to use
 
-Use when displaying code without the need to edit it.
+Use it to display code. Highlight uses [Shiki](https://github.com/shikijs/shiki) for rendering by default. Shiki uses the TextMate syntax parser for more precision, but it requires loading additional wasm files, which may result in poor performance in case of poor network conditions. If initialization fails, the component will use [highlight.js](https://highlightjs.org/) as a replacement.
 
 ## Code Demo
 
-### auto theme
+### Automatic Theme
 
 <code src="./demos/auto.tsx" ></code>
 
-### Specify Language
+### Disable Shiki
+
+<code src="./demos/shiki.tsx" ></code>
 
-You can specify the language for highlighting using `language` and the theme using `theme`.
+### Specify Language
 
 <code src="./demos/basic.tsx" ></code>
 
 ### Display Code Block Line Numbers
 
-You can specify whether to display line numbers for the code block using `lineNumber`.
-
 <code src="./demos/lineNumber.tsx" ></code>
 
 ### Theme & Language & Line Numbers & Renderer
 
-You can view the effects of different languages in different themes through this example.
-
 <code src="./demos/theme.tsx" ></code>
 
 ## API Parameters
@@ -39,15 +38,15 @@ You can view the effects of different languages in different themes through this
 
 | Parameter    | Description                                                                                            | Type    | Default |
 | :----------- | :----------------------------------------------------------------------------------------------------- | :------ | :------ |
-| language     | Specify the language type, see table below                                                             | string  | -       |
+| language     | Specify the language type, see the table below                                                         | string  | -       |
 | showLanguage | Whether to display the language tag                                                                    | boolean | true    |
-| theme        | Specify the theme, options: `dark`, `light`,`auto`                                                     | string  | `auto`  |
+| theme        | Specify the theme, options: `dark`, `light`, `auto`                                                    | string  | `auto`  |
 | lineNumber   | Specify whether to enable line numbers for the code block, options: `true`, `false`                    | boolean | false   |
 | copyable     | Specify whether to display a copy button for the code block, options: `true`, `false`                  | boolean | true    |
-| height       | Specify the height of the code block, for scenarios where the code block height needs to be controlled | number  | -       |
-| type         | Specify the rendering type, options: `block`, `pure` (pure mode removes container styles)              | `block` | -       |
+| height       | Specify the height of the code block, used for scenarios where the code block height needs to be fixed | number  | -       |
+| type         | Specify the rendering type, options: `block`, `pure`. In pure mode, the container style is removed     | `block` | -       |
 
-### Currently Supported Language List
+### Currently supported language list
 
 - javascript
 - typescript
@@ -60,6 +59,4 @@ You can view the effects of different languages in different themes through this
 - python
 - sql
 
-### Rendering Notes
-
-Highlight uses [Shiki](https://github.com/shikijs/shiki) for rendering by default. Shiki uses TextMate grammars for more precise highlighting, but it requires loading additional wasm files, which may result in poor performance in case of poor network conditions. If initialization fails, the component will use [highlight.js](https://highlightjs.org/) as a replacement renderer.
+### Rendering Instructions
diff --git a/src/Highlight/index.tsx b/src/Highlight/index.tsx
@@ -1,3 +1,4 @@
+import { ConfigProvider } from '@ant-design/pro-editor';
 import { useThemeMode } from 'antd-style';
 import classNames from 'classnames';
 import { createRef, memo } from 'react';
@@ -20,11 +21,6 @@ export interface HighlightProps {
    * @ignore
    */
   className?: string;
-  /**
-   * @description 类名前缀
-   * @ignore
-   */
-  prefixCls?: string;
   /**
    * @title 指定语言
    * @description 指定语言
@@ -73,7 +69,7 @@ export interface HighlightProps {
   shiki?: boolean;
 }
 
-const Highlight: React.FC<HighlightProps> = memo((props) => {
+const BaseHighlight: React.FC<HighlightProps> = memo((props) => {
   const {
     children,
     style,
@@ -114,4 +110,12 @@ const Highlight: React.FC<HighlightProps> = memo((props) => {
   );
 });
 
+const Highlight = (props: HighlightProps) => {
+  return (
+    <ConfigProvider>
+      <BaseHighlight {...props} />
+    </ConfigProvider>
+  );
+};
+
 export { HIGHLIGHT_LANGUAGES, Highlight };
diff --git a/src/Snippet/index.tsx b/src/Snippet/index.tsx
@@ -1,10 +1,10 @@
 import HighLighter from '@/Highlight/components/HighLighter';
 import CopyButton from '@/components/CopyButton';
 import Spotlight from '@/components/Spotlight';
+import { ConfigProvider } from '@ant-design/pro-editor';
 import { useThemeMode } from 'antd-style';
 import { memo } from 'react';
 import { DivProps } from 'react-layout-kit';
-import { ConfigProvider } from '..';
 import { useStyles } from './style';
 
 export interface SnippetProps extends DivProps {
@@ -36,11 +36,9 @@ export interface SnippetProps extends DivProps {
    * @default 'ghost'
    */
   type?: 'ghost' | 'block';
-
-  prefixCls?: string;
 }
 
-const Snippet = memo<SnippetProps>((props) => {
+const BaseSnippet = memo<SnippetProps>((props) => {
   const {
     symbol = '$',
     language = 'tsx',
@@ -51,22 +49,29 @@ const Snippet = memo<SnippetProps>((props) => {
     className,
     ...rest
   } = props;
-  const { isDarkMode } = useThemeMode();
 
+  const { isDarkMode } = useThemeMode();
   const { styles, cx } = useStyles({
     type,
   });
+
+  return (
+    <div className={cx(styles.container, className)} {...rest}>
+      {spotlight && <Spotlight />}
+      <HighLighter language={language} theme={isDarkMode ? 'dark' : 'light'} shiki>
+        {symbol ? [symbol, children].join(' ') : children}
+      </HighLighter>
+      {copyable && <CopyButton content={children} />}
+    </div>
+  );
+});
+
+const Snippet = (props: SnippetProps) => {
   return (
     <ConfigProvider>
-      <div className={cx(styles.container, className)} {...rest}>
-        {spotlight && <Spotlight />}
-        <HighLighter language={language} theme={isDarkMode ? 'dark' : 'light'} prefixCls="snippet">
-          {symbol ? [symbol, children].join(' ') : children}
-        </HighLighter>
-        {copyable && <CopyButton content={children} />}
-      </div>
+      <BaseSnippet {...props} />
     </ConfigProvider>
   );
-});
+};
 
 export { Snippet };
diff --git a/src/index.ts b/src/index.ts
@@ -15,8 +15,6 @@ export { default as FreeCanvas } from './FreeCanvas';
 export type { FreeCanvasProps } from './FreeCanvas';
 export * from './Highlight';
 export * from './IconPicker';
-export { default as InteractContainer } from './InteractContainer';
-export type { CanvasInteractRule, InteractStatus, InteractStatusNode } from './InteractContainer';
 export { Layout as EditorLayout } from './Layout';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export * from './ProBuilder';