Skip to content

Incorrect nested unordered list rendering for AI-generated Markdown strings #318

@yizhi57block

Description

@yizhi57block

Bug Description

When rendering Markdown strings generated by an AI, there is an issue with how nested unordered lists are handled. Specifically, when each list item - is preceded by 3 spaces, the renderer interprets them as deeply nested lists instead of a single flat list.

Steps to Reproduce

Please check the code reproduction.

Expected Behavior

The string should be rendered as a standard unordered list (

    ) with three items at the same level.

    Actual Behavior

    The items are rendered as a nested structure (e.g., Item 2 is nested under Item 1, and Item 3 under Item 2), or the indentation causes incorrect list formatting.

    Image

    Code Sample

    import { Streamdown } from 'streamdown';
    
    export const MessageText: React.FC = () => {
    
    const mock = `### 3. **Polished Copyright Notice Section**\n   - **Section 2.1**: Changed \"(c)\" to the proper copyright symbol \"©\" and added \"All rights reserved\" for a more professional statement\n   - **Section 2.2(a)**: Removed \"the\" before \"copyright\" for smoother reading (\"all copyright and other intellectual property rights\")\n   - **Section 2.2(b)**: Removed redundant \"the\" for consistency (\"all copyright\" instead of \"all the copyright\")\n   - **Section 2.3**: Improved readability by restructuring the sentence to \"Our website and all materials therein are protected...\" and changed \"displaying or adapting\" to \"displaying, or adapting\" for proper punctuation\n\nThe document now has proper numbering, the new provision is correctly inserted, and the Copyright notice section reads more professionally and clearly.`
    
    	return (
    		<Streamdown
    			className="text-sm"
    		>
    			{mock}
    		</Streamdown>
    	)
    }

    Streamdown Version

    1.6.10

    React Version

    19.2.0

    Node.js Version

    22.13.0

    Browser(s)

    Chrome

    Operating System

    macOS

    Additional Context

    If I manually remove the leading spaces so that the hyphen starts at the beginning of the line, the list renders correctly:

    import { Streamdown } from 'streamdown';
    
    export const MessageText: React.FC = () => {
    // manually remove space before '-'
    const mock = `### 3. **Polished Copyright Notice Section**\n- **Section 2.1**: Changed \"(c)\" to the proper copyright symbol \"©\" and added \"All rights reserved\" for a more professional statement\n- **Section 2.2(a)**: Removed \"the\" before \"copyright\" for smoother reading (\"all copyright and other intellectual property rights\")\n- **Section 2.2(b)**: Removed redundant \"the\" for consistency (\"all copyright\" instead of \"all the copyright\")\n- **Section 2.3**: Improved readability by restructuring the sentence to \"Our website and all materials therein are protected...\" and changed \"displaying or adapting\" to \"displaying, or adapting\" for proper punctuation\n\nThe document now has proper numbering, the new provision is correctly inserted, and the Copyright notice section reads more professionally and clearly.`
    	return (
    		<Streamdown
    			className="text-sm"
    		>
    			{mock}
    		</Streamdown>
    	)
    }
    Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions