docs: add research assets, screenshots and guides

Include supplementary documentation, research notes on Lexical/UX, and setup guides.

research/LexicalRenderer.tsx

@@ -0,0 +1,90 @@
+import type { SerializedEditorState } from "@payloadcms/richtext-lexical/lexical";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { useMemo } from "react";
+
+const PAYLOAD_BASE_URL =
+	import.meta.env.VITE_PAYLOAD_API_BASE ||
+	"https://ricenoodlestw-admin.anlstudio.cc";
+
+export interface LexicalRendererProps {
+	content: SerializedEditorState;
+	className?: string;
+}
+
+function processNodes(nodes: any[]): any[] {
+	if (!Array.isArray(nodes)) return nodes;
+
+	return nodes.map((node) => {
+		if (!node || typeof node !== "object") return node;
+
+		const processedNode = structuredClone(node);
+
+		if (processedNode.type === "upload" && processedNode.value?.url) {
+			const url = processedNode.value.url;
+			if (typeof url === "string" && !url.startsWith("http")) {
+				processedNode.value.url = `${PAYLOAD_BASE_URL}${url}`;
+
+				if (
+					processedNode.value.sizes &&
+					typeof processedNode.value.sizes === "object"
+				) {
+					Object.keys(processedNode.value.sizes).forEach((sizeKey) => {
+						const size = processedNode.value.sizes[sizeKey];
+						if (
+							size?.url &&
+							typeof size.url === "string" &&
+							!size.url.startsWith("http")
+						) {
+							processedNode.value.sizes[sizeKey].url =
+								`${PAYLOAD_BASE_URL}${size.url}`;
+						}
+					});
+				}
+			}
+		}
+
+		if (processedNode.children && Array.isArray(processedNode.children)) {
+			processedNode.children = processNodes(processedNode.children);
+		}
+
+		if (processedNode.fields && typeof processedNode.fields === "object") {
+			Object.keys(processedNode.fields).forEach((key) => {
+				const field = processedNode.fields[key];
+				if (field && typeof field === "object" && field.root?.children) {
+					processedNode.fields[key].root.children = processNodes(
+						field.root.children
+					);
+				}
+			});
+		}
+
+		return processedNode;
+	});
+}
+
+export default function LexicalRenderer({
+	content,
+	className,
+}: LexicalRendererProps) {
+	const processedContent = useMemo(() => {
+		if (!content?.root?.children) return content;
+
+		return {
+			...content,
+			root: {
+				...content.root,
+				children: processNodes(content.root.children),
+			},
+		};
+	}, [content]);
+
+	if (!processedContent) {
+		return null;
+	}
+
+	return (
+		<div className={className} suppressHydrationWarning>
+			<RichText data={processedContent} />
+		</div>
+	);
+}