website-enchun-mgr/research/LexicalRenderer.tsx

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>
	);
}