feat(clipboard): support inputs/textarea/links and shadow dom

shoelace-style · Aug 1, 2023 · edd25a4 · edd25a4
1 parent a10fd62
commit edd25a4
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 2 deletions.
diff --git a/docs/pages/components/clipboard.md b/docs/pages/components/clipboard.md
@@ -102,6 +102,38 @@ const App = () => (
 );
 ```
 
+### Copy an input/textarea or link
+
+```html:preview
+<input type="text" value="input rocks" id="input-rocks">
+<sl-clipboard for="input-rocks"></sl-clipboard>
+<br>
+<textarea id="textarea-rocks">textarea
+rocks</textarea>
+<sl-clipboard for="textarea-rocks"></sl-clipboard>
+<br>
+<a href="https://shoelace.style/" id="link-rocks">Shoelace</a>
+<sl-clipboard for="link-rocks"></sl-clipboard>
+```
+
+```jsx:react
+import { SlClipboard } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <input type="text" value="input rocks" id="input-rocks">
+    <SlClipboard for="input-rocks"></SlClipboard>
+    <br>
+    <textarea id="textarea-rocks">textarea
+rocks</textarea>
+    <SlClipboard for="textarea-rocks"></SlClipboard>
+    <br>
+    <a href="https://shoelace.style/" id="link-rocks">Shoelace</a>
+    <SlClipboard for="input-rocks"></SlClipboard>
+  </>
+);
+```
+
 ### Error if copy fails
 
 For example if a `for` target element is not found or if not using `https`.
@@ -148,6 +180,52 @@ const App = () => (
 );
 ```
 
+### Supports Shadow Dom
+
+```html:preview
+<sl-copy-demo-el></sl-copy-demo-el>
+
+<script>
+  customElements.define('sl-copy-demo-el', class extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+      this.shadowRoot.innerHTML = `
+        <p id="copy-me">copy me (inside shadow root)</p>
+        <sl-clipboard for="copy-me"></sl-clipboard>
+      `;
+    }
+  });
+</script>
+```
+
+```jsx:react
+import { SlClipboard } from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <>
+    <sl-copy-demo-el></sl-copy-demo-el>
+  </>
+);
+
+customElements.define('sl-copy-demo-el', class extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <p id="copy-me">copy me (inside shadow root)</p>
+      <sl-clipboard for="copy-me"></sl-clipboard>
+    `;
+  }
+});
+```
+
 ## Disclaimer
 
 The public API is partially inspired by https://github.com/github/clipboard-copy-element
diff --git a/src/components/clipboard/clipboard.component.ts b/src/components/clipboard/clipboard.component.ts
@@ -49,9 +49,16 @@ export default class SlClipboard extends ShoelaceElement {
   /** Copies the clipboard */
   async copy() {
     if (this.for) {
-      const target = document.getElementById(this.for)!;
+      const root = this.getRootNode() as ShadowRoot | Document;
+      const target = 'getElementById' in root ? root.getElementById(this.for) : false;
       if (target) {
-        this.value = target.textContent || '';
+        if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
+          this.value = target.value;
+        } else if (target instanceof HTMLAnchorElement && target.hasAttribute('href')) {
+          this.value = target.href;
+        } else {
+          this.value = target.textContent || '';
+        }
       }
     }
     if (this.value) {