Skip to content

Do not create newline child when two MDX expressions are adjacent #2653

@talatkuyuk

Description

@talatkuyuk

Initial checklist

Affected package

remark-mdx or @mdx-js/mdx itself

Steps to reproduce

I created a basic CustomMDX component

import * as runtime from "react/jsx-runtime";
import { evaluate } from "@mdx-js/mdx";

interface CustomMDXProps {
  source: string;
  [key: string]: unknown;
}

export default async function CustomMDX({ source, ...rest }: CustomMDXProps) {
  const { default: MDXContent } = await evaluate(source, {
    ...runtime,
  });

  return <MDXContent {...rest} />;
}

It works fine. I supplied two props bar and foo, and I rendered it.

<CustomMDX source={source} bar="bar" foo="foo" />;

There is an unwanted new line \n in children depending to design of the source regarding with MDX expressions. I will explain below.

Actual behavior

If the source is # {props.foo} {props.bar} the children of h1 is [props.foo, " ", props.bar] it is okey.

If the source is **{props.foo} {props.bar}** the children of strong is [props.foo, " ", props.bar] it is okey.

If the source is {props.foo} {props.bar} the children is [props.foo, "\n", props.bar] the problem: newline instead of a space.

If the source is {props.foo}{props.bar} the children is [props.foo, "\n", props.bar] the problem: actually no space but a newline appeared.

If the source is {props.foo} xyz {props.bar} the children is [props.foo, " xyz ", props.bar] it is okey.

If the source is {props.foo}x{props.bar} the children is [props.foo, "x", props.bar] No space around x, it is okey.

Expected behavior

When the source is composed just from expressions like {props.foo} {props.bar} even without a text, the children should preserve the space instead of newline expecting [props.foo, " ", props.bar] instead of [props.foo, "\n", props.bar]

Runtime

node@24, @mdx-js/mdx@latest, react@latest

Package manager

npm@latest

Operating system

macos

Build and bundle tools

No response

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