Markdown: paragraphs in list items aren't being rendered as expected

[wbamberg]

In the numbered list at: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values#active_learning_our_own_return_value_function, list items are not being split into paragraphs, although the markup suggests that they should be.

Markup: https://github.com/mdn/content/blob/726914f2e9eae609c3d1edd45d123064a4aa39be/files/en-us/learn/javascript/building_blocks/return_values/index.md?plain=1#L128-L177 (see for example the text in item 3 after the code block).

Result in the commonmark demo: https://spec.commonmark.org/dingus/?text=%0A1.%20%20First%20of%20all%2C%20make%20a%20local%20copy%20of%20the%20%5Bfunction-library.html%5D(https%3A%2F%2Fgithub.com%2Fmdn%2Flearning-area%2Fblob%2Fmaster%2Fjavascript%2Fbuilding-blocks%2Ffunctions%2Ffunction-library.html)%20file%20from%20GitHub.%20This%20is%20a%20simple%20HTML%20page%20containing%20a%20text%20%7B%7Bhtmlelement(%22input%22)%7D%7D%20field%20and%20a%20paragraph.%20There%27s%20also%20a%20%7B%7Bhtmlelement(%22script%22)%7D%7D%20element%2C%20in%20which%20we%20have%20stored%20a%20reference%20to%20both%20HTML%20elements%20in%20two%20variables.%20This%20little%20page%20will%20allow%20you%20to%20enter%20a%20number%20into%20the%20text%20box%2C%20and%20display%20different%20numbers%20related%20to%20it%20in%20the%20paragraph%20below.%0A2.%20%20Let%27s%20add%20some%20useful%20functions%20to%20this%20%60%3Cscript%3E%60%20element.%20Below%20the%20two%20existing%20lines%20of%20%5BJavaScript%5D(%2Fen-US%2Fdocs%2FWeb%2FJavaScript)%2C%20add%20the%20following%20function%20definitions%3A%0A%0A%20%20%20%20%60%60%60js%0A%20%20%20%20function%20squared(num)%20%7B%0A%20%20%20%20%20%20return%20num%20*%20num%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20cubed(num)%20%7B%0A%20%20%20%20%20%20return%20num%20*%20num%20*%20num%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20function%20factorial(num)%20%7B%0A%20%20%20%20%20%20if%20(num%20%3C%200)%20return%20undefined%3B%0A%20%20%20%20%C2%A0%20if%20(num%20%3D%3D%200)%20return%201%3B%0A%20%20%20%20%C2%A0%20let%20x%20%3D%20num%20-%201%3B%0A%20%20%20%20%20%20while%20(x%20%3E%201)%20%7B%0A%20%20%20%20%20%20%20%20num%20*%3D%20x%3B%0A%20%20%20%20%20%20%20%20x--%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20return%20num%3B%0A%20%20%20%20%7D%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20The%20%60squared()%60%20and%20%60cubed()%60%20functions%20are%20fairly%20obvious%20%E2%80%94%20they%20return%20the%20square%20or%20cube%20of%20the%20number%20that%20was%20given%20as%20a%20parameter.%20The%20%60factorial()%60%20function%20returns%20the%20%5Bfactorial%5D(https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FFactorial)%20of%20the%20given%20number.%0A%0A3.%20%20Next%2C%20we%27re%20going%20to%20include%20a%20way%20to%20print%20out%20information%20about%20the%20number%20entered%20into%20the%20text%20input.%20Enter%20the%20following%20event%20handler%20below%20the%20existing%20functions%3A%0A%0A%20%20%20%20%60%60%60js%0A%20%20%20%20input.addEventListener(%27change%27%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20%20%20const%20num%20%3D%20parseFloat(input.value)%3B%0A%20%20%20%20%20%20if(isNaN(num))%20%7B%0A%20%20%20%20%20%20%20%20para.textContent%20%3D%20%27You%20need%20to%20enter%20a%20number!%27%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20para.textContent%20%3D%20%60%24%7Bnum%7D%20squared%20is%20%24%7Bsquared(num)%7D.%20%60%3B%0A%20%20%20%20%20%20%20%20para.textContent%20%2B%3D%20%60%24%7Bnum%7D%20cubed%20is%20%24%7Bcubed(num)%7D.%20%60%3B%0A%20%20%20%20%20%20%20%20para.textContent%20%2B%3D%20%60%24%7Bnum%7D%20factorial%20is%20%24%7Bfactorial(num)%7D.%20%60%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%60%60%60%0A%0A%20%20%20%20Here%20we%20are%20adding%20a%20listener%20to%20the%20%60change%60%20event.%20It%20runs%20whenever%20the%20%60change%60%20event%20fires%20on%20the%20text%20input%20%E2%80%94%20that%20is%2C%20when%20a%20new%20value%20is%20entered%20into%20the%20text%20%60input%60%2C%20and%20submitted%C2%A0(e.g.%2C%20enter%20a%20value%2C%20then%20unfocus%20the%20input%20by%20pressing%20%3Ckbd%3ETab%3C%2Fkbd%3E%20or%20%3Ckbd%3EReturn%3C%2Fkbd%3E).%20When%20this%20anonymous%20function%20runs%2C%20the%20value%20in%20the%20%60input%60%20is%20stored%20in%20the%20%60num%60%20constant.%0A%0A%20%20%20%20Next%2C%20we%20do%20a%20conditional%20test.%20If%20the%20entered%20value%20is%20not%20a%20number%2C%20an%20error%20message%20is%20printed%20to%20the%20paragraph.%20The%20test%20looks%20at%20whether%20the%20expression%20%60isNaN(num)%60%20returns%20%60true%60.%20The%20%5B%60isNaN()%60%5D(%2Fen-US%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FisNaN)%20function%20to%20test%20whether%20the%20%60num%60%20value%20is%20not%20a%20number%20%E2%80%94%20if%20so%2C%20it%20returns%20%60true%60%2C%20and%20if%20not%2C%20it%20returns%C2%A0%60false%60.%0A%0A%20%20%20%20If%20the%20test%20returns%20%60false%60%2C%20the%20%60num%60%20value%20is%20a%20number.%20Therefore%2C%20a%20sentence%20is%20printed%20out%20inside%20the%20paragraph%20element%20that%20states%20the%20square%2C%20cube%2C%20and%20factorial%20values%20of%20the%20number.%20The%20sentence%20calls%20the%20%60squared()%60%2C%20%60cubed()%60%2C%20and%20%60factorial()%60%20functions%20to%20calculate%20the%20required%20values.%0A

