moreminimore-redesign/packages/gutenberg-to-portable-text/tests/converter.test.ts

/**
 * Tests for the main Gutenberg to Portable Text converter
 */

import { describe, it, expect } from "vitest";

import { gutenbergToPortableText, htmlToPortableText, parseGutenbergBlocks } from "../src/index.js";
import type { PortableTextTextBlock, PortableTextImageBlock } from "../src/types.js";

const HTML_TAG_PATTERN = /<[^>]+>/g;

describe("gutenbergToPortableText", () => {
	describe("empty content", () => {
		it("returns empty array for empty string", () => {
			expect(gutenbergToPortableText("")).toEqual([]);
		});

		it("returns empty array for whitespace", () => {
			expect(gutenbergToPortableText("   \n\t  ")).toEqual([]);
		});

		it("returns empty array for null-ish values", () => {
			expect(gutenbergToPortableText(null as unknown as string)).toEqual([]);
			expect(gutenbergToPortableText(undefined as unknown as string)).toEqual([]);
		});
	});

	describe("paragraph blocks", () => {
		it("converts simple paragraph", () => {
			const content = `<!-- wp:paragraph -->
<p>Hello world</p>
<!-- /wp:paragraph -->`;

			const result = gutenbergToPortableText(content);

			expect(result).toHaveLength(1);
			expect(result[0]).toMatchObject({
				_type: "block",
				style: "normal",
			});
			const block = result[0] as PortableTextTextBlock;
			expect(block.children[0]?.text).toBe("Hello world");
		});

		it("converts paragraph with inline formatting", () => {
			const content = `<!-- wp:paragraph -->
<p>Hello <strong>bold</strong> and <em>italic</em> world</p>
<!-- /wp:paragraph -->`;

			const result = gutenbergToPortableText(content);
			const block = result[0] as PortableTextTextBlock;

			expect(block.children.length).toBeGreaterThan(1);
			const boldSpan = block.children.find((c) => c.marks?.includes("strong"));
			const italicSpan = block.children.find((c) => c.marks?.includes("em"));
			expect(boldSpan?.text).toBe("bold");
			expect(italicSpan?.text).toBe("italic");
		});

		it("converts paragraph with link", () => {
			const content = `<!-- wp:paragraph -->
<p>Visit <a href="https://example.com">our site</a></p>
<!-- /wp:paragraph -->`;

			const result = gutenbergToPortableText(content);
			const block = result[0] as PortableTextTextBlock;

			expect(block.markDefs).toHaveLength(1);
			expect(block.markDefs?.[0]).toMatchObject({
				_type: "link",
				href: "https://example.com",
			});
		});

		it("skips empty paragraphs", () => {
			const content = `<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->`;

			const result = gutenbergToPortableText(content);
			expect(result).toHaveLength(0);
		});

		it("handles multiple paragraphs", () => {
			const content = `<!-- wp:paragraph -->
<p>First paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Second paragraph</p>
<!-- /wp:paragraph -->`;

			const result = gutenbergToPortableText(content);
			expect(result).toHaveLength(2);
		});
	});

	describe("heading blocks", () => {
		it("converts h1", () => {
			const content = `<!-- wp:heading {"level":1} -->
<h1>Main Title</h1>
<!-- /wp:heading -->`;

			const result = gutenbergToPortableText(content);
			expect(result[0]).toMatchObject({
				_type: "block",
				style: "h1",
			});
		});

		it("converts h2 (default level)", () => {
			const content = `<!-- wp:heading -->
<h2>Subtitle</h2>
<!-- /wp:heading -->`;

			const result = gutenbergToPortableText(content);
			expect(result[0]).toMatchObject({
				_type: "block",
				style: "h2",
			});
		});

		it("converts h3-h6", () => {
			for (let level = 3; level <= 6; level++) {
				const content = `<!-- wp:heading {"level":${level}} -->
<h${level}>Heading ${level}</h${level}>
<!-- /wp:heading -->`;

				const result = gutenbergToPortableText(content);
				expect(result[0]).toMatchObject({
					_type: "block",
					style: `h${level}`,
				});
			}
		});

		it("preserves formatting in headings", () => {
			const content = `<!-- wp:heading {"level":2} -->
<h2>Title with <strong>bold</strong></h2>
<!-- /wp:heading -->`;

			const result = gutenbergToPortableText(content);
			const block = result[0] as PortableTextTextBlock;
			const boldSpan = block.children.find((c) => c.marks?.includes("strong"));
			expect(boldSpan?.text).toBe("bold");
		});
	});

	describe("list blocks", () => {
		it("converts unordered list", () => {
			const content = `<!-- wp:list -->
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<!-- /wp:list -->`;

			const result = gutenbergToPortableText(content);

			expect(result).toHaveLength(3);
			result.forEach((block) => {
				expect(block).toMatchObject({
					_type: "block",
					listItem: "bullet",
					level: 1,
				});
			});
		});

		it("converts ordered list", () => {
			const content = `<!-- wp:list {"ordered":true} -->
<ol>
<li>First</li>
<li>Second</li>
</ol>
<!-- /wp:list -->`;

			const result = gutenbergToPortableText(content);

			expect(result).toHaveLength(2);
			result.forEach((block) => {
				expect(block).toMatchObject({
					_type: "block",
					listItem: "number",
					level: 1,
				});
			});
		});

		it("preserves formatting in list items", () => {
			const content = `<!-- wp:list -->
<ul>
<li>Item with <strong>bold</strong></li>
</ul>
<!-- /wp:list -->`;

			const result = gutenbergToPortableText(content);
			const block = result[0] as PortableTextTextBlock;
			const boldSpan = block.children.find((c) => c.marks?.includes("strong"));
			expect(boldSpan?.text).toBe("bold");
		});

		it("handles nested lists", () => {
			const content = `<!-- wp:list -->
<ul>
<li>Parent item
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
<!-- /wp:list -->`;

			const result = gutenbergToPortableText(content);

			const level1 = result.filter((b) => (b as PortableTextTextBlock).level === 1);
			const level2 = result.filter((b) => (b as PortableTextTextBlock).level === 2);

			expect(level1.length).toBeGreaterThanOrEqual(1);
			expect(level2.length).toBeGreaterThanOrEqual(1);
		});
	});

	describe("quote blocks", () => {
		it("converts simple quote", () => {
			const content = `<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>To be or not to be</p></blockquote>
<!-- /wp:quote -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "block",
				style: "blockquote",
			});
		});

		it("handles quote with citation", () => {
			const content = `<!-- wp:quote {"citation":"Shakespeare"} -->
<blockquote class="wp-block-quote"><p>To be or not to be</p></blockquote>
<!-- /wp:quote -->`;

			const result = gutenbergToPortableText(content);

			// Should have quote block + citation block
			expect(result.length).toBeGreaterThanOrEqual(1);
			expect(result[0]).toMatchObject({
				_type: "block",
				style: "blockquote",
			});
		});

		it("handles multi-paragraph quote", () => {
			const content = `<!-- wp:quote -->
<blockquote class="wp-block-quote">
<p>First paragraph of quote</p>
<p>Second paragraph of quote</p>
</blockquote>
<!-- /wp:quote -->`;

			const result = gutenbergToPortableText(content);

			const quoteBlocks = result.filter((b) => (b as PortableTextTextBlock).style === "blockquote");
			expect(quoteBlocks).toHaveLength(2);
		});
	});

	describe("image blocks", () => {
		it("converts image with URL in attrs", () => {
			const content = `<!-- wp:image {"id":123,"sizeSlug":"large","url":"https://example.com/photo.jpg"} -->
<figure class="wp-block-image size-large"><img src="https://example.com/photo.jpg" alt="A photo" class="wp-image-123"/></figure>
<!-- /wp:image -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "image",
				alt: "A photo",
			});
			const img = result[0] as PortableTextImageBlock;
			expect(img.asset.url).toBe("https://example.com/photo.jpg");
		});

		it("extracts image from HTML when not in attrs", () => {
			const content = `<!-- wp:image {"id":123} -->
<figure class="wp-block-image"><img src="https://example.com/photo.jpg" alt="Photo"/></figure>
<!-- /wp:image -->`;

			const result = gutenbergToPortableText(content);
			const img = result[0] as PortableTextImageBlock;

			expect(img.asset.url).toBe("https://example.com/photo.jpg");
			expect(img.alt).toBe("Photo");
		});

		it("extracts caption from figcaption", () => {
			const content = `<!-- wp:image {"id":123} -->
<figure class="wp-block-image"><img src="photo.jpg"/><figcaption>My caption</figcaption></figure>
<!-- /wp:image -->`;

			const result = gutenbergToPortableText(content);
			const img = result[0] as PortableTextImageBlock;

			expect(img.caption).toBe("My caption");
		});

		it("uses media map when provided", () => {
			const content = `<!-- wp:image {"id":123} -->
<figure><img src="photo.jpg"/></figure>
<!-- /wp:image -->`;

			const mediaMap = new Map([[123, "emdash-media-abc"]]);
			const result = gutenbergToPortableText(content, { mediaMap });
			const img = result[0] as PortableTextImageBlock;

			expect(img.asset._ref).toBe("emdash-media-abc");
		});

		it("handles alignment", () => {
			const content = `<!-- wp:image {"id":123,"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="photo.jpg"/></figure>
<!-- /wp:image -->`;

			const result = gutenbergToPortableText(content);
			const img = result[0] as PortableTextImageBlock;

			expect(img.alignment).toBe("center");
		});
	});

	describe("code blocks", () => {
		it("converts code block", () => {
			const content = `<!-- wp:code -->
<pre class="wp-block-code"><code>const x = 1;</code></pre>
<!-- /wp:code -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "code",
				code: "const x = 1;",
			});
		});

		it("preserves language attribute", () => {
			const content = `<!-- wp:code {"language":"javascript"} -->
<pre class="wp-block-code"><code>const x = 1;</code></pre>
<!-- /wp:code -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "code",
				language: "javascript",
			});
		});

		it("decodes HTML entities in code", () => {
			const content = `<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;div&gt;Hello&lt;/div&gt;</code></pre>
<!-- /wp:code -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "code",
				code: "<div>Hello</div>",
			});
		});

		it("handles multiline code", () => {
			const content = `<!-- wp:code -->
<pre class="wp-block-code"><code>function hello() {
  return "world";
}</code></pre>
<!-- /wp:code -->`;

			const result = gutenbergToPortableText(content);

			expect((result[0] as { code: string }).code).toContain("\n");
		});
	});

	describe("embed blocks", () => {
		it("converts YouTube embed", () => {
			const content = `<!-- wp:embed {"url":"https://www.youtube.com/watch?v=abc123","type":"video","providerNameSlug":"youtube"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube">
<div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=abc123
</div>
</figure>
<!-- /wp:embed -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "embed",
				url: "https://www.youtube.com/watch?v=abc123",
				provider: "youtube",
			});
		});

		it("converts Twitter embed", () => {
			const content = `<!-- wp:embed {"url":"https://twitter.com/user/status/123","type":"rich","providerNameSlug":"twitter"} -->
<figure class="wp-block-embed is-provider-twitter">
<div class="wp-block-embed__wrapper">
https://twitter.com/user/status/123
</div>
</figure>
<!-- /wp:embed -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "embed",
				provider: "twitter",
			});
		});

		it("detects provider from URL when not specified", () => {
			const content = `<!-- wp:embed {"url":"https://vimeo.com/123456"} -->
<figure class="wp-block-embed">
<div class="wp-block-embed__wrapper">
https://vimeo.com/123456
</div>
</figure>
<!-- /wp:embed -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "embed",
				provider: "vimeo",
			});
		});
	});

	describe("separator/spacer blocks", () => {
		it("converts separator to break", () => {
			const content = `<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "break",
				style: "lineBreak",
			});
		});

		it("converts spacer to break", () => {
			const content = `<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "break",
			});
		});
	});

	describe("columns blocks", () => {
		it("converts columns with content", () => {
			const content = `<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column 1</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p>Column 2</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "columns",
			});
			const cols = result[0] as { columns: Array<{ content: unknown[] }> };
			expect(cols.columns).toHaveLength(2);
			expect(cols.columns[0]?.content.length).toBeGreaterThan(0);
		});
	});

	describe("group blocks", () => {
		it("flattens group block content", () => {
			const content = `<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:paragraph -->
<p>Paragraph in group</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2>Heading in group</h2>
<!-- /wp:heading -->
</div>
<!-- /wp:group -->`;

			const result = gutenbergToPortableText(content);

			// Group should be flattened - we get the inner blocks directly
			expect(result.some((b) => (b as PortableTextTextBlock).style === "normal")).toBe(true);
			expect(result.some((b) => (b as PortableTextTextBlock).style === "h2")).toBe(true);
		});
	});

	describe("unknown blocks", () => {
		it("creates htmlBlock fallback for unknown blocks", () => {
			const content = `<!-- wp:my-plugin/custom-block {"foo":"bar"} -->
<div class="custom-block">Custom content</div>
<!-- /wp:my-plugin/custom-block -->`;

			const result = gutenbergToPortableText(content);

			expect(result[0]).toMatchObject({
				_type: "htmlBlock",
				originalBlockName: "my-plugin/custom-block",
			});
			expect((result[0] as { html: string }).html).toContain("Custom content");
		});

		it("preserves original attrs in fallback", () => {
			const content = `<!-- wp:unknown/block {"setting":true,"count":5} -->
<div>Content</div>
<!-- /wp:unknown/block -->`;

			const result = gutenbergToPortableText(content);

			expect((result[0] as { originalAttrs: Record<string, unknown> }).originalAttrs).toMatchObject(
				{
					setting: true,
					count: 5,
				},
			);
		});
	});

	describe("custom transformers", () => {
		it("uses custom transformer when provided", () => {
			const content = `<!-- wp:my-plugin/testimonial {"rating":5} -->
<div class="testimonial">Great product!</div>
<!-- /wp:my-plugin/testimonial -->`;

			const result = gutenbergToPortableText(content, {
				customTransformers: {
					"my-plugin/testimonial": (block, _opts, ctx) => [
						{
							_type: "testimonial" as const,
							_key: ctx.generateKey(),
							text: block.innerHTML.replace(HTML_TAG_PATTERN, "").trim(),
							rating: block.attrs.rating as number,
						} as unknown as import("../src/types.js").PortableTextBlock,
					],
				},
			});

			expect(result[0]).toMatchObject({
				_type: "testimonial",
				text: "Great product!",
				rating: 5,
			});
		});
	});

	describe("mixed content", () => {
		it("handles complex document with multiple block types", () => {
			const content = `<!-- wp:heading {"level":1} -->
<h1>Welcome</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is the <strong>introduction</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1} -->
<figure><img src="hero.jpg" alt="Hero"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul>
<li>Feature one</li>
<li>Feature two</li>
</ul>
<!-- /wp:list -->

<!-- wp:quote -->
<blockquote><p>A quote</p></blockquote>
<!-- /wp:quote -->`;

			const result = gutenbergToPortableText(content);

			// h1 + p + image + 2 list items + quote = 6 blocks
			expect(result.length).toBeGreaterThanOrEqual(5);

			const types = result.map((b) => b._type);
			expect(types).toContain("block");
			expect(types).toContain("image");
		});
	});
});

describe("htmlToPortableText", () => {
	it("converts simple HTML paragraphs", () => {
		const html = "<p>Hello world</p>";
		const result = htmlToPortableText(html);

		expect(result).toHaveLength(1);
		expect(result[0]).toMatchObject({
			_type: "block",
			style: "normal",
		});
	});

	it("converts headings", () => {
		const html = "<h1>Title</h1><h2>Subtitle</h2>";
		const result = htmlToPortableText(html);

		expect(result).toHaveLength(2);
		expect(result[0]).toMatchObject({ style: "h1" });
		expect(result[1]).toMatchObject({ style: "h2" });
	});

	it("converts lists", () => {
		const html = "<ul><li>One</li><li>Two</li></ul>";
		const result = htmlToPortableText(html);

		expect(result).toHaveLength(2);
		result.forEach((b) => {
			expect(b).toMatchObject({ listItem: "bullet" });
		});
	});

	it("converts blockquotes", () => {
		const html = "<blockquote>A quote</blockquote>";
		const result = htmlToPortableText(html);

		expect(result[0]).toMatchObject({
			_type: "block",
			style: "blockquote",
		});
	});

	it("converts code blocks", () => {
		const html = "<pre><code>const x = 1;</code></pre>";
		const result = htmlToPortableText(html);

		expect(result[0]).toMatchObject({
			_type: "code",
			code: "const x = 1;",
		});
	});

	it("converts horizontal rules", () => {
		const html = "<p>Before</p><hr><p>After</p>";
		const result = htmlToPortableText(html);

		const breakBlock = result.find((b) => b._type === "break");
		expect(breakBlock).toBeDefined();
	});

	it("handles inline formatting", () => {
		const html = "<p>Hello <strong>bold</strong> and <em>italic</em></p>";
		const result = htmlToPortableText(html);

		const block = result[0] as PortableTextTextBlock;
		expect(block.children.some((c) => c.marks?.includes("strong"))).toBe(true);
		expect(block.children.some((c) => c.marks?.includes("em"))).toBe(true);
	});
});

describe("WordPress.com classic editor content", () => {
	// Test case from sparge.wordpress.com - classic editor with linked images
	// and HTML entities in URLs (&#038; instead of &)
	const spargePostContent = `<p><a href="https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg"><img data-attachment-id="238" data-permalink="https://sparge.wordpress.com/2011/11/27/now-brewing-hip-hop-nelson-sauvin/hip-hop/" data-orig-file="https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg" data-orig-size="384,560" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}" data-image-title="hip-hop" data-image-description="" data-image-caption="" data-medium-file="https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg?w=205" data-large-file="https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg?w=384" class="alignright size-medium wp-image-238" title="hip-hop" src="https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg?w=205&#038;h=300" alt="" width="205" height="300" /></a>Hip Hops Nelson Sauvin is the first of my Christmas brews.</p>
<p>It's inspired by <a href="http://www.brewdog.com/product/77-lager" target="_blank" rel="noopener">BrewDog 77</a>, which is a classic lager dry-hopped with Nelson Sauvin. OK, so Hip Hops is 6.3% rather than 4.9%, and uses ordinary Saaz in the boil, but the essence is the same: it's a delicious, crisp German-style lager, given a New Zealand accent with a big hit of Nelson Sauvin.</p>`;

	it("extracts linked images with decoded URLs", () => {
		const result = htmlToPortableText(spargePostContent);

		// Should have at least one image block
		const imageBlocks = result.filter((b) => b._type === "image");
		expect(imageBlocks.length).toBeGreaterThanOrEqual(1);

		// First block should be the image
		const img = imageBlocks[0];
		expect(img._type).toBe("image");

		// URL should have decoded HTML entities (& not &#038;)
		expect(img.asset.url).toBe(
			"https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg?w=205&h=300",
		);
		expect(img.asset.url).not.toContain("&#038;");

		// Link should be preserved
		expect(img.link).toBe("https://sparge.wordpress.com/wp-content/uploads/2011/11/hip-hop.jpg");
	});

	it("preserves text content alongside images", () => {
		const result = htmlToPortableText(spargePostContent);

		// Should have text blocks with the paragraph content
		const textBlocks = result.filter((b) => b._type === "block");
		expect(textBlocks.length).toBeGreaterThanOrEqual(1);

		// Check that text content is preserved
		const allText = textBlocks.flatMap((b) => b.children.map((c) => c.text)).join("");
		expect(allText).toContain("Hip Hops Nelson Sauvin");
		expect(allText).toContain("Christmas brews");
	});

	it("preserves links in text", () => {
		const result = htmlToPortableText(spargePostContent);

		// Should have text blocks with links
		const textBlocks = result.filter((b) => b._type === "block");

		// Find block with BrewDog link
		const blockWithLink = textBlocks.find((b) => b.markDefs?.length);
		expect(blockWithLink).toBeDefined();
		expect(blockWithLink?.markDefs).toContainEqual(
			expect.objectContaining({
				_type: "link",
				href: "http://www.brewdog.com/product/77-lager",
			}),
		);
	});

	it("decodes HTML entities in standalone image src", () => {
		const html = `<img src="https://example.com/photo.jpg?w=200&#038;h=300" alt="test">`;
		const result = htmlToPortableText(html);

		expect(result).toHaveLength(1);
		const img = result[0] as PortableTextImageBlock;
		expect(img._type).toBe("image");
		expect(img.asset.url).toBe("https://example.com/photo.jpg?w=200&h=300");
	});

	it("decodes &#38; variant in URLs", () => {
		const html = `<p><img src="https://example.com/photo.jpg?a=1&#38;b=2" alt="test"></p>`;
		const result = htmlToPortableText(html);

		const img = result.find((b) => b._type === "image") as PortableTextImageBlock;
		expect(img.asset.url).toBe("https://example.com/photo.jpg?a=1&b=2");
	});

	it("decodes &amp; in URLs", () => {
		const html = `<p><img src="https://example.com/photo.jpg?a=1&amp;b=2" alt="test"></p>`;
		const result = htmlToPortableText(html);

		const img = result.find((b) => b._type === "image") as PortableTextImageBlock;
		expect(img.asset.url).toBe("https://example.com/photo.jpg?a=1&b=2");
	});

	// Test for figure with HTML entities
	it("decodes HTML entities in figure images", () => {
		const html = `<figure><img src="https://example.com/photo.jpg?w=200&#038;h=300" alt="test"><figcaption>Caption</figcaption></figure>`;
		const result = htmlToPortableText(html);

		const img = result[0] as PortableTextImageBlock;
		expect(img._type).toBe("image");
		expect(img.asset.url).toBe("https://example.com/photo.jpg?w=200&h=300");
		expect(img.caption).toBe("Caption");
	});
});

describe("parseGutenbergBlocks", () => {
	it("parses blocks without converting", () => {
		const content = `<!-- wp:paragraph -->
<p>Hello</p>
<!-- /wp:paragraph -->`;

		const blocks = parseGutenbergBlocks(content);

		expect(blocks).toHaveLength(1);
		expect(blocks[0]?.blockName).toBe("core/paragraph");
		expect(blocks[0]?.innerHTML).toContain("Hello");
	});

	it("returns empty array for empty content", () => {
		expect(parseGutenbergBlocks("")).toEqual([]);
	});

	it("preserves block attributes", () => {
		const content = `<!-- wp:heading {"level":3,"align":"center"} -->
<h3>Title</h3>
<!-- /wp:heading -->`;

		const blocks = parseGutenbergBlocks(content);

		expect(blocks[0]?.attrs).toMatchObject({
			level: 3,
			align: "center",
		});
	});

	it("handles nested blocks", () => {
		const content = `<!-- wp:columns -->
<div>
<!-- wp:column -->
<div>
<!-- wp:paragraph -->
<p>Nested</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->`;

		const blocks = parseGutenbergBlocks(content);

		expect(blocks[0]?.blockName).toBe("core/columns");
		expect(blocks[0]?.innerBlocks.length).toBeGreaterThan(0);
	});
});