Why does remark-stringify remove newlines when I convert heading to paragraphs?

[Kenya-West]

I try to create a web app that flattens all the complex Markdown to messengers' syntax they support.

Firstly, I try to map heading syntax to paragraphs.

That causes a bug: newlines are lost for lists, dividers, and other syntax morphemes. How do I keep the newlines?

Text repro

Imagine we have simple pipeline transform markdown into another markdown:

unified()
      .use(remarkParse)
      .use(remarkStringify)
      .processSync(markdown)
      .toString()

It produces markdown nearly 100% identical (depends on remark-stringify settings).

But adding a function to transform heading into paragraphs breaks newlines:

unified()
      .use(remarkParse)
      .use(transformHeadings)
      .use(remarkStringify)
      .processSync(markdown)
      .toString()
      
function transformHeadings(node: Node, index: number, parent: Parent) {
      if (node.type === 'heading' && node.depth && node.depth <= 3) {
        const boldText: typeof node = { type: 'strong', children: node.children }; // Wrap content in strong (bold)
        parent.children.splice(index, 1, boldText);
        addNewlines(boldText, parent, 2);
      } else if (node.type === 'heading' && node.depth && node.depth > 3) {
        // Convert headers (level 4 and above) to italic text
        const italicText: typeof node = { ...node, type: 'emphasis', children: node.children }; // Wrap content in emphasis (italic)
        parent.children.splice(index, 1, italicText);
        addNewlines(italicText, parent, 2);
      }
    }

Repro

Simple repro: https://stackblitz.com/edit/stackblitz-starters-veapeg?file=src%2Fmain.ts

[ChristianMurphy]

@Kenya-West a few suggestions.

1. Wrap the text in a paragraph, that will give is spacing aware from other content
2. Use unist util visit https://unifiedjs.com/learn/recipe/tree-traversal/ to handle different tree structures, where content is at a layer different from root

[Kenya-West]

Thanks for quick reply @ChristianMurphy!

Wrap the text in a paragraph, that will give is spacing aware from other content

I do not think it is possible to achieve since the markdown text is provided by user.

Use unist util visit https://unifiedjs.com/learn/recipe/tree-traversal/ to handle different tree structures, where content is at a layer different from root

I read the docs and as far as I can see I do it correctly in reproduction example.

[ChristianMurphy]

Broadly speaking, remark is an Abstract Syntax Tree library.
Emphasis here on Abstract, when you transform content with it the structure (paragraphs, headings, lists, etc) will be retained, the exact syntax (number of newlines, unnecessary escapes, etc) will not be retained.

I do not think it is possible to achieve since the markdown text is provided by user.

But you provide the CSS correct?

I read the docs and as far as I can see I do it correctly in reproduction example.

I'm not sure I fully follow, I see some newlines shift around, but what is it that you want to have happen, and why do you need the newlines in that specific way?

[wooorm]

Your code is pretty messy. It’s hard to understand what’s going on.

We have types: it is strongly recommended that you use those types instead of making your own Node.
When you use those types, you will get type errors, which point to the problems that are going on.

Solving those problems, will solve your problem of newlines.

You are replacing a heading node, which is inside root. root has blocks: it gets newlines between them.
You put a strong and emphasis nodes inside root: inlines, next to blocks. So you will get newlines around those strongs and emphasiss.