Refactor renderer configuration to extend RendererConfig with isDarkMode support

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

@@ -24,7 +24,7 @@ import * as callout from '~/features/callout';
 import * as mermaid from '~/features/mermaid';
 import * as plantuml from '~/features/plantuml';
 import type { RendererOptions } from '~/interfaces/renderer-options';
-import type { RendererConfig } from '~/interfaces/services/renderer';
+import { type RendererConfigExt } from '~/interfaces/services/renderer';
 import * as addLineNumberAttribute from '~/services/renderer/rehype-plugins/add-line-number-attribute';
 import * as keywordHighlighter from '~/services/renderer/rehype-plugins/keyword-highlighter';
 import * as relocateToc from '~/services/renderer/rehype-plugins/relocate-toc';
@@ -51,7 +51,7 @@ assert(isClient(), 'This module must be loaded only from client modules.');
 
 export const generateViewOptions = (
     pagePath: string,
-    config: RendererConfig,
+    config: RendererConfigExt,
     storeTocNode: (toc: HtmlElementNode) => void,
 ): RendererOptions => {
 
@@ -62,7 +62,7 @@ export const generateViewOptions = (
   // add remark plugins
   remarkPlugins.push(
     math,
-    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
+    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,
@@ -128,7 +128,7 @@ export const generateViewOptions = (
   return options;
 };
 
-export const generateTocOptions = (config: RendererConfig, tocNode: HtmlElementNode | undefined): RendererOptions => {
+export const generateTocOptions = (config: RendererConfigExt, tocNode: HtmlElementNode | undefined): RendererOptions => {
 
   const options = generateCommonOptions(undefined);
 
@@ -158,7 +158,7 @@ export const generateTocOptions = (config: RendererConfig, tocNode: HtmlElementN
 };
 
 export const generateSimpleViewOptions = (
-    config: RendererConfig,
+    config: RendererConfigExt,
     pagePath: string,
     highlightKeywords?: string | string[],
     overrideIsEnabledLinebreaks?: boolean,
@@ -170,7 +170,7 @@ export const generateSimpleViewOptions = (
   // add remark plugins
   remarkPlugins.push(
     math,
-    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
+    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,
@@ -232,7 +232,7 @@ export const generateSimpleViewOptions = (
 };
 
 export const generatePresentationViewOptions = (
-    config: RendererConfig,
+    config: RendererConfigExt,
     pagePath: string,
 ): RendererOptions => {
   // based on simple view options
@@ -259,7 +259,7 @@ export const generatePresentationViewOptions = (
   return options;
 };
 
-export const generatePreviewOptions = (config: RendererConfig, pagePath: string): RendererOptions => {
+export const generatePreviewOptions = (config: RendererConfigExt, pagePath: string): RendererOptions => {
   const options = generateCommonOptions(pagePath);
 
   const { remarkPlugins, rehypePlugins, components } = options;
@@ -267,7 +267,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   // add remark plugins
   remarkPlugins.push(
     math,
-    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri }],
+    [plantuml.remarkPlugin, { plantumlUri: config.plantumlUri, isDarkMode: config.isDarkMode }],
     drawio.remarkPlugin,
     mermaid.remarkPlugin,
     xsvToTable.remarkPlugin,

apps/app/src/interfaces/services/renderer.ts

@@ -12,3 +12,7 @@ export type RendererConfig = {
   drawioUri: string,
   plantumlUri: string,
 } & RehypeSanitizeConfiguration;
+
+export type RendererConfigExt = RendererConfig & {
+  isDarkMode?: boolean,
+};

apps/app/src/stores/renderer.tsx

@@ -5,17 +5,28 @@ import useSWR, { type SWRConfiguration, type SWRResponse } from 'swr';
 
 import { getGrowiFacade } from '~/features/growi-plugin/client/utils/growi-facade-utils';
 import type { RendererOptions } from '~/interfaces/renderer-options';
-import {
-  useRendererConfig,
-} from '~/stores-universal/context';
+import type { RendererConfigExt } from '~/interfaces/services/renderer';
+import { useRendererConfig } from '~/stores-universal/context';
+import { useNextThemes } from '~/stores-universal/use-next-themes';
 
 import { useCurrentPagePath } from './page';
 import { useCurrentPageTocNode } from './ui';
 
 
+const useRendererConfigExt = (): RendererConfigExt | null => {
+  const { data: rendererConfig } = useRendererConfig();
+  const { isDarkMode } = useNextThemes();
+
+  return rendererConfig == null ? null : {
+    ...rendererConfig,
+    isDarkMode,
+  } satisfies RendererConfigExt;
+};
+
+
 export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
   const { mutate: mutateCurrentPageTocNode } = useCurrentPageTocNode();
 
   const storeTocNodeHandler = useCallback((toc: HtmlElementNode) => {
@@ -47,7 +58,7 @@ export const useViewOptions = (): SWRResponse<RendererOptions, Error> => {
 
 export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
   const { data: tocNode } = useCurrentPageTocNode();
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null && tocNode != null;
@@ -70,7 +81,7 @@ export const useTocOptions = (): SWRResponse<RendererOptions, Error> => {
 
 export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null;
   const customGenerater = getGrowiFacade().markdownRenderer?.optionsGenerators?.customGeneratePreviewOptions;
@@ -97,7 +108,7 @@ export const usePreviewOptions = (): SWRResponse<RendererOptions, Error> => {
 
 export const useCommentForCurrentPageOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null;
 
@@ -124,7 +135,7 @@ export const useCommentForCurrentPageOptions = (): SWRResponse<RendererOptions,
 export const useCommentPreviewOptions = useCommentForCurrentPageOptions;
 
 export const useSelectedPagePreviewOptions = (pagePath: string, highlightKeywords?: string | string[]): SWRResponse<RendererOptions, Error> => {
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
 
   const isAllDataValid = rendererConfig != null;
 
@@ -147,7 +158,7 @@ export const useSearchResultOptions = useSelectedPagePreviewOptions;
 export const useTimelineOptions = useSelectedPagePreviewOptions;
 
 export const useCustomSidebarOptions = (config?: SWRConfiguration): SWRResponse<RendererOptions, Error> => {
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
 
   const isAllDataValid = rendererConfig != null;
 
@@ -170,7 +181,7 @@ export const useCustomSidebarOptions = (config?: SWRConfiguration): SWRResponse<
 
 export const usePresentationViewOptions = (): SWRResponse<RendererOptions, Error> => {
   const { data: currentPagePath } = useCurrentPagePath();
-  const { data: rendererConfig } = useRendererConfig();
+  const rendererConfig = useRendererConfigExt();
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null;