@texonom/nreact 1.1.1 → 1.1.3

package/build/index.js

@@ -1,11 +1,15 @@
 import {
+  AssetWrapper,
   Breadcrumbs,
+  EOI,
+  GracefulImage,
   Header,
+  LazyImage,
   NotionContextConsumer,
   NotionContextProvider,
-  NotionRenderer,
   PageIcon,
   PageIconImpl,
+  PageTitle,
   Search,
   Text,
   cs,
@@ -19,9 +23,699 @@ import {
   getYoutubeId,
   isBrowser,
   isUrl,
+  require_lodash,
   useNotionContext
-} from "./chunk-RGP7M4NM.js";
-import "./chunk-723T62SD.js";
+} from "./chunk-N3C4YBY7.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  __toESM
+} from "./chunk-723T62SD.js";
+
+// src/renderer.tsx
+import * as React9 from "react";
+import mediumZoom from "@fisch0920/medium-zoom";
+
+// src/block.tsx
+import * as React8 from "react";
+import {
+  getBlockCollectionId,
+  getBlockIcon,
+  getBlockParentPage,
+  getPageTableOfContents,
+  getTextContent,
+  uuidToId as uuidToId2
+} from "@texonom/nutils";
+
+// src/components/audio.tsx
+import * as React from "react";
+var Audio = ({ block, className }) => {
+  var _a, _b, _c;
+  const { recordMap } = useNotionContext();
+  const source = recordMap.signed_urls[block.id] || ((_c = (_b = (_a = block.properties) == null ? void 0 : _a.source) == null ? void 0 : _b[0]) == null ? void 0 : _c[0]);
+  return /* @__PURE__ */ React.createElement("div", { className: cs("notion-audio", className) }, /* @__PURE__ */ React.createElement("audio", { controls: true, preload: "none", src: source }));
+};
+
+// src/components/file.tsx
+import * as React3 from "react";
+
+// src/icons/file-icon.tsx
+import * as React2 from "react";
+var FileIcon = (props) => {
+  const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
+  return /* @__PURE__ */ React2.createElement("svg", __spreadProps(__spreadValues({ className }, rest), { viewBox: "0 0 30 30" }), /* @__PURE__ */ React2.createElement("path", { d: "M22,8v12c0,3.866-3.134,7-7,7s-7-3.134-7-7V8c0-2.762,2.238-5,5-5s5,2.238,5,5v12c0,1.657-1.343,3-3,3s-3-1.343-3-3V8h-2v12c0,2.762,2.238,5,5,5s5-2.238,5-5V8c0-3.866-3.134-7-7-7S6,4.134,6,8v12c0,4.971,4.029,9,9,9s9-4.029,9-9V8H22z" }));
+};
+
+// src/components/file.tsx
+var File = ({ block, className }) => {
+  var _a, _b, _c, _d, _e;
+  const { components, recordMap } = useNotionContext();
+  const source = recordMap.signed_urls[block.id] || ((_c = (_b = (_a = block.properties) == null ? void 0 : _a.source) == null ? void 0 : _b[0]) == null ? void 0 : _c[0]);
+  return /* @__PURE__ */ React3.createElement("div", { className: cs("notion-file", className) }, /* @__PURE__ */ React3.createElement(components.Link, { className: "notion-file-link", href: source, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React3.createElement(FileIcon, { className: "notion-file-icon" }), /* @__PURE__ */ React3.createElement("div", { className: "notion-file-info" }, /* @__PURE__ */ React3.createElement("div", { className: "notion-file-title" }, /* @__PURE__ */ React3.createElement(Text, { value: ((_d = block.properties) == null ? void 0 : _d.title) || [["File"]], block })), ((_e = block.properties) == null ? void 0 : _e.size) && /* @__PURE__ */ React3.createElement("div", { className: "notion-file-size" }, /* @__PURE__ */ React3.createElement(Text, { value: block.properties.size, block })))));
+};
+
+// src/components/google-drive.tsx
+import * as React4 from "react";
+var GoogleDrive = ({ block, className }) => {
+  var _a;
+  const { components, mapImageUrl } = useNotionContext();
+  const properties = (_a = block.format) == null ? void 0 : _a.drive_properties;
+  if (!properties)
+    return null;
+  let domain;
+  try {
+    const url = new URL(properties.url);
+    domain = url.hostname;
+  } catch (err) {
+  }
+  return /* @__PURE__ */ React4.createElement("div", { className: cs("notion-google-drive", className) }, /* @__PURE__ */ React4.createElement(components.Link, { className: "notion-google-drive-link", href: properties.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-preview" }, /* @__PURE__ */ React4.createElement(
+    GracefulImage,
+    {
+      src: mapImageUrl(properties.thumbnail, block),
+      alt: properties.title || "Google Drive Document",
+      loading: "lazy"
+    }
+  )), /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-body" }, properties.title && /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-body-title" }, properties.title), properties.icon && domain && /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-body-source" }, properties.icon && /* @__PURE__ */ React4.createElement(
+    "div",
+    {
+      className: "notion-google-drive-body-source-icon",
+      style: {
+        backgroundImage: `url(${properties.icon})`
+      }
+    }
+  ), domain && /* @__PURE__ */ React4.createElement("div", { className: "notion-google-drive-body-source-domain" }, domain)))));
+};
+
+// src/components/page-aside.tsx
+var import_lodash = __toESM(require_lodash(), 1);
+import * as React5 from "react";
+import { uuidToId } from "@texonom/nutils";
+var PageAside = ({ toc, activeSection, setActiveSection, pageAside, hasToc, hasAside, className }) => {
+  const throttleMs = 100;
+  const actionSectionScrollSpy = React5.useMemo(
+    () => (0, import_lodash.default)(() => {
+      const sections = document.getElementsByClassName("notion-h");
+      let prevBBox = null;
+      let currentSectionId = activeSection;
+      for (let i = 0; i < sections.length; ++i) {
+        const section = sections[i];
+        if (!section || !(section instanceof Element))
+          continue;
+        if (!currentSectionId)
+          currentSectionId = section.getAttribute("data-id");
+        const bbox = section.getBoundingClientRect();
+        const prevHeight = prevBBox ? bbox.top - prevBBox.bottom : 0;
+        const offset = Math.max(150, prevHeight / 4);
+        if (bbox.top - offset < 0) {
+          currentSectionId = section.getAttribute("data-id");
+          prevBBox = bbox;
+          continue;
+        }
+        break;
+      }
+      setActiveSection(currentSectionId);
+    }, throttleMs),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // explicitly not taking a dependency on activeSection
+      setActiveSection
+    ]
+  );
+  React5.useEffect(() => {
+    if (!hasToc)
+      return;
+    window.addEventListener("scroll", actionSectionScrollSpy);
+    actionSectionScrollSpy();
+    return () => {
+      window.removeEventListener("scroll", actionSectionScrollSpy);
+    };
+  }, [hasToc, actionSectionScrollSpy]);
+  if (!hasAside)
+    return null;
+  return /* @__PURE__ */ React5.createElement("aside", { className: cs("notion-aside", className) }, hasToc && /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents" }, /* @__PURE__ */ React5.createElement("div", { className: "notion-aside-table-of-contents-header" }, "Table of Contents"), /* @__PURE__ */ React5.createElement("nav", { className: "notion-table-of-contents" }, toc.map((tocItem) => {
+    const id = uuidToId(tocItem.id);
+    return /* @__PURE__ */ React5.createElement(
+      "a",
+      {
+        key: id,
+        href: `#${id}`,
+        className: cs(
+          "notion-table-of-contents-item",
+          `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
+          activeSection === id && "notion-table-of-contents-active-item"
+        )
+      },
+      /* @__PURE__ */ React5.createElement(
+        "span",
+        {
+          className: "notion-table-of-contents-item-body",
+          style: {
+            display: "inline-block",
+            marginLeft: tocItem.indentLevel * 16
+          }
+        },
+        tocItem.text
+      )
+    );
+  }))), pageAside);
+};
+
+// src/components/sync-pointer-block.tsx
+import * as React6 from "react";
+var SyncPointerBlock = ({ block, level }) => {
+  var _a, _b;
+  if (!block) {
+    if (true)
+      console.warn("missing sync pointer block", block.id);
+    return null;
+  }
+  const syncPointerBlock = block;
+  const referencePointerId = (_b = (_a = syncPointerBlock == null ? void 0 : syncPointerBlock.format) == null ? void 0 : _a.transclusion_reference_pointer) == null ? void 0 : _b.id;
+  if (!referencePointerId)
+    return null;
+  return /* @__PURE__ */ React6.createElement(NotionBlockRenderer, { key: referencePointerId, level, blockId: referencePointerId });
+};
+
+// src/icons/link-icon.tsx
+import * as React7 from "react";
+var LinkIcon = (props) => {
+  const _a = props, { className } = _a, rest = __objRest(_a, ["className"]);
+  return /* @__PURE__ */ React7.createElement("svg", __spreadProps(__spreadValues({ className }, rest), { viewBox: "0 0 16 16", width: "16", height: "16" }), /* @__PURE__ */ React7.createElement(
+    "path",
+    {
+      fillRule: "evenodd",
+      d: "M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"
+    }
+  ));
+};
+
+// src/block.tsx
+var tocIndentLevelCache = {};
+var pageCoverStyleCache = {};
+var Block = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q;
+  const ctx = useNotionContext();
+  const {
+    components,
+    fullPage,
+    darkMode,
+    recordMap,
+    mapPageUrl,
+    mapImageUrl,
+    showTableOfContents,
+    minTableOfContentsItems,
+    defaultPageIcon,
+    defaultPageCover,
+    defaultPageCoverPosition
+  } = ctx;
+  const [activeSection, setActiveSection] = React8.useState(null);
+  const {
+    block,
+    children,
+    level,
+    className,
+    bodyClassName,
+    header,
+    footer,
+    pageHeader,
+    pageFooter,
+    pageTitle,
+    pageAside,
+    pageCover,
+    hideBlockId,
+    disableHeader
+  } = props;
+  if (!block)
+    return null;
+  if (level === 0 && block.type === "collection_view") {
+    ;
+    block.type = "collection_view_page";
+  }
+  const blockId = hideBlockId ? "notion-block" : `notion-block-${uuidToId2(block.id)}`;
+  switch (block.type) {
+    case "collection_view_page":
+    case "page":
+      if (level === 0) {
+        const {
+          page_icon = defaultPageIcon,
+          page_cover = defaultPageCover,
+          page_cover_position = defaultPageCoverPosition,
+          page_full_width,
+          page_small_text
+        } = block.format || {};
+        if (fullPage) {
+          const properties = block.type === "page" ? block.properties : {
+            title: (_b = (_a = recordMap.collection[getBlockCollectionId(block, recordMap)]) == null ? void 0 : _a.value) == null ? void 0 : _b.name
+          };
+          const coverPosition = (1 - (page_cover_position || 0.5)) * 100;
+          const pageCoverObjectPosition = `center ${coverPosition}%`;
+          let pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition];
+          if (!pageCoverStyle)
+            pageCoverStyle = pageCoverStyleCache[pageCoverObjectPosition] = {
+              objectPosition: pageCoverObjectPosition
+            };
+          const pageIcon = (_c = getBlockIcon(block, recordMap)) != null ? _c : defaultPageIcon;
+          const isPageIconUrl = pageIcon && isUrl(pageIcon);
+          const toc = getPageTableOfContents(block, recordMap);
+          const hasToc = showTableOfContents && toc.length >= minTableOfContentsItems;
+          const hasAside = (hasToc || pageAside) && !page_full_width;
+          const hasPageCover = pageCover || page_cover;
+          return /* @__PURE__ */ React8.createElement("div", { className: cs("notion", "notion-app", darkMode ? "dark" : "light", blockId, className) }, /* @__PURE__ */ React8.createElement("div", { className: "notion-viewport" }), /* @__PURE__ */ React8.createElement("div", { className: "notion-frame" }, !disableHeader && /* @__PURE__ */ React8.createElement(components.Header, { block }), header, /* @__PURE__ */ React8.createElement("div", { className: "notion-page-scroller" }, hasPageCover && (pageCover ? pageCover : /* @__PURE__ */ React8.createElement("div", { className: "notion-page-cover-wrapper" }, /* @__PURE__ */ React8.createElement(
+            LazyImage,
+            {
+              src: mapImageUrl(page_cover, block),
+              alt: getTextContent(properties == null ? void 0 : properties.title),
+              priority: true,
+              className: "notion-page-cover",
+              style: pageCoverStyle
+            }
+          ))), /* @__PURE__ */ React8.createElement(
+            "main",
+            {
+              className: cs(
+                "notion-page",
+                hasPageCover ? "notion-page-has-cover" : "notion-page-no-cover",
+                page_icon ? "notion-page-has-icon" : "notion-page-no-icon",
+                isPageIconUrl ? "notion-page-has-image-icon" : "notion-page-has-text-icon",
+                "notion-full-page",
+                page_full_width && "notion-full-width",
+                page_small_text && "notion-small-text",
+                bodyClassName
+              )
+            },
+            page_icon && /* @__PURE__ */ React8.createElement(PageIcon, { block, defaultIcon: defaultPageIcon, inline: false }),
+            pageHeader,
+            /* @__PURE__ */ React8.createElement("h1", { className: "notion-title" }, pageTitle != null ? pageTitle : /* @__PURE__ */ React8.createElement(Text, { value: properties == null ? void 0 : properties.title, block })),
+            (block.type === "collection_view_page" || block.type === "page" && block.parent_table === "collection") && /* @__PURE__ */ React8.createElement(components.Collection, { block, ctx }),
+            block.type !== "collection_view_page" && /* @__PURE__ */ React8.createElement(
+              "div",
+              {
+                className: cs(
+                  "notion-page-content",
+                  hasAside && "notion-page-content-has-aside",
+                  hasToc && "notion-page-content-has-toc"
+                )
+              },
+              /* @__PURE__ */ React8.createElement("article", { className: "notion-page-content-inner" }, children),
+              hasAside && /* @__PURE__ */ React8.createElement(
+                PageAside,
+                {
+                  toc,
+                  activeSection,
+                  setActiveSection,
+                  hasToc,
+                  hasAside,
+                  pageAside
+                }
+              )
+            ),
+            pageFooter
+          ), footer)));
+        } else {
+          return /* @__PURE__ */ React8.createElement(
+            "main",
+            {
+              className: cs(
+                "notion",
+                darkMode ? "dark" : "light",
+                "notion-page",
+                page_full_width && "notion-full-width",
+                page_small_text && "notion-small-text",
+                blockId,
+                className,
+                bodyClassName
+              )
+            },
+            /* @__PURE__ */ React8.createElement("div", { className: "notion-viewport" }),
+            pageHeader,
+            (block.type === "collection_view_page" || block.type === "page" && block.parent_table === "collection") && /* @__PURE__ */ React8.createElement(components.Collection, { block, ctx }),
+            block.type !== "collection_view_page" && children,
+            pageFooter
+          );
+        }
+      } else {
+        const blockColor = (_d = block.format) == null ? void 0 : _d.block_color;
+        return /* @__PURE__ */ React8.createElement(
+          components.PageLink,
+          {
+            className: cs("notion-page-link", blockColor && `notion-${blockColor}`, blockId),
+            href: mapPageUrl(block.id)
+          },
+          /* @__PURE__ */ React8.createElement(PageTitle, { block })
+        );
+      }
+    case "header":
+    case "sub_header":
+    case "sub_sub_header": {
+      if (!block.properties)
+        return null;
+      const blockColor = (_e = block.format) == null ? void 0 : _e.block_color;
+      const id = uuidToId2(block.id);
+      const title = getTextContent(block.properties.title) || `Notion Header ${id}`;
+      let indentLevel = tocIndentLevelCache[block.id];
+      let indentLevelClass;
+      if (indentLevel === void 0) {
+        const page = getBlockParentPage(block, recordMap);
+        if (page) {
+          const toc = getPageTableOfContents(page, recordMap);
+          const tocItem = toc.find((tocItem2) => tocItem2.id === block.id);
+          if (tocItem) {
+            indentLevel = tocItem.indentLevel;
+            tocIndentLevelCache[block.id] = indentLevel;
+          }
+        }
+      }
+      if (indentLevel !== void 0)
+        indentLevelClass = `notion-h-indent-${indentLevel}`;
+      const isH1 = block.type === "header";
+      const isH2 = block.type === "sub_header";
+      const isH3 = block.type === "sub_sub_header";
+      const classNameStr = cs(
+        isH1 && "notion-h notion-h1",
+        isH2 && "notion-h notion-h2",
+        isH3 && "notion-h notion-h3",
+        blockColor && `notion-${blockColor}`,
+        indentLevelClass,
+        blockId
+      );
+      const innerHeader = /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("div", { id, className: "notion-header-anchor" }), !((_f = block.format) == null ? void 0 : _f.toggleable) && /* @__PURE__ */ React8.createElement("a", { className: "notion-hash-link", href: `#${id}`, title }, /* @__PURE__ */ React8.createElement(LinkIcon, null)), /* @__PURE__ */ React8.createElement("span", { className: "notion-h-title" }, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })));
+      let headerBlock = null;
+      if (isH1)
+        headerBlock = /* @__PURE__ */ React8.createElement("h2", { className: classNameStr, "data-id": id }, innerHeader);
+      else if (isH2)
+        headerBlock = /* @__PURE__ */ React8.createElement("h3", { className: classNameStr, "data-id": id }, innerHeader);
+      else
+        headerBlock = /* @__PURE__ */ React8.createElement("h4", { className: classNameStr, "data-id": id }, innerHeader);
+      if ((_g = block.format) == null ? void 0 : _g.toggleable)
+        return /* @__PURE__ */ React8.createElement("details", { className: cs("notion-toggle", blockId) }, /* @__PURE__ */ React8.createElement("summary", null, headerBlock), /* @__PURE__ */ React8.createElement("div", null, children));
+      else
+        return headerBlock;
+    }
+    case "divider":
+      return /* @__PURE__ */ React8.createElement("hr", { className: cs("notion-hr", blockId) });
+    case "text": {
+      if (!block.properties && !((_h = block.content) == null ? void 0 : _h.length))
+        return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-blank", blockId) }, "\xA0");
+      const blockColor = (_i = block.format) == null ? void 0 : _i.block_color;
+      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-text", blockColor && `notion-${blockColor}`, blockId) }, ((_j = block.properties) == null ? void 0 : _j.title) && /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block }), children && /* @__PURE__ */ React8.createElement("div", { className: "notion-text-children" }, children));
+    }
+    case "bulleted_list":
+    case "numbered_list": {
+      const wrapList = (content, start2) => block.type === "bulleted_list" ? /* @__PURE__ */ React8.createElement("ul", { className: cs("notion-list", "notion-list-disc", blockId) }, content) : /* @__PURE__ */ React8.createElement("ol", { start: start2, className: cs("notion-list", "notion-list-numbered", blockId) }, content);
+      let output = null;
+      if (block.content)
+        output = /* @__PURE__ */ React8.createElement(React8.Fragment, null, block.properties && /* @__PURE__ */ React8.createElement("li", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })), wrapList(children));
+      else
+        output = block.properties ? /* @__PURE__ */ React8.createElement("li", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })) : null;
+      const isTopLevel = block.type !== ((_l = (_k = recordMap.block[block.parent_id]) == null ? void 0 : _k.value) == null ? void 0 : _l.type);
+      const start = getListNumber(block.id, recordMap.block);
+      return isTopLevel ? wrapList(output, start) : output;
+    }
+    case "embed":
+      return /* @__PURE__ */ React8.createElement(components.Embed, { blockId, block });
+    case "tweet":
+    case "maps":
+    case "pdf":
+    case "figma":
+    case "typeform":
+    case "codepen":
+    case "excalidraw":
+    case "image":
+    case "gist":
+    case "video":
+      return /* @__PURE__ */ React8.createElement(AssetWrapper, { blockId, block });
+    case "drive": {
+      const properties = (_m = block.format) == null ? void 0 : _m.drive_properties;
+      if (!properties) {
+        if ((_n = block.format) == null ? void 0 : _n.display_source)
+          return /* @__PURE__ */ React8.createElement(AssetWrapper, { blockId, block });
+      }
+      return /* @__PURE__ */ React8.createElement(GoogleDrive, { block, className: blockId });
+    }
+    case "audio":
+      return /* @__PURE__ */ React8.createElement(Audio, { block, className: blockId });
+    case "file":
+      return /* @__PURE__ */ React8.createElement(File, { block, className: blockId });
+    case "equation":
+      return /* @__PURE__ */ React8.createElement(components.Equation, { block, inline: false, className: blockId });
+    case "code":
+      return /* @__PURE__ */ React8.createElement(components.Code, { block });
+    case "column_list":
+      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-row", blockId) }, children);
+    case "column": {
+      const spacerWidth = `min(32px, 4vw)`;
+      const ratio = ((_o = block.format) == null ? void 0 : _o.column_ratio) || 0.5;
+      const parent = (_p = recordMap.block[block.parent_id]) == null ? void 0 : _p.value;
+      const columns = ((_q = parent == null ? void 0 : parent.content) == null ? void 0 : _q.length) || Math.max(2, Math.ceil(1 / ratio));
+      const width = `calc((100% - (${columns - 1} * ${spacerWidth})) * ${ratio})`;
+      const style = { width };
+      return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("div", { className: cs("notion-column", blockId), style }, children), /* @__PURE__ */ React8.createElement("div", { className: "notion-spacer" }));
+    }
+    case "quote": {
+      if (!block.properties)
+        return null;
+      const blockColor = (_r = block.format) == null ? void 0 : _r.block_color;
+      return /* @__PURE__ */ React8.createElement("blockquote", { className: cs("notion-quote", blockColor && `notion-${blockColor}`, blockId) }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Text, { value: block.properties.title, block })), children);
+    }
+    case "collection_view":
+      return /* @__PURE__ */ React8.createElement(components.Collection, { block, className: blockId, ctx });
+    case "callout":
+      if (components.Callout)
+        return /* @__PURE__ */ React8.createElement(components.Callout, { block, className: blockId });
+      else
+        return /* @__PURE__ */ React8.createElement(
+          "div",
+          {
+            className: cs("notion-callout", ((_s = block.format) == null ? void 0 : _s.block_color) && `notion-${(_t = block.format) == null ? void 0 : _t.block_color}_co`, blockId)
+          },
+          /* @__PURE__ */ React8.createElement(PageIcon, { block }),
+          /* @__PURE__ */ React8.createElement("div", { className: "notion-callout-text" }, /* @__PURE__ */ React8.createElement(Text, { value: (_u = block.properties) == null ? void 0 : _u.title, block }), children)
+        );
+    case "bookmark": {
+      if (!block.properties)
+        return null;
+      const link = block.properties.link;
+      if (!link || !((_v = link[0]) == null ? void 0 : _v[0]))
+        return null;
+      let title = getTextContent(block.properties.title);
+      if (!title)
+        title = getTextContent(link);
+      if (title) {
+        if (title.startsWith("http"))
+          try {
+            const url = new URL(title);
+            title = url.hostname;
+          } catch (err) {
+          }
+      }
+      return /* @__PURE__ */ React8.createElement("div", { className: "notion-row" }, /* @__PURE__ */ React8.createElement(
+        components.Link,
+        {
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: cs("notion-bookmark", ((_w = block.format) == null ? void 0 : _w.block_color) && `notion-${block.format.block_color}`, blockId),
+          href: link[0][0]
+        },
+        /* @__PURE__ */ React8.createElement("div", null, title && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-title" }, /* @__PURE__ */ React8.createElement(Text, { value: [[title]], block })), ((_x = block.properties) == null ? void 0 : _x.description) && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-description" }, /* @__PURE__ */ React8.createElement(Text, { value: (_y = block.properties) == null ? void 0 : _y.description, block })), /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link" }, ((_z = block.format) == null ? void 0 : _z.bookmark_icon) && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link-icon" }, /* @__PURE__ */ React8.createElement(LazyImage, { src: mapImageUrl((_A = block.format) == null ? void 0 : _A.bookmark_icon, block), alt: title })), /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-link-text" }, /* @__PURE__ */ React8.createElement(Text, { value: link, block })))),
+        ((_B = block.format) == null ? void 0 : _B.bookmark_cover) && /* @__PURE__ */ React8.createElement("div", { className: "notion-bookmark-image" }, /* @__PURE__ */ React8.createElement(
+          LazyImage,
+          {
+            src: mapImageUrl((_C = block.format) == null ? void 0 : _C.bookmark_cover, block),
+            alt: getTextContent((_D = block.properties) == null ? void 0 : _D.title),
+            style: {
+              objectFit: "cover"
+            }
+          }
+        ))
+      ));
+    }
+    case "toggle":
+      return /* @__PURE__ */ React8.createElement("details", { className: cs("notion-toggle", blockId) }, /* @__PURE__ */ React8.createElement("summary", null, /* @__PURE__ */ React8.createElement(Text, { value: (_E = block.properties) == null ? void 0 : _E.title, block })), /* @__PURE__ */ React8.createElement("div", null, children));
+    case "table_of_contents": {
+      const page = getBlockParentPage(block, recordMap);
+      if (!page)
+        return null;
+      const toc = getPageTableOfContents(page, recordMap);
+      const blockColor = (_F = block.format) == null ? void 0 : _F.block_color;
+      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-table-of-contents", blockColor && `notion-${blockColor}`, blockId) }, toc.map((tocItem) => /* @__PURE__ */ React8.createElement("a", { key: tocItem.id, href: `#${uuidToId2(tocItem.id)}`, className: "notion-table-of-contents-item" }, /* @__PURE__ */ React8.createElement(
+        "span",
+        {
+          className: "notion-table-of-contents-item-body",
+          style: {
+            display: "inline-block",
+            marginLeft: tocItem.indentLevel * 24
+          }
+        },
+        tocItem.text
+      ))));
+    }
+    case "to_do": {
+      const isChecked = ((_I = (_H = (_G = block.properties) == null ? void 0 : _G.checked) == null ? void 0 : _H[0]) == null ? void 0 : _I[0]) === "Yes";
+      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-to-do", blockId) }, /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-item" }, /* @__PURE__ */ React8.createElement(components.Checkbox, { blockId, isChecked }), /* @__PURE__ */ React8.createElement("div", { className: cs("notion-to-do-body", isChecked && `notion-to-do-checked`) }, /* @__PURE__ */ React8.createElement(Text, { value: (_J = block.properties) == null ? void 0 : _J.title, block }))), /* @__PURE__ */ React8.createElement("div", { className: "notion-to-do-children" }, children));
+    }
+    case "transclusion_container":
+      return /* @__PURE__ */ React8.createElement("div", { className: cs("notion-sync-block", blockId) }, children);
+    case "transclusion_reference":
+      return /* @__PURE__ */ React8.createElement(SyncPointerBlock, __spreadValues({ block, level: level + 1 }, props));
+    case "alias": {
+      const blockPointerId = (_L = (_K = block == null ? void 0 : block.format) == null ? void 0 : _K.alias_pointer) == null ? void 0 : _L.id;
+      const linkedBlock = (_M = recordMap.block[blockPointerId]) == null ? void 0 : _M.value;
+      if (!linkedBlock) {
+        console.info('"alias" missing block', blockPointerId);
+        return null;
+      }
+      return /* @__PURE__ */ React8.createElement(components.PageLink, { className: cs("notion-page-link", blockPointerId), href: mapPageUrl(blockPointerId) }, /* @__PURE__ */ React8.createElement(PageTitle, { block: linkedBlock }));
+    }
+    case "table":
+      return /* @__PURE__ */ React8.createElement("table", { className: cs("notion-simple-table", blockId) }, /* @__PURE__ */ React8.createElement("tbody", null, children));
+    case "table_row": {
+      const tableBlock = (_N = recordMap.block[block.parent_id]) == null ? void 0 : _N.value;
+      const order = (_O = tableBlock.format) == null ? void 0 : _O.table_block_column_order;
+      const formatMap = (_P = tableBlock.format) == null ? void 0 : _P.table_block_column_format;
+      const backgroundColor = (_Q = block.format) == null ? void 0 : _Q.block_color;
+      if (!tableBlock || !order)
+        return null;
+      return /* @__PURE__ */ React8.createElement("tr", { className: cs("notion-simple-table-row", backgroundColor && `notion-${backgroundColor}`, blockId) }, order.map((column) => {
+        var _a2, _b2, _c2;
+        const color = (_a2 = formatMap == null ? void 0 : formatMap[column]) == null ? void 0 : _a2.color;
+        return /* @__PURE__ */ React8.createElement(
+          "td",
+          {
+            key: column,
+            className: color ? `notion-${color}` : "",
+            style: {
+              width: ((_b2 = formatMap == null ? void 0 : formatMap[column]) == null ? void 0 : _b2.width) || 120
+            }
+          },
+          /* @__PURE__ */ React8.createElement("div", { className: "notion-simple-table-cell" }, /* @__PURE__ */ React8.createElement(Text, { value: ((_c2 = block.properties) == null ? void 0 : _c2[column]) || [["\u3164"]], block }))
+        );
+      }));
+    }
+    case "external_object_instance":
+      return /* @__PURE__ */ React8.createElement(EOI, { block, className: blockId });
+    default:
+      if (true)
+        console.info("Unsupported type " + block.type, JSON.stringify(block, null, 2));
+      return /* @__PURE__ */ React8.createElement("div", null);
+  }
+  return null;
+};
+
+// src/renderer.tsx
+var NotionRenderer = (_a) => {
+  var _b = _a, {
+    components,
+    recordMap,
+    mapPageUrl,
+    mapImageUrl,
+    searchNotion,
+    isShowingSearch,
+    onHideSearch,
+    fullPage,
+    rootPageId,
+    rootDomain,
+    darkMode,
+    previewImages,
+    forceCustomImages,
+    showCollectionViewDropdown,
+    linkTableTitleProperties,
+    isLinkCollectionToUrlProperty,
+    isImageZoomable = true,
+    showTableOfContents,
+    minTableOfContentsItems,
+    defaultPageIcon,
+    defaultPageCover,
+    defaultPageCoverPosition
+  } = _b, rest = __objRest(_b, [
+    "components",
+    "recordMap",
+    "mapPageUrl",
+    "mapImageUrl",
+    "searchNotion",
+    "isShowingSearch",
+    "onHideSearch",
+    "fullPage",
+    "rootPageId",
+    "rootDomain",
+    "darkMode",
+    "previewImages",
+    "forceCustomImages",
+    "showCollectionViewDropdown",
+    "linkTableTitleProperties",
+    "isLinkCollectionToUrlProperty",
+    "isImageZoomable",
+    "showTableOfContents",
+    "minTableOfContentsItems",
+    "defaultPageIcon",
+    "defaultPageCover",
+    "defaultPageCoverPosition"
+  ]);
+  const zoom = React9.useMemo(
+    () => typeof window !== "undefined" && mediumZoom({
+      background: "rgba(0, 0, 0, 0.8)",
+      minZoomScale: 2,
+      margin: getMediumZoomMargin()
+    }),
+    []
+  );
+  return /* @__PURE__ */ React9.createElement(
+    NotionContextProvider,
+    {
+      components,
+      recordMap,
+      mapPageUrl,
+      mapImageUrl,
+      searchNotion,
+      isShowingSearch,
+      onHideSearch,
+      fullPage,
+      rootPageId,
+      rootDomain,
+      darkMode,
+      previewImages,
+      forceCustomImages,
+      showCollectionViewDropdown,
+      linkTableTitleProperties,
+      isLinkCollectionToUrlProperty,
+      showTableOfContents,
+      minTableOfContentsItems,
+      defaultPageIcon,
+      defaultPageCover,
+      defaultPageCoverPosition,
+      zoom: isImageZoomable ? zoom : null
+    },
+    /* @__PURE__ */ React9.createElement(NotionBlockRenderer, __spreadValues({}, rest))
+  );
+};
+var NotionBlockRenderer = (_a) => {
+  var _b = _a, { level = 0, blockId } = _b, props = __objRest(_b, ["level", "blockId"]);
+  var _a2, _b2;
+  const { recordMap } = useNotionContext();
+  const id = blockId || Object.keys(recordMap.block)[0];
+  const block = (_a2 = recordMap.block[id]) == null ? void 0 : _a2.value;
+  if (!block) {
+    if (true)
+      console.warn("missing block", blockId);
+    return null;
+  }
+  return /* @__PURE__ */ React9.createElement(Block, __spreadValues({ key: id, level, block }, props), (_b2 = block == null ? void 0 : block.content) == null ? void 0 : _b2.map((contentBlockId) => /* @__PURE__ */ React9.createElement(NotionBlockRenderer, __spreadValues({ key: contentBlockId, blockId: contentBlockId, level: level + 1 }, props))));
+};
+function getMediumZoomMargin() {
+  const width = window.innerWidth;
+  if (width < 500)
+    return 8;
+  else if (width < 800)
+    return 20;
+  else if (width < 1280)
+    return 30;
+  else if (width < 1600)
+    return 40;
+  else if (width < 1920)
+    return 48;
+  else
+    return 72;
+}
 export {
   Breadcrumbs,
   Header,