From 7a7eef0e6bff7f893d39c6fc9a8766438c457f4f Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Tue, 27 Jun 2023 20:15:01 +0100
Subject: [PATCH] register SyntaxHighlighter languages without formatter

---
 .../lazy-syntaxhighlighter.tsx                | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
index 554e45ce81de..822034aca219 100644
--- a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
+++ b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
@@ -1,12 +1,28 @@
-import type { ComponentProps } from 'react';
 import React, { Suspense, lazy } from 'react';
 
+import type { ComponentProps } from 'react';
 import type ReactSyntaxHighlighter from './syntaxhighlighter';
 
 let languages: Parameters<typeof ReactSyntaxHighlighter.registerLanguage>[] = [];
 let Comp: typeof ReactSyntaxHighlighter | null = null;
 
-const LazySyntaxHighlighter = lazy(() => import('./syntaxhighlighter'));
+const LazySyntaxHighlighter = lazy(async () => {
+  const { SyntaxHighlighter } = await import('./syntaxhighlighter');
+
+  if (languages.length > 0) {
+    languages.forEach((args) => {
+      SyntaxHighlighter.registerLanguage(...args);
+    });
+    languages = [];
+  }
+
+  if (Comp === null) Comp = SyntaxHighlighter;
+
+  return {
+    default: (props: ComponentProps<typeof SyntaxHighlighter>) => <SyntaxHighlighter {...props} />,
+  };
+});
+
 const LazySyntaxHighlighterWithFormatter = lazy(async () => {
   const [{ SyntaxHighlighter }, { formatter }] = await Promise.all([
     import('./syntaxhighlighter'),
@@ -25,13 +41,17 @@ const LazySyntaxHighlighterWithFormatter = lazy(async () => {
   }
 
   return {
-    default: (props: ComponentProps<typeof LazySyntaxHighlighter>) => (
+    default: (props: ComponentProps<typeof SyntaxHighlighter>) => (
       <SyntaxHighlighter {...props} formatter={formatter} />
     ),
   };
 });
 
-export const SyntaxHighlighter = (props: ComponentProps<typeof LazySyntaxHighlighter>) => (
+export const SyntaxHighlighter = (
+  props:
+    | ComponentProps<typeof LazySyntaxHighlighter>
+    | ComponentProps<typeof LazySyntaxHighlighterWithFormatter>
+) => (
   <Suspense fallback={<div />}>
     {props.format !== false ? (
       <LazySyntaxHighlighterWithFormatter {...props} />