diff --git a/code/core/src/components/components/syntaxhighlighter/createCopyToClipboardFunction.tsx b/code/core/src/components/components/syntaxhighlighter/createCopyToClipboardFunction.tsx new file mode 100644 index 000000000000..b13209e72ef5 --- /dev/null +++ b/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(); + }; +} diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx index 2247aae42247..3f00744477b0 100644 --- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx +++ b/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 = 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; diff --git a/code/core/src/components/components/typography/elements/Code.tsx b/code/core/src/components/components/typography/elements/Code.tsx index 6e25b8b260dc..b59b22c98184 100644 --- a/code/core/src/components/components/typography/elements/Code.tsx +++ b/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'; diff --git a/code/core/src/components/index.ts b/code/core/src/components/index.ts index e9b22b880769..299b913c9553 100644 --- a/code/core/src/components/index.ts +++ b/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';