From f25ee0cbf581cc620dbbb03a577d7fc7c74f750a Mon Sep 17 00:00:00 2001
From: JP <jpdriver@users.noreply.github.com>
Date: Thu, 2 Jun 2022 01:34:20 -0700
Subject: [PATCH] feat(live-codeblock): add support for noInline to interactive
 code blocks (#7514)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
---
 .../src/theme-live-codeblock.d.ts             |  8 ++++-
 .../src/theme/Playground/index.tsx            |  3 ++
 .../markdown-features-code-blocks.mdx         | 36 +++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
index 5bb5e51d2d26..b4dd299705cd 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
+++ b/packages/docusaurus-theme-live-codeblock/src/theme-live-codeblock.d.ts
@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/// <reference types="@docusaurus/theme-classic" />
+/// <reference types="@docusaurus/module-type-aliases" />
+
 declare module '@docusaurus/theme-live-codeblock' {
   export type ThemeConfig = {
     liveCodeBlock: {
@@ -14,9 +17,12 @@ declare module '@docusaurus/theme-live-codeblock' {
 }
 
 declare module '@theme/Playground' {
+  import type {Props as BaseProps} from '@theme/CodeBlock';
   import type {LiveProviderProps} from 'react-live';
 
-  export interface Props extends LiveProviderProps {
+  type CodeBlockProps = Omit<BaseProps, 'className' | 'language' | 'title'>;
+
+  export interface Props extends CodeBlockProps, LiveProviderProps {
     children: string;
   }
   export default function Playground(props: LiveProviderProps): JSX.Element;
diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
index ef5c0f0f4ff9..81fa2ea65b0a 100644
--- a/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
+++ b/packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.tsx
@@ -93,11 +93,14 @@ export default function Playground({
   } = themeConfig as ThemeConfig;
   const prismTheme = usePrismTheme();
 
+  const noInline = props.metastring?.includes('noInline') ?? false;
+
   return (
     <div className={styles.playgroundContainer}>
       {/* @ts-expect-error: type incompatibility with refs */}
       <LiveProvider
         code={children.replace(/\n$/, '')}
+        noInline={noInline}
         transformCode={transformCode ?? ((code) => `${code};`)}
         theme={prismTheme}
         {...props}>
diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
index 2eaaf21837c8..15a30c528017 100644
--- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
@@ -569,6 +569,42 @@ function MyPlayground(props) {
 </BrowserWindow>
 ```
 
+### Imperative Rendering (noInline)
+
+The `noInline` option should be used to avoid errors when your code spans multiple components or variables.
+
+````md
+```jsx live noInline
+const project = 'Docusaurus';
+
+const Greeting = () => <p>Hello {project}!</p>;
+
+render(<Greeting />);
+```
+````
+
+Unlike an ordinary interactive code block, when using `noInline` React Live won't wrap your code in an inline function to render it.
+
+You will need to explicitly call `render()` at the end of your code to display the output.
+
+````mdx-code-block
+<BrowserWindow>
+
+```jsx live noInline
+const project = "Docusaurus";
+
+const Greeting = () => (
+  <p>Hello {project}!</p>
+);
+
+render(
+  <Greeting />
+);
+```
+
+</BrowserWindow>
+````
+
 ## Using JSX markup in code blocks {#using-jsx-markup}
 
 Code block in Markdown always preserves its content as plain text, meaning you can't do something like: