chore: fix issues with hideclipboard not working (#2016)

* fix issues about hideclipboard not working

* remove console.log statements

---------

Co-authored-by: Lenny Chen <[email protected]>

docs/docs-content/troubleshooting/palette-dev-engine.md

@@ -27,7 +27,7 @@ If you specify `requests` but not `limits`, the default limits imposed by the Li
 
 <br />
 
-```hideClipboard shell
+```shell hideClipboard
 Invalid value: "300m": must be less than or equal to CPU limit spec.containers[0].resources.requests: Invalid value: "512Mi": must be less than or equal to memory limit
 ```
 <br />

src/theme/CodeBlock/Content/String.js

@@ -1,68 +1,79 @@
-import React from "react";
-import clsx from "clsx";
-import { useThemeConfig, usePrismTheme } from "@docusaurus/theme-common";
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
 import {
   parseCodeBlockTitle,
   parseLanguage,
   parseLines,
   containsLineNumbers,
   useCodeWordWrap,
-} from "@docusaurus/theme-common/internal";
-import { Highlight } from "prism-react-renderer";
-import Line from "@theme/CodeBlock/Line";
-import CopyButton from "@theme/CodeBlock/CopyButton";
-import WordWrapButton from "@theme/CodeBlock/WordWrapButton";
-import Container from "@theme/CodeBlock/Container";
-import styles from "./styles.module.css";
+} from '@docusaurus/theme-common/internal';
+import {Highlight} from 'prism-react-renderer';
+import Line from '@theme/CodeBlock/Line';
+import CopyButton from '@theme/CodeBlock/CopyButton';
+import WordWrapButton from '@theme/CodeBlock/WordWrapButton';
+import Container from '@theme/CodeBlock/Container';
+import styles from './styles.module.css';
+// Prism languages are always lowercase
+// We want to fail-safe and allow both "php" and "PHP"
+// See https://github.com/facebook/docusaurus/issues/9012
+function normalizeLanguage(language) {
+  return language?.toLowerCase();
+}
 export default function CodeBlockString({
   children,
-  className: blockClassName = "",
+  className: blockClassName = '',
   metastring,
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
   hideClipboard = false,
 }) {
   const {
-    prism: { defaultLanguage, magicComments },
+    prism: {defaultLanguage, magicComments},
   } = useThemeConfig();
-  const language = languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+  const language = normalizeLanguage(
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage,
+  );
   const prismTheme = usePrismTheme();
   const wordWrap = useCodeWordWrap();
   // We still parse the metastring in case we want to support more syntax in the
   // future. Note that MDX doesn't strip quotes when parsing metastring:
   // "title=\"xyz\"" => title: "\"xyz\""
   const title = parseCodeBlockTitle(metastring) || titleProp;
-  const { lineClassNames, code } = parseLines(children, {
+  const {lineClassNames, code} = parseLines(children, {
     metastring,
     language,
     magicComments,
   });
-  const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring);
+  const showLineNumbers =
+    showLineNumbersProp ?? containsLineNumbers(metastring);
+  hideClipboard = metastring && metastring.includes('hideClipboard');
+
   return (
     <Container
       as="div"
       className={clsx(
         blockClassName,
-        language && !blockClassName.includes(`language-${language}`) && `language-${language}`
-      )}
-    >
+        language &&
+          !blockClassName.includes(`language-${language}`) &&
+          `language-${language}`,
+      )}>
       {title && <div className={styles.codeBlockTitle}>{title}</div>}
       <div className={styles.codeBlockContent}>
-        <Highlight theme={prismTheme} code={code} language={language ?? "text"}>
-          {({ className, tokens, getLineProps, getTokenProps }) => (
+        <Highlight theme={prismTheme} code={code} language={language ?? 'text'}>
+          {({className, style, tokens, getLineProps, getTokenProps}) => (
             <pre
               /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
               tabIndex={0}
               ref={wordWrap.codeBlockRef}
-              className={clsx(className, styles.codeBlock, "thin-scrollbar")}
-            >
+              className={clsx(className, styles.codeBlock, 'thin-scrollbar')}
+              style={style}>
               <code
                 className={clsx(
                   styles.codeBlockLines,
-                  showLineNumbers && styles.codeBlockLinesWithNumbering
-                )}
-              >
+                  showLineNumbers && styles.codeBlockLinesWithNumbering,
+                )}>
                 {tokens.map((line, i) => (
                   <Line
                     key={i}

src/theme/CodeBlock/CopyButton/index.js

@@ -1,6 +1,5 @@
 import React, {useCallback, useState, useRef, useEffect} from 'react';
 import clsx from 'clsx';
-// @ts-expect-error: TODO, we need to make theme-classic have type: module
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
 import IconCopy from '@theme/Icon/Copy';