This fixes a little React hydration issue. The issue was already there, and is not a blocker, but is now logged thanks to React 18 new hydration callback onRecoverableError(error) (https://react.dev/blog/2022/03/29/react-v18)

The SSR/SSG render and the first CSR render outputs should match, so things such as typeof window !== "undefined" etc should be avoided.

This needs a new line at the end of the file it seems

I added a new line but not sure why it's needed? CI is passing. Is there linter I don't see?

I mentioned it because GitHub showed this icon presumably because there wasn't an extra new line, whereas all other files have that extra new line.

And yeah, it's normally enforced with a linter. See react-native's main eslint config: https://github.com/facebook/react-native/blob/2be409ff55b50563a5f123f7823fa7cdb72dbef9/packages/eslint-config-react-native/index.js#L264

Why does this need to be escaped?

Docusaurus v3 now uses https://github.com/remarkjs/remark-directive to provide support for admonitions, and other things using syntax such as :textDirective, ::leafDirective and :::containerDirective.

Re:invent is parsed as Re + :invent text directive.

This is what happens in the MDX playground if you turn the remark-directive option on:

This regression was captured by the visual regression tests:

https://app.argos-ci.com/slorber/rnw-visual-tests/builds/32/56012838

Technically it should probably be possible to add some code in Docusaurus v3 so that this escaping becomes un-necessary, and the unhandled AST directive nodes get serialized back as raw text. For now it's not implemented, and not even sure who should implement that 😅. Will think about it. I hope in the meantime it's not a blocker for you to merge this PR.

Was this change made by a formatter or manually?

These changes are manual and intentional.

With MDX v2, using new lines now create extra paragraphs, cf the MDX playground:

And RN website adds padding-bottom to all paragraphs of the website, so this extra <p> tag visually changes the way this is rendered.

I'm not sure the intent is to create a <a><p>Read more</p></a> here so refactored to avoid that and keep <a>Read more</a> as the final output.

There are only 4 similar cases and they are only found in very old blog posts, so I thought it was better to adjust those 4 blog posts rather than fixing it with CSS.

Somehow it's the exact same case as the <figcaption> case that you commented here: #3780 (comment)

But there are much more recent multiline usage cases of <figcaption> on the RNW site, like this one:

<figure>
  <img src="/docs/assets/d_pressable_anatomy.svg" width="1000" alt="Diagram of HitRect and PressRect and how they work." />
  <figcaption>
    You can set <code>HitRect</code> with <code>hitSlop</code> and set <code>PressRect</code> with <code>pressRetentionOffset</code>.
  </figcaption>
</figure>

That's the reason I decided to use CSS for <figcaption> instead of refactoring many MDX docs:

/*
Prevent useless bottom margin for multiline <figcaption> tags in MDX:
<figcaption>
  some paragraph text
</figcaption>
 */
figcaption > p:last-child {
  margin-bottom: 0;
}