fork refine

documentation/src/theme/CodeBlock/base.tsx

@@ -0,0 +1,33 @@
+import React, { isValidElement } from "react";
+import useIsBrowser from "@docusaurus/useIsBrowser";
+import ElementContent from "@theme/CodeBlock/Content/Element";
+import { CodeBlockString } from "../../refine-theme/common-codeblock-string";
+/**
+ * Best attempt to make the children a plain string so it is copyable. If there
+ * are react elements, we will not be able to copy the content, and it will
+ * return `children` as-is; otherwise, it concatenates the string children
+ * together.
+ */
+function maybeStringifyChildren(children) {
+    if (React.Children.toArray(children).some((el) => isValidElement(el))) {
+        return children;
+    }
+    // The children is now guaranteed to be one/more plain strings
+    return Array.isArray(children) ? children.join("") : children;
+}
+
+export const CodeBlock = ({ children: rawChildren, ...props }) => {
+    // The Prism theme on SSR is always the default theme but the site theme can
+    // be in a different mode. React hydration doesn't update DOM styles that come
+    // from SSR. Hence force a re-render after mounting to apply the current
+    // relevant styles.
+    const isBrowser = useIsBrowser();
+    const children = maybeStringifyChildren(rawChildren);
+    const CodeBlockComp =
+        typeof children === "string" ? CodeBlockString : ElementContent;
+    return (
+        <CodeBlockComp key={String(isBrowser)} {...props}>
+            {children}
+        </CodeBlockComp>
+    );
+};

documentation/src/theme/CodeBlock/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { CodeBlock } from "./base";
+
+export default function CodeBlockWrapper(
+    props: JSX.IntrinsicAttributes & {
+        live?: boolean;
+        shared?: boolean;
+        className?: string;
+    },
+): JSX.Element {
+    return <CodeBlock {...(props as any)} />;
+}