fix: remote component render

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/modules/shared/BlockLoading.tsx

@@ -1,12 +1,15 @@
 import { clsxm } from '~/lib/helper'
 
-export const BlockLoading: Component = (props) => {
+export const BlockLoading: Component<{
+  style?: React.CSSProperties
+}> = (props) => {
   return (
     <div
       className={clsxm(
         'flex h-[500px] items-center justify-center rounded-lg bg-slate-100 text-sm dark:bg-neutral-800',
         props.className,
       )}
+      style={props.style}
     >
       {props.children}
     </div>

src/components/ui/markdown/customize.md

@@ -396,7 +396,7 @@ $$
 ````
 
 ## React Remote Component Render
-
+<!-- 
 ```component
 import=http://127.0.0.1:2333/snippets/js/components
 name=MyComponents.Card
@@ -407,6 +407,20 @@ name=MyComponents.Card
 import=http://127.0.0.1:2333/snippets/js/components
 name=MyComponents.Card
 ```
+```` -->
+
+
+```component
+import=https://cdn.jsdelivr.net/npm/@innei/[email protected]/dist/components/Firework.js
+name=MDX.Firework
+height=25
+```
+
+````markdown
+```component
+import=https://cdn.jsdelivr.net/npm/@innei/[email protected]/dist/components/Firework.js
+name=MDX.Firework
+height=25
+```
 ````
 
- 

src/components/ui/markdown/index.demo.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactComponentRender } from '~/components/ui/react-component-render/ComponentRender'
-import { lazy, Suspense, useMemo, useState } from 'react'
+import React, { lazy, Suspense, useMemo, useState } from 'react'
+import ReactDOM from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { ThemeProvider } from 'next-themes'
@@ -64,6 +65,9 @@ const CodeBlockRender = (props: {
     </Suspense>
   )
 }
+declare const window: any
+window.React = React
+window.ReactDOM = ReactDOM
 
 export const MarkdownCustomize: DocumentComponent = () => {
   return (

src/components/ui/react-component-render/ComponentRender.tsx

@@ -1,4 +1,4 @@
-import { Suspense, useState } from 'react'
+import { createContext, Suspense, useContext, useMemo, useState } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { useIsomorphicLayoutEffect } from 'framer-motion'
 import type { FC } from 'react'
@@ -7,64 +7,92 @@ import { BlockLoading } from '~/components/modules/shared/BlockLoading'
 import { loadScript } from '~/lib/load-script'
 import { get } from '~/lib/lodash'
 
+const StyleContext = createContext<React.CSSProperties>({})
+
 export interface ReactComponentRenderProps {
   dls: string
 }
+
 /**
  * define the render dls of the component
  * ```component
  * import=http://127.0.0.1:2333/snippets/js/components.js
  * name=Components.Card
+ * height=20 // This is optional
  * ```
  *
  * name will be used to find the component in the import, if in the nested object, use dot to separate
  *
  */
 export const ReactComponentRender: FC<ReactComponentRenderProps> = (props) => {
   const { dls } = props
+  const dlsProps = parseDlsContent(dls)
+  const style: React.CSSProperties = useMemo(() => {
+    if (!dlsProps.height) return {}
+    const isNumberString = /^\d+$/.test(dlsProps.height)
+    return {
+      height: isNumberString ? `${dlsProps.height}px` : dlsProps.height,
+    }
+  }, [dlsProps.height])
+  return (
+    <ErrorBoundary fallback={<ComponentBlockError style={style} />}>
+      <StyleContext.Provider value={style}>
+        <ReactComponentRenderImpl {...dlsProps} />
+      </StyleContext.Provider>
+    </ErrorBoundary>
+  )
+}
+const ReactComponentRenderImpl: FC<DlsProps> = (dlsProps) => {
   const [Component, setComponent] = useState({
     component: ComponentBlockLoading,
   })
 
+  const style = useContext(StyleContext)
   useIsomorphicLayoutEffect(() => {
-    const props = parseDlsContent(dls)
-
     loadScript(
       'https://unpkg.com/styled-components/dist/styled-components.min.js',
     )
-      .then(() => loadScript(props.import))
+      .then(() => loadScript(dlsProps.import))
       .then(() => {
-        const Component = get(window, props.name)
+        const Component = get(window, dlsProps.name)
         console.log('Component', Component)
         setComponent({ component: Component })
       })
-  }, [dls])
+  }, [dlsProps])
 
   return (
-    <ErrorBoundary FallbackComponent={ComponentBlockError}>
-      <Suspense fallback={<ComponentBlockLoading />}>
-        <Component.component />
+    <ErrorBoundary fallback={<ComponentBlockError style={style} />}>
+      <Suspense fallback={<ComponentBlockLoading style={style} />}>
+        <div style={style} className="overflow-hidden">
+          <Component.component />
+        </div>
       </Suspense>
     </ErrorBoundary>
   )
 }
 
-const ComponentBlockError = () => {
+const ComponentBlockError: FC<{
+  style?: React.CSSProperties
+}> = ({ style }) => {
   return (
-    <BlockLoading className="bg-red-300 dark:bg-red-700">
+    <BlockLoading style={style} className="bg-red-300 dark:bg-red-700">
       Component Error
     </BlockLoading>
   )
 }
-const ComponentBlockLoading = () => {
-  return <BlockLoading>Component Loading...</BlockLoading>
+const ComponentBlockLoading: FC<{
+  style?: React.CSSProperties
+}> = ({ style }) => {
+  return <BlockLoading style={style}>Component Loading...</BlockLoading>
 }
 
+type DlsProps = {
+  name: string
+  import: string
+  height?: string
+}
 function parseDlsContent(dls: string) {
-  const parsedProps = {} as {
-    name: string
-    import: string
-  }
+  const parsedProps = {} as DlsProps
   dls.split('\n').forEach((line) => {
     const [key, value] = line.split('=')
     ;(parsedProps as any)[key] = value