Skip to content

Newlines inside tables are incorrectly extracted when using rehype-raw and remark-gfm #30

@zimya

Description

@zimya

Initial checklist

Affected package

remark-gfm@4.0.1, rehype-raw@^7.0.0

Steps to reproduce

When parsing a markdown table using remark-gfm and rehype-raw, the \n text nodes inside the <table> generated by remark-rehype are incorrectly extracted and moved before the table element. This results in the table HTML being completely flattened into a single line, prefixed by multiple \ns.

Here is a minimal reproducible example:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeStringify from "rehype-stringify";

async function main() {
    const markdown = `
| Test | Table |
| --- | --- |
| A   | B   |
`;
    const output = await unified()
        .use(remarkParse)
        .use(remarkGfm)
        .use(remarkRehype, { allowDangerousHtml: true })
        .use(rehypeRaw)
        .use(rehypeStringify)
        .process(markdown);

    console.log(String(output));
}

main();

Run command: npx tsx test.ts

Actual behavior

\n\n\n\n\n\n\n\n\n\n\n\n\n<table><thead><tr><th>Test</th><th>Table</th></tr></thead><tbody><tr><td>A</td><td>B</td></tr></tbody></table>

Expected behavior

when .use(rehypeRaw) is removed:

<table>
<thead>
<tr>
<th>Test</th>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>

Runtime

No response

Package manager

npm@10.5.1

Operating system

macOS 10.15

Build and bundle tools

esbuild

Metadata

Metadata

Assignees

No one assigned

    Labels

    🤞 phase/openPost is being triaged manually

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions