feat(live-codeblock): add support for noInline to interactive code blocks

[jpdriver]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

These changes were prompted by several new Docusaurus-based sites that Formidable is working on.

For now we've achieved this functionality by swizzling Playground, but it seemed prudent to propose contributing this back upstream so others can use it too.

Test Plan

Tests feel like they may not be required in this case (?) -- however I have included documentation updates which should adequately demo this functionality.

Test links

Deploy preview: https://deploy-preview-7514--docusaurus-2.netlify.app/docs/markdown-features/code-blocks/#imperative-rendering-noinline

Related issues/PRs

[jpdriver]

p.s. I've also seen the work in #6589 which would replace react-live as the library powering Interactive Code Editors.

The noInline prop isn't required for that library -- and code samples which work correctly with this would continue to do so even if that other PR lands and you move away from React Live 😅

given that context, is it worth me opening a separate PR to update the version of react-live this project currently uses? Docusaurus is currently on react-live@2.2.3 but the latest is react-live@3.1.0.

I'd love to support that upgrade however I can if that's of interest.

[Josh-Cena]

Thanks for working on this!

Could you fix the build failure? We're missing an optional chaining.

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	25f2adf
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6298038a49e1f90009b03452
😎 Deploy Preview	https://deploy-preview-7514--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟢 92	🟢 100	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 84	🟢 99	🟢 100	🟢 100	🟢 90	Report

[slorber]

LGTM 👍 thanks

[nihgwu]

TBH I don't like the idea of introducing render() in the doc for multi statements support, as you can see more and more doc sites are using export default App which is also supported by react-runner seamlessly, and no noInline needed, you are free to switch between inline or noInline mode, like https://www.radix-ui.com/docs/primitives/components/accordion, the source code could be runnable directly in react-runner without any change, and you can see how easy it is to integrate it https://github.com/radix-ui/website/pull/329/files