fix: realtime preview render error

Innei · Sep 15, 2023 · a932c97 · a932c97 · vercel · Sep 15, 2023
1 parent e15f7c2
commit a932c97
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/src/app/preview/page.tsx b/src/app/preview/page.tsx
@@ -16,8 +16,6 @@ import { previewDataAtom } from '~/atoms/preview'
 import { ErrorBoundary } from '~/components/common/ErrorBoundary'
 import { Paper } from '~/components/layout/container/Paper'
 import { NoteMetaBar, NoteRootBanner } from '~/components/widgets/note'
-import { PageActionAside } from '~/components/widgets/page/PageActionAside'
-import { PostActionAside } from '~/components/widgets/post'
 import { ArticleRightAside } from '~/components/widgets/shared/ArticleRightAside'
 import { ReadIndicatorForMobile } from '~/components/widgets/shared/ReadIndicator'
 import { debounce } from '~/lib/_'
@@ -134,9 +132,7 @@ const PostPreview = () => {
               </PostMarkdownImageRecordProvider>
 
               <LayoutRightSidePortal>
-                <ArticleRightAside>
-                  <PostActionAside />
-                </ArticleRightAside>
+                <ArticleRightAside />
               </LayoutRightSidePortal>
             </WrappedElementProvider>
           </article>
@@ -192,6 +188,10 @@ const NotePreview = () => {
                 <ErrorBoundary>
                   <NoteMarkdown />
                 </ErrorBoundary>
+
+                <LayoutRightSidePortal>
+                  <ArticleRightAside />
+                </LayoutRightSidePortal>
               </NoteMarkdownImageRecordProvider>
             </WrappedElementProvider>
           </IndentArticleContainer>
@@ -226,9 +226,7 @@ const PagePreview = () => {
               </MarkdownImageRecordProviderInternal>
 
               <LayoutRightSidePortal>
-                <ArticleRightAside>
-                  <PageActionAside />
-                </ArticleRightAside>
+                <ArticleRightAside />
               </LayoutRightSidePortal>
             </WrappedElementProvider>
           </article>

diff --git a/src/components/widgets/shared/ArticleRightAside.tsx b/src/components/widgets/shared/ArticleRightAside.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import clsx from 'clsx'
+import type { FC } from 'react'
 
 import { useIsMobile } from '~/atoms'
 
@@ -15,7 +16,9 @@ export const ArticleRightAside: Component = ({ children }) => {
   return <ArticleRightAsideImpl>{children}</ArticleRightAsideImpl>
 }
 
-const ArticleRightAsideImpl: Component = ({ children }) => {
+const ArticleRightAsideImpl: FC<{
+  children?: React.ReactNode
+}> = ({ children }) => {
   return (
     <aside className="sticky top-[120px] mt-[120px] h-[calc(100vh-6rem-4.5rem-150px-120px)]">
       <div className="relative h-full">
@@ -26,9 +29,10 @@ const ArticleRightAsideImpl: Component = ({ children }) => {
           accessory={ReadIndicator}
         />
       </div>
-      {React.cloneElement(children as any, {
-        className: 'translate-y-[calc(100%+24px)]',
-      })}
+      {!!children &&
+        React.cloneElement(children as any, {
+          className: 'translate-y-[calc(100%+24px)]',
+        })}
     </aside>
   )
 }