Skip to content

Quote blocks with line breaks (\n) are truncated #188

@txemaleon

Description

@txemaleon

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

  1. Create a Notion quote block with multiple lines/paragraphs
  2. Use the library to render the quote block
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions