UI: Allow keyboard shortcut to copy code in preview blocks

lib/components/src/blocks/Preview.tsx

@@ -1,13 +1,22 @@
-import React, { Children, FunctionComponent, ReactElement, ReactNode, useState } from 'react';
+import React, {
+  Children,
+  ClipboardEvent,
+  FunctionComponent,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react';
 import { darken } from 'polished';
 import { styled } from '@storybook/theming';
 
+import global from 'global';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 import { Source, SourceProps } from './Source';
 import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
 import { ZoomContext } from './ZoomContext';
 import { Zoom } from '../Zoom/Zoom';
+import { createCopyToClipboardFunction } from '../syntaxhighlighter/syntaxhighlighter';
 
 export interface PreviewProps {
   isColumn?: boolean;
@@ -130,7 +139,7 @@ const getSource = (
     }
     default: {
       return {
-        source: null,
+        source: <StyledSource {...withSource} dark />,
         actionItem: {
           title: 'Show code',
           className: 'docblock-code-toggle',
@@ -197,13 +206,39 @@ const Preview: FunctionComponent<PreviewProps> = ({
   const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
 
   const defaultActionItems = withSource ? [actionItem] : [];
-  const actionItems = additionalActions
-    ? [...defaultActionItems, ...additionalActions]
-    : defaultActionItems;
+  const [additionalActionItems, setAdditionalActionItems] = useState(
+    additionalActions ? [...additionalActions] : []
+  );
+  const actionItems = [...defaultActionItems, ...additionalActionItems];
 
   // @ts-ignore
   const layout = getLayout(Children.count(children) === 1 ? [children] : children);
 
+  const { window: globalWindow } = global;
+  const copyToClipboard: (text: string) => Promise<void> = createCopyToClipboardFunction();
+
+  const onCopyCapture = (e: ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (additionalActionItems.filter((item) => item.title === 'Copied').length === 0) {
+      copyToClipboard(source.props.code).then(() => {
+        setAdditionalActionItems([
+          ...additionalActionItems,
+          {
+            title: 'Copied',
+            onClick: () => {},
+          },
+        ]);
+        globalWindow.setTimeout(
+          () =>
+            setAdditionalActionItems(
+              additionalActionItems.filter((item) => item.title !== 'Copied')
+            ),
+          1500
+        );
+      });
+    }
+  };
+
   return (
     <PreviewContainer
       {...{ withSource, withToolbar }}
@@ -220,7 +255,7 @@ const Preview: FunctionComponent<PreviewProps> = ({
         />
       )}
       <ZoomContext.Provider value={{ scale }}>
-        <Relative className="docs-story">
+        <Relative className="docs-story" onCopyCapture={withSource && onCopyCapture}>
           <ChildrenContainer
             isColumn={isColumn || !Array.isArray(children)}
             columns={columns}
@@ -238,7 +273,7 @@ const Preview: FunctionComponent<PreviewProps> = ({
           <ActionBar actionItems={actionItems} />
         </Relative>
       </ZoomContext.Provider>
-      {withSource && source}
+      {withSource && expanded && source}
     </PreviewContainer>
   );
 };

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -1,4 +1,10 @@
-import React, { ComponentProps, FunctionComponent, MouseEvent, useState } from 'react';
+import React, {
+  ClipboardEvent,
+  ComponentProps,
+  FunctionComponent,
+  MouseEvent,
+  useState,
+} from 'react';
 import { logger } from '@storybook/client-logger';
 import { styled } from '@storybook/theming';
 import global from 'global';
@@ -54,12 +60,13 @@ const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})
 );
 
-let copyToClipboard: (text: string) => Promise<void>;
+const copyToClipboard: (text: string) => Promise<void> = createCopyToClipboardFunction();
 
-if (navigator?.clipboard) {
-  copyToClipboard = (text: string) => navigator.clipboard.writeText(text);
-} else {
-  copyToClipboard = async (text: string) => {
+export function createCopyToClipboardFunction() {
+  if (navigator?.clipboard) {
+    return (text: string) => navigator.clipboard.writeText(text);
+  }
+  return async (text: string) => {
     const tmp = document.createElement('TEXTAREA');
     const focus = document.activeElement;
 
@@ -72,6 +79,7 @@ if (navigator?.clipboard) {
     focus.focus();
   };
 }
+
 export interface WrapperProps {
   bordered?: boolean;
   padded?: boolean;
@@ -152,10 +160,15 @@ export const SyntaxHighlighter: FunctionComponent<Props> = ({
   const highlightableCode = format ? formatter(children) : children.trim();
   const [copied, setCopied] = useState(false);
 
-  const onClick = (e: MouseEvent<HTMLButtonElement>) => {
+  const onClick = (e: MouseEvent<HTMLButtonElement> | ClipboardEvent<HTMLDivElement>) => {
     e.preventDefault();
 
-    copyToClipboard(highlightableCode)
+    const textToCopy =
+      e.type !== 'click' && globalWindow.getSelection().toString() !== ''
+        ? globalWindow.getSelection().toString()
+        : highlightableCode;
+
+    copyToClipboard(textToCopy)
       .then(() => {
         setCopied(true);
         globalWindow.setTimeout(() => setCopied(false), 1500);
@@ -164,7 +177,7 @@ export const SyntaxHighlighter: FunctionComponent<Props> = ({
   };
 
   return (
-    <Wrapper bordered={bordered} padded={padded} className={className}>
+    <Wrapper bordered={bordered} padded={padded} className={className} onCopyCapture={onClick}>
       <Scroller>
         <ReactSyntaxHighlighter
           padded={padded || bordered}