Merge pull request #10141 from weseek/imprv/drawio-dark-mode

imprv: Add dark mode support to DrawioViewer component

apps/app/src/components/Script/DrawioViewerScript/DrawioViewerScript.tsx

@@ -19,7 +19,7 @@ export const DrawioViewerScript = ({ drawioUri }: Props): JSX.Element => {
 
   const loadedHandler = useCallback(() => {
     // disable useResizeSensor and checkVisibleState
-    //   for preventing resize event by viewer.min.js
+    //   for preventing resize event by viewer-static.min.js
     GraphViewer.useResizeSensor = false;
     GraphViewer.prototype.checkVisibleState = false;
 

apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.spec.ts

@@ -3,10 +3,10 @@ import { useViewerMinJsUrl } from './use-viewer-min-js-url';
 describe('useViewerMinJsUrl', () => {
   it.each`
     drawioUri                                     | expected
-    ${'http://localhost:8080'}                    | ${'http://localhost:8080/js/viewer.min.js'}
-    ${'http://example.com'}                       | ${'http://example.com/js/viewer.min.js'}
-    ${'http://example.com/drawio'}                | ${'http://example.com/drawio/js/viewer.min.js'}
-    ${'http://example.com/?offline=1&https=0'}    | ${'http://example.com/js/viewer.min.js?offline=1&https=0'}
+    ${'http://localhost:8080'}                    | ${'http://localhost:8080/js/viewer-static.min.js'}
+    ${'http://example.com'}                       | ${'http://example.com/js/viewer-static.min.js'}
+    ${'http://example.com/drawio'}                | ${'http://example.com/drawio/js/viewer-static.min.js'}
+    ${'http://example.com/?offline=1&https=0'}    | ${'http://example.com/js/viewer-static.min.js?offline=1&https=0'}
   `('should return the expected URL "$expected" when drawioUri is "$drawioUrk"', ({ drawioUri, expected }: {drawioUri: string, expected: string}) => {
     // Act
     const url = useViewerMinJsUrl(drawioUri);

apps/app/src/components/Script/DrawioViewerScript/use-viewer-min-js-url.ts

@@ -3,7 +3,7 @@ import urljoin from 'url-join';
 export const useViewerMinJsUrl = (drawioUri: string): string => {
   // extract search from URL
   const url = new URL(drawioUri);
-  const pathname = urljoin(url.pathname, '/js/viewer.min.js');
+  const pathname = urljoin(url.pathname, '/js/viewer-static.min.js');
 
   return `${url.origin}${pathname}${url.search}`;
 };

packages/remark-drawio/src/utils/embed.ts

@@ -73,7 +73,6 @@ export const generateMxgraphData = (code: string): string => {
     </mxfile>
   `;
 
-  // see options: https://drawio.freshdesk.com/support/solutions/articles/16000042542-embed-html
   const mxGraphData = {
     editable: false,
     highlight: '#0000ff',
@@ -83,6 +82,7 @@ export const generateMxgraphData = (code: string): string => {
     resize: true,
     lightbox: 'false',
     xml,
+    'dark-mode': 'auto',
   };
 
   return escapeHTML(JSON.stringify(mxGraphData));