-
Notifications
You must be signed in to change notification settings - Fork 20
Description
Issue Description
Quote blocks containing line breaks (\n characters) are not rendering content after the first line break. The library appears to truncate the text at the first \n character instead of properly handling it as a line break within the quote.
Expected Behavior
Quote blocks should render all text content, with line breaks (\n) converted to proper HTML line breaks (<br>) or paragraph separations.
Actual Behavior
Only the text before the first \n character is rendered. All content after the first line break is completely omitted from the output.
Steps to Reproduce
- Create a Notion quote block with multiple lines/paragraphs
- Use the library to render the quote block
- Observe that only the first line is displayed
Example Data Structure
{
"classNames": false,
"block": {
"id": "200fabe0-0178-806b-8170-dd858f93c8a9",
"notionType": "quote",
"items": null,
"content": {
"text": [
{
"type": "text",
"text": {
"content": "First paragraph of the quote.\nSecond paragraph that should be visible.\nThird paragraph that should also be visible.",
"link": null
},
"annotations": {
"bold": false,
"italic": false,
"strikethrough": false,
"underline": false,
"code": false,
"color": "default"
},
"plain_text": "First paragraph of the quote.\nSecond paragraph that should be visible.\nThird paragraph that should also be visible.",
"href": null
}
]
}
}
}Current Workaround
We implemented a custom quote renderer that manually handles line breaks:
function NotionRendererQuote({ config }: DropedProps) {
const block = config.block;
if (!block?.content?.text) {
return null;
}
const renderTextContent = (textArray: any[]) =>
textArray.map((textItem, index) => {
const content = textItem.text?.content || textItem.plain_text || '';
const link = textItem.text?.link || textItem.href;
const annotations = textItem.annotations || {};
// Split content by \n and add <br> elements
const processedContent = content.split('\n').map((line: string, lineIndex: number) => (
<React.Fragment key={lineIndex}>
{line}
{lineIndex < content.split('\n').length - 1 && (
<span>
<br />
</span>
)}
</React.Fragment>
));
let styledContent = <React.Fragment key={index}>{processedContent}</React.Fragment>;
// Apply text formatting based on annotations
if (annotations.bold) {
styledContent = <strong key={index}>{processedContent}</strong>;
}
if (annotations.italic) {
styledContent = <em key={index}>{styledContent}</em>;
}
if (annotations.code) {
styledContent = <code key={index}>{styledContent}</code>;
}
if (annotations.underline) {
styledContent = <u key={index}>{styledContent}</u>;
}
if (annotations.strikethrough) {
styledContent = <s key={index}>{styledContent}</s>;
}
// Handle links
if (link?.url) {
return (
<a key={index} href={link.url} target="_blank" rel="noopener noreferrer">
{styledContent}
</a>
);
}
return styledContent;
});
return <blockquote>{renderTextContent(block.content.text)}</blockquote>;
}Environment
- Library version: @9gustin/react-notion-render@3.11.4
- React version: 19.1.0
- Node.js version: 20
Suggested Fix
The library's quote block renderer should split text content on \n characters and render each segment with appropriate line breaks, similar to how other block types handle multi-line content.