how to prevent text from being trimmed

[sergioramos]

Currently the text handler trims the node value: https://github.com/syntax-tree/mdast-util-to-hast/blob/2a17449d56b65a06818e5e9aff89c671562c0991/lib/handlers/text.js#L10

So if I have a node like { type: 'text', value: '\n ' } it gets transformed into { type: 'text', value: '\n' } which is far from what I need.

Any way to prevent this? @wooorm

[wooorm]

This is how markdown works 🤷‍♂️

which is far from what I need.

Why?

[sergioramos]

@wooorm first of all, thank you for answering.

So, in my latest changes to remark-prism I changed it from just returning an html string to returning a tree.

---

Input:

\`\`\`json
{
  "hello": "world"
}
\`\`\`

Return (html):

{
  "type": "html",
  "value": "<div class=\"remark-highlight\"><pre class=\"language-json\"><code class=\"language-json\"><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">\"hello\"</span><span class=\"token operator\">:</span> <span class=\"token string\">\"world\"</span>\n<span class=\"token punctuation\">}</span></code></pre></div>"
}

Return (tree):

{
  "type": "element",
  "tagName": "div",
  "data": {
    "hName": "div",
    "hProperties": {
      "className": "remark-highlight"
    }
  },
  "properties": {
    "className": "remark-highlight"
  },
  "children": [
    {
      "type": "element",
      "tagName": "pre",
      "data": {
        "hName": "pre",
        "hProperties": {
          "className": [
            "language-json"
          ]
        }
      },
      "properties": {
        "className": [
          "language-json"
        ]
      },
      "children": [
        {
          "type": "element",
          "tagName": "code",
          "data": {
            "hName": "code",
            "hProperties": {
              "className": "language-json"
            }
          },
          "properties": {
            "className": "language-json"
          },
          "children": [
            {
              "type": "element",
              "tagName": "span",
              "data": {
                "hName": "span",
                "hProperties": {
                  "className": [
                    "token",
                    "punctuation"
                  ]
                }
              },
              "properties": {
                "className": [
                  "token",
                  "punctuation"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "{"
                }
              ]
            },
            {
              "type": "text",
              "value": "\n  "
            },
            {
              "type": "element",
              "tagName": "span",
              "data": {
                "hName": "span",
                "hProperties": {
                  "className": [
                    "token",
                    "property"
                  ]
                }
              },
              "properties": {
                "className": [
                  "token",
                  "property"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "\"hello\""
                }
              ]
            },
            {
              "type": "element",
              "tagName": "span",
              "data": {
                "hName": "span",
                "hProperties": {
                  "className": [
                    "token",
                    "operator"
                  ]
                }
              },
              "properties": {
                "className": [
                  "token",
                  "operator"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": ":"
                }
              ]
            },
            {
              "type": "text",
              "value": " "
            },
            {
              "type": "element",
              "tagName": "span",
              "data": {
                "hName": "span",
                "hProperties": {
                  "className": [
                    "token",
                    "string"
                  ]
                }
              },
              "properties": {
                "className": [
                  "token",
                  "string"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "\"world\""
                }
              ]
            },
            {
              "type": "text",
              "value": "\n"
            },
            {
              "type": "element",
              "tagName": "span",
              "data": {
                "hName": "span",
                "hProperties": {
                  "className": [
                    "token",
                    "punctuation"
                  ]
                }
              },
              "properties": {
                "className": [
                  "token",
                  "punctuation"
                ]
              },
              "children": [
                {
                  "type": "text",
                  "value": "}"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

---

Using a default setup, everything works as expected:

unified()
  .use(require('remark-parse'))
  .use(require('remark-prism'), options)
  .use(require('rehype-format'))
  .use(require('rehype-stringify'))
  .process(file, (err, file) => {
    // expected output
  });

With MDX (that uses mdast-util-to-hast), because the leading white space is trimmed, the indentation breaks:

const jsx = await mdx(src, {
  commonmark: true,
  gfm: true,
  remarkPlugins: [[require('remark-prism'), options]],
});

[sergioramos]

The only solution I have right now is to have these text nodes be raw nodes. But I'm uncertain if that will lead to unexpected consequences.

[wooorm]

remark is markdown (mdast), rehype is html (hast). You have element nodes, which is from hast, but should have mdast nodes.

I’m surprised this code works as is: I’d expect divs for all “element”s?

Solutions:

• you could make this a rehype plugin, use it with MDX in rehypePlugins, and with unified after parsing the markdown and transforming it into HTML with remark-rehype.
• Keep it as a remark plugin, but define how the markdown code node will turn into hast:

codeNode.data = {
  "hName": "div",
  "hProperties": { /*the hast properties you want*/ },
  "hChildren": [/*all the hast children you have at `children` now*/]
}

[sergioramos]

Got it. Really appreciate the help 👍