@notion-headless-cms/fetch-markdown 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,374 @@
+import { ContentExtension, ContentFetcher } from "@notion-headless-cms/notion-orm";
+import { RendererFn } from "@notion-headless-cms/markdown-html";
+
+//#region ../../node_modules/.pnpm/@types+unist@3.0.3/node_modules/@types/unist/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or specifications
+ * implementing unist.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'unist' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data$1 {}
+/**
+ * One place in a source file.
+ */
+interface Point {
+  /**
+   * Line in a source file (1-indexed integer).
+   */
+  line: number;
+  /**
+   * Column in a source file (1-indexed integer).
+   */
+  column: number;
+  /**
+   * Character in a source file (0-indexed integer).
+   */
+  offset?: number | undefined;
+}
+/**
+ * Position of a node in a source document.
+ *
+ * A position is a range between two points.
+ */
+interface Position {
+  /**
+   * Place of the first character of the parsed source region.
+   */
+  start: Point;
+  /**
+   * Place of the first character after the parsed source region.
+   */
+  end: Point;
+}
+/**
+ * Abstract unist node.
+ *
+ * The syntactic unit in unist syntax trees are called nodes.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in markdown, a `thematicBreak` (`***`), is neither literal
+ * nor parent, but still a node.
+ */
+interface Node$1 {
+  /**
+   * Node type.
+   */
+  type: string;
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data$1 | undefined;
+  /**
+   * Position of a node in a source document.
+   *
+   * Nodes that are generated (not in the original source document) must not
+   * have a position.
+   */
+  position?: Position | undefined;
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@types+hast@3.0.4/node_modules/@types/hast/index.d.ts
+// ## Interfaces
+/**
+ * Info associated with hast nodes by the ecosystem.
+ *
+ * This space is guaranteed to never be specified by unist or hast.
+ * But you can use it in utilities and plugins to store data.
+ *
+ * This type can be augmented to register custom data.
+ * For example:
+ *
+ * ```ts
+ * declare module 'hast' {
+ *   interface Data {
+ *     // `someNode.data.myId` is typed as `number | undefined`
+ *     myId?: number | undefined
+ *   }
+ * }
+ * ```
+ */
+interface Data extends Data$1 {}
+/**
+ * Info associated with an element.
+ */
+interface Properties {
+  [PropertyName: string]: boolean | number | string | null | undefined | Array<string | number>;
+}
+// ## Content maps
+/**
+ * Union of registered hast nodes that can occur in {@link Element}.
+ *
+ * To register mote custom hast nodes, add them to {@link ElementContentMap}.
+ * They will be automatically added here.
+ */
+type ElementContent = ElementContentMap[keyof ElementContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Element}.
+ *
+ * For a union of all {@link Element} children, see {@link ElementContent}.
+ */
+interface ElementContentMap {
+  comment: Comment;
+  element: Element;
+  text: Text;
+}
+/**
+ * Union of registered hast nodes that can occur in {@link Root}.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap}.
+ * They will be automatically added here.
+ */
+type RootContent = RootContentMap[keyof RootContentMap];
+/**
+ * Registry of all hast nodes that can occur as children of {@link Root}.
+ *
+ * > 👉 **Note**: {@link Root} does not need to be an entire document.
+ * > it can also be a fragment.
+ *
+ * For a union of all {@link Root} children, see {@link RootContent}.
+ */
+interface RootContentMap {
+  comment: Comment;
+  doctype: Doctype;
+  element: Element;
+  text: Text;
+}
+// ## Abstract nodes
+/**
+ * Abstract hast node.
+ *
+ * This interface is supposed to be extended.
+ * If you can use {@link Literal} or {@link Parent}, you should.
+ * But for example in HTML, a `Doctype` is neither literal nor parent, but
+ * still a node.
+ *
+ * To register custom hast nodes, add them to {@link RootContentMap} and other
+ * places where relevant (such as {@link ElementContentMap}).
+ *
+ * For a union of all registered hast nodes, see {@link Nodes}.
+ */
+interface Node extends Node$1 {
+  /**
+   * Info from the ecosystem.
+   */
+  data?: Data | undefined;
+}
+/**
+ * Abstract hast node that contains the smallest possible value.
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast literals, see {@link Literals}.
+ */
+interface Literal extends Node {
+  /**
+   * Plain-text value.
+   */
+  value: string;
+}
+/**
+ * Abstract hast node that contains other hast nodes (*children*).
+ *
+ * This interface is supposed to be extended if you make custom hast nodes.
+ *
+ * For a union of all registered hast parents, see {@link Parents}.
+ */
+interface Parent extends Node {
+  /**
+   * List of children.
+   */
+  children: RootContent[];
+}
+// ## Concrete nodes
+/**
+ * HTML comment.
+ */
+interface Comment extends Literal {
+  /**
+   * Node type of HTML comments in hast.
+   */
+  type: "comment";
+  /**
+   * Data associated with the comment.
+   */
+  data?: CommentData | undefined;
+}
+/**
+ * Info associated with hast comments by the ecosystem.
+ */
+interface CommentData extends Data {}
+/**
+ * HTML document type.
+ */
+interface Doctype extends Node$1 {
+  /**
+   * Node type of HTML document types in hast.
+   */
+  type: "doctype";
+  /**
+   * Data associated with the doctype.
+   */
+  data?: DoctypeData | undefined;
+}
+/**
+ * Info associated with hast doctypes by the ecosystem.
+ */
+interface DoctypeData extends Data {}
+/**
+ * HTML element.
+ */
+interface Element extends Parent {
+  /**
+   * Node type of elements.
+   */
+  type: "element";
+  /**
+   * Tag name (such as `'body'`) of the element.
+   */
+  tagName: string;
+  /**
+   * Info associated with the element.
+   */
+  properties: Properties;
+  /**
+   * Children of element.
+   */
+  children: ElementContent[];
+  /**
+   * When the `tagName` field is `'template'`, a `content` field can be
+   * present.
+   */
+  content?: Root | undefined;
+  /**
+   * Data associated with the element.
+   */
+  data?: ElementData | undefined;
+}
+/**
+ * Info associated with hast elements by the ecosystem.
+ */
+interface ElementData extends Data {}
+/**
+ * Document fragment or a whole document.
+ *
+ * Should be used as the root of a tree and must not be used as a child.
+ *
+ * Can also be used as the value for the content field on a `'template'` element.
+ */
+interface Root extends Parent {
+  /**
+   * Node type of hast root.
+   */
+  type: "root";
+  /**
+   * Children of root.
+   */
+  children: RootContent[];
+  /**
+   * Data associated with the hast root.
+   */
+  data?: RootData | undefined;
+}
+/**
+ * Info associated with hast root nodes by the ecosystem.
+ */
+interface RootData extends Data {}
+/**
+ * HTML character data (plain text).
+ */
+interface Text extends Literal {
+  /**
+   * Node type of HTML character data (plain text) in hast.
+   */
+  type: "text";
+  /**
+   * Data associated with the text.
+   */
+  data?: TextData | undefined;
+}
+/**
+ * Info associated with hast texts by the ecosystem.
+ */
+interface TextData extends Data {}
+//#endregion
+//#region src/rehype-notion-tags.d.ts
+/**
+ * Notion enhanced markdown が含む独自タグを標準的な HTML 要素に変換する rehype プラグイン。
+ *
+ * 対象タグ (Notion API `GET /v1/pages/{id}/markdown` が出力するもの):
+ * - `<callout icon color>` → `<div class="nhc-callout nhc-color-…">`
+ * - `<span color underline>` → `<span class="nhc-color-…" data-underline>` (color 属性はブラウザ非対応)
+ * - `<mention-page url>` → `<a href data-mention="page">`
+ * - `<mention-date start [end]/>` → `<time datetime>` (range なら from–to を結合表示)
+ * - `<page url>` / `<database url>` → `<a href data-link-type>` (リンク表現に統一)
+ * - `<columns>` → `<div class="nhc-columns">`、`<column>` → `<div class="nhc-column">`
+ * - `<file src>` → `<a href download>` (画像/動画系の判定はファイル拡張子で行う v1 では一律リンク)
+ * - `<table_of_contents/>` → `<nav class="nhc-toc" data-placeholder>` (TOC 生成は別途)
+ *
+ * 未知の独自タグは class を付けるだけにしておく (除去すると内容が消えるため)。
+ */
+declare function rehypeNotionTags(): (tree: Root) => void;
+//#endregion
+//#region src/renderer.d.ts
+/**
+ * Notion `GET /v1/pages/{id}/markdown` が返す **enhanced markdown** を HTML に変換する。
+ * `@notion-headless-cms/fetch-markdown` の `markdownFetcher()` を使う時の標準 renderer。
+ *
+ * 標準 markdown 部分 (`#`, `**`, lists, links, GFM テーブル等) に加え、
+ * Notion 独自タグ (`<callout>` / `<span color>` / `<mention-page>` / `<mention-date>` /
+ * `<page>` / `<database>` / `<columns>` / `<column>` / `<file>` / `<table_of_contents/>`)
+ * を `nhc-*` クラス付きの素直な HTML に変換する。スタイリングは利用側で当てる。
+ *
+ * インライン数式 `$\`...\`$` は Notion 固有の記法 (バックティックでエスケープ) のため、
+ * パイプライン前に `$...$` に正規化してから remark-math が処理する。
+ *
+ * 画像 URL を `imageProxyBase` でプロキシ化したい場合は `cacheImage` を渡す。
+ * 内部で `markdown-html` の `rehypeImageCache` を経由する。
+ */
+declare const notionMarkdownRenderer: RendererFn;
+/**
+ * `ContentExtension` の `getMarkdownPlugins()` をパイプラインへ注入した `RendererFn` を生成する。
+ * katex / shiki など非同期プラグインも含む拡張を CMS の `renderer` オプションで使う場合に利用する。
+ *
+ * @example
+ * ```ts
+ * import { createNotionMarkdownRenderer } from "@notion-headless-cms/fetch-markdown";
+ * import { notionKatex } from "@notion-headless-cms/notion-katex";
+ *
+ * createClient({ renderer: createNotionMarkdownRenderer([notionKatex()]) });
+ * ```
+ */
+declare function createNotionMarkdownRenderer(extensions: ContentExtension[]): RendererFn;
+//#endregion
+//#region src/index.d.ts
+type MarkdownFetcherOptions = Record<string, never>;
+/**
+ * Notion Markdown 取得 API (`GET /v1/pages/{id}/markdown`) を公式 SDK 経由で
+ * 1 リクエストで叩く取得戦略。
+ * Cloudflare Workers Free プランの 50 subrequest/invocation 上限に引っかからない。
+ *
+ * - `loadMarkdown`: 公式 SDK の `client.pages.retrieveMarkdown` を使う。
+ *   リトライ・レート制限・Notion-Version は notion-orm の Client 構築側で固定。
+ * - `loadNotionBlocks`: 実装しない (`source/blocks_unsupported`)。
+ *   React 描画には `@notion-headless-cms/fetch-markdown/react` の `<Renderer />` を使う。
+ */
+declare function markdownFetcher(_opts?: MarkdownFetcherOptions): ContentFetcher;
+//#endregion
+export { MarkdownFetcherOptions, createNotionMarkdownRenderer, markdownFetcher, notionMarkdownRenderer, rehypeNotionTags };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,235 @@
+import { t as preprocessNotionMarkdown } from "./preprocess-DVyL8D0Q.mjs";
+import { fetchPageMarkdown } from "@notion-headless-cms/notion-orm";
+import { visit } from "unist-util-visit";
+import { rehypeImageCache } from "@notion-headless-cms/markdown-html";
+import rehypeRaw from "rehype-raw";
+import rehypeStringify from "rehype-stringify";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+//#region src/rehype-notion-tags.ts
+/**
+* Notion enhanced markdown が含む独自タグを標準的な HTML 要素に変換する rehype プラグイン。
+*
+* 対象タグ (Notion API `GET /v1/pages/{id}/markdown` が出力するもの):
+* - `<callout icon color>` → `<div class="nhc-callout nhc-color-…">`
+* - `<span color underline>` → `<span class="nhc-color-…" data-underline>` (color 属性はブラウザ非対応)
+* - `<mention-page url>` → `<a href data-mention="page">`
+* - `<mention-date start [end]/>` → `<time datetime>` (range なら from–to を結合表示)
+* - `<page url>` / `<database url>` → `<a href data-link-type>` (リンク表現に統一)
+* - `<columns>` → `<div class="nhc-columns">`、`<column>` → `<div class="nhc-column">`
+* - `<file src>` → `<a href download>` (画像/動画系の判定はファイル拡張子で行う v1 では一律リンク)
+* - `<table_of_contents/>` → `<nav class="nhc-toc" data-placeholder>` (TOC 生成は別途)
+*
+* 未知の独自タグは class を付けるだけにしておく (除去すると内容が消えるため)。
+*/
+function rehypeNotionTags() {
+	return (tree) => {
+		visit(tree, "element", (node) => {
+			const name = node.tagName;
+			switch (name) {
+				case "callout":
+					transformCallout(node);
+					break;
+				case "span":
+					transformSpan(node);
+					break;
+				case "mention-page":
+					transformMentionPage(node);
+					break;
+				case "mention-date":
+					transformMentionDate(node);
+					break;
+				case "page":
+					transformPageLink(node, "page");
+					break;
+				case "database":
+					transformPageLink(node, "database");
+					break;
+				case "columns":
+					node.tagName = "div";
+					addClass(node, "nhc-columns");
+					break;
+				case "column":
+					node.tagName = "div";
+					addClass(node, "nhc-column");
+					break;
+				case "file":
+					transformFile(node);
+					break;
+				case "table_of_contents":
+					node.tagName = "nav";
+					addClass(node, "nhc-toc");
+					setAttr(node, "data-placeholder", "true");
+					node.children = [];
+					break;
+				default:
+					if (name.includes("-")) addClass(node, `nhc-${name}`);
+					break;
+			}
+		});
+	};
+}
+function transformCallout(node) {
+	const icon = getAttr(node, "icon");
+	const color = getAttr(node, "color");
+	node.tagName = "div";
+	node.properties = { ...node.properties };
+	delete node.properties.icon;
+	delete node.properties.color;
+	addClass(node, "nhc-callout");
+	if (color) addClass(node, `nhc-color-${color}`);
+	if (icon) node.children = [{
+		type: "element",
+		tagName: "span",
+		properties: { className: ["nhc-callout-icon"] },
+		children: [{
+			type: "text",
+			value: icon
+		}]
+	}, {
+		type: "element",
+		tagName: "div",
+		properties: { className: ["nhc-callout-body"] },
+		children: node.children
+	}];
+}
+function transformSpan(node) {
+	const color = getAttr(node, "color");
+	const underline = getAttr(node, "underline");
+	if (node.properties) {
+		delete node.properties.color;
+		delete node.properties.underline;
+	}
+	if (color) addClass(node, `nhc-color-${color}`);
+	if (underline === "true") addClass(node, "nhc-underline");
+}
+function transformMentionPage(node) {
+	const url = getAttr(node, "url");
+	node.tagName = "a";
+	node.properties = { className: ["nhc-mention", "nhc-mention-page"] };
+	if (url) node.properties.href = url;
+	setAttr(node, "data-mention", "page");
+}
+function transformMentionDate(node) {
+	const start = getAttr(node, "start");
+	const end = getAttr(node, "end");
+	node.tagName = "time";
+	node.properties = { className: ["nhc-mention", "nhc-mention-date"] };
+	if (start) node.properties.dateTime = start;
+	node.children = [{
+		type: "text",
+		value: end != null ? `${start} – ${end}` : start ?? ""
+	}];
+}
+function transformPageLink(node, kind) {
+	const url = getAttr(node, "url");
+	node.tagName = "a";
+	node.properties = { className: ["nhc-link", `nhc-link-${kind}`] };
+	if (url) node.properties.href = url;
+	setAttr(node, "data-link-type", kind);
+}
+function transformFile(node) {
+	const src = getAttr(node, "src");
+	node.tagName = "a";
+	node.properties = { className: ["nhc-file"] };
+	if (src) {
+		node.properties.href = src;
+		node.properties.download = true;
+	}
+}
+function getAttr(node, name) {
+	const v = node.properties?.[name];
+	if (v == null) return void 0;
+	if (typeof v === "string") return v;
+	if (typeof v === "number" || typeof v === "boolean") return String(v);
+	if (Array.isArray(v)) return v.join(" ");
+}
+function setAttr(node, name, value) {
+	node.properties = {
+		...node.properties ?? {},
+		[name]: value
+	};
+}
+function addClass(node, cls) {
+	if (!node.properties) node.properties = {};
+	const props = node.properties;
+	const current = props.className;
+	if (Array.isArray(current)) {
+		if (!current.includes(cls)) current.push(cls);
+	} else if (typeof current === "string") props.className = current ? `${current} ${cls}` : cls;
+	else props.className = [cls];
+}
+//#endregion
+//#region src/renderer.ts
+/**
+* Notion `GET /v1/pages/{id}/markdown` が返す **enhanced markdown** を HTML に変換する。
+* `@notion-headless-cms/fetch-markdown` の `markdownFetcher()` を使う時の標準 renderer。
+*
+* 標準 markdown 部分 (`#`, `**`, lists, links, GFM テーブル等) に加え、
+* Notion 独自タグ (`<callout>` / `<span color>` / `<mention-page>` / `<mention-date>` /
+* `<page>` / `<database>` / `<columns>` / `<column>` / `<file>` / `<table_of_contents/>`)
+* を `nhc-*` クラス付きの素直な HTML に変換する。スタイリングは利用側で当てる。
+*
+* インライン数式 `$\`...\`$` は Notion 固有の記法 (バックティックでエスケープ) のため、
+* パイプライン前に `$...$` に正規化してから remark-math が処理する。
+*
+* 画像 URL を `imageProxyBase` でプロキシ化したい場合は `cacheImage` を渡す。
+* 内部で `markdown-html` の `rehypeImageCache` を経由する。
+*/
+const notionMarkdownRenderer = async (markdown, options = {}) => {
+	const { imageProxyBase = "/api/images", cacheImage, remarkPlugins = [], rehypePlugins = [] } = options;
+	const normalized = preprocessNotionMarkdown(markdown);
+	const file = await unified().use(remarkParse).use(remarkGfm).use(remarkMath).use(remarkPlugins).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(rehypeNotionTags).use(rehypeImageCache, {
+		imageProxyBase,
+		cacheImage
+	}).use(rehypePlugins).use(rehypeStringify).process(normalized);
+	return String(file);
+};
+/**
+* `ContentExtension` の `getMarkdownPlugins()` をパイプラインへ注入した `RendererFn` を生成する。
+* katex / shiki など非同期プラグインも含む拡張を CMS の `renderer` オプションで使う場合に利用する。
+*
+* @example
+* ```ts
+* import { createNotionMarkdownRenderer } from "@notion-headless-cms/fetch-markdown";
+* import { notionKatex } from "@notion-headless-cms/notion-katex";
+*
+* createClient({ renderer: createNotionMarkdownRenderer([notionKatex()]) });
+* ```
+*/
+function createNotionMarkdownRenderer(extensions) {
+	const extraRemark = extensions.flatMap((e) => e.getMarkdownPlugins?.()?.remarkPlugins ?? []);
+	const extraRehype = extensions.flatMap((e) => e.getMarkdownPlugins?.()?.rehypePlugins ?? []);
+	return (markdown, options = {}) => notionMarkdownRenderer(markdown, {
+		...options,
+		remarkPlugins: [...options.remarkPlugins ?? [], ...extraRemark],
+		rehypePlugins: [...options.rehypePlugins ?? [], ...extraRehype]
+	});
+}
+//#endregion
+//#region src/index.ts
+/**
+* Notion Markdown 取得 API (`GET /v1/pages/{id}/markdown`) を公式 SDK 経由で
+* 1 リクエストで叩く取得戦略。
+* Cloudflare Workers Free プランの 50 subrequest/invocation 上限に引っかからない。
+*
+* - `loadMarkdown`: 公式 SDK の `client.pages.retrieveMarkdown` を使う。
+*   リトライ・レート制限・Notion-Version は notion-orm の Client 構築側で固定。
+* - `loadNotionBlocks`: 実装しない (`source/blocks_unsupported`)。
+*   React 描画には `@notion-headless-cms/fetch-markdown/react` の `<Renderer />` を使う。
+*/
+function markdownFetcher(_opts = {}) {
+	return {
+		kind: "markdown",
+		async loadMarkdown(client, pageId) {
+			return fetchPageMarkdown(client, pageId);
+		}
+	};
+}
+//#endregion
+export { createNotionMarkdownRenderer, markdownFetcher, notionMarkdownRenderer, rehypeNotionTags };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/rehype-notion-tags.ts","../src/renderer.ts","../src/index.ts"],"sourcesContent":["import type { Element, ElementContent, Root, Text } from \"hast\";\nimport { visit } from \"unist-util-visit\";\n\n/**\n * Notion enhanced markdown が含む独自タグを標準的な HTML 要素に変換する rehype プラグイン。\n *\n * 対象タグ (Notion API `GET /v1/pages/{id}/markdown` が出力するもの):\n * - `<callout icon color>` → `<div class=\"nhc-callout nhc-color-…\">`\n * - `<span color underline>` → `<span class=\"nhc-color-…\" data-underline>` (color 属性はブラウザ非対応)\n * - `<mention-page url>` → `<a href data-mention=\"page\">`\n * - `<mention-date start [end]/>` → `<time datetime>` (range なら from–to を結合表示)\n * - `<page url>` / `<database url>` → `<a href data-link-type>` (リンク表現に統一)\n * - `<columns>` → `<div class=\"nhc-columns\">`、`<column>` → `<div class=\"nhc-column\">`\n * - `<file src>` → `<a href download>` (画像/動画系の判定はファイル拡張子で行う v1 では一律リンク)\n * - `<table_of_contents/>` → `<nav class=\"nhc-toc\" data-placeholder>` (TOC 生成は別途)\n *\n * 未知の独自タグは class を付けるだけにしておく (除去すると内容が消えるため)。\n */\nexport function rehypeNotionTags() {\n  return (tree: Root) => {\n    visit(tree, \"element\", (node: Element) => {\n      const name = node.tagName;\n      switch (name) {\n        case \"callout\":\n          transformCallout(node);\n          break;\n        case \"span\":\n          transformSpan(node);\n          break;\n        case \"mention-page\":\n          transformMentionPage(node);\n          break;\n        case \"mention-date\":\n          transformMentionDate(node);\n          break;\n        case \"page\":\n          transformPageLink(node, \"page\");\n          break;\n        case \"database\":\n          transformPageLink(node, \"database\");\n          break;\n        case \"columns\":\n          node.tagName = \"div\";\n          addClass(node, \"nhc-columns\");\n          break;\n        case \"column\":\n          node.tagName = \"div\";\n          addClass(node, \"nhc-column\");\n          break;\n        case \"file\":\n          transformFile(node);\n          break;\n        case \"table_of_contents\":\n          node.tagName = \"nav\";\n          addClass(node, \"nhc-toc\");\n          setAttr(node, \"data-placeholder\", \"true\");\n          node.children = [];\n          break;\n        default:\n          // 他の独自タグはそのまま (将来の Notion 拡張に備える)。\n          if (name.includes(\"-\")) addClass(node, `nhc-${name}`);\n          break;\n      }\n    });\n  };\n}\n\nfunction transformCallout(node: Element): void {\n  const icon = getAttr(node, \"icon\");\n  const color = getAttr(node, \"color\");\n  node.tagName = \"div\";\n  node.properties = { ...node.properties };\n  delete node.properties.icon;\n  delete node.properties.color;\n  addClass(node, \"nhc-callout\");\n  if (color) addClass(node, `nhc-color-${color}`);\n  if (icon) {\n    const iconEl: Element = {\n      type: \"element\",\n      tagName: \"span\",\n      properties: { className: [\"nhc-callout-icon\"] },\n      children: [{ type: \"text\", value: icon } satisfies Text],\n    };\n    const body: Element = {\n      type: \"element\",\n      tagName: \"div\",\n      properties: { className: [\"nhc-callout-body\"] },\n      children: node.children as ElementContent[],\n    };\n    node.children = [iconEl, body];\n  }\n}\n\nfunction transformSpan(node: Element): void {\n  const color = getAttr(node, \"color\");\n  const underline = getAttr(node, \"underline\");\n  // 標準でない属性は剥がしておかないと React/HTML 警告が出る。\n  if (node.properties) {\n    delete node.properties.color;\n    delete node.properties.underline;\n  }\n  if (color) addClass(node, `nhc-color-${color}`);\n  if (underline === \"true\") addClass(node, \"nhc-underline\");\n}\n\nfunction transformMentionPage(node: Element): void {\n  const url = getAttr(node, \"url\");\n  node.tagName = \"a\";\n  node.properties = { className: [\"nhc-mention\", \"nhc-mention-page\"] };\n  if (url) (node.properties as Record<string, unknown>).href = url;\n  setAttr(node, \"data-mention\", \"page\");\n}\n\nfunction transformMentionDate(node: Element): void {\n  const start = getAttr(node, \"start\");\n  const end = getAttr(node, \"end\");\n  node.tagName = \"time\";\n  node.properties = { className: [\"nhc-mention\", \"nhc-mention-date\"] };\n  if (start) (node.properties as Record<string, unknown>).dateTime = start;\n  const label = end != null ? `${start} – ${end}` : (start ?? \"\");\n  node.children = [{ type: \"text\", value: label } satisfies Text];\n}\n\nfunction transformPageLink(node: Element, kind: \"page\" | \"database\"): void {\n  const url = getAttr(node, \"url\");\n  node.tagName = \"a\";\n  // children を保持して見出し相当のリンクにする。\n  node.properties = { className: [\"nhc-link\", `nhc-link-${kind}`] };\n  if (url) (node.properties as Record<string, unknown>).href = url;\n  setAttr(node, \"data-link-type\", kind);\n}\n\nfunction transformFile(node: Element): void {\n  const src = getAttr(node, \"src\");\n  node.tagName = \"a\";\n  node.properties = { className: [\"nhc-file\"] };\n  if (src) {\n    (node.properties as Record<string, unknown>).href = src;\n    (node.properties as Record<string, unknown>).download = true;\n  }\n}\n\nfunction getAttr(node: Element, name: string): string | undefined {\n  const v = node.properties?.[name];\n  if (v == null) return undefined;\n  if (typeof v === \"string\") return v;\n  if (typeof v === \"number\" || typeof v === \"boolean\") return String(v);\n  if (Array.isArray(v)) return v.join(\" \");\n  return undefined;\n}\n\nfunction setAttr(node: Element, name: string, value: string): void {\n  node.properties = { ...(node.properties ?? {}), [name]: value };\n}\n\nfunction addClass(node: Element, cls: string): void {\n  if (!node.properties) node.properties = {};\n  const props = node.properties;\n  const current = props.className;\n  if (Array.isArray(current)) {\n    if (!current.includes(cls)) current.push(cls);\n  } else if (typeof current === \"string\") {\n    props.className = current ? `${current} ${cls}` : cls;\n  } else {\n    props.className = [cls];\n  }\n}\n","import {\n  type RendererFn,\n  rehypeImageCache,\n} from \"@notion-headless-cms/markdown-html\";\nimport type { ContentExtension } from \"@notion-headless-cms/notion-orm\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeStringify from \"rehype-stringify\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkParse from \"remark-parse\";\nimport remarkRehype from \"remark-rehype\";\nimport type { PluggableList } from \"unified\";\nimport { unified } from \"unified\";\nimport { preprocessNotionMarkdown } from \"./preprocess\";\nimport { rehypeNotionTags } from \"./rehype-notion-tags\";\n\n/**\n * Notion `GET /v1/pages/{id}/markdown` が返す **enhanced markdown** を HTML に変換する。\n * `@notion-headless-cms/fetch-markdown` の `markdownFetcher()` を使う時の標準 renderer。\n *\n * 標準 markdown 部分 (`#`, `**`, lists, links, GFM テーブル等) に加え、\n * Notion 独自タグ (`<callout>` / `<span color>` / `<mention-page>` / `<mention-date>` /\n * `<page>` / `<database>` / `<columns>` / `<column>` / `<file>` / `<table_of_contents/>`)\n * を `nhc-*` クラス付きの素直な HTML に変換する。スタイリングは利用側で当てる。\n *\n * インライン数式 `$\\`...\\`$` は Notion 固有の記法 (バックティックでエスケープ) のため、\n * パイプライン前に `$...$` に正規化してから remark-math が処理する。\n *\n * 画像 URL を `imageProxyBase` でプロキシ化したい場合は `cacheImage` を渡す。\n * 内部で `markdown-html` の `rehypeImageCache` を経由する。\n */\nexport const notionMarkdownRenderer: RendererFn = async (\n  markdown,\n  options = {},\n) => {\n  const {\n    imageProxyBase = \"/api/images\",\n    cacheImage,\n    remarkPlugins = [],\n    rehypePlugins = [],\n  } = options;\n\n  const normalized = preprocessNotionMarkdown(markdown);\n\n  const processor = unified()\n    .use(remarkParse)\n    .use(remarkGfm)\n    .use(remarkMath)\n    .use(remarkPlugins as PluggableList)\n    // Notion 独自タグは raw HTML として markdown に紛れ込んでくるので、\n    // allowDangerousHtml + rehype-raw でちゃんと hast に展開してから変換する。\n    .use(remarkRehype, { allowDangerousHtml: true })\n    .use(rehypeRaw)\n    .use(rehypeNotionTags)\n    .use(rehypeImageCache, { imageProxyBase, cacheImage })\n    .use(rehypePlugins as PluggableList)\n    .use(rehypeStringify);\n\n  const file = await processor.process(normalized);\n  return String(file);\n};\n\n/**\n * `ContentExtension` の `getMarkdownPlugins()` をパイプラインへ注入した `RendererFn` を生成する。\n * katex / shiki など非同期プラグインも含む拡張を CMS の `renderer` オプションで使う場合に利用する。\n *\n * @example\n * ```ts\n * import { createNotionMarkdownRenderer } from \"@notion-headless-cms/fetch-markdown\";\n * import { notionKatex } from \"@notion-headless-cms/notion-katex\";\n *\n * createClient({ renderer: createNotionMarkdownRenderer([notionKatex()]) });\n * ```\n */\nexport function createNotionMarkdownRenderer(\n  extensions: ContentExtension[],\n): RendererFn {\n  const extraRemark = extensions.flatMap(\n    (e) => e.getMarkdownPlugins?.()?.remarkPlugins ?? [],\n  );\n  const extraRehype = extensions.flatMap(\n    (e) => e.getMarkdownPlugins?.()?.rehypePlugins ?? [],\n  );\n  return (markdown, options = {}) =>\n    notionMarkdownRenderer(markdown, {\n      ...options,\n      remarkPlugins: [\n        ...(options.remarkPlugins ?? []),\n        ...(extraRemark as PluggableList),\n      ],\n      rehypePlugins: [\n        ...(options.rehypePlugins ?? []),\n        ...(extraRehype as PluggableList),\n      ],\n    });\n}\n","import type { ContentFetcher } from \"@notion-headless-cms/notion-orm\";\nimport { fetchPageMarkdown } from \"@notion-headless-cms/notion-orm\";\n\nexport { rehypeNotionTags } from \"./rehype-notion-tags\";\nexport {\n  createNotionMarkdownRenderer,\n  notionMarkdownRenderer,\n} from \"./renderer\";\n\nexport type MarkdownFetcherOptions = Record<string, never>;\n\n/**\n * Notion Markdown 取得 API (`GET /v1/pages/{id}/markdown`) を公式 SDK 経由で\n * 1 リクエストで叩く取得戦略。\n * Cloudflare Workers Free プランの 50 subrequest/invocation 上限に引っかからない。\n *\n * - `loadMarkdown`: 公式 SDK の `client.pages.retrieveMarkdown` を使う。\n *   リトライ・レート制限・Notion-Version は notion-orm の Client 構築側で固定。\n * - `loadNotionBlocks`: 実装しない (`source/blocks_unsupported`)。\n *   React 描画には `@notion-headless-cms/fetch-markdown/react` の `<Renderer />` を使う。\n */\nexport function markdownFetcher(\n  _opts: MarkdownFetcherOptions = {},\n): ContentFetcher {\n  return {\n    kind: \"markdown\",\n    async loadMarkdown(client, pageId) {\n      return fetchPageMarkdown(client, pageId);\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,mBAAmB;CACjC,QAAQ,SAAe;EACrB,MAAM,MAAM,YAAY,SAAkB;GACxC,MAAM,OAAO,KAAK;GAClB,QAAQ,MAAR;IACE,KAAK;KACH,iBAAiB,IAAI;KACrB;IACF,KAAK;KACH,cAAc,IAAI;KAClB;IACF,KAAK;KACH,qBAAqB,IAAI;KACzB;IACF,KAAK;KACH,qBAAqB,IAAI;KACzB;IACF,KAAK;KACH,kBAAkB,MAAM,MAAM;KAC9B;IACF,KAAK;KACH,kBAAkB,MAAM,UAAU;KAClC;IACF,KAAK;KACH,KAAK,UAAU;KACf,SAAS,MAAM,aAAa;KAC5B;IACF,KAAK;KACH,KAAK,UAAU;KACf,SAAS,MAAM,YAAY;KAC3B;IACF,KAAK;KACH,cAAc,IAAI;KAClB;IACF,KAAK;KACH,KAAK,UAAU;KACf,SAAS,MAAM,SAAS;KACxB,QAAQ,MAAM,oBAAoB,MAAM;KACxC,KAAK,WAAW,CAAC;KACjB;IACF;KAEE,IAAI,KAAK,SAAS,GAAG,GAAG,SAAS,MAAM,OAAO,MAAM;KACpD;GACJ;EACF,CAAC;CACH;AACF;AAEA,SAAS,iBAAiB,MAAqB;CAC7C,MAAM,OAAO,QAAQ,MAAM,MAAM;CACjC,MAAM,QAAQ,QAAQ,MAAM,OAAO;CACnC,KAAK,UAAU;CACf,KAAK,aAAa,EAAE,GAAG,KAAK,WAAW;CACvC,OAAO,KAAK,WAAW;CACvB,OAAO,KAAK,WAAW;CACvB,SAAS,MAAM,aAAa;CAC5B,IAAI,OAAO,SAAS,MAAM,aAAa,OAAO;CAC9C,IAAI,MAaF,KAAK,WAAW,CAAC;EAXf,MAAM;EACN,SAAS;EACT,YAAY,EAAE,WAAW,CAAC,kBAAkB,EAAE;EAC9C,UAAU,CAAC;GAAE,MAAM;GAAQ,OAAO;EAAK,CAAgB;CAQnC,GAAG;EALvB,MAAM;EACN,SAAS;EACT,YAAY,EAAE,WAAW,CAAC,kBAAkB,EAAE;EAC9C,UAAU,KAAK;CAEW,CAAC;AAEjC;AAEA,SAAS,cAAc,MAAqB;CAC1C,MAAM,QAAQ,QAAQ,MAAM,OAAO;CACnC,MAAM,YAAY,QAAQ,MAAM,WAAW;CAE3C,IAAI,KAAK,YAAY;EACnB,OAAO,KAAK,WAAW;EACvB,OAAO,KAAK,WAAW;CACzB;CACA,IAAI,OAAO,SAAS,MAAM,aAAa,OAAO;CAC9C,IAAI,cAAc,QAAQ,SAAS,MAAM,eAAe;AAC1D;AAEA,SAAS,qBAAqB,MAAqB;CACjD,MAAM,MAAM,QAAQ,MAAM,KAAK;CAC/B,KAAK,UAAU;CACf,KAAK,aAAa,EAAE,WAAW,CAAC,eAAe,kBAAkB,EAAE;CACnE,IAAI,KAAK,KAAM,WAAuC,OAAO;CAC7D,QAAQ,MAAM,gBAAgB,MAAM;AACtC;AAEA,SAAS,qBAAqB,MAAqB;CACjD,MAAM,QAAQ,QAAQ,MAAM,OAAO;CACnC,MAAM,MAAM,QAAQ,MAAM,KAAK;CAC/B,KAAK,UAAU;CACf,KAAK,aAAa,EAAE,WAAW,CAAC,eAAe,kBAAkB,EAAE;CACnE,IAAI,OAAO,KAAM,WAAuC,WAAW;CAEnE,KAAK,WAAW,CAAC;EAAE,MAAM;EAAQ,OADnB,OAAO,OAAO,GAAG,MAAM,KAAK,QAAS,SAAS;CACd,CAAgB;AAChE;AAEA,SAAS,kBAAkB,MAAe,MAAiC;CACzE,MAAM,MAAM,QAAQ,MAAM,KAAK;CAC/B,KAAK,UAAU;CAEf,KAAK,aAAa,EAAE,WAAW,CAAC,YAAY,YAAY,MAAM,EAAE;CAChE,IAAI,KAAK,KAAM,WAAuC,OAAO;CAC7D,QAAQ,MAAM,kBAAkB,IAAI;AACtC;AAEA,SAAS,cAAc,MAAqB;CAC1C,MAAM,MAAM,QAAQ,MAAM,KAAK;CAC/B,KAAK,UAAU;CACf,KAAK,aAAa,EAAE,WAAW,CAAC,UAAU,EAAE;CAC5C,IAAI,KAAK;EACP,KAAM,WAAuC,OAAO;EACpD,KAAM,WAAuC,WAAW;CAC1D;AACF;AAEA,SAAS,QAAQ,MAAe,MAAkC;CAChE,MAAM,IAAI,KAAK,aAAa;CAC5B,IAAI,KAAK,MAAM,OAAO,KAAA;CACtB,IAAI,OAAO,MAAM,UAAU,OAAO;CAClC,IAAI,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,OAAO,CAAC;CACpE,IAAI,MAAM,QAAQ,CAAC,GAAG,OAAO,EAAE,KAAK,GAAG;AAEzC;AAEA,SAAS,QAAQ,MAAe,MAAc,OAAqB;CACjE,KAAK,aAAa;EAAE,GAAI,KAAK,cAAc,CAAC;GAAK,OAAO;CAAM;AAChE;AAEA,SAAS,SAAS,MAAe,KAAmB;CAClD,IAAI,CAAC,KAAK,YAAY,KAAK,aAAa,CAAC;CACzC,MAAM,QAAQ,KAAK;CACnB,MAAM,UAAU,MAAM;CACtB,IAAI,MAAM,QAAQ,OAAO;MACnB,CAAC,QAAQ,SAAS,GAAG,GAAG,QAAQ,KAAK,GAAG;CAAA,OACvC,IAAI,OAAO,YAAY,UAC5B,MAAM,YAAY,UAAU,GAAG,QAAQ,GAAG,QAAQ;MAElD,MAAM,YAAY,CAAC,GAAG;AAE1B;;;;;;;;;;;;;;;;;;ACvIA,MAAa,yBAAqC,OAChD,UACA,UAAU,CAAC,MACR;CACH,MAAM,EACJ,iBAAiB,eACjB,YACA,gBAAgB,CAAC,GACjB,gBAAgB,CAAC,MACf;CAEJ,MAAM,aAAa,yBAAyB,QAAQ;CAgBpD,MAAM,OAAO,MAdK,QAAQ,EACvB,IAAI,WAAW,EACf,IAAI,SAAS,EACb,IAAI,UAAU,EACd,IAAI,aAA8B,EAGlC,IAAI,cAAc,EAAE,oBAAoB,KAAK,CAAC,EAC9C,IAAI,SAAS,EACb,IAAI,gBAAgB,EACpB,IAAI,kBAAkB;EAAE;EAAgB;CAAW,CAAC,EACpD,IAAI,aAA8B,EAClC,IAAI,eAEoB,EAAE,QAAQ,UAAU;CAC/C,OAAO,OAAO,IAAI;AACpB;;;;;;;;;;;;;AAcA,SAAgB,6BACd,YACY;CACZ,MAAM,cAAc,WAAW,SAC5B,MAAM,EAAE,qBAAqB,GAAG,iBAAiB,CAAC,CACrD;CACA,MAAM,cAAc,WAAW,SAC5B,MAAM,EAAE,qBAAqB,GAAG,iBAAiB,CAAC,CACrD;CACA,QAAQ,UAAU,UAAU,CAAC,MAC3B,uBAAuB,UAAU;EAC/B,GAAG;EACH,eAAe,CACb,GAAI,QAAQ,iBAAiB,CAAC,GAC9B,GAAI,WACN;EACA,eAAe,CACb,GAAI,QAAQ,iBAAiB,CAAC,GAC9B,GAAI,WACN;CACF,CAAC;AACL;;;;;;;;;;;;;AC1EA,SAAgB,gBACd,QAAgC,CAAC,GACjB;CAChB,OAAO;EACL,MAAM;EACN,MAAM,aAAa,QAAQ,QAAQ;GACjC,OAAO,kBAAkB,QAAQ,MAAM;EACzC;CACF;AACF"}

