@docusaurus/theme-classic 0.0.0-4325 → 0.0.0-4330

package/lib-next/theme/CodeBlock/index.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, {useEffect, useState} from 'react';
+import React, {isValidElement, useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
@@ -41,7 +41,36 @@ export default function CodeBlock({
   // (note: title="xyz" => title prop still has the quotes)
 
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
-  const prismTheme = usePrismTheme(); // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
+  const prismTheme = usePrismTheme(); // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
+  // When the children is not a simple string, we just return a styled block without actually highlighting.
+
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return (
+      <Highlight
+        {...defaultProps}
+        key={String(mounted)}
+        theme={prismTheme}
+        code=""
+        language={'text'}>
+        {({className, style}) => (
+          <pre
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex={0}
+            className={clsx(
+              className,
+              styles.codeBlockStandalone,
+              'thin-scrollbar',
+              styles.codeBlockContainer,
+              blockClassName,
+              ThemeClassNames.common.codeBlock,
+            )}
+            style={style}>
+            <code className={styles.codeBlockLines}>{children}</code>
+          </pre>
+        )}
+      </Highlight>
+    );
+  } // The children is now guaranteed to be one/more plain strings
 
   const content = Array.isArray(children) ? children.join('') : children;
   const language = parseLanguage(blockClassName) ?? prism.defaultLanguage;
@@ -59,7 +88,7 @@ export default function CodeBlock({
       key={String(mounted)}
       theme={prismTheme}
       code={code}
-      language={language}>
+      language={language ?? 'text'}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(

package/lib-next/theme/CodeBlock/styles.module.css

@@ -37,6 +37,11 @@
   border-radius: var(--ifm-global-radius);
 }
 
+.codeBlockStandalone {
+  padding: 0;
+  border-radius: var(--ifm-global-radius);
+}
+
 .copyButton {
   background: rgba(0, 0, 0, 0.3);
   border-radius: var(--ifm-global-radius);

package/lib-next/theme/MDXComponents/index.js

@@ -30,35 +30,22 @@ const MDXComponents = {
     return <Head {...props}>{unwrappedChildren}</Head>;
   },
   code: (props) => {
-    const {children} = props; // For retrocompatibility purposes (pretty rare use case)
-    // See https://github.com/facebook/docusaurus/pull/1584
-
-    if (isValidElement(children)) {
-      return children;
-    }
-
-    return !children.includes('\n') ? (
-      <code {...props} />
-    ) : (
-      <CodeBlock {...props} />
+    const shouldBeInline = React.Children.toArray(props.children).every(
+      (el) => typeof el === 'string' && !el.includes('\n'),
     );
+    return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
   },
   a: (props) => <Link {...props} />,
-  pre: (props) => {
-    const {children} = props; // See comment for `code` above
-
-    if (isValidElement(children) && isValidElement(children?.props?.children)) {
-      return children.props.children;
-    }
-
-    return (
-      <CodeBlock
-        {...(isValidElement(children) ? children?.props : {...props})}
-      />
-    );
-  },
+  pre: (props) => (
+    <CodeBlock // If this pre is created by a ``` fenced codeblock, unwrap the children
+      {...(isValidElement(props.children) &&
+      props.children.props.originalType === 'code'
+        ? props.children?.props
+        : {...props})}
+    />
+  ),
   details: (props) => {
-    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Detais theme component
+    const items = React.Children.toArray(props.children); // Split summary item from the rest to pass it as a separate prop to the Details theme component
 
     const summary = items.find((item) => item?.props?.mdxType === 'summary');
     const children = <>{items.filter((item) => item !== summary)}</>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4325",
+  "version": "0.0.0-4330",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4325",
-    "@docusaurus/plugin-content-blog": "0.0.0-4325",
-    "@docusaurus/plugin-content-docs": "0.0.0-4325",
-    "@docusaurus/plugin-content-pages": "0.0.0-4325",
-    "@docusaurus/theme-common": "0.0.0-4325",
-    "@docusaurus/theme-translations": "0.0.0-4325",
-    "@docusaurus/utils": "0.0.0-4325",
-    "@docusaurus/utils-validation": "0.0.0-4325",
+    "@docusaurus/core": "0.0.0-4330",
+    "@docusaurus/plugin-content-blog": "0.0.0-4330",
+    "@docusaurus/plugin-content-docs": "0.0.0-4330",
+    "@docusaurus/plugin-content-pages": "0.0.0-4330",
+    "@docusaurus/theme-common": "0.0.0-4330",
+    "@docusaurus/theme-translations": "0.0.0-4330",
+    "@docusaurus/utils": "0.0.0-4330",
+    "@docusaurus/utils-validation": "0.0.0-4330",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4325",
-    "@docusaurus/types": "0.0.0-4325",
+    "@docusaurus/module-type-aliases": "0.0.0-4330",
+    "@docusaurus/types": "0.0.0-4330",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "faf4f3f741b442a5805d6e871788a631839a9cc9"
+  "gitHead": "ed4c0b5a082b72f8576bd7f7286dfb1a5c295edd"
 }

package/src/theme/CodeBlock/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {isValidElement, useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Highlight, {defaultProps, Language} from 'prism-react-renderer';
 import copy from 'copy-text-to-clipboard';
@@ -49,13 +49,44 @@ export default function CodeBlock({
   const codeBlockTitle = parseCodeBlockTitle(metastring) || title;
   const prismTheme = usePrismTheme();
 
-  // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
+  // <pre> tags in markdown map to CodeBlocks and they may contain JSX children.
+  // When the children is not a simple string, we just return a styled block without actually highlighting.
+  if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+    return (
+      <Highlight
+        {...defaultProps}
+        key={String(mounted)}
+        theme={prismTheme}
+        code=""
+        language={'text' as Language}>
+        {({className, style}) => (
+          <pre
+            /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+            tabIndex={0}
+            className={clsx(
+              className,
+              styles.codeBlockStandalone,
+              'thin-scrollbar',
+              styles.codeBlockContainer,
+              blockClassName,
+              ThemeClassNames.common.codeBlock,
+            )}
+            style={style}>
+            <code className={styles.codeBlockLines}>{children}</code>
+          </pre>
+        )}
+      </Highlight>
+    );
+  }
+
+  // The children is now guaranteed to be one/more plain strings
   const content = Array.isArray(children)
     ? children.join('')
     : (children as string);
 
   const language =
-    parseLanguage(blockClassName) ?? (prism.defaultLanguage as Language);
+    parseLanguage(blockClassName) ??
+    (prism.defaultLanguage as Language | undefined);
   const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
@@ -71,7 +102,7 @@ export default function CodeBlock({
       key={String(mounted)}
       theme={prismTheme}
       code={code}
-      language={language}>
+      language={language ?? ('text' as Language)}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(

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

@@ -37,6 +37,11 @@
   border-radius: var(--ifm-global-radius);
 }
 
+.codeBlockStandalone {
+  padding: 0;
+  border-radius: var(--ifm-global-radius);
+}
+
 .copyButton {
   background: rgba(0, 0, 0, 0.3);
   border-radius: var(--ifm-global-radius);

package/src/theme/MDXComponents/index.tsx

@@ -8,7 +8,7 @@
 import React, {ComponentProps, isValidElement, ReactElement} from 'react';
 import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
-import CodeBlock, {Props} from '@theme/CodeBlock';
+import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import Details from '@theme/Details';
 import type {MDXComponentsObject} from '@theme/MDXComponents';
@@ -33,40 +33,25 @@ const MDXComponents: MDXComponentsObject = {
     return <Head {...props}>{unwrappedChildren}</Head>;
   },
   code: (props) => {
-    const {children} = props;
-
-    // For retrocompatibility purposes (pretty rare use case)
-    // See https://github.com/facebook/docusaurus/pull/1584
-    if (isValidElement(children)) {
-      return children;
-    }
-
-    return !children.includes('\n') ? (
-      <code {...props} />
-    ) : (
-      <CodeBlock {...props} />
+    const shouldBeInline = React.Children.toArray(props.children).every(
+      (el) => typeof el === 'string' && !el.includes('\n'),
     );
-  },
-  a: (props) => <Link {...props} />,
-  pre: (props) => {
-    const {children} = props;
 
-    // See comment for `code` above
-    if (isValidElement(children) && isValidElement(children?.props?.children)) {
-      return children.props.children;
-    }
-
-    return (
-      <CodeBlock
-        {...((isValidElement(children)
-          ? children?.props
-          : {...props}) as Props)}
-      />
-    );
+    return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
   },
+  a: (props) => <Link {...props} />,
+  pre: (props) => (
+    <CodeBlock
+      // If this pre is created by a ``` fenced codeblock, unwrap the children
+      {...(isValidElement(props.children) &&
+      props.children.props.originalType === 'code'
+        ? props.children?.props
+        : {...props})}
+    />
+  ),
   details: (props): JSX.Element => {
     const items = React.Children.toArray(props.children) as ReactElement[];
-    // Split summary item from the rest to pass it as a separate prop to the Detais theme component
+    // Split summary item from the rest to pass it as a separate prop to the Details theme component
     const summary: ReactElement<ComponentProps<'summary'>> = items.find(
       (item) => item?.props?.mdxType === 'summary',
     )!;