UI: Improve syntaxhighlighter bundling

code/core/src/components/components/syntaxhighlighter/createCopyToClipboardFunction.tsx

@@ -0,0 +1,23 @@
+export function createCopyToClipboardFunction() {
+  if (globalWindow.navigator?.clipboard) {
+    return async (text: string) => {
+      try {
+        await globalWindow.top?.navigator.clipboard.writeText(text);
+      } catch {
+        await globalWindow.navigator.clipboard.writeText(text);
+      }
+    };
+  }
+  return async (text: string) => {
+    const tmp = document.createElement('TEXTAREA') as HTMLTextAreaElement;
+    const focus = document.activeElement as HTMLTextAreaElement;
+
+    tmp.value = text;
+
+    document.body.appendChild(tmp);
+    tmp.select();
+    document.execCommand('copy');
+    document.body.removeChild(tmp);
+    focus.focus();
+  };
+}

code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { logger } from 'storybook/internal/client-logger';
 
@@ -26,13 +26,14 @@ import { styled } from 'storybook/theming';
 import { ActionBar } from '../ActionBar/ActionBar';
 import type { ScrollAreaProps } from '../ScrollArea/ScrollArea';
 import { ScrollArea } from '../ScrollArea/ScrollArea';
+import { createCopyToClipboardFunction } from './createCopyToClipboardFunction';
 import type {
   SyntaxHighlighterProps,
   SyntaxHighlighterRenderer,
   SyntaxHighlighterRendererProps,
 } from './syntaxhighlighter-types';
 
-const { document, window: globalWindow } = global;
+const { window: globalWindow } = global;
 
 export const supportedLanguages = {
   jsextra: jsExtras,
@@ -58,30 +59,6 @@ const themedSyntax = memoize(2)((theme) =>
 
 const copyToClipboard: (text: string) => Promise<void> = createCopyToClipboardFunction();
 
-export function createCopyToClipboardFunction() {
-  if (globalWindow.navigator?.clipboard) {
-    return async (text: string) => {
-      try {
-        await globalWindow.top?.navigator.clipboard.writeText(text);
-      } catch {
-        await globalWindow.navigator.clipboard.writeText(text);
-      }
-    };
-  }
-  return async (text: string) => {
-    const tmp = document.createElement('TEXTAREA') as HTMLTextAreaElement;
-    const focus = document.activeElement as HTMLTextAreaElement;
-
-    tmp.value = text;
-
-    document.body.appendChild(tmp);
-    tmp.select();
-    document.execCommand('copy');
-    document.body.removeChild(tmp);
-    focus.focus();
-  };
-}
-
 export interface WrapperProps {
   bordered?: boolean;
   padded?: boolean;

code/core/src/components/components/typography/elements/Code.tsx

@@ -3,7 +3,7 @@ import React, { Children } from 'react';
 
 import { styled } from 'storybook/theming';
 
-import { SyntaxHighlighter } from '../../syntaxhighlighter/syntaxhighlighter';
+import { SyntaxHighlighter } from '../../syntaxhighlighter/lazy-syntaxhighlighter';
 import type { SupportedLanguage } from '../../syntaxhighlighter/syntaxhighlighter-types';
 import { codeCommon } from '../lib/common';
 import { isReactChildString } from '../lib/isReactChildString';

code/core/src/components/index.ts

@@ -37,7 +37,7 @@ export type {
   SupportedLanguage,
 } from './components/syntaxhighlighter/syntaxhighlighter-types';
 export { SyntaxHighlighter } from './components/syntaxhighlighter/lazy-syntaxhighlighter';
-export { createCopyToClipboardFunction } from './components/syntaxhighlighter/syntaxhighlighter';
+export { createCopyToClipboardFunction } from './components/syntaxhighlighter/createCopyToClipboardFunction';
 
 // UI
 export { ActionBar } from './components/ActionBar/ActionBar';