Merge branch 'master' of github.com:lobehub/lobe-ui

Author: canisminor1990

packages/dumi-theme-lobehub/package.json

@@ -12,32 +12,26 @@
     "prepare": "npm run build"
   },
   "dependencies": {
+    "@ant-design/icons": "^5",
     "@floating-ui/react": "^0.17",
     "@lobehub/ui": "latest",
-    "animated-scroll-to": "^2",
     "chalk": "^4",
     "fast-deep-equal": "^3",
-    "rc-footer": "^0.6",
-    "react-syntax-highlighter": "^15",
-    "shiki-es": "^0.2"
+    "rc-footer": "^0.6"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5",
     "@emotion/babel-plugin": "^11",
     "@emotion/react": "^11",
     "@testing-library/react": "^13",
-    "@types/react-syntax-highlighter": "^15",
     "@umijs/lint": "^4",
     "@vitest/coverage-c8": "latest",
     "concurrently": "^7",
     "cross-env": "^7",
     "father-plugin-dumi-theme": "^1.0.0-rc.1",
     "history": "^5",
-    "jsdom": "^21",
-    "tilg": "^0.1"
+    "jsdom": "^21"
   },
   "peerDependencies": {
-    "@ant-design/icons": ">=4",
     "dumi": "^2.0.0",
     "react": ">=16.8",
     "react-dom": ">=16.8"

packages/dumi-theme-lobehub/src/builtins/Previewer/index.tsx

@@ -1,39 +1,39 @@
-import { IntersectionLoad } from '@/components/LazyLoad';
 import { createStyles } from 'antd-style';
 import { IPreviewerProps } from 'dumi/dist/client/theme-api/types';
 import Previewer from 'dumi/theme-default/builtins/Previewer';
 import { rgba } from 'polished';
-import { useMemo } from 'react';
 
-const useStyles = createStyles(({ css, token, prefixCls }, { center, nopadding }: any) => {
+const useStyles = createStyles(({ css, token, prefixCls }) => {
   return {
+    center: css`
+      .dumi-default-previewer-demo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    `,
+    nopadding: css`
+      .dumi-default-previewer-demo {
+        padding: 0;
+      }
+    `,
     container: css`
       .dumi-default-previewer {
-        border-color: ${token.colorBorderSecondary};
+        overflow: hidden;
         display: flex;
         flex-direction: column;
-        overflow: hidden;
+        border-color: ${token.colorBorderSecondary};
         &-demo {
           flex: 1;
-          ${nopadding &&
-          css`
-            padding: 0;
-          `}
-          ${center &&
-          css`
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          `}
 
           &[data-iframe]::before {
             background: ${token.colorFillContent};
           }
         }
 
         &-meta {
-          border-color: ${token.colorBorderSecondary};
           flex: 1;
+          border-color: ${token.colorBorderSecondary};
 
           .${prefixCls}-highlighter {
             pre {
@@ -134,24 +134,19 @@ export interface PreviewerProps extends IPreviewerProps {
   nopadding?: boolean;
 }
 
-export default (props: IPreviewerProps) => {
-  const { styles, cx } = useStyles(props);
-
-  const height = useMemo(() => {
-    if (typeof props.iframe === 'number') {
-      return props.iframe;
-    }
-    if (props.height) {
-      return props.height;
-    }
-    return 300;
-  }, [props.iframe, props.height]);
+export default ({ center, codePlacement, nopadding, ...props }: PreviewerProps) => {
+  const { styles, cx } = useStyles();
 
   return (
-    <div className={cx(styles.container, styles[props.codePlacement as 'left' | 'right' | 'top'])}>
-      <IntersectionLoad height={height} elementType="section">
-        <Previewer {...props} />
-      </IntersectionLoad>
+    <div
+      className={cx(
+        styles.container,
+        center && styles.center,
+        nopadding && styles.nopadding,
+        styles[codePlacement as 'left' | 'right' | 'top'],
+      )}
+    >
+      <Previewer {...props} />
     </div>
   );
 };