@docusaurus/theme-live-codeblock 3.7.0 → 3.8.0-canary-6327

package/lib/theme/CodeBlock/index.d.ts

@@ -4,7 +4,11 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import { type Props } from '@theme-init/CodeBlock';
-declare const _default: (props: Props) => React.JSX.Element;
-export default _default;
+import { type ReactNode } from 'react';
+import type { Props as CodeBlockProps } from '@theme/CodeBlock';
+declare module '@theme/CodeBlock' {
+    interface Props {
+        live?: boolean;
+    }
+}
+export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode;

package/lib/theme/CodeBlock/index.js

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import Playground from '@theme/Playground';
-import ReactLiveScope from '@theme/ReactLiveScope';
-import CodeBlock from '@theme-init/CodeBlock';
-const withLiveEditor = (Component) => {
-  function WrappedComponent(props) {
-    if (props.live) {
-      return <Playground scope={ReactLiveScope} {...props} />;
-    }
-    return <Component {...props} />;
-  }
-  return WrappedComponent;
-};
-export default withLiveEditor(CodeBlock);
+import OriginalCodeBlock from '@theme-init/CodeBlock';
+import LiveCodeBlock from '@theme/LiveCodeBlock';
+function isLiveCodeBlock(props) {
+  return !!props.live;
+}
+export default function CodeBlockEnhancer(props) {
+  return isLiveCodeBlock(props) ? (
+    <LiveCodeBlock {...props} />
+  ) : (
+    <OriginalCodeBlock {...props} />
+  );
+}

package/lib/theme/LiveCodeBlock/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/LiveCodeBlock';
+export default function LiveCodeBlock(props: Props): ReactNode;

package/lib/theme/LiveCodeBlock/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
+export default function LiveCodeBlock(props) {
+  return <Playground scope={ReactLiveScope} {...props} />;
+}

package/lib/theme/Playground/Container/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Container';
+export default function PlaygroundContainer({ children }: Props): ReactNode;

package/lib/theme/Playground/Container/index.js

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import styles from './styles.module.css';
+export default function PlaygroundContainer({children}) {
+  return <div className={styles.playgroundContainer}>{children}</div>;
+}

package/lib/theme/Playground/Container/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
+}

package/lib/theme/Playground/Editor/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+export default function PlaygroundEditor(): ReactNode;

package/lib/theme/Playground/Editor/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {LiveEditor} from 'react-live';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+import styles from './styles.module.css';
+export default function PlaygroundEditor() {
+  const isBrowser = useIsBrowser();
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </PlaygroundHeader>
+      <LiveEditor
+        // We force remount the editor on hydration,
+        // otherwise dark prism theme is not applied
+        key={String(isBrowser)}
+        className={styles.playgroundEditor}
+      />
+    </>
+  );
+}

package/lib/theme/Playground/Editor/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundEditor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.playgroundEditor pre {
+  border-radius: 0;
+}

package/lib/theme/Playground/Header/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+export default function PlaygroundHeader({ children, }: {
+    children: ReactNode;
+}): ReactNode;

package/lib/theme/Playground/Header/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+export default function PlaygroundHeader({children}) {
+  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+}

package/lib/theme/Playground/Header/styles.module.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundHeader {
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-content);
+  font-size: var(--ifm-code-font-size);
+}
+
+.playgroundHeader:first-of-type {
+  background: var(--ifm-color-emphasis-700);
+  color: var(--ifm-color-content-inverse);
+}

package/lib/theme/Playground/Layout/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+export default function PlaygroundLayout(): ReactNode;

package/lib/theme/Playground/Layout/index.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import PlaygroundPreview from '@theme/Playground/Preview';
+import PlaygroundEditor from '@theme/Playground/Editor';
+function useLiveCodeBlockThemeConfig() {
+  const themeConfig = useThemeConfig();
+  return themeConfig.liveCodeBlock;
+}
+export default function PlaygroundLayout() {
+  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+  return (
+    <>
+      {playgroundPosition === 'top' ? (
+        <>
+          <PlaygroundPreview />
+          <PlaygroundEditor />
+        </>
+      ) : (
+        <>
+          <PlaygroundEditor />
+          <PlaygroundPreview />
+        </>
+      )}
+    </>
+  );
+}

package/lib/theme/Playground/Preview/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+export default function PlaygroundPreview(): ReactNode;

