Theme: Replace the default CodeBlock component

rdw-software · rdw-software · commit 9ef300e94de8 · 2022-07-29T15:36:00.000+02:00
This modified version allows injecting snippet contents dynamically based on their database key, and will inject an error if it failed to load. Only snippets with the 'source" key will be considered and the rest is left unchanged, so that the change is non-disruptive.
diff --git a/src/theme/CodeBlock/index.d.ts b/src/theme/CodeBlock/index.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { Props } from '@theme/CodeBlock';
+export default function CodeBlock({ children: rawChildren, ...props }: Props): JSX.Element;
diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js
@@ -0,0 +1,50 @@
+import React, {isValidElement} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import ElementContent from '@theme/CodeBlock/Content/Element';
+import StringContent from '@theme/CodeBlock/Content/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;
+}
+
+// This is only needed to automatically check for dead links (when building the docs)
+const GITHUB_BASE_URL = "https://github.com/evo-lua/evo-luvi/blob/main/Tests/Examples/";
+
+export default function 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' ? StringContent : ElementContent;
+
+	// This should be added to the final HTML page's DOM, so that the link checker script can pick it up
+	const snippetSourceURL = GITHUB_BASE_URL + props.source;
+	const optionalSourceLink = props.source ? <><a className="optional-snippet-source" href={snippetSourceURL}>{snippetSourceURL}</a></> : "";
+
+	let sourceCode = "Loading snippet...";
+	if (props.source) {
+		sourceCode = require("/static/examples-autogenerated.json")[props.source] ?? "[[ERROR: Failed to load snippet " + props.source + "\nReason: No such entry exists in the autogenerated snippet database\n\nPlease report this problem!]]" ;
+	} else {
+		sourceCode = children; // It's a regular code snippet that doesn't need fetching from the DB
+	}
+	return (
+		<>
+		<CodeBlockComp key={String(isBrowser)} {...props}>
+			{sourceCode}
+		</CodeBlockComp>
+		{optionalSourceLink}
+	</>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/// <reference types="react" />`
	`2`	`+import type { Props } from '@theme/CodeBlock';`
	`3`	`+export default function CodeBlock({ children: rawChildren, ...props }: Props): JSX.Element;`