From 18317a08db865ad88285e747d8ca002b38ae633e Mon Sep 17 00:00:00 2001 From: Eric Peterson Date: Wed, 2 Feb 2022 19:00:32 +0100 Subject: [PATCH] Do not add 'copy to clipboard' buttons to plain-old code instances. (#9314) --- .changeset/techdocs-not-that-many-copies.md | 5 ++++ .../transformers/copyToClipboard.test.ts | 23 ++++++++++++++++++- .../reader/transformers/copyToClipboard.ts | 2 +- 3 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 .changeset/techdocs-not-that-many-copies.md diff --git a/.changeset/techdocs-not-that-many-copies.md b/.changeset/techdocs-not-that-many-copies.md new file mode 100644 index 0000000000..f0507a8157 --- /dev/null +++ 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 index 679121d9bd..daa074f6e4 100644 --- a/plugins/techdocs/src/reader/transformers/copyToClipboard.test.ts +++ b/plugins/techdocs/src/reader/transformers/copyToClipboard.test.ts @@ -32,7 +32,7 @@ describe('copyToClipboard', () => { - ${expectedClipboard} + 
${expectedClipboard}
`, @@ -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( + ` + + + + ${expectedClipboard} + + + `, + { + 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 index 24b46c0b85..d0569c0fd9 100644 --- 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';