From e02adea524d6536a55c5471985dee2f073af21d9 Mon Sep 17 00:00:00 2001
From: Jon McClure <jon.r.mcclure@gmail.com>
Date: Sun, 25 Jun 2023 20:55:48 +0100
Subject: [PATCH] registers custom syntax languages in SyntaxHighlighter
 without formatter

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

diff --git a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
index 554e45ce81de..bec3d6608c77 100644
--- a/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
+++ b/code/ui/components/src/syntaxhighlighter/lazy-syntaxhighlighter.tsx
@@ -1,12 +1,27 @@
-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'),
@@ -20,18 +35,20 @@ const LazySyntaxHighlighterWithFormatter = lazy(async () => {
     languages = [];
   }
 
-  if (Comp === null) {
-    Comp = SyntaxHighlighter;
-  }
+  if (Comp === null) Comp = SyntaxHighlighter;
 
   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} />