package/dist/preprocess-DVyL8D0Q.mjs

@@ -0,0 +1,38 @@
+//#region src/preprocess.ts
+/**
+* Notion enhanced markdown を remark に通す前に整える。
+*
+* 1. インライン数式 `` $`expression`$ `` → `$expression$` に正規化 (remark-math 互換)
+* 2. ブロックレベル Notion タグ (`<callout>` / `<details>` / `<columns>` / `<column>` /
+*    `<summary>` / `<table_of_contents/>`) の前後に空行を確保する。
+*    CommonMark は「閉じタグ直後に空行が無いと以降を HTML ブロック扱い」にするため、
+*    Notion API が出力する `</callout>\n# 見出し` の形だと heading が変換されない。
+* 3. `</table>` の後に空行を確保する。
+*    Notion API が `<table>` タグ形式（CommonMark type-6 HTML ブロック）でテーブルを出力するため、
+*    `</table>` の直後に空行がないと後続の見出し等が HTML ブロックの一部として扱われる。
+*    テーブル内部に空行を入れると HTML ブロックが途切れてしまうため後ろのみに追加する。
+* 4. `<unknown .../>` の前後に空行を確保する。
+*    未対応ブロック型（bookmark / embed 等）を表すタグが CommonMark type-7 HTML ブロックとして
+*    解釈され、後続の見出しを取り込んでしまうことを防ぐ。
+*/
+function preprocessNotionMarkdown(md) {
+	let out = md.replace(/\$`([^`]+)`\$/g, (_, expr) => `$${expr}$`);
+	for (const tag of [
+		"callout",
+		"details",
+		"summary",
+		"columns",
+		"column"
+	]) {
+		out = out.replace(new RegExp(`(<${tag}(?:\\s[^>]*)?>)`, "g"), "\n\n$1\n\n");
+		out = out.replace(new RegExp(`(</${tag}>)`, "g"), "\n\n$1\n\n");
+	}
+	out = out.replace(/(<table_of_contents\s*\/>)/g, "\n\n$1\n\n");
+	out = out.replace(/(<\/table>)/g, "$1\n\n");
+	out = out.replace(/(<unknown\s[^>]*\/>)/g, "\n\n$1\n\n");
+	return out;
+}
+//#endregion
+export { preprocessNotionMarkdown as t };
+
+//# sourceMappingURL=preprocess-DVyL8D0Q.mjs.map

package/dist/preprocess-DVyL8D0Q.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"preprocess-DVyL8D0Q.mjs","names":[],"sources":["../src/preprocess.ts"],"sourcesContent":["/**\n * Notion enhanced markdown を remark に通す前に整える。\n *\n * 1. インライン数式 `` $`expression`$ `` → `$expression$` に正規化 (remark-math 互換)\n * 2. ブロックレベル Notion タグ (`<callout>` / `<details>` / `<columns>` / `<column>` /\n *    `<summary>` / `<table_of_contents/>`) の前後に空行を確保する。\n *    CommonMark は「閉じタグ直後に空行が無いと以降を HTML ブロック扱い」にするため、\n *    Notion API が出力する `</callout>\\n# 見出し` の形だと heading が変換されない。\n * 3. `</table>` の後に空行を確保する。\n *    Notion API が `<table>` タグ形式（CommonMark type-6 HTML ブロック）でテーブルを出力するため、\n *    `</table>` の直後に空行がないと後続の見出し等が HTML ブロックの一部として扱われる。\n *    テーブル内部に空行を入れると HTML ブロックが途切れてしまうため後ろのみに追加する。\n * 4. `<unknown .../>` の前後に空行を確保する。\n *    未対応ブロック型（bookmark / embed 等）を表すタグが CommonMark type-7 HTML ブロックとして\n *    解釈され、後続の見出しを取り込んでしまうことを防ぐ。\n */\nexport function preprocessNotionMarkdown(md: string): string {\n  let out = md.replace(/\\$`([^`]+)`\\$/g, (_, expr) => `$${expr}$`);\n  const BLOCK_TAGS = [\n    \"callout\",\n    \"details\",\n    \"summary\",\n    \"columns\",\n    \"column\",\n  ] as const;\n  for (const tag of BLOCK_TAGS) {\n    // 開きタグ: <tag ...> or <tag>\n    out = out.replace(new RegExp(`(<${tag}(?:\\\\s[^>]*)?>)`, \"g\"), \"\\n\\n$1\\n\\n\");\n    // 閉じタグ\n    out = out.replace(new RegExp(`(</${tag}>)`, \"g\"), \"\\n\\n$1\\n\\n\");\n  }\n  // 自己閉じタグ\n  out = out.replace(/(<table_of_contents\\s*\\/>)/g, \"\\n\\n$1\\n\\n\");\n\n  // </table> の後にのみ空行を追加（前に入れるとテーブル HTML ブロックが途中で切れる）\n  out = out.replace(/(<\\/table>)/g, \"$1\\n\\n\");\n\n  // <unknown .../> 前後に空行を追加\n  out = out.replace(/(<unknown\\s[^>]*\\/>)/g, \"\\n\\n$1\\n\\n\");\n\n  return out;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,SAAgB,yBAAyB,IAAoB;CAC3D,IAAI,MAAM,GAAG,QAAQ,mBAAmB,GAAG,SAAS,IAAI,KAAK,EAAE;CAQ/D,KAAK,MAAM,OAAO;EANhB;EACA;EACA;EACA;EACA;CAEyB,GAAG;EAE5B,MAAM,IAAI,QAAQ,IAAI,OAAO,KAAK,IAAI,kBAAkB,GAAG,GAAG,YAAY;EAE1E,MAAM,IAAI,QAAQ,IAAI,OAAO,MAAM,IAAI,KAAK,GAAG,GAAG,YAAY;CAChE;CAEA,MAAM,IAAI,QAAQ,+BAA+B,YAAY;CAG7D,MAAM,IAAI,QAAQ,gBAAgB,QAAQ;CAG1C,MAAM,IAAI,QAAQ,yBAAyB,YAAY;CAEvD,OAAO;AACT"}

