Merge branch 'master' of github.com:jonathan-ash/backstage into techdocs-reader-custom-error-page

plugins/techdocs/src/reader/components/Reader.tsx

@@ -142,6 +142,7 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
   const techdocsSanitizer = useApi(configApiRef);
   const { namespace = '', kind = '', name = '' } = entityRef;
   const { state, path, content: rawPage } = useTechDocsReader();
+  const isDarkTheme = theme.palette.type === 'dark';
 
   const [sidebars, setSidebars] = useState<HTMLElement[]>();
   const [dom, setDom] = useState<HTMLElement | null>(null);
@@ -219,6 +220,27 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
             --md-accent-fg-color: ${theme.palette.primary.main};
             --md-default-fg-color--lightest: ${theme.palette.textVerySubtle};
           }
+          .codehilite .gd, .highlight .gd { 
+            background-color: ${isDarkTheme ? 'rgba(248,81,73,0.65)' : '#fdd'};
+          }
+          .codehilite .gi, .highlight .gi {
+            background-color: ${isDarkTheme ? 'rgba(46,160,67,0.65)' : '#dfd'};
+          }
+          .highlight .kd {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'};
+          }
+           .highlight .k {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3b78e7'};
+          }
+          .highlight .nx {
+            color: ${isDarkTheme ? '#ff53a3' : '#ec407a'};
+          }
+          .highlight .s1 {
+            color: ${isDarkTheme ? '#1cad46' : 'rgb(13, 144, 79)'};
+          }
+          .highlight .kt {
+            color: ${isDarkTheme ? '#4aaaf7' : '#3e61a2'};
+          }
           .md-main__inner { margin-top: 0; }
           .md-sidebar {  position: fixed; bottom: 100px; width: 20rem; }
           .md-sidebar--secondary { right: 2rem; }
@@ -351,21 +373,22 @@ export const useTechDocsReaderDom = (entityRef: EntityName): Element | null => {
         }),
       ]),
     [
+      techdocsSanitizer,
+      techdocsStorageApi,
       kind,
       name,
       namespace,
       scmIntegrationsApi,
-      techdocsStorageApi,
-      techdocsSanitizer,
-      theme.palette.action.disabledBackground,
-      theme.palette.background.default,
-      theme.palette.background.paper,
-      theme.palette.primary.main,
-      theme.palette.success.main,
-      theme.palette.text.primary,
-      theme.palette.textSubtle,
-      theme.palette.textVerySubtle,
       theme.typography.fontFamily,
+      theme.palette.text.primary,
+      theme.palette.primary.main,
+      theme.palette.background.paper,
+      theme.palette.background.default,
+      theme.palette.textVerySubtle,
+      theme.palette.textSubtle,
+      theme.palette.action.disabledBackground,
+      theme.palette.success.main,
+      isDarkTheme,
       isPinned,
     ],
   );

plugins/techdocs/src/reader/transformers/addBaseUrl.test.ts

@@ -42,6 +42,10 @@ const fixture = `
       <img src="test.jpg" />
       <script type="javascript" src="script.js"></script>
       <a href="afile.pdf" download>Download Now</a>
+      <video width="800" height="450" controls preload="auto">
+        <source src="avideo.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>
     </body>
   </html>
 `;
@@ -88,12 +92,18 @@ describe('addBaseUrl', () => {
     );
     expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
       3,
-      'astyle.css',
+      'avideo.mp4',
       mockEntityId,
       '',
     );
     expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
       4,
+      'astyle.css',
+      mockEntityId,
+      '',
+    );
+    expect(techdocsStorageApi.getBaseUrl).toHaveBeenNthCalledWith(
+      5,
       'afile.pdf',
       mockEntityId,
       '',

plugins/techdocs/src/reader/transformers/addBaseUrl.ts

@@ -84,6 +84,7 @@ export const addBaseUrl = ({
     await Promise.all([
       updateDom<HTMLImageElement>(dom.querySelectorAll('img'), 'src'),
       updateDom<HTMLScriptElement>(dom.querySelectorAll('script'), 'src'),
+      updateDom<HTMLSourceElement>(dom.querySelectorAll('source'), 'src'),
       updateDom<HTMLLinkElement>(dom.querySelectorAll('link'), 'href'),
       updateDom<HTMLAnchorElement>(dom.querySelectorAll('a[download]'), 'href'),
     ]);

plugins/techdocs/src/reader/transformers/addLinkClickListener.test.ts

@@ -71,4 +71,31 @@ describe('addLinkClickListener', () => {
 
     expect(fn).toHaveBeenCalledTimes(0);
   });
+
+  it('does not call onClick when a link has a download attribute', async () => {
+    const fn = jest.fn();
+    const shadowDom = await createTestShadowDom(
+      `
+      <!DOCTYPE html>
+      <html>
+        <body>
+          <a download href="http://localhost:3000/file.pdf">Download</a>
+        </body>
+      </html>
+    `,
+      {
+        preTransformers: [],
+        postTransformers: [
+          addLinkClickListener({
+            baseUrl: 'http://localhost:3000',
+            onClick: fn,
+          }),
+        ],
+      },
+    );
+
+    shadowDom.querySelector('a')?.click();
+
+    expect(fn).toHaveBeenCalledTimes(0);
+  });
 });

plugins/techdocs/src/reader/transformers/addLinkClickListener.ts

@@ -32,7 +32,7 @@ export const addLinkClickListener = ({
         const href = target.getAttribute('href');
 
         if (!href) return;
-        if (href.startsWith(baseUrl)) {
+        if (href.startsWith(baseUrl) && !elem.hasAttribute('download')) {
           e.preventDefault();
           onClick(e, href);
         }

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);
+  });
 });

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';