GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Uses execCommand if navigator.clipboard is not available

Browse Source
This commit is contained in:
j3rem1e 2021-01-30 14:50:36 +01:00
parent 14a7f4b621
commit 9b033840e2
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx
View File

@ -1,7 +1,7 @@
import React, { ComponentProps, FunctionComponent, MouseEvent, useState } from 'react';
import { logger } from '@storybook/client-logger';
import { styled } from '@storybook/theming';
import { navigator, window } from 'global';
import { navigator, document, window } from 'global';
import memoize from 'memoizerific';
// @ts-ignore
@ -52,6 +52,24 @@ const themedSyntax = memoize(2)((theme) =>
Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
);
let copyToClipboard: (text: string) => Promise<void>;
if (navigator.clipboard) {
copyToClipboard = (text: string) => navigator.clipboard.writeText(text);
} else {
copyToClipboard = async (text: string) => {
const tmp = document.createElement('TEXTAREA');
const focus = document.activeElement;
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;
@ -135,8 +153,7 @@ export const SyntaxHighlighter: FunctionComponent<Props> = ({
const onClick = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
navigator.clipboard
.writeText(highlightableCode)
copyToClipboard(highlightableCode)
.then(() => {
setCopied(true);
window.setTimeout(() => setCopied(false), 1500);