Do not add 'copy to clipboard' buttons to plain-old code instances. (#9314)
This commit is contained in:
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user