package/dist/react.d.mts

@@ -0,0 +1,45 @@
+import { ContentExtension } from "@notion-headless-cms/notion-orm";
+import { ComponentType, ReactNode } from "react";
+
+//#region src/react.d.ts
+/**
+ * `<Renderer />` の `components` で指定できるコンポーネントマップ。
+ * - 標準 HTML 要素 (`a`, `h1`, `code`, ...) を独自実装に差し替え可能
+ * - Notion 独自タグ (`callout`, `mention-page`, `mention-date`, `page`, `database`,
+ *   `columns`, `column`, `file`, `table_of_contents`) も同じ枠組みで差し替え可能
+ *
+ * 未指定の Notion 独自タグはこのパッケージ同梱の既定コンポーネントが使われる。
+ */
+type RendererComponents = Record<string, ComponentType<Record<string, unknown>>>;
+interface RendererProps {
+  /**
+   * Notion から取得した markdown 文字列、または
+   * `cms.posts.find(...)` の content オブジェクト (`{ markdown }`)。
+   */
+  content: {
+    markdown: string;
+  } | string;
+  /** 独自コンポーネントで標準タグや Notion タグを差し替える。 */
+  components?: RendererComponents;
+  /** ラッパー `<div>` に付ける className。 */
+  className?: string;
+  /**
+   * `getMarkdownPlugins()` で unified プラグインを提供する拡張のリスト。
+   * 同期プラグイン（`rehype-katex` など）に対応。非同期プラグイン（shiki など）は
+   * サーバーサイドで `createNotionMarkdownRenderer` を使うこと。
+   */
+  extensions?: ContentExtension[];
+}
+/**
+ * Notion `pages/{id}/markdown` の enhanced markdown を React 要素として描画する。
+ * パイプライン全体が同期で完結するため SSR (renderToString) でもそのまま動く。
+ *
+ * - 標準 markdown (heading / list / GFM table / fenced code / inline code / links) は変換
+ * - Notion 独自タグ (`<callout>`, `<mention-page>`, ...) は既定の React コンポーネントへマップ
+ * - `<span color="red">` など属性ベースの装飾は既定コンポーネントが `data-*` 経由で受け取る
+ */
+declare function Renderer(props: RendererProps): ReactNode;
+declare const defaultNotionComponents: RendererComponents;
+//#endregion
+export { Renderer, RendererComponents, RendererProps, defaultNotionComponents };
+//# sourceMappingURL=react.d.mts.map