package/lib/theme/Playground/Preview/index.js

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {LiveError, LivePreview} from 'react-live';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import {ErrorBoundaryErrorMessageFallback} from '@docusaurus/theme-common';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+import styles from './styles.module.css';
+function Loader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
+function PlaygroundLivePreview() {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<Loader />}>
+      {() => (
+        <>
+          <ErrorBoundary
+            fallback={(params) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}>
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+export default function PlaygroundPreview() {
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </PlaygroundHeader>
+      <div className={styles.playgroundPreview}>
+        <PlaygroundLivePreview />
+      </div>
+    </>
+  );
+}

package/lib/theme/Playground/Preview/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundPreview {
+  padding: 1rem;
+  background-color: var(--ifm-pre-background);
+}

package/lib/theme/Playground/Provider/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { type ReactNode } from 'react';
+import type { Props } from '@theme/Playground/Provider';
+export default function PlaygroundProvider({ code, children, ...props }: Props): ReactNode;

package/lib/theme/Playground/Provider/index.js

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import {LiveProvider} from 'react-live';
+import {usePrismTheme} from '@docusaurus/theme-common';
+// this should rather be a stable function
+// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
+const DEFAULT_TRANSFORM_CODE = (code) => `${code};`;
+export default function PlaygroundProvider({code, children, ...props}) {
+  const prismTheme = usePrismTheme();
+  const noInline = props.metastring?.includes('noInline') ?? false;
+  return (
+    <LiveProvider
+      noInline={noInline}
+      theme={prismTheme}
+      {...props}
+      code={code?.replace(/\n$/, '')}
+      transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
+      {children}
+    </LiveProvider>
+  );
+}

package/lib/theme/Playground/index.js

@@ -5,119 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
-import Translate from '@docusaurus/Translate';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import {
-  ErrorBoundaryErrorMessageFallback,
-  usePrismTheme,
-} from '@docusaurus/theme-common';
-import ErrorBoundary from '@docusaurus/ErrorBoundary';
-import styles from './styles.module.css';
-function Header({children}) {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
-}
-function LivePreviewLoader() {
-  // Is it worth improving/translating?
-  // eslint-disable-next-line @docusaurus/no-untranslated-text
-  return <div>Loading...</div>;
-}
-function Preview() {
-  // No SSR for the live preview
-  // See https://github.com/facebook/docusaurus/issues/5747
-  return (
-    <BrowserOnly fallback={<LivePreviewLoader />}>
-      {() => (
-        <>
-          <ErrorBoundary
-            fallback={(params) => (
-              <ErrorBoundaryErrorMessageFallback {...params} />
-            )}>
-            <LivePreview />
-          </ErrorBoundary>
-          <LiveError />
-        </>
-      )}
-    </BrowserOnly>
-  );
-}
-function ResultWithHeader() {
-  return (
-    <>
-      <Header>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </Header>
-      {/* https://github.com/facebook/docusaurus/issues/5747 */}
-      <div className={styles.playgroundPreview}>
-        <Preview />
-      </div>
-    </>
-  );
-}
-function ThemedLiveEditor() {
-  const isBrowser = useIsBrowser();
-  return (
-    <LiveEditor
-      // We force remount the editor on hydration,
-      // otherwise dark prism theme is not applied
-      key={String(isBrowser)}
-      className={styles.playgroundEditor}
-    />
-  );
-}
-function EditorWithHeader() {
-  return (
-    <>
-      <Header>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </Header>
-      <ThemedLiveEditor />
-    </>
-  );
-}
-// this should rather be a stable function
-// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
-const DEFAULT_TRANSFORM_CODE = (code) => `${code};`;
+import PlaygroundProvider from '@theme/Playground/Provider';
+import PlaygroundContainer from '@theme/Playground/Container';
+import PlaygroundLayout from '@theme/Playground/Layout';
 export default function Playground({children, transformCode, ...props}) {
-  const {
-    siteConfig: {themeConfig},
-  } = useDocusaurusContext();
-  const {
-    liveCodeBlock: {playgroundPosition},
-  } = themeConfig;
-  const prismTheme = usePrismTheme();
-  const noInline = props.metastring?.includes('noInline') ?? false;
   return (
-    <div className={styles.playgroundContainer}>
-      <LiveProvider
-        code={children?.replace(/\n$/, '')}
-        noInline={noInline}
-        transformCode={transformCode ?? DEFAULT_TRANSFORM_CODE}
-        theme={prismTheme}
-        {...props}>
-        {playgroundPosition === 'top' ? (
-          <>
-            <ResultWithHeader />
-            <EditorWithHeader />
-          </>
-        ) : (
-          <>
-            <EditorWithHeader />
-            <ResultWithHeader />
-          </>
-        )}
-      </LiveProvider>
-    </div>
+    <PlaygroundContainer>
+      <PlaygroundProvider code={children} {...props}>
+        <PlaygroundLayout />
+      </PlaygroundProvider>
+    </PlaygroundContainer>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-live-codeblock",
-  "version": "3.7.0",
+  "version": "3.8.0-canary-6327",
   "description": "Docusaurus live code block component.",
   "main": "lib/index.js",
   "types": "src/theme-live-codeblock.d.ts",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "3.7.0",
-    "@docusaurus/theme-common": "3.7.0",
-    "@docusaurus/theme-translations": "3.7.0",
-    "@docusaurus/utils-validation": "3.7.0",
+    "@docusaurus/core": "3.8.0-canary-6327",
+    "@docusaurus/theme-common": "3.8.0-canary-6327",
+    "@docusaurus/theme-translations": "3.8.0-canary-6327",
+    "@docusaurus/utils-validation": "3.8.0-canary-6327",
     "@philpl/buble": "^0.19.7",
     "clsx": "^2.0.0",
     "fs-extra": "^11.1.1",
@@ -34,7 +34,7 @@
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@docusaurus/types": "3.7.0",
+    "@docusaurus/types": "3.8.0-canary-6327",
     "@types/buble": "^0.20.1"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
   "engines": {
     "node": ">=18.0"
   },
-  "gitHead": "dd59750c16fe6908a26f18806a54d4c3dbe6db43"
+  "gitHead": "d50539dea74625c994ac3f78926ed7b37d704c84"
 }

package/src/theme/CodeBlock/index.tsx

@@ -5,21 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-import Playground from '@theme/Playground';
-import ReactLiveScope from '@theme/ReactLiveScope';
-import CodeBlock, {type Props} from '@theme-init/CodeBlock';
+import React, {type ReactNode} from 'react';
+import type {Props as CodeBlockProps} from '@theme/CodeBlock';
+import OriginalCodeBlock from '@theme-init/CodeBlock';
+import LiveCodeBlock from '@theme/LiveCodeBlock';
 
-const withLiveEditor = (Component: typeof CodeBlock) => {
-  function WrappedComponent(props: Props) {
-    if (props.live) {
-      return <Playground scope={ReactLiveScope} {...props} />;
-    }
-
-    return <Component {...props} />;
+// TODO Docusaurus v4: remove special case
+//  see packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts
+//  we can just use the metastring instead
+declare module '@theme/CodeBlock' {
+  interface Props {
+    live?: boolean;
   }
+}
 
-  return WrappedComponent;
-};
+function isLiveCodeBlock(props: CodeBlockProps): boolean {
+  return !!props.live;
+}
 
-export default withLiveEditor(CodeBlock);
+export default function CodeBlockEnhancer(props: CodeBlockProps): ReactNode {
+  return isLiveCodeBlock(props) ? (
+    <LiveCodeBlock {...props} />
+  ) : (
+    <OriginalCodeBlock {...props} />
+  );
+}

package/src/theme/LiveCodeBlock/index.tsx

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
+import type {Props} from '@theme/LiveCodeBlock';
+
+export default function LiveCodeBlock(props: Props): ReactNode {
+  return <Playground scope={ReactLiveScope} {...props} />;
+}

package/src/theme/Playground/Container/index.tsx

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+
+import type {Props} from '@theme/Playground/Container';
+
+import styles from './styles.module.css';
+
+export default function PlaygroundContainer({children}: Props): ReactNode {
+  return <div className={styles.playgroundContainer}>{children}</div>;
+}

package/src/theme/Playground/Container/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundContainer {
+  margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
+}

package/src/theme/Playground/Editor/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import {LiveEditor} from 'react-live';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+
+import styles from './styles.module.css';
+
+export default function PlaygroundEditor(): ReactNode {
+  const isBrowser = useIsBrowser();
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.liveEditor"
+          description="The live editor label of the live codeblocks">
+          Live Editor
+        </Translate>
+      </PlaygroundHeader>
+      <LiveEditor
+        // We force remount the editor on hydration,
+        // otherwise dark prism theme is not applied
+        key={String(isBrowser)}
+        className={styles.playgroundEditor}
+      />
+    </>
+  );
+}

package/src/theme/Playground/Editor/styles.module.css

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundEditor {
+  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
+    var(--ifm-font-family-monospace) !important;
+  /* rtl:ignore */
+  direction: ltr;
+}
+
+.playgroundEditor pre {
+  border-radius: 0;
+}

package/src/theme/Playground/Header/index.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+export default function PlaygroundHeader({
+  children,
+}: {
+  children: ReactNode;
+}): ReactNode {
+  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
+}

package/src/theme/Playground/Header/styles.module.css

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundHeader {
+  letter-spacing: 0.08rem;
+  padding: 0.75rem;
+  text-transform: uppercase;
+  font-weight: bold;
+  background: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-content);
+  font-size: var(--ifm-code-font-size);
+}
+
+.playgroundHeader:first-of-type {
+  background: var(--ifm-color-emphasis-700);
+  color: var(--ifm-color-content-inverse);
+}

package/src/theme/Playground/Layout/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import PlaygroundPreview from '@theme/Playground/Preview';
+import PlaygroundEditor from '@theme/Playground/Editor';
+
+import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
+
+function useLiveCodeBlockThemeConfig() {
+  const themeConfig = useThemeConfig() as unknown as ThemeConfig;
+  return themeConfig.liveCodeBlock;
+}
+
+export default function PlaygroundLayout(): ReactNode {
+  const {playgroundPosition} = useLiveCodeBlockThemeConfig();
+  return (
+    <>
+      {playgroundPosition === 'top' ? (
+        <>
+          <PlaygroundPreview />
+          <PlaygroundEditor />
+        </>
+      ) : (
+        <>
+          <PlaygroundEditor />
+          <PlaygroundPreview />
+        </>
+      )}
+    </>
+  );
+}

package/src/theme/Playground/Preview/index.tsx

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import {LiveError, LivePreview} from 'react-live';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import {ErrorBoundaryErrorMessageFallback} from '@docusaurus/theme-common';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import Translate from '@docusaurus/Translate';
+import PlaygroundHeader from '@theme/Playground/Header';
+
+import styles from './styles.module.css';
+
+function Loader() {
+  // Is it worth improving/translating?
+  // eslint-disable-next-line @docusaurus/no-untranslated-text
+  return <div>Loading...</div>;
+}
+
+function PlaygroundLivePreview(): ReactNode {
+  // No SSR for the live preview
+  // See https://github.com/facebook/docusaurus/issues/5747
+  return (
+    <BrowserOnly fallback={<Loader />}>
+      {() => (
+        <>
+          <ErrorBoundary
+            fallback={(params) => (
+              <ErrorBoundaryErrorMessageFallback {...params} />
+            )}>
+            <LivePreview />
+          </ErrorBoundary>
+          <LiveError />
+        </>
+      )}
+    </BrowserOnly>
+  );
+}
+
+export default function PlaygroundPreview(): ReactNode {
+  return (
+    <>
+      <PlaygroundHeader>
+        <Translate
+          id="theme.Playground.result"
+          description="The result label of the live codeblocks">
+          Result
+        </Translate>
+      </PlaygroundHeader>
+      <div className={styles.playgroundPreview}>
+        <PlaygroundLivePreview />
+      </div>
+    </>
+  );
+}

package/src/theme/Playground/Preview/styles.module.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.playgroundPreview {
+  padding: 1rem;
+  background-color: var(--ifm-pre-background);
+}

package/src/theme/Playground/Provider/index.tsx

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import {LiveProvider} from 'react-live';
+import {usePrismTheme} from '@docusaurus/theme-common';
+
+import type {Props} from '@theme/Playground/Provider';
+
+// this should rather be a stable function
+// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
+const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
+
+export default function PlaygroundProvider({
+  code,
+  children,
+  ...props
+}: Props): ReactNode {
+  const prismTheme = usePrismTheme();
+  const noInline = props.metastring?.includes('noInline') ?? false;
+  return (
+    <LiveProvider
+      noInline={noInline}
+      theme={prismTheme}
+      {...props}
+      code={code?.replace(/\n$/, '')}
+      transformCode={props.transformCode ?? DEFAULT_TRANSFORM_CODE}>
+      {children}
+    </LiveProvider>
+  );
+}

package/src/theme/Playground/index.tsx

@@ -6,137 +6,22 @@
  */
 
 import React, {type ReactNode} from 'react';
-import clsx from 'clsx';
-import useIsBrowser from '@docusaurus/useIsBrowser';
-import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live';
-import Translate from '@docusaurus/Translate';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import {
-  ErrorBoundaryErrorMessageFallback,
-  usePrismTheme,
-} from '@docusaurus/theme-common';
-import ErrorBoundary from '@docusaurus/ErrorBoundary';
+import PlaygroundProvider from '@theme/Playground/Provider';
+import PlaygroundContainer from '@theme/Playground/Container';
+import PlaygroundLayout from '@theme/Playground/Layout';
 
 import type {Props} from '@theme/Playground';
-import type {ThemeConfig} from '@docusaurus/theme-live-codeblock';
-
-import styles from './styles.module.css';
-
-function Header({children}: {children: ReactNode}) {
-  return <div className={clsx(styles.playgroundHeader)}>{children}</div>;
-}
-
-function LivePreviewLoader() {
-  // Is it worth improving/translating?
-  // eslint-disable-next-line @docusaurus/no-untranslated-text
-  return <div>Loading...</div>;
-}
-
-function Preview() {
-  // No SSR for the live preview
-  // See https://github.com/facebook/docusaurus/issues/5747
-  return (
-    <BrowserOnly fallback={<LivePreviewLoader />}>
-      {() => (
-        <>
-          <ErrorBoundary
-            fallback={(params) => (
-              <ErrorBoundaryErrorMessageFallback {...params} />
-            )}>
-            <LivePreview />
-          </ErrorBoundary>
-          <LiveError />
-        </>
-      )}
-    </BrowserOnly>
-  );
-}
-
-function ResultWithHeader() {
-  return (
-    <>
-      <Header>
-        <Translate
-          id="theme.Playground.result"
-          description="The result label of the live codeblocks">
-          Result
-        </Translate>
-      </Header>
-      {/* https://github.com/facebook/docusaurus/issues/5747 */}
-      <div className={styles.playgroundPreview}>
-        <Preview />
-      </div>
-    </>
-  );
-}
-
-function ThemedLiveEditor() {
-  const isBrowser = useIsBrowser();
-  return (
-    <LiveEditor
-      // We force remount the editor on hydration,
-      // otherwise dark prism theme is not applied
-      key={String(isBrowser)}
-      className={styles.playgroundEditor}
-    />
-  );
-}
-
-function EditorWithHeader() {
-  return (
-    <>
-      <Header>
-        <Translate
-          id="theme.Playground.liveEditor"
-          description="The live editor label of the live codeblocks">
-          Live Editor
-        </Translate>
-      </Header>
-      <ThemedLiveEditor />
-    </>
-  );
-}
-
-// this should rather be a stable function
-// see https://github.com/facebook/docusaurus/issues/9630#issuecomment-1855682643
-const DEFAULT_TRANSFORM_CODE = (code: string) => `${code};`;
 
 export default function Playground({
   children,
   transformCode,
   ...props
 }: Props): ReactNode {
-  const {
-    siteConfig: {themeConfig},
-  } = useDocusaurusContext();
-  const {
-    liveCodeBlock: {playgroundPosition},
-  } = themeConfig as ThemeConfig;
-  const prismTheme = usePrismTheme();
-
-  const noInline = props.metastring?.includes('noInline') ?? false;
-
   return (
-    <div className={styles.playgroundContainer}>
-      <LiveProvider
-        code={children?.replace(/\n$/, '')}
-        noInline={noInline}
-        transformCode={transformCode ?? DEFAULT_TRANSFORM_CODE}
-        theme={prismTheme}
-        {...props}>
-        {playgroundPosition === 'top' ? (
-          <>
-            <ResultWithHeader />
-            <EditorWithHeader />
-          </>
-        ) : (
-          <>
-            <EditorWithHeader />
-            <ResultWithHeader />
-          </>
-        )}
-      </LiveProvider>
-    </div>
+    <PlaygroundContainer>
+      <PlaygroundProvider code={children} {...props}>
+        <PlaygroundLayout />
+      </PlaygroundProvider>
+    </PlaygroundContainer>
   );
 }

package/src/theme-live-codeblock.d.ts

@@ -16,6 +16,14 @@ declare module '@docusaurus/theme-live-codeblock' {
   };
 }
 
