feat: Support Mermaid (move into the feature dierctory)

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

@@ -17,15 +17,14 @@ import type { Pluggable } from 'unified';
 
 import { DrawioViewerWithEditButton } from '~/components/ReactMarkdownComponents/DrawioViewerWithEditButton';
 import { Header } from '~/components/ReactMarkdownComponents/Header';
-import { MermaidViewer } from '~/components/ReactMarkdownComponents/MermaidViewer';
 import { TableWithEditButton } from '~/components/ReactMarkdownComponents/TableWithEditButton';
+import * as mermaidPlugin from '~/features/mermaid-plugin';
 import { RehypeSanitizeOption } from '~/interfaces/rehype';
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import type { RendererConfig } 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';
-import * as mermaid from '~/services/renderer/remark-plugins/mermaid';
 import * as plantuml from '~/services/renderer/remark-plugins/plantuml';
 import * as xsvToTable from '~/services/renderer/remark-plugins/xsv-to-table';
 import {
@@ -63,7 +62,7 @@ export const generateViewOptions = (
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
-    mermaid.remarkPlugin,
+    mermaidPlugin.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -79,7 +78,7 @@ export const generateViewOptions = (
       drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
       refsGrowiPlugin.sanitizeOption,
-      mermaid.sanitizeOption,
+      mermaidPlugin.sanitizeOption,
     )]
     : () => {};
 
@@ -109,7 +108,7 @@ export const generateViewOptions = (
     components.gallery = refsGrowiPlugin.Gallery;
     components.drawio = DrawioViewerWithEditButton;
     components.table = TableWithEditButton;
-    components.mermaid = MermaidViewer;
+    components.mermaid = mermaidPlugin.MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -169,7 +168,7 @@ export const generateSimpleViewOptions = (
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
-    mermaid.remarkPlugin,
+    mermaidPlugin.remarkPlugin,
   );
 
   const isEnabledLinebreaks = overrideIsEnabledLinebreaks ?? config.isEnabledLinebreaks;
@@ -189,7 +188,7 @@ export const generateSimpleViewOptions = (
       drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
       refsGrowiPlugin.sanitizeOption,
-      mermaid.sanitizeOption,
+      mermaidPlugin.sanitizeOption,
     )]
     : () => {};
 
@@ -211,7 +210,7 @@ export const generateSimpleViewOptions = (
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
-    components.mermaid = MermaidViewer;
+    components.mermaid = mermaidPlugin.MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {
@@ -246,7 +245,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
     refsGrowiPlugin.remarkPlugin,
-    mermaid.remarkPlugin,
+    mermaidPlugin.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -263,7 +262,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
       refsGrowiPlugin.sanitizeOption,
       drawioPlugin.sanitizeOption,
       addLineNumberAttribute.sanitizeOption,
-      mermaid.sanitizeOption,
+      mermaidPlugin.sanitizeOption,
     )]
     : () => {};
 
@@ -285,7 +284,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.refsimg = refsGrowiPlugin.RefsImgImmutable;
     components.gallery = refsGrowiPlugin.GalleryImmutable;
     components.drawio = drawioPlugin.DrawioViewer;
-    components.mermaid = MermaidViewer;
+    components.mermaid = mermaidPlugin.MermaidViewer;
   }
 
   if (config.isEnabledXssPrevention) {

apps/app/src/features/mermaid-plugin/components/index.ts

@@ -0,0 +1 @@
+export { MermaidViewer } from './MermaidViewer';

apps/app/src/features/mermaid-plugin/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './services';

apps/app/src/features/mermaid-plugin/services/index.ts

@@ -0,0 +1 @@
+export { remarkPlugin, sanitizeOption } from './mermaid';