notion-to-jsx 1.2.1 → 1.2.3

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
       },
@@ -93,120 +116,71 @@ var styledImage = _7a4683({ defaultClassName: "styles_styledImage__2f3ncf6", var
 // src/components/Renderer/components/Image/Image.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var MAX_WIDTH = 720;
+var getImageStyles = (format, isColumn = false) => {
+  const getWidthStyle = () => {
+    if (!isColumn && format?.block_aspect_ratio && format.block_aspect_ratio < 1) {
+      return `${format.block_aspect_ratio * 100}%`;
+    }
+    if (format?.block_width) {
+      return format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px`;
+    }
+    return "100%";
+  };
+  const getAspectRatioStyle = () => {
+    return format?.block_aspect_ratio ? `${format.block_aspect_ratio}` : "auto";
+  };
+  return {
+    width: getWidthStyle(),
+    aspectRatio: getAspectRatioStyle()
+  };
+};
+var getImageTagStyle = (format) => {
+  return format?.block_aspect_ratio ? { aspectRatio: `${format.block_aspect_ratio}` } : void 0;
+};
 var Image = ({
   src,
   alt,
   caption: imageCaption,
-  priority = false,
-  format
+  format,
+  isColumn = false
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
-  const [error, setError] = useState(false);
   useEffect(() => {
     setIsLoaded(false);
-    setError(false);
   }, [src]);
-  return /* @__PURE__ */ jsxs("figure", { className: imageContainer, children: [
+  return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: imageWrapper({
           hasWidth: !!format?.block_width
         }),
-        style: format?.block_width ? {
-          width: format.block_width > MAX_WIDTH ? "100%" : `${format.block_width}px`
-        } : void 0,
+        style: getImageStyles(format, isColumn),
         children: [
-          !isLoaded && !error && /* @__PURE__ */ jsx3(
-            "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__ */ jsx3(
-                "svg",
-                {
-                  width: "38",
-                  height: "38",
-                  viewBox: "0 0 38 38",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  stroke: "#888",
-                  children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
-                    /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
-                    /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
-                      "animateTransform",
-                      {
-                        attributeName: "transform",
-                        type: "rotate",
-                        from: "0 18 18",
-                        to: "360 18 18",
-                        dur: "1s",
-                        repeatCount: "indefinite"
-                      }
-                    ) })
-                  ] }) })
-                }
-              )
-            }
-          ),
-          error && /* @__PURE__ */ jsxs(
-            "div",
+          !isLoaded && /* @__PURE__ */ jsx3("div", { className: placeholder, style: getImageStyles(format, isColumn), children: /* @__PURE__ */ jsx3(
+            "svg",
             {
-              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: "38",
+              height: "38",
+              viewBox: "0 0 38 38",
+              xmlns: "http://www.w3.org/2000/svg",
+              stroke: "#888",
+              children: /* @__PURE__ */ jsx3("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx3("circle", { strokeOpacity: ".5", cx: "18", cy: "18", r: "18" }),
+                /* @__PURE__ */ jsx3("path", { d: "M36 18c0-9.94-8.06-18-18-18", children: /* @__PURE__ */ jsx3(
+                  "animateTransform",
                   {
-                    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"
-                        }
-                      )
-                    ]
+                    attributeName: "transform",
+                    type: "rotate",
+                    from: "0 18 18",
+                    to: "360 18 18",
+                    dur: "1s",
+                    repeatCount: "indefinite"
                   }
-                ),
-                /* @__PURE__ */ jsx3("div", { style: { width: "10px" } }),
-                /* @__PURE__ */ jsx3("p", { style: { color: "#FF6B6B", fontSize: "14px" }, children: "Image Load failed" })
-              ]
+                ) })
+              ] }) })
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx3(
             "img",
             {
@@ -216,12 +190,11 @@ var Image = ({
               }),
               src,
               alt,
-              loading: priority ? "eager" : "lazy",
+              loading: "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
+              style: getImageTagStyle(format)
             }
           )
         ]
@@ -702,7 +675,8 @@ var Column = ({ block, onFocus }) => {
     {
       block: childBlock,
       onFocus,
-      index
+      index,
+      isColumn: true
     },
     childBlock.id
   )) });
@@ -859,7 +833,12 @@ var Toggle_default = Toggle;
 
 // src/components/Renderer/components/Block/BlockRenderer.tsx
 import { jsx as jsx15 } from "react/jsx-runtime";
-var BlockRenderer = ({ block, onFocus, index }) => {
+var BlockRenderer = ({
+  block,
+  onFocus,
+  index,
+  isColumn = false
+}) => {
   if (!block) return null;
   const blockProps = {
     tabIndex: 0,
@@ -892,7 +871,8 @@ var BlockRenderer = ({ block, onFocus, index }) => {
           src: block.image.file?.url || block.image.external?.url,
           alt: block.image.caption?.[0]?.plain_text || "",
           caption: block.image.caption,
-          format: block.image.format
+          format: block.image.format,
+          isColumn
         }
       ) });
     case "bookmark":
@@ -921,8 +901,8 @@ var BlockRenderer = ({ block, onFocus, index }) => {
 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";