feat(bubble): add editable support

.dumi/pages/index/components/MainBanner.tsx

@@ -1,11 +1,12 @@
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
-import { Link, useLocation } from 'dumi';
+import { useLocation } from 'dumi';
 import React from 'react';
 
 import { Button } from 'antd';
 import useLocale from '../../../hooks/useLocale';
 import useLottie from '../../../hooks/useLottie';
+import Link from '../../../theme/common/Link';
 import { getLocalizedPathname, isZhCN } from '../../../theme/utils';
 import Container from '../common/Container';
 import SiteContext from './SiteContext';

.dumi/theme/builtins/ComponentOverview/index.tsx

@@ -243,7 +243,7 @@ const Overview: React.FC = () => {
                         {cardContent}
                       </a>
                     ) : (
-                      <Link to={url} prefetch key={component.title}>
+                      <Link to={url} key={component.title}>
                         {cardContent}
                       </Link>
                     );

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,9 +1,9 @@
-import React, { useContext } from 'react';
 import { BugOutlined, CodeOutlined, ExperimentOutlined } from '@ant-design/icons';
 import { XProvider } from '@ant-design/x';
-import { Tooltip, Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
+import React, { Suspense, useContext } from 'react';
 
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocale from '../../../hooks/useLocale';
@@ -106,7 +106,9 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
         </Tooltip>
       </span>
       <XProvider theme={{ cssVar: enableCssVar, hashed: !enableCssVar }}>
-        <DumiDemoGrid items={demos} />
+        <Suspense>
+          <DumiDemoGrid items={demos} />
+        </Suspense>
       </XProvider>
     </div>
   );

.dumi/theme/builtins/LocaleLink/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Link } from 'dumi';
 
 import useLocale from '../../../hooks/useLocale';
+import Link from '../../../theme/common/Link';
 
 type LinkProps = Parameters<typeof Link>[0];
 

.dumi/theme/common/Link.tsx

@@ -1,72 +1,56 @@
-import { Link as DumiLink, useLocation, useNavigate } from 'dumi';
-import nprogress from 'nprogress';
+import { Link as DumiLink, useAppData, useLocation, useNavigate } from 'dumi';
 import type { MouseEvent, MouseEventHandler } from 'react';
-import React, { forwardRef, useLayoutEffect, useTransition } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 
 export interface LinkProps {
   to: string | { pathname?: string; search?: string; hash?: string };
   style?: React.CSSProperties;
   className?: string;
   onClick?: MouseEventHandler;
   component?: React.ComponentType<any>;
+  children?: React.ReactNode;
 }
 
-nprogress.configure({ showSpinner: false });
-
-const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
-  const { to, children, component, ...rest } = props;
-  const [isPending, startTransition] = useTransition();
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-
-  const href = React.useMemo<string>(() => {
-    if (typeof to === 'object') {
-      return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
-    }
-    return to;
-  }, [to]);
-
-  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
-    props.onClick?.(e);
-    if (!href?.startsWith('http')) {
-      // Should support open in new tab
-      if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
-        e.preventDefault();
-        startTransition(() => {
-          if (href) {
-            navigate(href);
-          }
-        });
+const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>(
+  ({ component, children, to, ...rest }, ref) => {
+    const { pathname } = useLocation();
+    const { preloadRoute } = useAppData();
+    const navigate = useNavigate();
+    const href = useMemo<string>(() => {
+      if (typeof to === 'object') {
+        return `${to.pathname || pathname}${to.search || ''}${to.hash || ''}`;
       }
+      return to;
+    }, [to]);
+    const onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      rest.onClick?.(e);
+      if (!href?.startsWith('http')) {
+        // Should support open in new tab
+        if (!e.metaKey && !e.ctrlKey && !e.shiftKey) {
+          e.preventDefault();
+          navigate(href);
+        }
+      }
+    };
+    if (component) {
+      return React.createElement(
+        component,
+        {
+          ...rest,
+          ref,
+          href,
+          onClick,
+          onMouseEnter: () => preloadRoute?.(href),
+        },
+        children,
+      );
     }
-  };
-
-  useLayoutEffect(() => {
-    if (isPending) {
-      nprogress.start();
-    } else {
-      nprogress.done();
-    }
-  }, [isPending]);
-
-  if (component) {
-    return React.createElement(
-      component,
-      {
-        ...rest,
-        ref,
-        onClick: handleClick,
-        href,
-      },
-      children,
+    return (
+      <DumiLink ref={ref} {...rest} to={href} prefetch>
+        {children}
+      </DumiLink>
     );
-  }
-
-  return (
-    <DumiLink ref={ref} onClick={handleClick} {...rest} to={href} prefetch>
-      {children}
-    </DumiLink>
-  );
-});
+  },
+);
 
 export default Link;

