Don't wrap custom component with p

[deadcoder0904]

I am making a Sidenote component which is basically an Alert. In MDX, it looks like:

<Sidenote type="info">
	The source file name(s) are larger than is supported by the file system. Try moving to a location
	which has a shorter path name, or try renaming to shorter name(s) before attempting this operation
</Sidenote>

And the code for it looks like:

import React from 'react'
import { InformationCircleIcon, ExclamationIcon, XCircleIcon } from '@heroicons/react/outline'
import clsx from 'clsx'

interface ISidenote {
	title?: string
	type: 'info' | 'warning' | 'error'
	children: React.ReactChild
}

export const Sidenote = ({ title, type = 'info', children }: ISidenote) => {
	return (
		<div
			className={clsx('border-[1px] bg-[hsl(0deg 0% 8%)] rounded-md', {
				'dark:border-red-400': type === 'error',
				'dark:border-yellow-400': type === 'warning',
				'dark:border-blue-400': type === 'info',
			})}
			role="alert"
		>
			<div
				className={clsx('flex items-center p-4', {
					'dark:bg-error': type === 'error',
					'dark:bg-warning': type === 'warning',
					'text-blue-900 bg-blue-100 dark:bg-info': type === 'info',
				})}
			>
				{type === 'info' && (
					<InformationCircleIcon className="text-blue-400 w-28 h-28" aria-hidden="true" />
				)}
				{type === 'warning' && (
					<ExclamationIcon className="text-yellow-400 w-28 h-28" aria-hidden="true" />
				)}
				{type === 'error' && <XCircleIcon className="text-red-400 w-28 h-28" aria-hidden="true" />}
				<div className="ml-3">
					{title && <h3 className="text-sm font-medium">{title}</h3>}
					<div className="mt-2 text-sm text-blue-900">{children}</div>
				</div>
			</div>
		</div>
	)
}

Notice, the {children} inside the div. It wraps a p around it but I don't want a p. I just want it to render the content as is.

How can I do that?

[ChristianMurphy]

Examples of how to do this in MDX 1 https://codesandbox.io/s/mdx-1-no-paragraph-0wst7 and MDX 2 https://codesandbox.io/s/mdx-2-no-paragraph-lituo

[ChristianMurphy]

Inside the children of the JSX block, content is markdown again.
For example a markdown heading can be included https://codesandbox.io/s/mdx-2-no-paragraph-forked-o7iu0
in your example the content is a paragraph.

You can instead put text inside the block, using JSX syntax as shown in https://codesandbox.io/s/mdx-2-no-paragraph-lituo
Or you could create a plugin, which unwraps the paragraph in places you don't want it, see https://unifiedjs.com/learn/guide/create-a-plugin/ and https://unifiedjs.com/learn/recipe/tree-traversal/ for an introduction to how to create plugins, and see https://github.com/remarkjs/remark-unwrap-images as a reference of a plugin with similar unwrapping functionality.

[deadcoder0904]

Inside the children of the JSX block, content is markdown again.

This makes sense.

You can instead put text inside the block

Yes, this is exactly what I did. I wrapped the whole Sidenote thing but its probably better to wrap the children inside it.

It definitely is confusing though as I thought it'll work like React. I think I'll pass it as a prop then which should work better than children :)

[ChristianMurphy]

It definitely is confusing though as I thought it'll work like React

The reverse is more confusing though, consider https://codesandbox.io/s/mdx-2-markdown-block-m4woo?file=/src/App.js

<Sidenote type="info">
  text
</Sidenote>

<Sidenote type="info">
  text [link]()
</Sidenote>

<Sidenote type="info">
  text [not-link]
</Sidenote>

<Sidenote type="info">
  text [link]
</Sidenote>

<Sidenote type="info">
  # heading

  text

  # heading
</Sidenote>

[link]: https://example.com

which of these five <Sidenote>'s content should be treated as markdown?

1. has only plain text
2. has plain text and inline markdown
3. has only plain text, but could also have inline markdown, if a reference were provided later
4. has plain text and inline markdown because a reference is provided later
5. has plain text and markdown blocks

treating 1 as not markdown, makes 2, 3, 4 ambiguous and confusing as to what should happen.

MDX 2/XDM resolves this ambiguity by treating all of the above as markdown.

[ChristianMurphy]

and handling breaks/paragraphs

<Sidenote type="info">
  if treated as jsx

  there is no line break in here

  all one block of text with no paragraph
</Sidenote>

<Sidenote type="info">
  # some markdown

  if treated as markdown

  there are paragraphs here

  which show as breaks between blocks of text
</Sidenote>

if the content is treated as markdown in some cases and JSX in others, adding anything markdown like, could change the formatting of unchanged, otherwise unaffected, content.
Paragraphs and breaks appearing suddenly because there is a heading block (or any other markdown block) added somewhere in the content.

Again consistently handling content as markdown resolves this.

[deadcoder0904]

@ChristianMurphy Ha, I thought about the reverse before even reading your comment. But thanks for such in-depth explanation. I do think you'll get more questions on the unnecessary p tag due to styling concerns so might as well add that in the FAQ. mdx-bundler has a great FAQ section right at the top :)