A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
nekomimi.pet
1import React, { useMemo, useRef } from "react";
2import {
3 useColorScheme,
4 type ColorSchemePreference,
5} from "../hooks/useColorScheme";
6import { useDidResolution } from "../hooks/useDidResolution";
7import { useBlob } from "../hooks/useBlob";
8import {
9 parseAtUri,
10 formatDidForLabel,
11 toBlueskyPostUrl,
12 leafletRkeyUrl,
13 normalizeLeafletBasePath,
14} from "../utils/at-uri";
15import { BlueskyPost } from "../components/BlueskyPost";
16import type {
17 LeafletDocumentRecord,
18 LeafletLinearDocumentPage,
19 LeafletLinearDocumentBlock,
20 LeafletBlock,
21 LeafletTextBlock,
22 LeafletHeaderBlock,
23 LeafletBlockquoteBlock,
24 LeafletImageBlock,
25 LeafletUnorderedListBlock,
26 LeafletListItem,
27 LeafletWebsiteBlock,
28 LeafletIFrameBlock,
29 LeafletMathBlock,
30 LeafletCodeBlock,
31 LeafletBskyPostBlock,
32 LeafletAlignmentValue,
33 LeafletRichTextFacet,
34 LeafletRichTextFeature,
35 LeafletPublicationRecord,
36} from "../types/leaflet";
37
38export interface LeafletDocumentRendererProps {
39 record: LeafletDocumentRecord;
40 loading: boolean;
41 error?: Error;
42 colorScheme?: ColorSchemePreference;
43 did: string;
44 rkey: string;
45 canonicalUrl?: string;
46 publicationBaseUrl?: string;
47 publicationRecord?: LeafletPublicationRecord;
48}
49
50export const LeafletDocumentRenderer: React.FC<
51 LeafletDocumentRendererProps
52> = ({
53 record,
54 loading,
55 error,
56 colorScheme = "system",
57 did,
58 rkey,
59 canonicalUrl,
60 publicationBaseUrl,
61 publicationRecord,
62}) => {
63 const scheme = useColorScheme(colorScheme);
64 const palette = scheme === "dark" ? theme.dark : theme.light;
65 const authorDid = record.author?.startsWith("did:")
66 ? record.author
67 : undefined;
68 const publicationUri = useMemo(
69 () => parseAtUri(record.publication),
70 [record.publication],
71 );
72 const postUrl = useMemo(() => {
73 const postRefUri = record.postRef?.uri;
74 if (!postRefUri) return undefined;
75 const parsed = parseAtUri(postRefUri);
76 return parsed ? toBlueskyPostUrl(parsed) : undefined;
77 }, [record.postRef?.uri]);
78 const { handle: publicationHandle } = useDidResolution(publicationUri?.did);
79 const fallbackAuthorLabel = useAuthorLabel(record.author, authorDid);
80 const resolvedPublicationLabel =
81 publicationRecord?.name?.trim() ??
82 (publicationHandle
83 ? `@${publicationHandle}`
84 : publicationUri
85 ? formatDidForLabel(publicationUri.did)
86 : undefined);
87 const authorLabel = resolvedPublicationLabel ?? fallbackAuthorLabel;
88 const authorHref = publicationUri
89 ? `https://bsky.app/profile/${publicationUri.did}`
90 : undefined;
91
92 if (error)
93 return (
94 <div style={{ padding: 12, color: "crimson" }}>
95 Failed to load leaflet.
96 </div>
97 );
98 if (loading && !record)
99 return <div style={{ padding: 12 }}>Loading leaflet…</div>;
100 if (!record)
101 return (
102 <div style={{ padding: 12, color: "crimson" }}>
103 Leaflet record missing.
104 </div>
105 );
106
107 const publishedAt = record.publishedAt
108 ? new Date(record.publishedAt)
109 : undefined;
110 const publishedLabel = publishedAt
111 ? publishedAt.toLocaleString(undefined, {
112 dateStyle: "long",
113 timeStyle: "short",
114 })
115 : undefined;
116 const fallbackLeafletUrl = `https://bsky.app/leaflet/${encodeURIComponent(did)}/${encodeURIComponent(rkey)}`;
117 const publicationRoot =
118 publicationBaseUrl ?? publicationRecord?.base_path ?? undefined;
119 const resolvedPublicationRoot = publicationRoot
120 ? normalizeLeafletBasePath(publicationRoot)
121 : undefined;
122 const publicationLeafletUrl = leafletRkeyUrl(publicationRoot, rkey);
123 const viewUrl =
124 canonicalUrl ??
125 publicationLeafletUrl ??
126 postUrl ??
127 (publicationUri
128 ? `https://bsky.app/profile/${publicationUri.did}`
129 : undefined) ??
130 fallbackLeafletUrl;
131
132 const metaItems: React.ReactNode[] = [];
133 if (authorLabel) {
134 const authorNode = authorHref ? (
135 <a
136 href={authorHref}
137 target="_blank"
138 rel="noopener noreferrer"
139 style={palette.metaLink}
140 >
141 {authorLabel}
142 </a>
143 ) : (
144 authorLabel
145 );
146 metaItems.push(<span>By {authorNode}</span>);
147 }
148 if (publishedLabel)
149 metaItems.push(
150 <time dateTime={record.publishedAt}>{publishedLabel}</time>,
151 );
152 if (resolvedPublicationRoot) {
153 metaItems.push(
154 <a
155 href={resolvedPublicationRoot}
156 target="_blank"
157 rel="noopener noreferrer"
158 style={palette.metaLink}
159 >
160 {resolvedPublicationRoot.replace(/^https?:\/\//, "")}
161 </a>,
162 );
163 }
164 if (viewUrl) {
165 metaItems.push(
166 <a
167 href={viewUrl}
168 target="_blank"
169 rel="noopener noreferrer"
170 style={palette.metaLink}
171 >
172 View source
173 </a>,
174 );
175 }
176
177 return (
178 <article style={{ ...base.container, ...palette.container }}>
179 <header style={{ ...base.header, ...palette.header }}>
180 <div style={base.headerContent}>
181 <h1 style={{ ...base.title, ...palette.title }}>
182 {record.title}
183 </h1>
184 {record.description && (
185 <p style={{ ...base.subtitle, ...palette.subtitle }}>
186 {record.description}
187 </p>
188 )}
189 </div>
190 <div style={{ ...base.meta, ...palette.meta }}>
191 {metaItems.map((item, idx) => (
192 <React.Fragment key={`meta-${idx}`}>
193 {idx > 0 && (
194 <span style={palette.metaSeparator}>•</span>
195 )}
196 {item}
197 </React.Fragment>
198 ))}
199 </div>
200 </header>
201 <div style={base.body}>
202 {record.pages?.map((page, pageIndex) => (
203 <LeafletPageRenderer
204 key={`page-${pageIndex}`}
205 page={page}
206 documentDid={did}
207 colorScheme={scheme}
208 />
209 ))}
210 </div>
211 </article>
212 );
213};
214
215const LeafletPageRenderer: React.FC<{
216 page: LeafletLinearDocumentPage;
217 documentDid: string;
218 colorScheme: "light" | "dark";
219}> = ({ page, documentDid, colorScheme }) => {
220 if (!page.blocks?.length) return null;
221 return (
222 <div style={base.page}>
223 {page.blocks.map((blockWrapper, idx) => (
224 <LeafletBlockRenderer
225 key={`block-${idx}`}
226 wrapper={blockWrapper}
227 documentDid={documentDid}
228 colorScheme={colorScheme}
229 isFirst={idx === 0}
230 />
231 ))}
232 </div>
233 );
234};
235
236interface LeafletBlockRendererProps {
237 wrapper: LeafletLinearDocumentBlock;
238 documentDid: string;
239 colorScheme: "light" | "dark";
240 isFirst?: boolean;
241}
242
243const LeafletBlockRenderer: React.FC<LeafletBlockRendererProps> = ({
244 wrapper,
245 documentDid,
246 colorScheme,
247 isFirst,
248}) => {
249 const block = wrapper.block;
250 if (!block || !("$type" in block) || !block.$type) {
251 return null;
252 }
253 const alignment = alignmentValue(wrapper.alignment);
254
255 switch (block.$type) {
256 case "pub.leaflet.blocks.header":
257 return (
258 <LeafletHeaderBlockView
259 block={block}
260 alignment={alignment}
261 colorScheme={colorScheme}
262 isFirst={isFirst}
263 />
264 );
265 case "pub.leaflet.blocks.blockquote":
266 return (
267 <LeafletBlockquoteBlockView
268 block={block}
269 alignment={alignment}
270 colorScheme={colorScheme}
271 isFirst={isFirst}
272 />
273 );
274 case "pub.leaflet.blocks.image":
275 return (
276 <LeafletImageBlockView
277 block={block}
278 alignment={alignment}
279 documentDid={documentDid}
280 colorScheme={colorScheme}
281 />
282 );
283 case "pub.leaflet.blocks.unorderedList":
284 return (
285 <LeafletListBlockView
286 block={block}
287 alignment={alignment}
288 documentDid={documentDid}
289 colorScheme={colorScheme}
290 />
291 );
292 case "pub.leaflet.blocks.website":
293 return (
294 <LeafletWebsiteBlockView
295 block={block}
296 alignment={alignment}
297 documentDid={documentDid}
298 colorScheme={colorScheme}
299 />
300 );
301 case "pub.leaflet.blocks.iframe":
302 return (
303 <LeafletIframeBlockView block={block} alignment={alignment} />
304 );
305 case "pub.leaflet.blocks.math":
306 return (
307 <LeafletMathBlockView
308 block={block}
309 alignment={alignment}
310 colorScheme={colorScheme}
311 />
312 );
313 case "pub.leaflet.blocks.code":
314 return (
315 <LeafletCodeBlockView
316 block={block}
317 alignment={alignment}
318 colorScheme={colorScheme}
319 />
320 );
321 case "pub.leaflet.blocks.horizontalRule":
322 return (
323 <LeafletHorizontalRuleBlockView
324 alignment={alignment}
325 colorScheme={colorScheme}
326 />
327 );
328 case "pub.leaflet.blocks.bskyPost":
329 return (
330 <LeafletBskyPostBlockView
331 block={block}
332 colorScheme={colorScheme}
333 />
334 );
335 case "pub.leaflet.blocks.text":
336 default:
337 return (
338 <LeafletTextBlockView
339 block={block as LeafletTextBlock}
340 alignment={alignment}
341 colorScheme={colorScheme}
342 isFirst={isFirst}
343 />
344 );
345 }
346};
347
348const LeafletTextBlockView: React.FC<{
349 block: LeafletTextBlock;
350 alignment?: React.CSSProperties["textAlign"];
351 colorScheme: "light" | "dark";
352 isFirst?: boolean;
353}> = ({ block, alignment, colorScheme, isFirst }) => {
354 const segments = useMemo(
355 () => createFacetedSegments(block.plaintext, block.facets),
356 [block.plaintext, block.facets],
357 );
358 const textContent = block.plaintext ?? "";
359 if (!textContent.trim() && segments.length === 0) {
360 return null;
361 }
362 const palette = colorScheme === "dark" ? theme.dark : theme.light;
363 const style: React.CSSProperties = {
364 ...base.paragraph,
365 ...palette.paragraph,
366 ...(alignment ? { textAlign: alignment } : undefined),
367 ...(isFirst ? { marginTop: 0 } : undefined),
368 };
369 return (
370 <p style={style}>
371 {segments.map((segment, idx) => (
372 <React.Fragment key={`text-${idx}`}>
373 {renderSegment(segment, colorScheme)}
374 </React.Fragment>
375 ))}
376 </p>
377 );
378};
379
380const LeafletHeaderBlockView: React.FC<{
381 block: LeafletHeaderBlock;
382 alignment?: React.CSSProperties["textAlign"];
383 colorScheme: "light" | "dark";
384 isFirst?: boolean;
385}> = ({ block, alignment, colorScheme, isFirst }) => {
386 const palette = colorScheme === "dark" ? theme.dark : theme.light;
387 const level =
388 block.level && block.level >= 1 && block.level <= 6 ? block.level : 2;
389 const segments = useMemo(
390 () => createFacetedSegments(block.plaintext, block.facets),
391 [block.plaintext, block.facets],
392 );
393 const normalizedLevel = Math.min(Math.max(level, 1), 6) as
394 | 1
395 | 2
396 | 3
397 | 4
398 | 5
399 | 6;
400 const headingTag = (["h1", "h2", "h3", "h4", "h5", "h6"] as const)[
401 normalizedLevel - 1
402 ];
403 const headingStyles = palette.heading[normalizedLevel];
404 const style: React.CSSProperties = {
405 ...base.heading,
406 ...headingStyles,
407 ...(alignment ? { textAlign: alignment } : undefined),
408 ...(isFirst ? { marginTop: 0 } : undefined),
409 };
410
411 return React.createElement(
412 headingTag,
413 { style },
414 segments.map((segment, idx) => (
415 <React.Fragment key={`header-${idx}`}>
416 {renderSegment(segment, colorScheme)}
417 </React.Fragment>
418 )),
419 );
420};
421
422const LeafletBlockquoteBlockView: React.FC<{
423 block: LeafletBlockquoteBlock;
424 alignment?: React.CSSProperties["textAlign"];
425 colorScheme: "light" | "dark";
426 isFirst?: boolean;
427}> = ({ block, alignment, colorScheme, isFirst }) => {
428 const segments = useMemo(
429 () => createFacetedSegments(block.plaintext, block.facets),
430 [block.plaintext, block.facets],
431 );
432 const textContent = block.plaintext ?? "";
433 if (!textContent.trim() && segments.length === 0) {
434 return null;
435 }
436 const palette = colorScheme === "dark" ? theme.dark : theme.light;
437 return (
438 <blockquote
439 style={{
440 ...base.blockquote,
441 ...palette.blockquote,
442 ...(alignment ? { textAlign: alignment } : undefined),
443 ...(isFirst ? { marginTop: 0 } : undefined),
444 }}
445 >
446 {segments.map((segment, idx) => (
447 <React.Fragment key={`quote-${idx}`}>
448 {renderSegment(segment, colorScheme)}
449 </React.Fragment>
450 ))}
451 </blockquote>
452 );
453};
454
455const LeafletImageBlockView: React.FC<{
456 block: LeafletImageBlock;
457 alignment?: React.CSSProperties["textAlign"];
458 documentDid: string;
459 colorScheme: "light" | "dark";
460}> = ({ block, alignment, documentDid, colorScheme }) => {
461 const palette = colorScheme === "dark" ? theme.dark : theme.light;
462 const cid = block.image?.ref?.$link ?? block.image?.cid;
463 const { url, loading, error } = useBlob(documentDid, cid);
464 const aspectRatio =
465 block.aspectRatio?.height && block.aspectRatio?.width
466 ? `${block.aspectRatio.width} / ${block.aspectRatio.height}`
467 : undefined;
468
469 return (
470 <figure
471 style={{
472 ...base.figure,
473 ...palette.figure,
474 ...(alignment ? { textAlign: alignment } : undefined),
475 }}
476 >
477 <div
478 style={{
479 ...base.imageWrapper,
480 ...palette.imageWrapper,
481 ...(aspectRatio ? { aspectRatio } : {}),
482 }}
483 >
484 {url && !error ? (
485 <img
486 src={url}
487 alt={block.alt ?? ""}
488 style={{ ...base.image, ...palette.image }}
489 />
490 ) : (
491 <div
492 style={{
493 ...base.imagePlaceholder,
494 ...palette.imagePlaceholder,
495 }}
496 >
497 {loading
498 ? "Loading image…"
499 : error
500 ? "Image unavailable"
501 : "No image"}
502 </div>
503 )}
504 </div>
505 {block.alt && block.alt.trim().length > 0 && (
506 <figcaption style={{ ...base.caption, ...palette.caption }}>
507 {block.alt}
508 </figcaption>
509 )}
510 </figure>
511 );
512};
513
514const LeafletListBlockView: React.FC<{
515 block: LeafletUnorderedListBlock;
516 alignment?: React.CSSProperties["textAlign"];
517 documentDid: string;
518 colorScheme: "light" | "dark";
519}> = ({ block, alignment, documentDid, colorScheme }) => {
520 const palette = colorScheme === "dark" ? theme.dark : theme.light;
521 return (
522 <ul
523 style={{
524 ...base.list,
525 ...palette.list,
526 ...(alignment ? { textAlign: alignment } : undefined),
527 }}
528 >
529 {block.children?.map((child, idx) => (
530 <LeafletListItemRenderer
531 key={`list-item-${idx}`}
532 item={child}
533 documentDid={documentDid}
534 colorScheme={colorScheme}
535 alignment={alignment}
536 />
537 ))}
538 </ul>
539 );
540};
541
542const LeafletListItemRenderer: React.FC<{
543 item: LeafletListItem;
544 documentDid: string;
545 colorScheme: "light" | "dark";
546 alignment?: React.CSSProperties["textAlign"];
547}> = ({ item, documentDid, colorScheme, alignment }) => {
548 return (
549 <li
550 style={{
551 ...base.listItem,
552 ...(alignment ? { textAlign: alignment } : undefined),
553 }}
554 >
555 <div>
556 <LeafletInlineBlock
557 block={item.content}
558 colorScheme={colorScheme}
559 documentDid={documentDid}
560 alignment={alignment}
561 />
562 </div>
563 {item.children && item.children.length > 0 && (
564 <ul
565 style={{
566 ...base.nestedList,
567 ...(alignment ? { textAlign: alignment } : undefined),
568 }}
569 >
570 {item.children.map((child, idx) => (
571 <LeafletListItemRenderer
572 key={`nested-${idx}`}
573 item={child}
574 documentDid={documentDid}
575 colorScheme={colorScheme}
576 alignment={alignment}
577 />
578 ))}
579 </ul>
580 )}
581 </li>
582 );
583};
584
585const LeafletInlineBlock: React.FC<{
586 block: LeafletBlock;
587 colorScheme: "light" | "dark";
588 documentDid: string;
589 alignment?: React.CSSProperties["textAlign"];
590}> = ({ block, colorScheme, documentDid, alignment }) => {
591 switch (block.$type) {
592 case "pub.leaflet.blocks.header":
593 return (
594 <LeafletHeaderBlockView
595 block={block as LeafletHeaderBlock}
596 colorScheme={colorScheme}
597 alignment={alignment}
598 />
599 );
600 case "pub.leaflet.blocks.blockquote":
601 return (
602 <LeafletBlockquoteBlockView
603 block={block as LeafletBlockquoteBlock}
604 colorScheme={colorScheme}
605 alignment={alignment}
606 />
607 );
608 case "pub.leaflet.blocks.image":
609 return (
610 <LeafletImageBlockView
611 block={block as LeafletImageBlock}
612 documentDid={documentDid}
613 colorScheme={colorScheme}
614 alignment={alignment}
615 />
616 );
617 default:
618 return (
619 <LeafletTextBlockView
620 block={block as LeafletTextBlock}
621 colorScheme={colorScheme}
622 alignment={alignment}
623 />
624 );
625 }
626};
627
628const LeafletWebsiteBlockView: React.FC<{
629 block: LeafletWebsiteBlock;
630 alignment?: React.CSSProperties["textAlign"];
631 documentDid: string;
632 colorScheme: "light" | "dark";
633}> = ({ block, alignment, documentDid, colorScheme }) => {
634 const palette = colorScheme === "dark" ? theme.dark : theme.light;
635 const previewCid =
636 block.previewImage?.ref?.$link ?? block.previewImage?.cid;
637 const { url, loading, error } = useBlob(documentDid, previewCid);
638
639 return (
640 <a
641 href={block.src}
642 target="_blank"
643 rel="noopener noreferrer"
644 style={{
645 ...base.linkCard,
646 ...palette.linkCard,
647 ...(alignment ? { textAlign: alignment } : undefined),
648 }}
649 >
650 {url && !error ? (
651 <img
652 src={url}
653 alt={block.title ?? "Website preview"}
654 style={{ ...base.linkPreview, ...palette.linkPreview }}
655 />
656 ) : (
657 <div
658 style={{
659 ...base.linkPreviewPlaceholder,
660 ...palette.linkPreviewPlaceholder,
661 }}
662 >
663 {loading ? "Loading preview…" : "Open link"}
664 </div>
665 )}
666 <div style={base.linkContent}>
667 {block.title && (
668 <strong style={palette.linkTitle}>{block.title}</strong>
669 )}
670 {block.description && (
671 <p style={palette.linkDescription}>{block.description}</p>
672 )}
673 <span style={palette.linkUrl}>{block.src}</span>
674 </div>
675 </a>
676 );
677};
678
679const LeafletIframeBlockView: React.FC<{
680 block: LeafletIFrameBlock;
681 alignment?: React.CSSProperties["textAlign"];
682}> = ({ block, alignment }) => {
683 return (
684 <div style={{ ...(alignment ? { textAlign: alignment } : undefined) }}>
685 <iframe
686 src={block.url}
687 title={block.url}
688 style={{
689 ...base.iframe,
690 ...(block.height
691 ? { height: Math.min(Math.max(block.height, 120), 800) }
692 : {}),
693 }}
694 loading="lazy"
695 allowFullScreen
696 />
697 </div>
698 );
699};
700
701const LeafletMathBlockView: React.FC<{
702 block: LeafletMathBlock;
703 alignment?: React.CSSProperties["textAlign"];
704 colorScheme: "light" | "dark";
705}> = ({ block, alignment, colorScheme }) => {
706 const palette = colorScheme === "dark" ? theme.dark : theme.light;
707 return (
708 <pre
709 style={{
710 ...base.math,
711 ...palette.math,
712 ...(alignment ? { textAlign: alignment } : undefined),
713 }}
714 >
715 {block.tex}
716 </pre>
717 );
718};
719
720const LeafletCodeBlockView: React.FC<{
721 block: LeafletCodeBlock;
722 alignment?: React.CSSProperties["textAlign"];
723 colorScheme: "light" | "dark";
724}> = ({ block, alignment, colorScheme }) => {
725 const palette = colorScheme === "dark" ? theme.dark : theme.light;
726 const codeRef = useRef<HTMLElement | null>(null);
727 const langClass = block.language
728 ? `language-${block.language.toLowerCase()}`
729 : undefined;
730 return (
731 <pre
732 style={{
733 ...base.code,
734 ...palette.code,
735 ...(alignment ? { textAlign: alignment } : undefined),
736 }}
737 >
738 <code ref={codeRef} className={langClass}>
739 {block.plaintext}
740 </code>
741 </pre>
742 );
743};
744
745const LeafletHorizontalRuleBlockView: React.FC<{
746 alignment?: React.CSSProperties["textAlign"];
747 colorScheme: "light" | "dark";
748}> = ({ alignment, colorScheme }) => {
749 const palette = colorScheme === "dark" ? theme.dark : theme.light;
750 return (
751 <hr
752 style={{
753 ...base.hr,
754 ...palette.hr,
755 marginLeft: alignment ? "auto" : undefined,
756 marginRight: alignment ? "auto" : undefined,
757 }}
758 />
759 );
760};
761
762const LeafletBskyPostBlockView: React.FC<{
763 block: LeafletBskyPostBlock;
764 colorScheme: "light" | "dark";
765}> = ({ block, colorScheme }) => {
766 const parsed = parseAtUri(block.postRef?.uri);
767 if (!parsed) {
768 return (
769 <div style={base.embedFallback}>Referenced post unavailable.</div>
770 );
771 }
772 return (
773 <BlueskyPost
774 did={parsed.did}
775 rkey={parsed.rkey}
776 colorScheme={colorScheme}
777 iconPlacement="linkInline"
778 />
779 );
780};
781
782function alignmentValue(
783 value?: LeafletAlignmentValue,
784): React.CSSProperties["textAlign"] | undefined {
785 if (!value) return undefined;
786 let normalized = value.startsWith("#") ? value.slice(1) : value;
787 if (normalized.includes("#")) {
788 normalized = normalized.split("#").pop() ?? normalized;
789 }
790 if (normalized.startsWith("lex:")) {
791 normalized = normalized.split(":").pop() ?? normalized;
792 }
793 switch (normalized) {
794 case "textAlignLeft":
795 return "left";
796 case "textAlignCenter":
797 return "center";
798 case "textAlignRight":
799 return "right";
800 case "textAlignJustify":
801 return "justify";
802 default:
803 return undefined;
804 }
805}
806
807function useAuthorLabel(
808 author: string | undefined,
809 authorDid: string | undefined,
810): string | undefined {
811 const { handle } = useDidResolution(authorDid);
812 if (!author) return undefined;
813 if (handle) return `@${handle}`;
814 if (authorDid) return formatDidForLabel(authorDid);
815 return author;
816}
817
818interface Segment {
819 text: string;
820 features: LeafletRichTextFeature[];
821}
822
823function createFacetedSegments(
824 plaintext: string,
825 facets?: LeafletRichTextFacet[],
826): Segment[] {
827 if (!facets?.length) {
828 return [{ text: plaintext, features: [] }];
829 }
830 const prefix = buildBytePrefix(plaintext);
831 const startEvents = new Map<number, LeafletRichTextFeature[]>();
832 const endEvents = new Map<number, LeafletRichTextFeature[]>();
833 const boundaries = new Set<number>([0, prefix.length - 1]);
834 for (const facet of facets) {
835 const { byteStart, byteEnd } = facet.index ?? {};
836 if (
837 typeof byteStart !== "number" ||
838 typeof byteEnd !== "number" ||
839 byteStart >= byteEnd
840 )
841 continue;
842 const start = byteOffsetToCharIndex(prefix, byteStart);
843 const end = byteOffsetToCharIndex(prefix, byteEnd);
844 if (start >= end) continue;
845 boundaries.add(start);
846 boundaries.add(end);
847 if (facet.features?.length) {
848 startEvents.set(start, [
849 ...(startEvents.get(start) ?? []),
850 ...facet.features,
851 ]);
852 endEvents.set(end, [
853 ...(endEvents.get(end) ?? []),
854 ...facet.features,
855 ]);
856 }
857 }
858 const sortedBounds = [...boundaries].sort((a, b) => a - b);
859 const segments: Segment[] = [];
860 let active: LeafletRichTextFeature[] = [];
861 for (let i = 0; i < sortedBounds.length - 1; i++) {
862 const boundary = sortedBounds[i];
863 const next = sortedBounds[i + 1];
864 const endFeatures = endEvents.get(boundary);
865 if (endFeatures?.length) {
866 active = active.filter((feature) => !endFeatures.includes(feature));
867 }
868 const startFeatures = startEvents.get(boundary);
869 if (startFeatures?.length) {
870 active = [...active, ...startFeatures];
871 }
872 if (boundary === next) continue;
873 const text = sliceByCharRange(plaintext, boundary, next);
874 segments.push({ text, features: active.slice() });
875 }
876 return segments;
877}
878
879function buildBytePrefix(text: string): number[] {
880 const encoder = new TextEncoder();
881 const prefix: number[] = [0];
882 let byteCount = 0;
883 for (let i = 0; i < text.length; ) {
884 const codePoint = text.codePointAt(i)!;
885 const char = String.fromCodePoint(codePoint);
886 const encoded = encoder.encode(char);
887 byteCount += encoded.length;
888 prefix.push(byteCount);
889 i += codePoint > 0xffff ? 2 : 1;
890 }
891 return prefix;
892}
893
894function byteOffsetToCharIndex(prefix: number[], byteOffset: number): number {
895 for (let i = 0; i < prefix.length; i++) {
896 if (prefix[i] === byteOffset) return i;
897 if (prefix[i] > byteOffset) return Math.max(0, i - 1);
898 }
899 return prefix.length - 1;
900}
901
902function sliceByCharRange(text: string, start: number, end: number): string {
903 if (start <= 0 && end >= text.length) return text;
904 let result = "";
905 let charIndex = 0;
906 for (let i = 0; i < text.length && charIndex < end; ) {
907 const codePoint = text.codePointAt(i)!;
908 const char = String.fromCodePoint(codePoint);
909 if (charIndex >= start && charIndex < end) result += char;
910 i += codePoint > 0xffff ? 2 : 1;
911 charIndex++;
912 }
913 return result;
914}
915
916function renderSegment(
917 segment: Segment,
918 colorScheme: "light" | "dark",
919): React.ReactNode {
920 const parts = segment.text.split("\n");
921 return parts.flatMap((part, idx) => {
922 const key = `${segment.text}-${idx}-${part.length}`;
923 const wrapped = applyFeatures(
924 part.length ? part : "\u00a0",
925 segment.features,
926 key,
927 colorScheme,
928 );
929 if (idx === parts.length - 1) return wrapped;
930 return [wrapped, <br key={`${key}-br`} />];
931 });
932}
933
934function applyFeatures(
935 content: React.ReactNode,
936 features: LeafletRichTextFeature[],
937 key: string,
938 colorScheme: "light" | "dark",
939): React.ReactNode {
940 if (!features?.length)
941 return <React.Fragment key={key}>{content}</React.Fragment>;
942 return (
943 <React.Fragment key={key}>
944 {features.reduce<React.ReactNode>(
945 (child, feature, idx) =>
946 wrapFeature(
947 child,
948 feature,
949 `${key}-feature-${idx}`,
950 colorScheme,
951 ),
952 content,
953 )}
954 </React.Fragment>
955 );
956}
957
958function wrapFeature(
959 child: React.ReactNode,
960 feature: LeafletRichTextFeature,
961 key: string,
962 colorScheme: "light" | "dark",
963): React.ReactNode {
964 switch (feature.$type) {
965 case "pub.leaflet.richtext.facet#link":
966 return (
967 <a
968 key={key}
969 href={feature.uri}
970 target="_blank"
971 rel="noopener noreferrer"
972 style={linkStyles[colorScheme]}
973 >
974 {child}
975 </a>
976 );
977 case "pub.leaflet.richtext.facet#code":
978 return (
979 <code key={key} style={inlineCodeStyles[colorScheme]}>
980 {child}
981 </code>
982 );
983 case "pub.leaflet.richtext.facet#highlight":
984 return (
985 <mark key={key} style={highlightStyles[colorScheme]}>
986 {child}
987 </mark>
988 );
989 case "pub.leaflet.richtext.facet#underline":
990 return (
991 <span key={key} style={{ textDecoration: "underline" }}>
992 {child}
993 </span>
994 );
995 case "pub.leaflet.richtext.facet#strikethrough":
996 return (
997 <span key={key} style={{ textDecoration: "line-through" }}>
998 {child}
999 </span>
1000 );
1001 case "pub.leaflet.richtext.facet#bold":
1002 return <strong key={key}>{child}</strong>;
1003 case "pub.leaflet.richtext.facet#italic":
1004 return <em key={key}>{child}</em>;
1005 case "pub.leaflet.richtext.facet#id":
1006 return (
1007 <span key={key} id={feature.id}>
1008 {child}
1009 </span>
1010 );
1011 default:
1012 return <span key={key}>{child}</span>;
1013 }
1014}
1015
1016const base: Record<string, React.CSSProperties> = {
1017 container: {
1018 display: "flex",
1019 flexDirection: "column",
1020 gap: 24,
1021 padding: "24px 28px",
1022 borderRadius: 20,
1023 border: "1px solid transparent",
1024 maxWidth: 720,
1025 width: "100%",
1026 fontFamily:
1027 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
1028 },
1029 header: {
1030 display: "flex",
1031 flexDirection: "column",
1032 gap: 16,
1033 },
1034 headerContent: {
1035 display: "flex",
1036 flexDirection: "column",
1037 gap: 8,
1038 },
1039 title: {
1040 fontSize: 32,
1041 margin: 0,
1042 lineHeight: 1.15,
1043 },
1044 subtitle: {
1045 margin: 0,
1046 fontSize: 16,
1047 lineHeight: 1.5,
1048 },
1049 meta: {
1050 display: "flex",
1051 flexWrap: "wrap",
1052 gap: 8,
1053 alignItems: "center",
1054 fontSize: 14,
1055 },
1056 body: {
1057 display: "flex",
1058 flexDirection: "column",
1059 gap: 18,
1060 },
1061 page: {
1062 display: "flex",
1063 flexDirection: "column",
1064 gap: 18,
1065 },
1066 paragraph: {
1067 margin: "1em 0 0",
1068 lineHeight: 1.65,
1069 fontSize: 16,
1070 },
1071 heading: {
1072 margin: "0.5em 0 0",
1073 fontWeight: 700,
1074 },
1075 blockquote: {
1076 margin: "1em 0 0",
1077 padding: "0.6em 1em",
1078 borderLeft: "4px solid",
1079 },
1080 figure: {
1081 margin: "1.2em 0 0",
1082 display: "flex",
1083 flexDirection: "column",
1084 gap: 12,
1085 },
1086 imageWrapper: {
1087 borderRadius: 16,
1088 overflow: "hidden",
1089 width: "100%",
1090 position: "relative",
1091 background: "#e2e8f0",
1092 },
1093 image: {
1094 width: "100%",
1095 height: "100%",
1096 objectFit: "cover",
1097 display: "block",
1098 },
1099 imagePlaceholder: {
1100 width: "100%",
1101 padding: "24px 16px",
1102 textAlign: "center",
1103 },
1104 caption: {
1105 fontSize: 13,
1106 lineHeight: 1.4,
1107 },
1108 list: {
1109 paddingLeft: 28,
1110 margin: "1em 0 0",
1111 listStyleType: "disc",
1112 listStylePosition: "outside",
1113 },
1114 nestedList: {
1115 paddingLeft: 20,
1116 marginTop: 8,
1117 listStyleType: "circle",
1118 listStylePosition: "outside",
1119 },
1120 listItem: {
1121 marginTop: 8,
1122 display: "list-item",
1123 },
1124 linkCard: {
1125 borderRadius: 16,
1126 border: "1px solid",
1127 display: "flex",
1128 flexDirection: "column",
1129 overflow: "hidden",
1130 textDecoration: "none",
1131 },
1132 linkPreview: {
1133 width: "100%",
1134 height: 180,
1135 objectFit: "cover",
1136 },
1137 linkPreviewPlaceholder: {
1138 width: "100%",
1139 height: 180,
1140 display: "flex",
1141 alignItems: "center",
1142 justifyContent: "center",
1143 fontSize: 14,
1144 },
1145 linkContent: {
1146 display: "flex",
1147 flexDirection: "column",
1148 gap: 6,
1149 padding: "16px 18px",
1150 },
1151 iframe: {
1152 width: "100%",
1153 height: 360,
1154 border: "1px solid #cbd5f5",
1155 borderRadius: 16,
1156 },
1157 math: {
1158 margin: "1em 0 0",
1159 padding: "14px 16px",
1160 borderRadius: 12,
1161 fontFamily: 'Menlo, Consolas, "SFMono-Regular", ui-monospace',
1162 overflowX: "auto",
1163 },
1164 code: {
1165 margin: "1em 0 0",
1166 padding: "14px 16px",
1167 borderRadius: 12,
1168 overflowX: "auto",
1169 fontSize: 14,
1170 },
1171 hr: {
1172 border: 0,
1173 borderTop: "1px solid",
1174 margin: "24px 0 0",
1175 },
1176 embedFallback: {
1177 padding: "12px 16px",
1178 borderRadius: 12,
1179 border: "1px solid #e2e8f0",
1180 fontSize: 14,
1181 },
1182};
1183
1184const theme = {
1185 light: {
1186 container: {
1187 background: "#ffffff",
1188 borderColor: "#e2e8f0",
1189 color: "#0f172a",
1190 boxShadow: "0 4px 18px rgba(15, 23, 42, 0.06)",
1191 },
1192 header: {},
1193 title: {
1194 color: "#0f172a",
1195 },
1196 subtitle: {
1197 color: "#475569",
1198 },
1199 meta: {
1200 color: "#64748b",
1201 },
1202 metaLink: {
1203 color: "#2563eb",
1204 textDecoration: "none",
1205 } satisfies React.CSSProperties,
1206 metaSeparator: {
1207 margin: "0 4px",
1208 } satisfies React.CSSProperties,
1209 paragraph: {
1210 color: "#1f2937",
1211 },
1212 heading: {
1213 1: { color: "#0f172a", fontSize: 30 },
1214 2: { color: "#0f172a", fontSize: 28 },
1215 3: { color: "#0f172a", fontSize: 24 },
1216 4: { color: "#0f172a", fontSize: 20 },
1217 5: { color: "#0f172a", fontSize: 18 },
1218 6: { color: "#0f172a", fontSize: 16 },
1219 } satisfies Record<number, React.CSSProperties>,
1220 blockquote: {
1221 background: "#f8fafc",
1222 borderColor: "#cbd5f5",
1223 color: "#1f2937",
1224 },
1225 figure: {},
1226 imageWrapper: {
1227 background: "#e2e8f0",
1228 },
1229 image: {},
1230 imagePlaceholder: {
1231 color: "#475569",
1232 },
1233 caption: {
1234 color: "#475569",
1235 },
1236 list: {
1237 color: "#1f2937",
1238 },
1239 linkCard: {
1240 borderColor: "#e2e8f0",
1241 background: "#f8fafc",
1242 color: "#0f172a",
1243 },
1244 linkPreview: {},
1245 linkPreviewPlaceholder: {
1246 background: "#e2e8f0",
1247 color: "#475569",
1248 },
1249 linkTitle: {
1250 fontSize: 16,
1251 color: "#0f172a",
1252 } satisfies React.CSSProperties,
1253 linkDescription: {
1254 margin: 0,
1255 fontSize: 14,
1256 color: "#475569",
1257 lineHeight: 1.5,
1258 } satisfies React.CSSProperties,
1259 linkUrl: {
1260 fontSize: 13,
1261 color: "#2563eb",
1262 wordBreak: "break-all",
1263 } satisfies React.CSSProperties,
1264 math: {
1265 background: "#f1f5f9",
1266 color: "#1f2937",
1267 border: "1px solid #e2e8f0",
1268 },
1269 code: {
1270 background: "#0f172a",
1271 color: "#e2e8f0",
1272 },
1273 hr: {
1274 borderColor: "#e2e8f0",
1275 },
1276 },
1277 dark: {
1278 container: {
1279 background: "rgba(15, 23, 42, 0.6)",
1280 borderColor: "rgba(148, 163, 184, 0.3)",
1281 color: "#e2e8f0",
1282 backdropFilter: "blur(8px)",
1283 boxShadow: "0 10px 40px rgba(2, 6, 23, 0.45)",
1284 },
1285 header: {},
1286 title: {
1287 color: "#f8fafc",
1288 },
1289 subtitle: {
1290 color: "#cbd5f5",
1291 },
1292 meta: {
1293 color: "#94a3b8",
1294 },
1295 metaLink: {
1296 color: "#38bdf8",
1297 textDecoration: "none",
1298 } satisfies React.CSSProperties,
1299 metaSeparator: {
1300 margin: "0 4px",
1301 } satisfies React.CSSProperties,
1302 paragraph: {
1303 color: "#e2e8f0",
1304 },
1305 heading: {
1306 1: { color: "#f8fafc", fontSize: 30 },
1307 2: { color: "#f8fafc", fontSize: 28 },
1308 3: { color: "#f8fafc", fontSize: 24 },
1309 4: { color: "#e2e8f0", fontSize: 20 },
1310 5: { color: "#e2e8f0", fontSize: 18 },
1311 6: { color: "#e2e8f0", fontSize: 16 },
1312 } satisfies Record<number, React.CSSProperties>,
1313 blockquote: {
1314 background: "rgba(30, 41, 59, 0.6)",
1315 borderColor: "#38bdf8",
1316 color: "#e2e8f0",
1317 },
1318 figure: {},
1319 imageWrapper: {
1320 background: "#1e293b",
1321 },
1322 image: {},
1323 imagePlaceholder: {
1324 color: "#94a3b8",
1325 },
1326 caption: {
1327 color: "#94a3b8",
1328 },
1329 list: {
1330 color: "#f1f5f9",
1331 },
1332 linkCard: {
1333 borderColor: "rgba(148, 163, 184, 0.3)",
1334 background: "rgba(15, 23, 42, 0.8)",
1335 color: "#e2e8f0",
1336 },
1337 linkPreview: {},
1338 linkPreviewPlaceholder: {
1339 background: "#1e293b",
1340 color: "#94a3b8",
1341 },
1342 linkTitle: {
1343 fontSize: 16,
1344 color: "#e0f2fe",
1345 } satisfies React.CSSProperties,
1346 linkDescription: {
1347 margin: 0,
1348 fontSize: 14,
1349 color: "#cbd5f5",
1350 lineHeight: 1.5,
1351 } satisfies React.CSSProperties,
1352 linkUrl: {
1353 fontSize: 13,
1354 color: "#38bdf8",
1355 wordBreak: "break-all",
1356 } satisfies React.CSSProperties,
1357 math: {
1358 background: "rgba(15, 23, 42, 0.8)",
1359 color: "#e2e8f0",
1360 border: "1px solid rgba(148, 163, 184, 0.35)",
1361 },
1362 code: {
1363 background: "#020617",
1364 color: "#e2e8f0",
1365 },
1366 hr: {
1367 borderColor: "rgba(148, 163, 184, 0.3)",
1368 },
1369 },
1370} as const;
1371
1372const linkStyles = {
1373 light: {
1374 color: "#2563eb",
1375 textDecoration: "underline",
1376 } satisfies React.CSSProperties,
1377 dark: {
1378 color: "#38bdf8",
1379 textDecoration: "underline",
1380 } satisfies React.CSSProperties,
1381} as const;
1382
1383const inlineCodeStyles = {
1384 light: {
1385 fontFamily: 'Menlo, Consolas, "SFMono-Regular", ui-monospace',
1386 background: "#f1f5f9",
1387 padding: "0 4px",
1388 borderRadius: 4,
1389 } satisfies React.CSSProperties,
1390 dark: {
1391 fontFamily: 'Menlo, Consolas, "SFMono-Regular", ui-monospace',
1392 background: "#1e293b",
1393 padding: "0 4px",
1394 borderRadius: 4,
1395 } satisfies React.CSSProperties,
1396} as const;
1397
1398const highlightStyles = {
1399 light: {
1400 background: "#fef08a",
1401 } satisfies React.CSSProperties,
1402 dark: {
1403 background: "#facc15",
1404 color: "#0f172a",
1405 } satisfies React.CSSProperties,
1406} as const;
1407
1408export default LeafletDocumentRenderer;