docs: sandpack block support config (#44072)

* docs: sandpack block support config

* chore: fix lint

.dumi/rehypeAntd.ts

@@ -68,17 +68,29 @@ function rehypeAntd(): UnifiedTransformer<HastRoot> {
         node.tagName = 'VideoPlayer';
       } else if (node.tagName === 'SourceCode') {
         const { lang } = node.properties;
+
         if (typeof lang === 'string' && lang.startsWith('sandpack')) {
+          const code = (node.children[0] as any).value as string;
+          const configRegx = /^const sandpackConfig = ([\S\s]*?});/;
+          const [configString] = code.match(configRegx) || [];
+          // eslint-disable-next-line no-eval
+          const config = configString && eval(`(${configString.replace(configRegx, '$1')})`);
+          Object.keys(config || {}).forEach((key) => {
+            if (typeof config[key] === 'object') {
+              config[key] = JSON.stringify(config[key]);
+            }
+          });
+
           parent!.children.splice(i!, 1, {
             type: 'element',
             tagName: 'Sandpack',
             properties: {
-              dark: lang === 'sandpackdark',
+              ...config,
             },
             children: [
               {
                 type: 'text',
-                value: (node.children[0] as any).value,
+                value: code.replace(configRegx, '').trim(),
               },
             ],
           });

.dumi/theme/builtins/Sandpack/index.tsx

@@ -1,34 +1,11 @@
-import type { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import React, { Suspense } from 'react';
-import { useSearchParams, useServerInsertedHTML } from 'dumi';
+import { useSearchParams } from 'dumi';
 import { createStyles } from 'antd-style';
-import { getSandpackCssText } from '@codesandbox/sandpack-react';
 import { Skeleton } from 'antd';
 
 const OriginSandpack = React.lazy(() => import('./Sandpack'));
 
-const setup = {
-  dependencies: {
-    react: '^18.0.0',
-    'react-dom': '^18.0.0',
-    antd: '^5.0.0',
-  },
-  devDependencies: {
-    '@types/react': '^18.0.0',
-    '@types/react-dom': '^18.0.0',
-    typescript: '^5',
-  },
-  entry: 'index.tsx',
-};
-
-const options = {
-  activeFile: 'app.tsx' as never,
-  visibleFiles: ['index.tsx', 'app.tsx', 'package.json', 'index.css'] as any,
-  showLineNumbers: true,
-  editorHeight: '500px',
-  autorun: false,
-};
-
 const indexContent = `import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './app';
@@ -64,16 +41,44 @@ const SandpackFallback = () => {
   );
 };
 
-const Sandpack = ({ children, dark }: { children: ReactNode; dark: boolean }) => {
+type SandpackProps = {
+  children?: ReactNode;
+  dark?: boolean;
+  autorun?: boolean;
+  dependencies?: string;
+};
+
+const Sandpack: FC<SandpackProps> = ({
+  children,
+  dark,
+  dependencies: extraDeps,
+  autorun = false,
+}) => {
   const [searchParams] = useSearchParams();
+  const dependencies = extraDeps && JSON.parse(extraDeps);
+
+  const setup = {
+    dependencies: {
+      react: '^18.0.0',
+      'react-dom': '^18.0.0',
+      antd: '^5.0.0',
+      ...dependencies,
+    },
+    devDependencies: {
+      '@types/react': '^18.0.0',
+      '@types/react-dom': '^18.0.0',
+      typescript: '^5',
+    },
+    entry: 'index.tsx',
+  };
 
-  useServerInsertedHTML(() => (
-    <style
-      data-sandpack="true"
-      id="sandpack"
-      dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
-    />
-  ));
+  const options = {
+    activeFile: 'app.tsx' as never,
+    visibleFiles: ['index.tsx', 'app.tsx', 'package.json', 'index.css'] as any,
+    showLineNumbers: true,
+    editorHeight: '500px',
+    autorun,
+  };
 
   return (
     <Suspense fallback={<SandpackFallback />}>

.dumi/theme/layouts/GlobalLayout.tsx

@@ -9,6 +9,7 @@ import {
 import { HappyProvider } from '@ant-design/happy-work-theme';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi';
+import { getSandpackCssText } from '@codesandbox/sandpack-react';
 import { App, theme as antdTheme } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import useLayoutState from '../../hooks/useLayoutState';
@@ -116,6 +117,14 @@ const GlobalLayout: React.FC = () => {
     return <style data-type="antd-cssinjs" dangerouslySetInnerHTML={{ __html: styleText }} />;
   });
 
+  useServerInsertedHTML(() => (
+    <style
+      data-sandpack="true"
+      id="sandpack"
+      dangerouslySetInnerHTML={{ __html: getSandpackCssText() }}
+    />
+  ));
+
   const demoPage = pathname.startsWith('/~demos');
 
   // ============================ Render ============================

docs/react/customize-theme.en-US.md

@@ -21,11 +21,11 @@ In version 5.0, we provide a new way to customize themes. Different from the les
 In version 5.0 we call the smallest element that affects the theme **Design Token**. By modifying the Design Token, we can present various themes or components. You can pass `theme` to `ConfigProvider`` to customize theme. After migrate to V5, theme of V5 will be applied by default
 
 <!-- prettier-ignore -->
-:::warning 
+:::warning
 `ConfigProvider` will not take effect on static methods such as `message.xxx`, `Modal.xxx`, `notification.xxx`, because in these methods, antd will dynamically create new ones through `ReactDOM.render` React entities. Its context is not the same as the context of the current code, so context information cannot be obtained.
 
 <!-- prettier-ignore -->
-When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](/components/app) to simplify the problem of usingModal and other methods that need to manually implant the contextHolder. 
+When you need context information (such as the content configured by ConfigProvider), you can use the `Modal.useModal` method to return the modal entity and the contextHolder node. Just insert it where you need to get the context, or you can use [App Component](/components/app) to simplify the problem of usingModal and other methods that need to manually implant the contextHolder.
 :::
 
 ### Customize Design Token
@@ -33,6 +33,10 @@ When you need context information (such as the content configured by ConfigProvi
 By modifying `token` property of `theme`, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.
 
 ```sandpack
+const sandpackConfig = {
+  autorun: true,
+};
+
 import { Button, ConfigProvider, Space } from 'antd';
 import React from 'react';
 
@@ -69,7 +73,11 @@ Themes with different styles can be quickly generated by modifying `algorithm`.
 
 You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider.
 
-```sandpackdark
+```sandpack
+const sandpackConfig = {
+  dark: true,
+};
+
 import React from 'react';
 import { Button, ConfigProvider, Input, Space, theme } from 'antd';
 
@@ -98,11 +106,11 @@ export default App;
 In addition to Design Token, each component will also have its own Component Token to achieve style customization capabilities for components, and different components will not affect each other. Similarly, other Design Token of components can also be overridden in this way.
 
 <!-- prettier-ignore -->
-:::info{title=Algorithm of Component Token} 
+:::info{title=Algorithm of Component Token}
 By default, all component tokens can only override global token and will not be derived based on Seed Token.
 
 <!-- prettier-ignore -->
-In version `>= 5.8.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms. 
+In version `>= 5.8.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
 :::
 
 ```sandpack

docs/react/customize-theme.zh-CN.md

@@ -21,7 +21,7 @@ Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务
 在 5.0 版本中我们把影响主题的最小元素称为 **Design Token**。通过修改 Design Token，我们可以呈现出各种各样的主题或者组件。通过在 `ConfigProvider` 中传入 `theme` 属性，可以配置主题。在升级 v5 后，将默认使用 v5 的主题.
 
 <!-- prettier-ignore -->
-:::warning 
+:::warning
 `ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效，原因是在这些方法中，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。
 
 <!-- prettier-ignore -->
@@ -33,6 +33,10 @@ Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务
 通过 `theme` 中的 `token` 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量成为 Seed Token。
 
 ```sandpack
+const sandpackConfig = {
+  autorun: true,
+};
+
 import { Button, ConfigProvider, Space } from 'antd';
 import React from 'react';
 
@@ -69,7 +73,11 @@ export default App;
 
 你可以通过 `theme` 中的 `algorithm` 属性来切换算法，并且支持配置多种算法，将会依次生效。
 
-```sandpackdark
+```sandpack
+const sandpackConfig = {
+  dark: true,
+};
+
 import React from 'react';
 import { Button, ConfigProvider, Input, Space, theme } from 'antd';
 
@@ -98,7 +106,7 @@ export default App;
 除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。
 
 <!-- prettier-ignore -->
-:::info{title=组件级别的主题算法} 
+:::info{title=组件级别的主题算法}
 默认情况下，所有组件变量都仅仅是覆盖，不会基于 Seed Token 计算派生变量。
 
 <!-- prettier-ignore -->

docs/react/getting-started.en-US.md

@@ -19,6 +19,10 @@ Finally, if you are working in a local development environment, please refer to
 Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.
 
 ```sandpack
+const sandpackConfig = {
+  autorun: true,
+};
+
 import React from 'react';
 import { Button, Space, DatePicker, version } from 'antd';
 

docs/react/getting-started.zh-CN.md

@@ -17,6 +17,10 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
 这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。
 
 ```sandpack
+const sandpackConfig = {
+  autorun: true,
+};
+
 import React from 'react';
 import { Button, Space, DatePicker, version } from 'antd';