docs: Replace open in tab code (#52277)

Co-authored-by: WB01676250 <jl01676250@antgroup.com>

.dumi/theme/builtins/Previewer/CodeBlockButton.tsx

@@ -0,0 +1,69 @@
+import React, { Suspense, useEffect, useState } from 'react';
+import { Tooltip } from 'antd';
+import { FormattedMessage } from 'dumi';
+
+import { ping } from '../../utils';
+
+let pingDeferrer: PromiseLike<boolean>;
+
+function useShowCodeBlockButton() {
+  const [showCodeBlockButton, setShowCodeBlockButton] = useState(false);
+
+  useEffect(() => {
+    pingDeferrer ??= new Promise<boolean>((resolve) => {
+      ping((status) => {
+        if (status !== 'timeout' && status !== 'error') {
+          return resolve(true);
+        }
+
+        return resolve(false);
+      });
+    });
+    pingDeferrer.then(setShowCodeBlockButton);
+  }, []);
+
+  return showCodeBlockButton;
+}
+
+interface CodeBlockButtonProps {
+  title?: string;
+  dependencies: Record<PropertyKey, string>;
+  jsx: string;
+}
+
+const CodeBlockButton: React.FC<CodeBlockButtonProps> = ({ title, dependencies = {}, jsx }) => {
+  const showCodeBlockButton = useShowCodeBlockButton();
+
+  const codeBlockPrefillConfig = {
+    title: `${title} - antd@${dependencies.antd}`,
+    js: `${
+      /import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
+    }import { createRoot } from 'react-dom/client';\n${jsx.replace(
+      /export default/,
+      'const ComponentDemo =',
+    )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
+    css: '',
+    json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
+  };
+
+  return showCodeBlockButton ? (
+    <Tooltip title={<FormattedMessage id="app.demo.codeblock" />}>
+      <div className="code-box-code-action">
+        <img
+          alt="codeblock"
+          src="https://mdn.alipayobjects.com/huamei_wtld8u/afts/img/A*K8rjSJpTNQ8AAAAAAAAAAAAADhOIAQ/original"
+          className="code-box-codeblock"
+          onClick={() => {
+            openHituCodeBlock(JSON.stringify(codeBlockPrefillConfig));
+          }}
+        />
+      </div>
+    </Tooltip>
+  ) : null;
+};
+
+export default (props: CodeBlockButtonProps) => (
+  <Suspense>
+    <CodeBlockButton {...props} />
+  </Suspense>
+);

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { FormattedMessage, useLiveDemo, useSiteData } from 'dumi';
 import LZString from 'lz-string';
 
-import RiddleButton from './RiddleButton';
 import useLocation from '../../../hooks/useLocation';
 import BrowserFrame from '../../common/BrowserFrame';
 import ClientOnly from '../../common/ClientOnly';
@@ -20,6 +19,7 @@ import ExternalLinkIcon from '../../icons/ExternalLinkIcon';
 import DemoContext from '../../slots/DemoContext';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
+import CodeBlockButton from './CodeBlockButton';
 import type { AntdPreviewerProps } from './Previewer';
 
 const { ErrorBoundary } = Alert;
@@ -253,6 +253,7 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
       .join(';'),
     js_pre_processor: 'typescript',
   };
+
   // Reorder source code
   let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;
   let importReactContent = "import React from 'react';";
@@ -403,13 +404,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
                 <CodeSandboxIcon className="code-box-codesandbox" />
               </Tooltip>
             </form>
-            <RiddleButton
+            <CodeBlockButton title={localizedTitle} dependencies={dependencies} jsx={jsx} />
-              title={localizedTitle}
-              dependencies={dependencies}
-              jsx={jsx}
-              track={track}
-              asset={asset}
-            />
             <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
               <span
                 className="code-box-code-action"

.dumi/theme/common/styles/Demo.tsx

@@ -282,12 +282,13 @@ const GlobalDemoStyles: React.FC = () => {
             cursor: pointer;
           }
 
-          &-riddle {
+           &-codeblock {
-            width: 14px;
+            width: 16px;
-            height: 14px;
+            height: 16px;
             overflow: hidden;
             border: 0;
             cursor: pointer;
+            max-width: 100% !important;
           }
 
           &-codesandbox {

.dumi/theme/locales/en-US.json

@@ -35,7 +35,7 @@
   "app.demo.codepen": "Open in CodePen",
   "app.demo.codesandbox": "Open in CodeSandbox",
   "app.demo.stackblitz": "Open in Stackblitz",
-  "app.demo.riddle": "Open in Riddle",
+  "app.demo.codeblock": "Open in Hitu",
   "app.demo.separate": "Open in a new window",
   "app.demo.online": "Online Address",
   "app.home.introduce": "A design system for enterprise-level products. Create an efficient and enjoyable work experience.",

.dumi/theme/locales/zh-CN.json

@@ -35,7 +35,7 @@
   "app.demo.codepen": "在 CodePen 中打开",
   "app.demo.codesandbox": "在 CodeSandbox 中打开",
   "app.demo.stackblitz": "在 Stackblitz 中打开",
-  "app.demo.riddle": "在 Riddle 中打开",
+  "app.demo.codeblock": "在海兔中打开",
   "app.demo.separate": "在新窗口打开",
   "app.demo.online": "线上地址",
   "app.home.introduce": "企业级产品设计体系，创造高效愉悦的工作体验",

.dumirc.ts

@@ -7,6 +7,12 @@ import rehypeAntd from './.dumi/rehypeAntd';
 import remarkAntd from './.dumi/remarkAntd';
 import { version } from './package.json';
 
+const codeBlockJs =
+  'https://renderoffice.a' +
+  'lipay' +
+  'objects.com/p' +
+  '/yuyan/180020010001206410/parseFileData.js';
+
 export default defineConfig({
   plugins: ['dumi-plugin-color-chunk'],
 
@@ -183,6 +189,7 @@ export default defineConfig({
       document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
     })();
     `,
+    codeBlockJs,
   ],
   scripts: [
     {