docs: add copy to clipboard functionality

documentation/src/components/code-example.css

@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
     border-radius: 6px;
     border: 1px solid var(--spectrum-global-color-gray-100);
     width: 100%;
+    position: relative;
 }
 
 .demo-example {
@@ -47,3 +48,9 @@ governing permissions and limitations under the License.
     line-height: 1.3em;
     overflow-x: auto;
 }
+
+.copy {
+    position: absolute;
+    bottom: 1px;
+    right: 1px;
+}

documentation/src/components/code-example.ts

@@ -27,6 +27,9 @@ import LightThemeStyles from 'prismjs/themes/prism.css';
 import Styles from './code-example.css';
 import { stripIndent } from 'common-tags';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
+import '@spectrum-web-components/action-button/sp-action-button.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-copy.js';
+import { copyNode } from './copy-to-clipboard.js';
 
 class Code extends LitElement {
     @property()
@@ -145,10 +148,24 @@ export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) {
                       </div>
                   `
                 : undefined}
-            <bdo id="markup" dir="ltr">${highlightedCode}</bdo>
+            <bdo id="markup" dir="ltr">
+                ${highlightedCode}
+                <sp-action-button
+                    class="copy"
+                    @click=${this.copyToClipboard}
+                    quiet
+                >
+                    <sp-icon-copy slot="icon"></sp-icon-copy>
+                    Copy to Clipboard
+                </sp-action-button>
+            </bdo>
         `;
     }
 
+    private copyToClipboard(): void {
+        copyNode(this);
+    }
+
     private shouldManageTabOrderForScrolling = (): void => {
         [this.markup, this.demo].map((el) => {
             if (!el) return;

documentation/src/components/copy-to-clipboard.ts

@@ -0,0 +1,58 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+function createNode(text: string): Element {
+    const node = document.createElement('pre');
+    node.style.width = '1px';
+    node.style.height = '1px';
+    node.style.position = 'fixed';
+    node.style.top = '5px';
+    node.textContent = text;
+    return node;
+}
+
+export function copyNode(node: Element): Promise<void> {
+    if ('clipboard' in navigator) {
+        return navigator.clipboard.writeText(node.textContent || '');
+    }
+
+    const selection = getSelection();
+    if (selection == null) {
+        return Promise.reject(new Error());
+    }
+
+    selection.removeAllRanges();
+
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    selection.addRange(range);
+
+    document.execCommand('copy');
+    selection.removeAllRanges();
+    return Promise.resolve();
+}
+
+export function copyText(text: string): Promise<void> {
+    if ('clipboard' in navigator) {
+        return navigator.clipboard.writeText(text);
+    }
+
+    const body = document.body;
+    if (!body) {
+        return Promise.reject(new Error());
+    }
+
+    const node = createNode(text);
+    body.appendChild(node);
+    copyNode(node);
+    body.removeChild(node);
+    return Promise.resolve();
+}