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:
+16
-11
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user