feat: Implement captions display below images

Author: yanceyy

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-notion-x-code-block",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
   "type": "module",
   "module": "dist/index.js",

src/code.module.css

@@ -9,3 +9,16 @@
   width: 100%;
   font-size: 85%;
 }
+
+/*
+    There will use attributes variables have already been set in react-notion-x
+ */
+.codeCaption {
+  padding: 6px 0 6px 2px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  caret-color: var(--fg-color);
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--fg-color-3);
+}

src/code.tsx

@@ -1,6 +1,6 @@
 import { getBlockTitle } from "notion-utils";
 import React, { useEffect, useState } from "react";
-import { cs, useNotionContext } from "react-notion-x";
+import { cs, useNotionContext, Text } from "react-notion-x";
 import { codeToHtml } from "shiki";
 import { BundledTheme } from "shiki/themes";
 
@@ -12,6 +12,7 @@ export const Code: React.FC<{
   block: CodeBlock;
   defaultLanguage?: string;
   className?: string;
+  captionClassName?: string;
   themes?: {
     light: BundledTheme;
     dark: BundledTheme;
@@ -23,16 +24,17 @@ export const Code: React.FC<{
     light: "catppuccin-latte",
     dark: "dracula"
   },
-  className
+  className,
+  captionClassName
 }) => {
   const { recordMap } = useNotionContext();
   const content = getBlockTitle(block, recordMap);
-
   const [code, setCode] = useState<string | undefined>(undefined);
 
   const language = (
     block.properties?.language?.[0]?.[0] || defaultLanguage
   ).toLowerCase();
+  const caption = block.properties.caption;
 
   useEffect(() => {
     async function renderCodeToHtml() {
@@ -45,14 +47,18 @@ export const Code: React.FC<{
     content && renderCodeToHtml();
   }, [content, language, themes]);
 
-  return code ? (
-    <div
-      className={cs(styles.codeBlock, className)}
-      dangerouslySetInnerHTML={{ __html: code }}
-    />
-  ) : (
-    <div className={cs(styles.codeBlock, className)}>
-      <pre>{content}</pre>
-    </div>
+  return (
+    <figure className={cs(styles.codeBlock, className)}>
+      {code == undefined ? (
+        <pre>{content}</pre>
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: code }} />
+      )}
+      {caption && (
+        <figcaption className={cs(styles.codeCaption, captionClassName)}>
+          <Text value={caption} block={block} />
+        </figcaption>
+      )}
+    </figure>
   );
 };