fix(RichText): render real Lexical blockquote shape, not nested paragraphs

QuoteNode's children are flat text/linebreak nodes directly (confirmed
by reading @lexical/rich-text's source — insertNewAfter exits the quote
into a new paragraph on Enter, it doesn't nest one inside). The "quote"
case assumed nested paragraph children, which only happened to work for
this session's own hand-authored seed JSON; any blockquote actually
typed in the Payload admin editor rendered blank, since child.children
was undefined on a plain text/linebreak node.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-19 21:37:35 +00:00
parent 8bfbf74693
commit 59b73f6f1f
+16 -11
View File
@@ -164,17 +164,22 @@ function renderNode(node: LexicalNode, key: string): ReactNode {
className="absolute left-8 top-[2.1875rem] w-[8.5rem] h-[1.4375rem] object-cover pointer-events-none"
/>
<div className="w-px self-stretch bg-brand shrink-0" />
<div className="flex flex-col gap-3.5 flex-1">
{(node.children ?? []).map((child, i) => (
<p
key={`${key}-q-${i}`}
className="text-text-primary text-[1.75rem] leading-[1.1]"
style={{ fontFamily: "var(--font-caveat)" }}
>
{renderChildren(child.children, `${key}-q-${i}`)}
</p>
))}
</div>
{/* Lexical's real QuoteNode holds flat text/linebreak children
directly, NOT nested paragraphs — pressing Enter inside a
blockquote in the editor exits it into a new paragraph
rather than adding a line within it (confirmed by reading
@lexical/rich-text's QuoteNode.insertNewAfter). An earlier
version of this case assumed nested-paragraph children,
which only happened to work for this session's own
hand-authored seed JSON — any blockquote actually typed in
the CMS (Shift+Enter for a soft line break) rendered blank,
since child.children was undefined on a plain text node. */}
<p
className="text-text-primary text-[1.75rem] leading-[1.1] flex-1"
style={{ fontFamily: "var(--font-caveat)" }}
>
{renderChildren(node.children, key)}
</p>
</div>
);
default: