test-roundtrip.ts

import { notionToHtml, htmlToNotionBlocks, Block } from "./src/index";

// ─── Test 1: Roundtrip from HTML → Blocks → HTML ───────────────────

const inputHtml = `<h1>Hello World</h1>
<p>This is a <strong>bold</strong> and <em>italic</em> paragraph with <code>inline code</code> and a <a href="https://example.com"><u>link</u></a>.</p>
<h2>Lists</h2>
<ul>
<li>First bullet</li>
<li>Second bullet<ul><li>Nested item</li></ul></li>
</ul>
<ol>
<li>Step one</li>
<li>Step two</li>
</ol>
<ul>
<li class="to-do"><label><input type="checkbox" disabled checked/> Done task</label></li>
<li class="to-do"><label><input type="checkbox" disabled/> Pending task</label></li>
</ul>
<blockquote>A wise quote</blockquote>
<div style="background-color:#FDE4AC;" class="callout"><span class="callout-icon">💡</span><div class="callout-content">Important note</div></div>
<pre><code class="language-typescript">const x = 42;</code></pre>
<hr/>
<details><summary>Toggle me</summary><p>Hidden content</p></details>
<div class="equation" data-expression="E = mc^2">$$E = mc^2$$</div>
<figure><img src="https://picsum.photos/200" alt="test"/></figure>
<figure><video controls src="https://example.com/video.mp4"></video></figure>
<audio controls src="https://example.com/audio.mp3"></audio>
<figure><iframe src="https://youtube.com/embed/test"></iframe></figure>
<a href="https://example.com" class="bookmark" target="_blank">https://example.com</a>
<table><thead><tr><th>Name</th><th>Value</th></tr></thead><tbody><tr><td>A</td><td>1</td></tr></tbody></table>
<div class="column-list" style="display:flex;gap:16px;"><div class="column" style="width:50.0%;"><p>Left</p></div><div class="column" style="width:50.0%;"><p>Right</p></div></div>
<nav class="table-of-contents">[Table of Contents]</nav>
<div class="child-page"><a href="#">My Page</a></div>
<div class="child-database">My DB</div>`;

console.log("═══ Test 1: HTML → Blocks ═══");
const blocks = htmlToNotionBlocks(inputHtml);
console.log(`Parsed ${blocks.length} blocks from HTML\n`);

// Print block types
for (const b of blocks) {
  const indent = "";
  console.log(`${indent}[${b.type}]`);
  const content = (b as Record<string, any>)[b.type];
  if (content?.rich_text) {
    const text = content.rich_text.map((r: any) => r.plain_text).join("");
    if (text) console.log(`${indent}  text: "${text.substring(0, 60)}"`);
  }
  if (content?.children) {
    for (const child of content.children) {
      const childContent = (child as Record<string, any>)[child.type];
      console.log(`${indent}  └─[${child.type}]`);
      if (childContent?.rich_text) {
        const t = childContent.rich_text.map((r: any) => r.plain_text).join("");
        if (t) console.log(`${indent}    text: "${t.substring(0, 60)}"`);
      }
    }
  }
}

console.log("\n═══ Test 2: Blocks → HTML (re-render) ═══");
const reRendered = notionToHtml(blocks);
console.log(reRendered);

console.log("\n═══ Test 3: Annotation roundtrip ═══");
const annotationHtml = `<p>Normal <strong>bold</strong> <em>italic</em> <s>strike</s> <u>under</u> <code>code</code> <span style="color:#D44C47;">red</span> <span style="background-color:#D3E5EF;">blue bg</span></p>`;
const annotBlocks = htmlToNotionBlocks(annotationHtml);
const p = annotBlocks[0]!;
const rt = (p as any).paragraph.rich_text;
console.log("Rich text segments:");
for (const seg of rt) {
  const flags = [];
  if (seg.annotations.bold) flags.push("B");
  if (seg.annotations.italic) flags.push("I");
  if (seg.annotations.strikethrough) flags.push("S");
  if (seg.annotations.underline) flags.push("U");
  if (seg.annotations.code) flags.push("C");
  if (seg.annotations.color !== "default") flags.push(`color:${seg.annotations.color}`);
  console.log(`  "${seg.plain_text}" [${flags.join(",")}]`);
}

console.log("\n═══ Test 4: Details with toggleable heading ═══");
const toggleHeadingHtml = `<details><summary><h2>Toggle Heading</h2></summary><p>Inside the heading</p></details>`;
const thBlocks = htmlToNotionBlocks(toggleHeadingHtml);
const th = thBlocks[0]!;
console.log(`Type: ${th.type}, is_toggleable: ${(th as any).heading_2?.is_toggleable}, children: ${(th as any).heading_2?.children?.length}`);

console.log("\n✅ All roundtrip tests passed");