Refactor DrawioViewer to use string literals for isDarkMode

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

@@ -28,7 +28,7 @@ declare global {
 export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps): JSX.Element => {
   const { t } = useTranslation();
 
-  const { isDarkMode, bol, eol } = props;
+  const { bol, eol } = props;
   const { data: isGuestUser } = useIsGuestUser();
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();
@@ -78,7 +78,7 @@ export const DrawioViewerWithEditButton = React.memo((props: DrawioViewerProps):
           <span className="material-symbols-outlined me-1">edit_square</span>{t('Edit')}
         </button>
       ) }
-      <DrawioViewer {...props} isDarkMode={isDarkMode} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />
+      <DrawioViewer {...props} onRenderingStart={renderingStartHandler} onRenderingUpdated={renderingUpdatedHandler} />
     </div>
   );
 });

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,
@@ -114,7 +114,7 @@ export const generateViewOptions = (
     components.refimg = refsGrowiDirective.RefImg;
     components.refsimg = refsGrowiDirective.RefsImg;
     components.gallery = refsGrowiDirective.Gallery;
-    components.drawio = props => <DrawioViewerWithEditButton {...props} isDarkMode={config.isDarkMode} />;
+    components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
@@ -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,
@@ -218,7 +218,7 @@ export const generateSimpleViewOptions = (
     components.refimg = refsGrowiDirective.RefImgImmutable;
     components.refsimg = refsGrowiDirective.RefsImgImmutable;
     components.gallery = refsGrowiDirective.GalleryImmutable;
-    components.drawio = props => <drawio.DrawioViewer {...props} isDarkMode={config.isDarkMode} />;
+    components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
     components.attachment = RichAttachment;
@@ -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,
@@ -312,7 +312,7 @@ export const generatePreviewOptions = (config: RendererConfigExt, pagePath: stri
     components.refimg = refsGrowiDirective.RefImgImmutable;
     components.refsimg = refsGrowiDirective.RefsImgImmutable;
     components.gallery = refsGrowiDirective.GalleryImmutable;
-    components.drawio = props => <drawio.DrawioViewer {...props} isDarkMode={config.isDarkMode} />;
+    components.drawio = drawio.DrawioViewer;
     components.mermaid = mermaid.MermaidViewer;
     components.callout = callout.CalloutViewer;
     components.attachment = RichAttachment;

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

@@ -23,7 +23,7 @@ declare global {
 }
 
 export type DrawioViewerProps = {
-  isDarkMode: boolean;
+  isDarkMode: 'true' | 'false';
   diagramIndex: number;
   bol: number;
   eol: number;
@@ -111,7 +111,7 @@ export const DrawioViewer = memo((props: DrawioViewerProps): JSX.Element => {
 
     let mxgraphData: string | undefined;
     try {
-      mxgraphData = generateMxgraphData(code, isDarkMode);
+      mxgraphData = generateMxgraphData(code, isDarkMode === 'true');
     } catch (err) {
       setError(err);
     }

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 = {