.dumi/theme/slots/Footer/index.tsx

@@ -15,13 +15,14 @@ import {
 import { TinyColor } from '@ctrl/tinycolor';
 import { createStyles } from 'antd-style';
 import getAlphaColor from 'antd/es/theme/util/getAlphaColor';
-import { FormattedMessage, Link } from 'dumi';
+import { FormattedMessage } from 'dumi';
 import RcFooter from 'rc-footer';
 import type { FooterColumn } from 'rc-footer/lib/column';
 import React, { useContext } from 'react';
 
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
+import Link from '../../../theme/common/Link';
 import SiteContext from '../SiteContext';
 import AdditionalInfo from './AdditionalInfo';
 

.dumirc.ts

@@ -8,7 +8,11 @@ import { version } from './package.json';
 
 export default defineConfig({
   plugins: ['dumi-plugin-color-chunk'],
+
+  // For <Link prefetch />
+  routePrefetch: {},
   manifest: {},
+
   conventionRoutes: {
     // to avoid generate routes for .dumi/pages/index/components/xx
     exclude: [/index\/components\//],

components/bubble/Bubble.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import { Avatar } from 'antd';
 import useXComponentConfig from '../_util/hooks/use-x-component-config';
 import { useXProviderContext } from '../x-provider';
+import Editor from './Editor';
+import useMergedConfig from './hooks/useMergedConfig';
 import useTypedEffect from './hooks/useTypedEffect';
 import useTypingConfig from './hooks/useTypingConfig';
 import type { BubbleProps } from './interface';
@@ -40,6 +42,7 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     onTypingComplete,
     header,
     footer,
+    editable = {},
     ...otherHtmlProps
   } = props;
 
@@ -60,6 +63,28 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
   // ===================== Component Config =========================
   const contextConfig = useXComponentConfig('bubble');
 
+  // =========================== Editable ===========================
+  const [enableEdit, editConfig] = useMergedConfig<BubbleProps['editable']>(editable);
+  const [isEditing, setIsEditing] = React.useState(editConfig?.editing || false);
+
+  React.useEffect(() => {
+    setIsEditing(editConfig?.editing || false);
+  }, [editConfig?.editing]);
+
+  const onEditChange = (value: string) => {
+    editConfig?.onChange?.(value);
+  };
+
+  const onEditCancel = () => {
+    editConfig?.onCancel?.();
+    setIsEditing(false);
+  };
+
+  const onEditEnd = (value: string) => {
+    editConfig?.onEnd?.(value);
+    setIsEditing(false);
+  };
+
   // ============================ Typing ============================
   const [typingEnabled, typingStep, typingInterval] = useTypingConfig(typing);
 
@@ -119,23 +144,43 @@ const Bubble: React.ForwardRefRenderFunction<BubbleRef, BubbleProps> = (props, r
     contentNode = mergedContent as React.ReactNode;
   }
 
-  let fullContent: React.ReactNode = (
-    <div
-      style={{
-        ...contextConfig.styles.content,
-        ...styles.content,
-      }}
-      className={classnames(
-        `${prefixCls}-content`,
-        `${prefixCls}-content-${variant}`,
-        shape && `${prefixCls}-content-${shape}`,
-        contextConfig.classNames.content,
-        classNames.content,
-      )}
-    >
-      {contentNode}
-    </div>
-  );
+  let fullContent: React.ReactNode =
+    enableEdit && isEditing ? (
+      <Editor
+        prefixCls={prefixCls}
+        value={mergedContent as string}
+        onChange={onEditChange}
+        onCancel={onEditCancel}
+        onEnd={onEditEnd}
+        editorStyle={{
+          ...contextConfig.styles.editor,
+          ...styles.editor,
+        }}
+        editorClassName={classnames(
+          `${prefixCls}-editor`,
+          contextConfig.classNames.editor,
+          classNames.editor,
+        )}
+        editorTextAreaConfig={editConfig?.editorTextAreaConfig}
+        editorButtonConfig={editConfig?.editorButtonConfig}
+      />
+    ) : (
+      <div
+        style={{
+          ...contextConfig.styles.content,
+          ...styles.content,
+        }}
+        className={classnames(
+          `${prefixCls}-content`,
+          `${prefixCls}-content-${variant}`,
+          shape && `${prefixCls}-content-${shape}`,
+          contextConfig.classNames.content,
+          classNames.content,
+        )}
+      >
+        {contentNode}
+      </div>
+    );
 
   if (header || footer) {
     fullContent = (