(sorry)

Note also that the list items are being split in the GitHub rich view of the source: https://github.com/mdn/content/blob/726914f2e9eae609c3d1edd45d123064a4aa39be/files/en-us/learn/javascript/building_blocks/return_values/index.md#active-learning-our-own-return-value-function.

[caugner]

The issue seems to be about this item?

Resolving this means figuring out where the information about the in-item paragraph information gets lost. This might be a remark issue, or not.

[cadamini]

I have quickly tested this in a draft PR to investigate. The paragraphs become strange text items:

This remark issue and linked PR seem to be related:

remarkjs/remark#523 reported a similar issue for lists in lists in remark 8.0.3

This has been solved in remark-parse version 13.0.0.

The yarn.lock of mdn/yari shows remark-parse "^9.0.0".

Please investigate. Maybe this issue can be closed. I also submitted a PR to improve content including a workaround now.

[caugner]

FWIW @Josh-Cena wrote in #9282 (comment):

There is code specifically removing descendant paragraphs:

yari/markdown/m2h/handlers/index.ts

Lines 114 to 120 in adbe6b3

	// This removes directly descendent paragraphs
	const items = all(h, node).map((item) => ({
	...item,
	children: item.children.flatMap((child) =>
	child.tagName == "p" ? child.children : [child]
	),
	}));

It seems very much intentional, but I don't know why.

[caugner]

#11930 is a step towards resolving this issue.

[fiji-flo]

@wbamberg finally this should be resolved.