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

This commit is contained in:
Eric Peterson
2022-02-02 19:00:32 +01:00
committed by GitHub
parent d6da97a1ed
commit 18317a08db
3 changed files with 28 additions and 2 deletions
@@ -0,0 +1,5 @@
---
'@backstage/plugin-techdocs': patch
---
Fixed a bug where copy-to-clipboard buttons were appended to unintended elements.
@@ -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);
});
});
@@ -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';