<summary> is not recognized.
Levent0z opened this issue · comments
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
Latest in your plaground
Link to runnable example
No response
Steps to reproduce
Go to the MDX playground and put in:
# Test
<details>
<summary>This should be the title of the section but it's not</summary>
Lorem Ipsum
</details>
Expected behavior
The text inside the summary should be the text of the expander.
Actual behavior
The text of the expander says "Details"
Runtime
No response
Package manager
No response
OS
macOS
Build and bundle tools
No response
Welcome @Levent0z! 👋
The behavior is expected.
There are some rather fine grained rules around what is considered block vs inline content in JSX.
See some recent conversations around this for more context https://github.com/orgs/mdx-js/discussions/2194, #2181, #2172, #2053, #2243
The issue you are running into is the same, inline vs block conflict, with a block which generates an inner paragraph.
Because there is a newline after <details> the nextline becomes a markdown block, that block by default will have a paragraph.
Which is translated to:
<details>
<p>
<summary>This is how MDX works</summary>
Lorem Ipsum
</p>
</details><summary> must be a direct child of <details> to appear.
There are a couple ways to resolve this.
Make the content a JSX expression
so that no markdown paragraph appears, using a wrapping {}
{<details>
<summary>This is how MDX works</summary>
Lorem Ipsum
</details>}Make the content a JSX inline
<details><summary>This is how MDX works</summary>Lorem Ipsum</details>
@ChristianMurphy It works if an empty line is added after the <summary> element, right?
<details>
<summary>This is how MDX works</summary>
Lorem Ipsum
</details>↓hast to YAML
type: root
children:
- type: mdxJsxFlowElement
name: details
attributes: []
data:
_mdxExplicitJsx: true
children:
- type: mdxJsxFlowElement
name: summary
attributes: []
data:
_mdxExplicitJsx: true
children:
- type: text
value: This is how MDX works
- type: element
tagName: p
properties: {}
children:
- type: text
value: Lorem Ipsum@tats-u perhaps, define "works" 🙂
In most browsers the original:
# Test
<details>
<summary>This should be the title of the section but it's not</summary>
Lorem Ipsum
</details>works without modification too.
In
<details>
<summary>This is how MDX works</summary>
Lorem Ipsum
</details>the paragraph is moved to a different spot, but is still added.
The two examples in #2263 (comment) remove the paragraph tag entirely.
In most browsers the original:
<p> wraps not only descriptive content but also <summary> and prevents <summary> from working properly (no title is set) in Chrome and Firefox. We must take every measure to avoid it.
the paragraph is moved to a different spot, but is still added.
This behavior harms nothing and is expected one for me. As expected, <summary> is the first direct child of <details>, and injected <p>'s follow <summary>. The explanatory text in <details> is sometimes too long to be fit in a single paragraph. Also <details> itself accepts <p> as its children as descriptive content.
I expect the following use case of <details> & <summary>:
General description.
Another general description.
<details>
<summary>Description for experts</summary>
This description is not for newbies.
This description satisfies only experts.
</details><p>General description.</p>
<p>Another general description.</p>
<details>
<summary>Description for experts</summary>
<p>This description is not for newbies.</p>
<p>This description satisfies only experts.</p>
<p><img alt="Detailed description" src="./image.webp"></p>
</details>
I don’t understand what you are looking for? If you have a question, can you put it concretely? AFAIK Details/summary works.
For general info on how MDX works, try it out, or look at the playground: https://mdxjs.com/playground/
@wooorm
All of the solutions suggested in #2263 (comment) seem to lack versatility and hassle us when we try to cram large detailed content with many paragraphs into the <details> element.
I just want to confirm the solution of adding an empty line between <summary> and the content is also (or maybe more) useful.
Make the content a JSX expression
We have to add too many tags instead of using Markdown syntax. Also custom components don't seem to work. Terrible.
Make the content a JSX inline
The line will be tooooooooooooooooo long. It's a more terrible idea to cram a long content into a single line.
I just want to confirm the solution of adding an empty line between
<summary>and the content is also (or maybe more) useful.
It depends on what you want.
All 3 ways provide different results. They are all useful in different cases.
If you know what result you want, you can pick the way to go about it.
I will go for the solution found by me in my case at this time.
Other solutions might have opportunity to be used by me in the future...