After review, deleted swizzled components and reswizzled MDXComponent…

…s with current Docusaurus version (v3.1.0) as context. The pre.js file is now updated to the proper structure and codeblocks display correctly by default.

Signed-off-by: Sunil Singh <[email protected]>

src/theme/MDXComponents/Code.js

@@ -1,42 +1,20 @@
-import React, {isValidElement} from 'react';
+import React from 'react';
 import CodeBlock from '@theme/CodeBlock';
+import CodeInline from '@theme/CodeInline';
+function shouldBeInline(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'),
+    )
+  );
+}
 export default function MDXCode(props) {
-  const inlineElements = [
-    'a',
-    'abbr',
-    'b',
-    'br',
-    'button',
-    'cite',
-    'code',
-    'del',
-    'dfn',
-    'em',
-    'i',
-    'img',
-    'input',
-    'ins',
-    'kbd',
-    'label',
-    'object',
-    'output',
-    'q',
-    'ruby',
-    's',
-    'small',
-    'span',
-    'strong',
-    'sub',
-    'sup',
-    'time',
-    'u',
-    'var',
-    'wbr',
-  ];
-  const shouldBeInline = React.Children.toArray(props.children).every(
-    (el) =>
-      (typeof el === 'string' && !el.includes('\n')) ||
-      (isValidElement(el) && inlineElements.includes(el.props?.mdxType)),
+  return shouldBeInline(props) ? (
+    <CodeInline {...props} />
+  ) : (
+    <CodeBlock {...props} />
   );
-  return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
 }

src/theme/MDXComponents/Details.js

@@ -5,9 +5,8 @@ export default function MDXDetails(props) {
   // Split summary item from the rest to pass it as a separate prop to the
   // Details theme component
   const summary = items.find(
-    (item) => React.isValidElement(item) && item.props?.mdxType === 'summary',
-
-    );
+    (item) => React.isValidElement(item) && item.type === 'summary',
+  );
   const children = <>{items.filter((item) => item !== summary)}</>;
   return (
     <Details {...props} summary={summary}>

src/theme/MDXComponents/Img/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+function transformImgClassName(className) {
+  return clsx(className, styles.img);
+}
+export default function MDXImg(props) {
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img
+      loading="lazy"
+      {...props}
+      className={transformImgClassName(props.className)}
+    />
+  );
+}

src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,3 @@
+.img {
+  height: auto;
+}

src/theme/MDXComponents/Pre.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function MDXPre(props) {
+  // With MDX 2, this element is only used for fenced code blocks
+  // It always receives a MDXComponents/Code as children
+  return <>{props.children}</>;
+}

src/theme/MDXComponents/Ul/index.js

@@ -2,6 +2,10 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 function transformUlClassName(className) {
+  // Fix https://github.com/facebook/docusaurus/issues/9098
+  if (typeof className === 'undefined') {
+    return undefined;
+  }
   return clsx(
     className,
     // This class is set globally by GitHub/MDX. We keep the global class, and