Merge pull request #10390 from growilabs/fix/172447-drawio-color-mode

fix: Draw.io color mode

apps/app/src/client/components/ReactMarkdownComponents/DrawioViewerWithEditButton.tsx

@@ -29,7 +29,6 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
   const { t } = useTranslation();
 
   const { bol, eol } = props;
-
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();

apps/app/src/client/services/renderer/renderer.tsx

@@ -63,7 +63,7 @@ export const generateViewOptions = (
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
-    drawio.remarkPlugin,
+    [drawio.remarkPlugin, { isDarkMode: config.isDarkMode }],
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,
     attachment.remarkPlugin,
@@ -171,7 +171,7 @@ export const generateSimpleViewOptions = (
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
-    drawio.remarkPlugin,
+    [drawio.remarkPlugin, { isDarkMode: config.isDarkMode }],
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,
     attachment.remarkPlugin,
@@ -268,7 +268,7 @@ export const generatePreviewOptions = (config: RendererConfigExt, pagePath: stri
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
-    drawio.remarkPlugin,
+    [drawio.remarkPlugin, { isDarkMode: config.isDarkMode }],
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,
     attachment.remarkPlugin,

packages/remark-drawio/src/components/DrawioViewer.tsx

@@ -23,6 +23,7 @@ declare global {
 }
 
 export type DrawioViewerProps = {
+  isDarkMode: 'true' | 'false';
   diagramIndex: number;
   bol: number;
   eol: number;
@@ -39,6 +40,7 @@ export type DrawioEditByViewerProps = {
 
 export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
   const {
+    isDarkMode,
     diagramIndex,
     bol,
     eol,
@@ -109,13 +111,13 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
 
     let mxgraphData: string | undefined;
     try {
-      mxgraphData = generateMxgraphData(code);
+      mxgraphData = generateMxgraphData(code, isDarkMode === 'true');
     } catch (err) {
       setError(err);
     }
 
     return `<div class="mxgraph" data-mxgraph="${mxgraphData}"></div>`;
-  }, [children]);
+  }, [children, isDarkMode]);
 
   useEffect(() => {
     if (mxgraphHtml.length > 0) {

packages/remark-drawio/src/services/renderer/remark-drawio.ts

@@ -4,7 +4,7 @@ import type { Code, Node, Paragraph } from 'mdast';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 
-const SUPPORTED_ATTRIBUTES = ['diagramIndex', 'bol', 'eol'];
+const SUPPORTED_ATTRIBUTES = ['diagramIndex', 'bol', 'eol', 'isDarkMode'];
 
 interface Data {
   hName?: string;
@@ -17,7 +17,7 @@ function isDrawioBlock(lang?: string | null): lang is Lang {
   return /^drawio$/.test(lang ?? '');
 }
 
-function rewriteNode(node: Node, index: number) {
+function rewriteNode(node: Node, index: number, isDarkMode?: boolean) {
   node.type = 'paragraph';
   (node as Paragraph).children = [
     { type: 'text', value: (node as Code).value },
@@ -32,16 +32,23 @@ function rewriteNode(node: Node, index: number) {
     diagramIndex: index,
     bol: node.position?.start.line,
     eol: node.position?.end.line,
+    isDarkMode: isDarkMode ? 'true' : 'false',
     key: `drawio-${index}`,
   };
 }
 
-export const remarkPlugin: Plugin = () => (tree) => {
-  visit(tree, 'code', (node: Code, index) => {
-    if (isDrawioBlock(node.lang)) {
-      rewriteNode(node, index ?? 0);
-    }
-  });
+type DrawioRemarkPlugin = {
+  isDarkMode?: boolean;
+};
+
+export const remarkPlugin: Plugin<[DrawioRemarkPlugin]> = (options) => {
+  return (tree) => {
+    visit(tree, 'code', (node: Code, index) => {
+      if (isDrawioBlock(node.lang)) {
+        rewriteNode(node, index ?? 0, options.isDarkMode);
+      }
+    });
+  };
 };
 
 export const sanitizeOption: SanitizeOption = {

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

@@ -53,7 +53,10 @@ const escapeHTML = (string): string => {
   });
 };
 
-export const generateMxgraphData = (code: string): string => {
+export const generateMxgraphData = (
+  code: string,
+  isDarkMode: boolean,
+): string => {
   const trimedCode = code.trim();
   if (!trimedCode) {
     return '';
@@ -82,7 +85,9 @@ export const generateMxgraphData = (code: string): string => {
     resize: true,
     lightbox: 'false',
     xml,
-    'dark-mode': 'auto',
+    // To sync with GROWI app's color mode, pass 'dark' when the app is in dark mode. 'auto' would read OS color scheme via window.matchMedia instead.
+    // refs: https://github.com/jgraph/drawio/blob/eaae294cba5010e3a9d04b685407e79512f88d2d/src/main/webapp/js/diagramly/GraphViewer.js#L888-L892
+    'dark-mode': isDarkMode ? 'dark' : undefined,
   };
 
   return escapeHTML(JSON.stringify(mxGraphData));