formatting issues in v0.7.0

[chris48s]

I'm currently working on upgrading to 0.7.0

Since the latest changes, text in <code> blocks (e.g: param names) is rendering incorrectly.

Compare the formatting of the string name in

:heavy_check_mark: 0.6.4

to

:x: 0.7.0

---

Also, less of a glaring issue but basically everything is on a new line now. e.g: in the first screenshot,

name string — REQUIRED

is all one single line of text

Now that is

name string — REQUIRED

spread across 4 lines.

This reproduces on the demo site e.g: https://docusaurus-openapi.netlify.app/petstore/add-a-new-pet-to-the-store

[niravcodes]

I was taking a look at this too, and this is what I've found:

According to MDXv3 docs on Interleaving, (effectively) for any tag that doesn't have text on that same line, the text will get rendered inside a <p> tag (evaluated as block level markdown). MDXv1 would have evaluated it as inline markdown, and not wrapped the text inside a <p> tag.

The code in the plugin that generates the MDX :

https://github.com/cloud-annotations/docusaurus-openapi/blob/43aa76d20c490da87d3afeac3469fc51c2b02ff1/packages/docusaurus-plugin-openapi/src/markdown/utils.ts#L12-L23

assumes that a <p> tag won't randomly appear inside the tags it's creating. It's output looks something like this:

<span style={{"opacity":"0.6"}}>
   — 
</span>
<strong style={{"fontSize":"var(--ifm-code-font-size)","color":"var(--openapi-required)"}}>
   REQUIRED
</strong>

But when this passes through the MDXv3 processor, it comes out as:

<span style={{"opacity":"0.6"}}>
<p>   — </p>
</span>
<strong style={{"fontSize":"var(--ifm-code-font-size)","color":"var(--openapi-required)"}}>
   <p>REQUIRED</p>
</strong>

hence the newlines everywhere.

What the plugin should have output is:

<span style={{"opacity":"0.6"}}>—</span>
<strong style={{"fontSize":"var(--ifm-code-font-size)","color":"var(--openapi-required)"}}>REQUIRED</strong>

This problem with MDX has been discussed before: https://github.com/mdx-js/mdx/issues/1798

Somehow, just changing the create function to put everything in the same line (return `<${tag}${propString}>${render(children)} </${tag}>`;) creates mdx that won't even build.

As a hacky temp solution, injecting this CSS:

.theme-api-markdown p{
  display:inline-block;
}

makes the pages look okay.

[bourdakos1]

hmm yea, I believe the newlines are required, because we need the code in between the tags to be treated as markdown. However, we don't want single lines to be treated as paragraph tags :/

I'll take a closer look at the MDXv3 docs this evening

[bourdakos1]

Working on a PR that fixes the formatting issues of the parameter tables, but also noticed a couple other v3 issues that I'm looking into