+declare module '@theme/LiveCodeBlock' {
+  import type {Props as BaseProps} from '@theme/CodeBlock';
+
+  export interface Props extends BaseProps {}
+
+  export default function LiveCodeBlock(props: Props): ReactNode;
+}
+
 declare module '@theme/Playground' {
   import type {ReactNode} from 'react';
   import type {Props as BaseProps} from '@theme/CodeBlock';
@@ -31,6 +39,64 @@ declare module '@theme/Playground' {
   export default function Playground(props: LiveProviderProps): ReactNode;
 }
 
+declare module '@theme/Playground/Provider' {
+  import type {ReactNode} from 'react';
+  import type {Props as PlaygroundProps} from '@theme/Playground';
+
+  export interface Props extends Omit<PlaygroundProps, 'children'> {
+    code: string | undefined;
+    children: ReactNode;
+  }
+
+  export default function PlaygroundProvider(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Container' {
+  import type {ReactNode} from 'react';
+
+  export interface Props {
+    children: ReactNode;
+  }
+
+  export default function PlaygroundContainer(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Layout' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundLayout(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Preview' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundPreview(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Editor' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundEditor(props: Props): ReactNode;
+}
+
+declare module '@theme/Playground/Header' {
+  import type {ReactNode} from 'react';
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Props {}
+
+  export default function PlaygroundHeader(props: Props): ReactNode;
+}
+
 declare module '@theme/ReactLiveScope' {
   type Scope = {
     [key: string]: unknown;

package/lib/theme/Playground/styles.module.css

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.playgroundContainer {
-  margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
-  overflow: hidden;
-}
-
-.playgroundHeader {
-  letter-spacing: 0.08rem;
-  padding: 0.75rem;
-  text-transform: uppercase;
-  font-weight: bold;
-  background: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-content);
-  font-size: var(--ifm-code-font-size);
-}
-
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-600);
-  color: var(--ifm-color-content-inverse);
-}
-
-.playgroundEditor {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace) !important;
-  /* rtl:ignore */
-  direction: ltr;
-}
-
-.playgroundEditor pre {
-  border-radius: 0;
-}
-
-.playgroundPreview {
-  padding: 1rem;
-  background-color: var(--ifm-pre-background);
-}

package/src/theme/Playground/styles.module.css

@@ -1,44 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-.playgroundContainer {
-  margin-bottom: var(--ifm-leading);
-  border-radius: var(--ifm-global-radius);
-  box-shadow: var(--ifm-global-shadow-lw);
-  overflow: hidden;
-}
-
-.playgroundHeader {
-  letter-spacing: 0.08rem;
-  padding: 0.75rem;
-  text-transform: uppercase;
-  font-weight: bold;
-  background: var(--ifm-color-emphasis-200);
-  color: var(--ifm-color-content);
-  font-size: var(--ifm-code-font-size);
-}
-
-.playgroundHeader:first-of-type {
-  background: var(--ifm-color-emphasis-600);
-  color: var(--ifm-color-content-inverse);
-}
-
-.playgroundEditor {
-  font: var(--ifm-code-font-size) / var(--ifm-pre-line-height)
-    var(--ifm-font-family-monospace) !important;
-  /* rtl:ignore */
-  direction: ltr;
-}
-
-.playgroundEditor pre {
-  border-radius: 0;
-}
-
-.playgroundPreview {
-  padding: 1rem;
-  background-color: var(--ifm-pre-background);
-}

package/src/types.d.ts

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// <reference types="@docusaurus/theme-classic" />
-/// <reference types="@docusaurus/module-type-aliases" />
-
-declare module '@theme-init/CodeBlock' {
-  import type CodeBlock from '@theme/CodeBlock';
-  import type {Props as BaseProps} from '@theme/CodeBlock';
-
-  export interface Props extends BaseProps {
-    live?: boolean;
-  }
-  const CodeBlockComp: typeof CodeBlock;
-  export default CodeBlockComp;
-}