feat: blockquotes (#18)

* chore: add blockquote lexicon

* feat: add support for blockquote block

* test: add tests for parseTextBlock function

* test: add more tests for parse functions

* chore: changeset

.changeset/tired-suits-double.md

···
+---
+"@nulfrost/leaflet-loader-astro": minor
+---
+
+Add support for blockquotes

lexicons/pub/leaflet/blocks/blockquote.json

···
+{
+	"lexicon": 1,
+	"id": "pub.leaflet.blocks.blockquote",
+	"defs": {
+		"main": {
+			"type": "object",
+			"required": ["plaintext"],
+			"properties": {
+				"plaintext": {
+					"type": "string"
+				},
+				"facets": {
+					"type": "array",
+					"items": {
+						"type": "ref",
+						"ref": "pub.leaflet.richtext.facet"
+					}
+				}
+			}
+		}
+	}
+}

lib/lexicons/index.ts

···
 export * as ComAtprotoRepoStrongRef from "./types/com/atproto/repo/strongRef.js";
+export * as PubLeafletBlocksBlockquote from "./types/pub/leaflet/blocks/blockquote.js";
 export * as PubLeafletBlocksCode from "./types/pub/leaflet/blocks/code.js";
 export * as PubLeafletBlocksHeader from "./types/pub/leaflet/blocks/header.js";
 export * as PubLeafletBlocksHorizontalRule from "./types/pub/leaflet/blocks/horizontalRule.js";

lib/lexicons/types/pub/leaflet/blocks/blockquote.ts

···
+import type {} from "@atcute/lexicons";
+import * as v from "@atcute/lexicons/validations";
+import * as PubLeafletRichtextFacet from "../richtext/facet.js";
+
+const _mainSchema = /*#__PURE__*/ v.object({
+  $type: /*#__PURE__*/ v.optional(
+    /*#__PURE__*/ v.literal("pub.leaflet.blocks.blockquote"),
+  ),
+  get facets() {
+    return /*#__PURE__*/ v.optional(
+      /*#__PURE__*/ v.array(PubLeafletRichtextFacet.mainSchema),
+    );
+  },
+  plaintext: /*#__PURE__*/ v.string(),
+});
+
+type main$schematype = typeof _mainSchema;
+
+export interface mainSchema extends main$schematype {}
+
+export const mainSchema = _mainSchema as mainSchema;
+
+export interface Main extends v.InferInput<typeof mainSchema> {}

lib/lexicons/types/pub/leaflet/blocks/image.ts

···
   ),
   alt: /*#__PURE__*/ v.optional(/*#__PURE__*/ v.string()),
   get aspectRatio() {
-    return _aspectRatioSchema;
+    return aspectRatioSchema;
   },
   image: /*#__PURE__*/ v.blob(),
 });

lib/utils.ts

···
 import katex from "katex";
 import sanitizeHTML from "sanitize-html";
 import {
+	PubLeafletBlocksBlockquote,
 	PubLeafletBlocksCode,
 	PubLeafletBlocksHeader,
 	PubLeafletBlocksHorizontalRule,
···
 			"hr",
 			"div",
 			"span",
+			"blockquote",
 		],
 		selfClosing: ["img"],
 	});
···
 	}
 }
 
-function parseBlocks({
+export function parseTextBlock(block: PubLeafletBlocksText.Main) {
+	let html = "";
+	const rt = new RichText({
+		text: block.plaintext,
+		facets: block.facets || [],
+	});
+	const children = [];
+	for (const segment of rt.segments()) {
+		const link = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#link",
+		);
+		const isBold = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#bold",
+		);
+		const isCode = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#code",
+		);
+		const isStrikethrough = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#strikethrough",
+		);
+		const isUnderline = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#underline",
+		);
+		const isItalic = segment.facet?.find(
+			(segment) => segment.$type === "pub.leaflet.richtext.facet#italic",
+		);
+		if (isCode) {
+			children.push(`<pre><code>${segment.text}</code></pre>`);
+		} else if (link) {
+			children.push(
+				`<a href="${link.uri}" target="_blank" rel="noopener noreferrer">${segment.text}</a>`,
+			);
+		} else if (isBold) {
+			children.push(`<b>${segment.text}</b>`);
+		} else if (isStrikethrough) {
+			children.push(`<s>${segment.text}</s>`);
+		} else if (isUnderline) {
+			children.push(
+				`<span style="text-decoration:underline;">${segment.text}</span>`,
+			);
+		} else if (isItalic) {
+			children.push(`<i>${segment.text}</i>`);
+		} else {
+			children.push(`${segment.text}`);
+		}
+	}
+	html += `<p>${children.join("")}</p>`;
+
+	return html.trim();
+}
+
+export function parseBlocks({
 	block,
 	did,
 }: {
···
 	let html = "";
 
 	if (is(PubLeafletBlocksText.mainSchema, block.block)) {
-		const rt = new RichText({
-			text: block.block.plaintext,
-			facets: block.block.facets || [],
-		});
-		const children = [];
-		for (const segment of rt.segments()) {
-			const link = segment.facet?.find(
-				(segment) => segment.$type === "pub.leaflet.richtext.facet#link",
-			);
-			const isBold = segment.facet?.find(
-				(segment) => segment.$type === "pub.leaflet.richtext.facet#bold",
-			);
-			const isCode = segment.facet?.find(
-				(segment) => segment.$type === "pub.leaflet.richtext.facet#code",
-			);
-			const isStrikethrough = segment.facet?.find(
-				(segment) =>
-					segment.$type === "pub.leaflet.richtext.facet#strikethrough",
-			);
-			const isUnderline = segment.facet?.find(
-				(segment) => segment.$type === "pub.leaflet.richtext.facet#underline",
-			);
-			const isItalic = segment.facet?.find(
-				(segment) => segment.$type === "pub.leaflet.richtext.facet#italic",
-			);
-			if (isCode) {
-				children.push(`<pre><code>${segment.text}</code></pre>`);
-			} else if (link) {
-				children.push(
-					`<a href="${link.uri}" target="_blank" rel="noopener noreferrer">${segment.text}</a>`,
-				);
-			} else if (isBold) {
-				children.push(`<b>${segment.text}</b>`);
-			} else if (isStrikethrough) {
-				children.push(`<s>${segment.text}</s>`);
-			} else if (isUnderline) {
-				children.push(
-					`<span style="text-decoration:underline;">${segment.text}</span>`,
-				);
-			} else if (isItalic) {
-				children.push(`<i>${segment.text}</i>`);
-			} else {
-				children.push(`${segment.text}`);
-			}
-		}
-		html += `<p>${children.join("")}</p>`;
+		html += parseTextBlock(block.block);
 	}
 
 	if (is(PubLeafletBlocksHeader.mainSchema, block.block)) {
···
 		html += `<div><img src="https://cdn.bsky.app/img/feed_fullsize/plain/${did}/${block.block.image.ref.$link}@jpeg" height="${block.block.aspectRatio.height}" width="${block.block.aspectRatio.width}" alt="${block.block.alt}" /></div>`;
 	}
 
+	if (is(PubLeafletBlocksBlockquote.mainSchema, block.block)) {
+		html += `<blockquote>${parseTextBlock(block.block)}</blockquote>`;
+	}
+
 	return html.trim();
 }
 
-function renderListItem({
+export function renderListItem({
 	item,
 	did,
 }: {

tests/parse-blocks.test.ts

···
+import { expect, test } from "vitest";
+import { parseBlocks } from "../lib/utils";
+
+test("should correctly parse an h1 block to an h2 tag", () => {
+	const html = parseBlocks({
+		block: {
+			$type: "pub.leaflet.pages.linearDocument#block",
+			block: {
+				$type: "pub.leaflet.blocks.header",
+				level: 1,
+				facets: [],
+				plaintext: "heading 1",
+			},
+		},
+		did: "did:plc:qttsv4e7pu2jl3ilanfgc3zn",
+	});
+
+	expect(html).toMatchInlineSnapshot(`"<h2>heading 1</h2>"`);
+});
+
+test("should correctly parse an h2 block to an h3 tag", () => {
+	const html = parseBlocks({
+		block: {
+			$type: "pub.leaflet.pages.linearDocument#block",
+			block: {
+				$type: "pub.leaflet.blocks.header",
+				level: 2,
+				facets: [],
+				plaintext: "heading 2",
+			},
+		},
+		did: "did:plc:qttsv4e7pu2jl3ilanfgc3zn",
+	});
+
+	expect(html).toMatchInlineSnapshot(`"<h3>heading 2</h3>"`);
+});
+
+test("should correctly parse an h3 block to an h4 tag", () => {
+	const html = parseBlocks({
+		block: {
+			$type: "pub.leaflet.pages.linearDocument#block",
+			block: {
+				$type: "pub.leaflet.blocks.header",
+				level: 3,
+				facets: [],
+				plaintext: "heading 3",
+			},
+		},
+		did: "did:plc:qttsv4e7pu2jl3ilanfgc3zn",
+	});
+
+	expect(html).toMatchInlineSnapshot(`"<h4>heading 3</h4>"`);
+});
+
+test("should correctly parse a block with no level to an h6 tag", () => {
+	const html = parseBlocks({
+		block: {
+			$type: "pub.leaflet.pages.linearDocument#block",
+			block: {
+				$type: "pub.leaflet.blocks.header",
+				facets: [],
+				plaintext: "heading 6",
+			},
+		},
+		did: "did:plc:qttsv4e7pu2jl3ilanfgc3zn",
+	});
+
+	expect(html).toMatchInlineSnapshot(`"<h6>heading 6</h6>"`);
+});
+
+test("should correctly parse an unordered list block", () => {
+	const html = parseBlocks({
+		block: {
+			$type: "pub.leaflet.pages.linearDocument#block",
+			block: {
+				$type: "pub.leaflet.blocks.unorderedList",
+				children: [
+					{
+						$type: "pub.leaflet.blocks.unorderedList#listItem",
+						content: {
+							$type: "pub.leaflet.blocks.text",
+							facets: [
+								{
+									index: {
+										byteEnd: 18,
+										byteStart: 0,
+									},
+									features: [
+										{
+											uri: "https://pdsls.dev/",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+								{
+									index: {
+										byteEnd: 28,
+										byteStart: 22,
+									},
+									features: [
+										{
+											uri: "https://bsky.app/profile/juli.ee",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+							],
+							plaintext: "https://pdsls.dev/ by Juliet",
+						},
+						children: [],
+					},
+					{
+						$type: "pub.leaflet.blocks.unorderedList#listItem",
+						content: {
+							$type: "pub.leaflet.blocks.text",
+							facets: [
+								{
+									index: {
+										byteEnd: 34,
+										byteStart: 0,
+									},
+									features: [
+										{
+											uri: "https://github.com/mary-ext/atcute",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+								{
+									index: {
+										byteEnd: 42,
+										byteStart: 38,
+									},
+									features: [
+										{
+											uri: "https://bsky.app/profile/mary.my.id",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+							],
+							plaintext: "https://github.com/mary-ext/atcute by mary",
+						},
+						children: [],
+					},
+					{
+						$type: "pub.leaflet.blocks.unorderedList#listItem",
+						content: {
+							$type: "pub.leaflet.blocks.text",
+							facets: [
+								{
+									index: {
+										byteEnd: 27,
+										byteStart: 0,
+									},
+									features: [
+										{
+											uri: "https://www.microcosm.blue/",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+								{
+									index: {
+										byteEnd: 35,
+										byteStart: 31,
+									},
+									features: [
+										{
+											uri: "https://bsky.app/profile/bad-example.com",
+											$type: "pub.leaflet.richtext.facet#link",
+										},
+									],
+								},
+							],
+							plaintext: "https://www.microcosm.blue/ by phil",
+						},
+						children: [],
+					},
+				],
+			},
+		},
+		did: "did:plc:qttsv4e7pu2jl3ilanfgc3zn",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<ul><li><p><a href="https://pdsls.dev/" target="_blank" rel="noopener noreferrer">https://pdsls.dev/</a> by <a href="https://bsky.app/profile/juli.ee" target="_blank" rel="noopener noreferrer">Juliet</a></p></li><li><p><a href="https://github.com/mary-ext/atcute" target="_blank" rel="noopener noreferrer">https://github.com/mary-ext/atcute</a> by <a href="https://bsky.app/profile/mary.my.id" target="_blank" rel="noopener noreferrer">mary</a></p></li><li><p><a href="https://www.microcosm.blue/" target="_blank" rel="noopener noreferrer">https://www.microcosm.blue/</a> by <a href="https://bsky.app/profile/bad-example.com" target="_blank" rel="noopener noreferrer">phil</a></p></li></ul>"`,
+	);
+});

tests/parse-text-blocks.test.ts

···
+import { expect, test } from "vitest";
+import { parseTextBlock } from "../lib/utils";
+
+test("should correctly parse a text block without facets", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [],
+		plaintext: "just plaintext no facets",
+	});
+
+	expect(html).toMatchInlineSnapshot(`"<p>just plaintext no facets</p>"`);
+});
+
+test("should correctly parse a text block with bolded text", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [
+			{
+				index: {
+					byteEnd: 11,
+					byteStart: 0,
+				},
+				features: [
+					{
+						$type: "pub.leaflet.richtext.facet#bold",
+					},
+				],
+			},
+		],
+		plaintext: "bolded text with some plaintext",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<p><b>bolded text</b> with some plaintext</p>"`,
+	);
+});
+
+test("should correctly parse a text block with an inline link", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [
+			{
+				index: {
+					byteEnd: 27,
+					byteStart: 0,
+				},
+				features: [
+					{
+						uri: "https://blacksky.community/",
+						$type: "pub.leaflet.richtext.facet#link",
+					},
+				],
+			},
+		],
+		plaintext: "https://blacksky.community/",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<p><a href="https://blacksky.community/" target="_blank" rel="noopener noreferrer">https://blacksky.community/</a></p>"`,
+	);
+});
+
+test("should correctly parse a text block with strikethrough text", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [
+			{
+				index: {
+					byteEnd: 13,
+					byteStart: 0,
+				},
+				features: [
+					{
+						$type: "pub.leaflet.richtext.facet#strikethrough",
+					},
+				],
+			},
+		],
+		plaintext: "strikethrough text with some plaintext",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<p><s>strikethrough</s> text with some plaintext</p>"`,
+	);
+});
+
+test("should correctly parse a text block with underlined text", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [
+			{
+				index: {
+					byteEnd: 10,
+					byteStart: 0,
+				},
+				features: [
+					{
+						$type: "pub.leaflet.richtext.facet#underline",
+					},
+				],
+			},
+		],
+		plaintext: "underlined text with some plaintext",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<p><span style="text-decoration:underline;">underlined</span> text with some plaintext</p>"`,
+	);
+});
+
+test("should correctly parse a text block with italicized text", () => {
+	const html = parseTextBlock({
+		$type: "pub.leaflet.blocks.text",
+		facets: [
+			{
+				index: {
+					byteEnd: 10,
+					byteStart: 0,
+				},
+				features: [
+					{
+						$type: "pub.leaflet.richtext.facet#italic",
+					},
+				],
+			},
+		],
+		plaintext: "italicized text with some plaintext",
+	});
+
+	expect(html).toMatchInlineSnapshot(
+		`"<p><i>italicized</i> text with some plaintext</p>"`,
+	);
+});

tests/uri-to-rkey.test.ts

···
 		),
 	).toBe("3lvl7m6jd4s2e");
 });
+
+test("should not pass if invalid uri is passed in", () => {
+	expect(() => uriToRkey("invalid")).toThrowError(/failed to get rkey/i);
+});