diff --git a/packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts b/packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts index f71dca66ee..6078ee6987 100644 --- a/packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts +++ b/packages/docusaurus-mdx-loader/src/remark/mdx1Compat/codeCompatPlugin.ts @@ -25,6 +25,7 @@ const plugin: Plugin = function plugin(): Transformer { node.data.hProperties = node.data.hProperties || {}; node.data.hProperties.metastring = node.meta; + // TODO Docusaurus v4: remove special case // Retrocompatible support for live codeblock metastring // Not really the appropriate place to handle that :s node.data.hProperties.live = node.meta?.split(' ').includes('live'); 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 e3854a0681..1047302e70 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 @@ -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'; diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx index 225073c0ee..a7290ad768 100644 --- a/packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.tsx +++ b/packages/docusaurus-theme-live-codeblock/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 ; - } - - return ; +// 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) ? ( + + ) : ( + + ); +} diff --git a/packages/docusaurus-theme-live-codeblock/src/theme/LiveCodeBlock/index.tsx b/packages/docusaurus-theme-live-codeblock/src/theme/LiveCodeBlock/index.tsx new file mode 100644 index 0000000000..5beb7ca277 --- /dev/null +++ b/packages/docusaurus-theme-live-codeblock/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 ; +} diff --git a/packages/docusaurus-theme-live-codeblock/src/types.d.ts b/packages/docusaurus-theme-live-codeblock/src/types.d.ts deleted file mode 100644 index 47200c50ab..0000000000 --- a/packages/docusaurus-theme-live-codeblock/src/types.d.ts +++ /dev/null @@ -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. - */ - -/// -/// - -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; -}