feat: add empty rich text component and adjust toggle icon styles

Author: 01-binary

packages/notion-to-jsx/src/components/Renderer/components/Code/CodeBlock.tsx

@@ -55,7 +55,7 @@ const CodeBlock = ({ code, language, caption }: Props) => {
           {tokens.map((token, i) => renderToken(token, i))}
         </code>
       </pre>
-      {caption && (
+      {caption && caption.length > 0 && (
         <figcaption>
           <MemoizedRichText richTexts={caption} />
         </figcaption>

packages/notion-to-jsx/src/components/Renderer/components/RichText/RichTexts.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { richText, link } from './styles.css';
+import { richText, link, emptyRichText } from './styles.css';
 
 // 지원하는 Notion 색상 타입 정의
 type NotionColor =
@@ -63,7 +63,13 @@ export interface RichTextProps {
   richTexts: RichTextItem[];
 }
 
+const EmptyRichText = () => <div className={emptyRichText} />;
+
 const RichTexts = ({ richTexts }: RichTextProps) => {
+  if (richTexts.length === 0) {
+    return <EmptyRichText />;
+  }
+
   return (
     <>
       {richTexts.map((text, index) => {

packages/notion-to-jsx/src/components/Renderer/components/RichText/styles.css.ts

@@ -89,3 +89,7 @@ export const link = style({
   wordBreak: 'break-word',
   overflowWrap: 'break-word',
 });
+
+export const emptyRichText = style({
+  height: vars.spacing.lg,
+});

packages/notion-to-jsx/src/components/Renderer/components/Toggle/styles.css.ts

@@ -25,8 +25,6 @@ export const toggleIcon = style({
   alignItems: 'center',
   justifyContent: 'center',
   transition: 'transform 0.2s ease',
-  width: '1.2rem',
-  height: '1.2rem',
 });
 
 export const toggleIconOpen = style({