From 19e5dada2e80c2fe4fa0d9d25ed0799ded460821 Mon Sep 17 00:00:00 2001
From: sebastienlorber <lorber.sebastien@gmail.com>
Date: Fri, 5 Jan 2024 13:25:15 +0100
Subject: [PATCH] extract CodeInline to make it simpler to customize

---
 .../src/theme-classic.d.ts                       |  8 ++++++++
 .../src/theme/CodeInline/index.tsx               | 16 ++++++++++++++++
 .../src/theme/MDXComponents/Code.tsx             |  8 +++++---
 3 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
index 053e036dc5eb..b894974807d8 100644
--- a/packages/docusaurus-theme-classic/src/theme-classic.d.ts
+++ b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -363,6 +363,14 @@ declare module '@theme/CodeBlock' {
   export default function CodeBlock(props: Props): JSX.Element;
 }
 
+declare module '@theme/CodeInline' {
+  import type {ComponentProps} from 'react';
+
+  export interface Props extends ComponentProps<'code'> {}
+
+  export default function CodeInline(props: Props): JSX.Element;
+}
+
 declare module '@theme/CodeBlock/CopyButton' {
   export interface Props {
     readonly code: string;
diff --git a/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/CodeInline/index.tsx
new file mode 100644
index 000000000000..066ab2e61c5d
--- /dev/null
+++ b/packages/docusaurus-theme-classic/src/theme/CodeInline/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 from 'react';
+import type {Props} from '@theme/CodeInline';
+
+// Simple component used to render inline code blocks
+// its purpose is to be swizzled and customized
+// MDX 1 used to have a inlineCode comp, see https://mdxjs.com/migrating/v2/
+export default function CodeInline(props: Props): JSX.Element {
+  return <code {...props} />;
+}
diff --git a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
index 6eab58ba4de9..c666174b9cef 100644
--- a/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/MDXComponents/Code.tsx
@@ -8,10 +8,13 @@
 import type {ComponentProps} from 'react';
 import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import CodeInline from '@theme/CodeInline';
 import type {Props} from '@theme/MDXComponents/Code';
 
 function shouldBeInline(props: Props) {
   return (
+    // empty code blocks have no props.children,
+    // see https://github.com/facebook/docusaurus/pull/9704
     typeof props.children !== 'undefined' &&
     React.Children.toArray(props.children).every(
       (el) => typeof el === 'string' && !el.includes('\n'),
@@ -20,9 +23,8 @@ function shouldBeInline(props: Props) {
 }
 
 export default function MDXCode(props: Props): JSX.Element {
-  const inline = shouldBeInline(props);
-  return inline ? (
-    <code {...props} />
+  return shouldBeInline(props) ? (
+    <CodeInline {...props} />
   ) : (
     <CodeBlock {...(props as ComponentProps<typeof CodeBlock>)} />
   );