package/dist/react.mjs

@@ -0,0 +1,129 @@
+"use client";
+import { t as preprocessNotionMarkdown } from "./preprocess-DVyL8D0Q.mjs";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import { Fragment, createElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import rehypeReact from "rehype-react";
+//#region src/react.tsx
+/**
+* Notion `pages/{id}/markdown` の enhanced markdown を React 要素として描画する。
+* パイプライン全体が同期で完結するため SSR (renderToString) でもそのまま動く。
+*
+* - 標準 markdown (heading / list / GFM table / fenced code / inline code / links) は変換
+* - Notion 独自タグ (`<callout>`, `<mention-page>`, ...) は既定の React コンポーネントへマップ
+* - `<span color="red">` など属性ベースの装飾は既定コンポーネントが `data-*` 経由で受け取る
+*/
+function Renderer(props) {
+	const normalized = preprocessNotionMarkdown(typeof props.content === "string" ? props.content : props.content.markdown);
+	const components = {
+		...defaultNotionComponents,
+		...props.components ?? {}
+	};
+	const extraRemark = (props.extensions ?? []).flatMap((e) => e.getMarkdownPlugins?.()?.remarkPlugins ?? []);
+	const extraRehype = (props.extensions ?? []).flatMap((e) => e.getMarkdownPlugins?.()?.rehypePlugins ?? []);
+	const tree = unified().use(remarkParse).use(remarkGfm).use(remarkMath).use(extraRemark).use(remarkRehype, { allowDangerousHtml: true }).use(rehypeRaw).use(extraRehype).use(rehypeReact, {
+		Fragment,
+		jsx,
+		jsxs,
+		components
+	}).processSync(normalized).result;
+	return props.className ? /* @__PURE__ */ jsx("div", {
+		className: props.className,
+		children: tree
+	}) : tree;
+}
+function NotionCallout(props) {
+	const { icon, color, children, ...rest } = props;
+	const cls = ["nhc-callout"];
+	if (typeof color === "string") cls.push(`nhc-color-${color}`);
+	return createElement("div", {
+		...rest,
+		className: cls.join(" ")
+	}, typeof icon === "string" ? createElement("span", { className: "nhc-callout-icon" }, icon) : null, createElement("div", { className: "nhc-callout-body" }, children));
+}
+function NotionMentionPage(props) {
+	const { url, children } = props;
+	return createElement("a", {
+		href: typeof url === "string" ? url : void 0,
+		className: "nhc-mention nhc-mention-page",
+		"data-mention": "page"
+	}, children);
+}
+function NotionMentionDate(props) {
+	const { start, end } = props;
+	const startStr = typeof start === "string" ? start : "";
+	const endStr = typeof end === "string" ? end : void 0;
+	const label = endStr ? `${startStr} – ${endStr}` : startStr;
+	return createElement("time", {
+		className: "nhc-mention nhc-mention-date",
+		dateTime: startStr || void 0
+	}, label);
+}
+function NotionPageLink(props) {
+	const { url, children } = props;
+	return createElement("a", {
+		href: typeof url === "string" ? url : void 0,
+		className: "nhc-link nhc-link-page",
+		"data-link-type": "page"
+	}, children);
+}
+function NotionDatabaseLink(props) {
+	const { url, children } = props;
+	return createElement("a", {
+		href: typeof url === "string" ? url : void 0,
+		className: "nhc-link nhc-link-database",
+		"data-link-type": "database"
+	}, children);
+}
+function NotionColumns(props) {
+	return createElement("div", { className: "nhc-columns" }, props.children);
+}
+function NotionColumn(props) {
+	return createElement("div", { className: "nhc-column" }, props.children);
+}
+function NotionFile(props) {
+	const { src, children } = props;
+	return createElement("a", {
+		href: typeof src === "string" ? src : void 0,
+		className: "nhc-file",
+		download: true
+	}, children);
+}
+function NotionTOC() {
+	return createElement("nav", {
+		className: "nhc-toc",
+		"data-placeholder": "true"
+	});
+}
+function NotionSpan(props) {
+	const { color, underline, children, ...rest } = props;
+	const cls = [];
+	if (typeof color === "string") cls.push(`nhc-color-${color}`);
+	if (underline === "true" || underline === true) cls.push("nhc-underline");
+	if (cls.length === 0) return createElement("span", rest, children);
+	return createElement("span", {
+		...rest,
+		className: cls.join(" ")
+	}, children);
+}
+const defaultNotionComponents = {
+	callout: NotionCallout,
+	"mention-page": NotionMentionPage,
+	"mention-date": NotionMentionDate,
+	page: NotionPageLink,
+	database: NotionDatabaseLink,
+	columns: NotionColumns,
+	column: NotionColumn,
+	file: NotionFile,
+	table_of_contents: NotionTOC,
+	span: NotionSpan
+};
+//#endregion
+export { Renderer, defaultNotionComponents };
+
+//# sourceMappingURL=react.mjs.map

package/dist/react.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.mjs","names":[],"sources":["../src/react.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ContentExtension } from \"@notion-headless-cms/notion-orm\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { createElement, Fragment } from \"react\";\nimport { jsx, jsxs } from \"react/jsx-runtime\";\nimport rehypeRaw from \"rehype-raw\";\nimport rehypeReact from \"rehype-react\";\nimport remarkGfm from \"remark-gfm\";\nimport remarkMath from \"remark-math\";\nimport remarkParse from \"remark-parse\";\nimport remarkRehype from \"remark-rehype\";\nimport type { PluggableList } from \"unified\";\nimport { unified } from \"unified\";\nimport { preprocessNotionMarkdown } from \"./preprocess\";\n\n/**\n * `<Renderer />` の `components` で指定できるコンポーネントマップ。\n * - 標準 HTML 要素 (`a`, `h1`, `code`, ...) を独自実装に差し替え可能\n * - Notion 独自タグ (`callout`, `mention-page`, `mention-date`, `page`, `database`,\n *   `columns`, `column`, `file`, `table_of_contents`) も同じ枠組みで差し替え可能\n *\n * 未指定の Notion 独自タグはこのパッケージ同梱の既定コンポーネントが使われる。\n */\nexport type RendererComponents = Record<\n  string,\n  ComponentType<Record<string, unknown>>\n>;\n\nexport interface RendererProps {\n  /**\n   * Notion から取得した markdown 文字列、または\n   * `cms.posts.find(...)` の content オブジェクト (`{ markdown }`)。\n   */\n  content: { markdown: string } | string;\n  /** 独自コンポーネントで標準タグや Notion タグを差し替える。 */\n  components?: RendererComponents;\n  /** ラッパー `<div>` に付ける className。 */\n  className?: string;\n  /**\n   * `getMarkdownPlugins()` で unified プラグインを提供する拡張のリスト。\n   * 同期プラグイン（`rehype-katex` など）に対応。非同期プラグイン（shiki など）は\n   * サーバーサイドで `createNotionMarkdownRenderer` を使うこと。\n   */\n  extensions?: ContentExtension[];\n}\n\n/**\n * Notion `pages/{id}/markdown` の enhanced markdown を React 要素として描画する。\n * パイプライン全体が同期で完結するため SSR (renderToString) でもそのまま動く。\n *\n * - 標準 markdown (heading / list / GFM table / fenced code / inline code / links) は変換\n * - Notion 独自タグ (`<callout>`, `<mention-page>`, ...) は既定の React コンポーネントへマップ\n * - `<span color=\"red\">` など属性ベースの装飾は既定コンポーネントが `data-*` 経由で受け取る\n */\nexport function Renderer(props: RendererProps): ReactNode {\n  const markdown =\n    typeof props.content === \"string\" ? props.content : props.content.markdown;\n  const normalized = preprocessNotionMarkdown(markdown);\n\n  const components: RendererComponents = {\n    ...defaultNotionComponents,\n    ...(props.components ?? {}),\n  };\n\n  const extraRemark = (props.extensions ?? []).flatMap(\n    (e) => e.getMarkdownPlugins?.()?.remarkPlugins ?? [],\n  ) as PluggableList;\n  const extraRehype = (props.extensions ?? []).flatMap(\n    (e) => e.getMarkdownPlugins?.()?.rehypePlugins ?? [],\n  ) as PluggableList;\n\n  const processor = unified()\n    .use(remarkParse)\n    .use(remarkGfm)\n    .use(remarkMath)\n    .use(extraRemark)\n    // 独自タグは raw HTML として markdown に紛れ込んでくる。\n    // allowDangerousHtml + rehype-raw で hast に展開すれば、rehype-react が\n    // タグ名で components マップを引いて React 要素を組み立てる。\n    .use(remarkRehype, { allowDangerousHtml: true })\n    .use(rehypeRaw)\n    .use(extraRehype)\n    .use(rehypeReact, {\n      Fragment,\n      jsx: jsx as unknown as never,\n      jsxs: jsxs as unknown as never,\n      components: components as unknown as Record<\n        string,\n        ComponentType<Record<string, unknown>>\n      >,\n    });\n\n  const file = processor.processSync(normalized);\n  const tree = file.result as ReactNode;\n  return props.className ? <div className={props.className}>{tree}</div> : tree;\n}\n\n// ──────────────────────────────────────────────────────────────────────────────\n// 既定の Notion 独自タグ用コンポーネント\n// ──────────────────────────────────────────────────────────────────────────────\n\ntype AnyProps = Record<string, unknown> & { children?: ReactNode };\n\nfunction NotionCallout(props: AnyProps): ReactNode {\n  const { icon, color, children, ...rest } = props;\n  const cls = [\"nhc-callout\"];\n  if (typeof color === \"string\") cls.push(`nhc-color-${color}`);\n  return createElement(\n    \"div\",\n    { ...rest, className: cls.join(\" \") },\n    typeof icon === \"string\"\n      ? createElement(\"span\", { className: \"nhc-callout-icon\" }, icon)\n      : null,\n    createElement(\"div\", { className: \"nhc-callout-body\" }, children),\n  );\n}\n\nfunction NotionMentionPage(props: AnyProps): ReactNode {\n  const { url, children } = props;\n  return createElement(\n    \"a\",\n    {\n      href: typeof url === \"string\" ? url : undefined,\n      className: \"nhc-mention nhc-mention-page\",\n      \"data-mention\": \"page\",\n    },\n    children,\n  );\n}\n\nfunction NotionMentionDate(props: AnyProps): ReactNode {\n  const { start, end } = props;\n  const startStr = typeof start === \"string\" ? start : \"\";\n  const endStr = typeof end === \"string\" ? end : undefined;\n  const label = endStr ? `${startStr} – ${endStr}` : startStr;\n  return createElement(\n    \"time\",\n    {\n      className: \"nhc-mention nhc-mention-date\",\n      dateTime: startStr || undefined,\n    },\n    label,\n  );\n}\n\nfunction NotionPageLink(props: AnyProps): ReactNode {\n  const { url, children } = props;\n  return createElement(\n    \"a\",\n    {\n      href: typeof url === \"string\" ? url : undefined,\n      className: \"nhc-link nhc-link-page\",\n      \"data-link-type\": \"page\",\n    },\n    children,\n  );\n}\n\nfunction NotionDatabaseLink(props: AnyProps): ReactNode {\n  const { url, children } = props;\n  return createElement(\n    \"a\",\n    {\n      href: typeof url === \"string\" ? url : undefined,\n      className: \"nhc-link nhc-link-database\",\n      \"data-link-type\": \"database\",\n    },\n    children,\n  );\n}\n\nfunction NotionColumns(props: AnyProps): ReactNode {\n  return createElement(\"div\", { className: \"nhc-columns\" }, props.children);\n}\n\nfunction NotionColumn(props: AnyProps): ReactNode {\n  return createElement(\"div\", { className: \"nhc-column\" }, props.children);\n}\n\nfunction NotionFile(props: AnyProps): ReactNode {\n  const { src, children } = props;\n  return createElement(\n    \"a\",\n    {\n      href: typeof src === \"string\" ? src : undefined,\n      className: \"nhc-file\",\n      download: true,\n    },\n    children,\n  );\n}\n\nfunction NotionTOC(): ReactNode {\n  // TOC 生成自体は別途 plugin で対応 (v1 はプレースホルダのみ)。\n  return createElement(\"nav\", {\n    className: \"nhc-toc\",\n    \"data-placeholder\": \"true\",\n  });\n}\n\nfunction NotionSpan(props: AnyProps): ReactNode {\n  // <span color=\"red\"> や <span underline=\"true\"> を class に正規化。\n  const { color, underline, children, ...rest } = props;\n  const cls: string[] = [];\n  if (typeof color === \"string\") cls.push(`nhc-color-${color}`);\n  if (underline === \"true\" || underline === true) cls.push(\"nhc-underline\");\n  if (cls.length === 0) return createElement(\"span\", rest, children);\n  return createElement(\"span\", { ...rest, className: cls.join(\" \") }, children);\n}\n\nexport const defaultNotionComponents: RendererComponents = {\n  callout: NotionCallout,\n  \"mention-page\": NotionMentionPage,\n  \"mention-date\": NotionMentionDate,\n  page: NotionPageLink,\n  database: NotionDatabaseLink,\n  columns: NotionColumns,\n  column: NotionColumn,\n  file: NotionFile,\n  table_of_contents: NotionTOC,\n  span: NotionSpan,\n};\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@notion-headless-cms/fetch-markdown",
+  "version": "0.0.1",
+  "description": "Notion Markdown export API でページ本文を 1 リクエストで取得する fetch 戦略。Cloudflare Workers Free プラン (50 subrequest 上限) でも巨大ページが扱える。",
+  "keywords": [
+    "notion",
+    "headless-cms",
+    "fetcher",
+    "markdown",
+    "cloudflare-workers",
+    "typescript"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/kjfsm/notion-headless-cms#readme",
+  "bugs": {
+    "url": "https://github.com/kjfsm/notion-headless-cms/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kjfsm/notion-headless-cms.git",
+    "directory": "packages/fetch-markdown"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.mts",
+      "import": "./dist/react.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts src/react.tsx --format esm --dts --sourcemap --out-dir dist",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage --coverage.reporter=lcov --coverage.reporter=text",
+    "publint": "publint --strict",
+    "attw": "attw --pack . --profile esm-only"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@notion-headless-cms/markdown-html": "workspace:*",
+    "@notion-headless-cms/notion-orm": "workspace:*",
+    "rehype-raw": "^7.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-stringify": "catalog:",
+    "remark-gfm": "catalog:",
+    "remark-math": "^6.0.0",
+    "remark-parse": "catalog:",
+    "remark-rehype": "catalog:",
+    "unified": "catalog:",
+    "unist-util-visit": "^5.1.0"
+  },
+  "peerDependencies": {
+    "@notionhq/client": "^5.20.0",
+    "react": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@notionhq/client": "catalog:",
+    "@types/hast": "^3.0.4",
+    "@types/react": "catalog:",
+    "react": "catalog:"
+  }
+}