notion-to-jsx 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -33,15 +33,15 @@ import React4 from "react";
 
 // src/components/Renderer/components/RichText/styles.css.ts
 import { createRuntimeFn as _7a4682 } from "@vanilla-extract/recipes/createRuntimeFn";
-var link = "styles_link__fdf3tw7";
-var richText = _7a4682({ defaultClassName: "styles_richText__fdf3tw0", variantClassNames: { bold: { true: "styles_richText_bold_true__fdf3tw1" }, italic: { true: "styles_richText_italic_true__fdf3tw2" }, strikethrough: { true: "styles_richText_strikethrough_true__fdf3tw3" }, underline: { true: "styles_richText_underline_true__fdf3tw4" }, code: { true: "styles_richText_code_true__fdf3tw5" } }, defaultVariants: {}, compoundVariants: [[{ strikethrough: true, underline: true }, "styles_richText_compound_0__fdf3tw6"]] });
+var link = "styles_link__fdf3twq";
+var richText = _7a4682({ defaultClassName: "styles_richText__fdf3tw0", variantClassNames: { bold: { true: "styles_richText_bold_true__fdf3tw1" }, italic: { true: "styles_richText_italic_true__fdf3tw2" }, strikethrough: { true: "styles_richText_strikethrough_true__fdf3tw3" }, underline: { true: "styles_richText_underline_true__fdf3tw4" }, code: { true: "styles_richText_code_true__fdf3tw5" }, color: { "default": "styles_richText_color_default__fdf3tw6", gray: "styles_richText_color_gray__fdf3tw7", brown: "styles_richText_color_brown__fdf3tw8", orange: "styles_richText_color_orange__fdf3tw9", yellow: "styles_richText_color_yellow__fdf3twa", green: "styles_richText_color_green__fdf3twb", blue: "styles_richText_color_blue__fdf3twc", purple: "styles_richText_color_purple__fdf3twd", pink: "styles_richText_color_pink__fdf3twe", red: "styles_richText_color_red__fdf3twf", gray_background: "styles_richText_color_gray_background__fdf3twg", brown_background: "styles_richText_color_brown_background__fdf3twh", orange_background: "styles_richText_color_orange_background__fdf3twi", yellow_background: "styles_richText_color_yellow_background__fdf3twj", green_background: "styles_richText_color_green_background__fdf3twk", blue_background: "styles_richText_color_blue_background__fdf3twl", purple_background: "styles_richText_color_purple_background__fdf3twm", pink_background: "styles_richText_color_pink_background__fdf3twn", red_background: "styles_richText_color_red_background__fdf3two" } }, defaultVariants: {}, compoundVariants: [[{ strikethrough: true, underline: true }, "styles_richText_compound_0__fdf3twp"]] });
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
 var renderLink = (href, content3) => /* @__PURE__ */ jsx2("a", { href, target: "_blank", rel: "noopener noreferrer", className: link, children: content3 });
 var RichTexts = ({ richTexts }) => {
   return /* @__PURE__ */ jsx2(Fragment, { children: richTexts.map((text, index) => {
-    const { bold, italic, strikethrough, underline, code } = text.annotations;
+    const { bold, italic, strikethrough, underline, code, color } = text.annotations;
     let content3;
     switch (text.type) {
       case "text": {
@@ -61,6 +61,28 @@ var RichTexts = ({ richTexts }) => {
         content3 = text.plain_text;
       }
     }
+    const notionColors = [
+      "default",
+      "gray",
+      "brown",
+      "orange",
+      "yellow",
+      "green",
+      "blue",
+      "purple",
+      "pink",
+      "red",
+      "gray_background",
+      "brown_background",
+      "orange_background",
+      "yellow_background",
+      "green_background",
+      "blue_background",
+      "purple_background",
+      "pink_background",
+      "red_background"
+    ];
+    const safeColor = notionColors.includes(color) ? color : void 0;
     return /* @__PURE__ */ jsx2(
       "span",
       {
@@ -69,7 +91,8 @@ var RichTexts = ({ richTexts }) => {
           italic,
           strikethrough,
           underline,
-          code
+          code,
+          color: safeColor
         }),
         children: content3
       },
@@ -101,10 +124,8 @@ var Image = ({
   format
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
-  const [error, setError] = useState(false);
   useEffect(() => {
     setIsLoaded(false);
-    setError(false);
   }, [src]);
   return /* @__PURE__ */ jsxs("figure", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs(
@@ -113,16 +134,16 @@ var Image = ({
         className: imageWrapper({
           hasWidth: !!format?.block_width
         }),
-        style: format?.block_width ? {
-          width: format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px`
-        } : void 0,
+        style: {
+          width: format?.block_aspect_ratio && format.block_aspect_ratio < 1 ? `${format.block_aspect_ratio * 100}%` : format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%"
+        },
         children: [
-          !isLoaded && !error && /* @__PURE__ */ jsx3(
+          !isLoaded && /* @__PURE__ */ jsx3(
             "div",
             {
               className: placeholder,
               style: {
-                width: format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
+                width: format?.block_aspect_ratio && format.block_aspect_ratio < 1 ? `${format.block_aspect_ratio * 100}%` : format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
                 aspectRatio: format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto"
               },
               children: /* @__PURE__ */ jsx3(
@@ -151,62 +172,6 @@ var Image = ({
               )
             }
           ),
-          error && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: placeholder,
-              style: {
-                width: format?.block_width ? format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px` : "100%",
-                aspectRatio: format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto"
-              },
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "48",
-                    height: "48",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    children: [
-                      /* @__PURE__ */ jsx3(
-                        "path",
-                        {
-                          d: "M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z",
-                          stroke: "#FF6B6B",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(
-                        "path",
-                        {
-                          d: "M15 9L9 15",
-                          stroke: "#FF6B6B",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx3(
-                        "path",
-                        {
-                          d: "M9 9L15 15",
-                          stroke: "#FF6B6B",
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx3("div", { style: { width: "10px" } }),
-                /* @__PURE__ */ jsx3("p", { style: { color: "#FF6B6B", fontSize: "14px" }, children: "Image Load failed" })
-              ]
-            }
-          ),
           /* @__PURE__ */ jsx3(
             "img",
             {
@@ -218,7 +183,6 @@ var Image = ({
               alt,
               loading: priority ? "eager" : "lazy",
               onLoad: () => setIsLoaded(true),
-              onError: () => setError(true),
               width: format?.block_width,
               height: format?.block_height,
               style: format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0
@@ -906,17 +870,23 @@ var BlockRenderer = ({ block, onFocus, index }) => {
     case "table":
       return /* @__PURE__ */ jsx15(Table_default2, { block, tabIndex: blockProps.tabIndex });
     case "toggle":
-      return /* @__PURE__ */ jsx15(Toggle_default, { block, tabIndex: blockProps.tabIndex, onFocus });
+      return /* @__PURE__ */ jsx15(
+        Toggle_default,
+        {
+          block,
+          tabIndex: blockProps.tabIndex,
+          onFocus
+        }
+      );
     default:
-      console.log(`\uC9C0\uC6D0\uB418\uC9C0 \uC54A\uB294 \uBE14\uB85D \uD0C0\uC785: ${block.type}`, block);
       return null;
   }
 };
 var BlockRenderer_default = BlockRenderer;
 
 // src/styles/theme.css.ts
-var darkTheme = "theme_darkTheme__sq3jkb15";
-var lightTheme = "theme_lightTheme__sq3jkb14";
+var darkTheme = "theme_darkTheme__sq3jkb1n";
+var lightTheme = "theme_lightTheme__sq3jkb1m";
 
 // src/components/Title/index.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";