Do not add 'copy to clipboard' buttons to plain-old code instances. (#…

…9314)
backstage · Feb 2, 2022 · 18317a0 · 18317a0
1 parent d6da97a
commit 18317a0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/.changeset/techdocs-not-that-many-copies.md b/.changeset/techdocs-not-that-many-copies.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fixed a bug where copy-to-clipboard buttons were appended to unintended elements.
diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.test.ts b/plugins/techdocs/src/reader/transformers/copyToClipboard.test.ts
@@ -32,7 +32,7 @@ describe('copyToClipboard', () => {
       <!DOCTYPE html>
       <html>
         <body>
-          <code><span>${expectedClipboard}</span></code>
+          <pre><code><span>${expectedClipboard}</span></code></pre>
         </body>
       </html>
     `,
@@ -46,4 +46,25 @@ describe('copyToClipboard', () => {
 
     expect(clipboardSpy).toHaveBeenCalledWith(expectedClipboard);
   });
+
+  it('only gets applied to code blocks', async () => {
+    const expectedClipboard = 'function foo() {return "bar";}';
+    const shadowDom = await createTestShadowDom(
+      `
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <code><span>${expectedClipboard}</span></code>
+        </body>
+      </html>
+    `,
+      {
+        preTransformers: [],
+        postTransformers: [copyToClipboard()],
+      },
+    );
+
+    const copyButton = shadowDom.querySelector('button');
+    expect(copyButton).toBe(null);
+  });
 });
diff --git a/plugins/techdocs/src/reader/transformers/copyToClipboard.ts b/plugins/techdocs/src/reader/transformers/copyToClipboard.ts
@@ -22,7 +22,7 @@ import type { Transformer } from './transformer';
  */
 export const copyToClipboard = (): Transformer => {
   return dom => {
-    Array.from(dom.querySelectorAll('code')).forEach(codeElem => {
+    Array.from(dom.querySelectorAll('pre > code')).forEach(codeElem => {
       const button = document.createElement('button');
       const toBeCopied = codeElem.textContent || '';
       button.className = 'md-clipboard md-icon';