impl remark plugin

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

@@ -10,4 +10,5 @@ export type RendererConfig = {
 
   plantumlUri: string | null,
   blockdiagUri: string | null,
+  drawioEmbedUri: string | null,
 } & XssOptionConfig;

packages/app/src/services/renderer/renderer.tsx

@@ -321,6 +321,7 @@ export const generateViewOptions = (
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { baseUrl: config.plantumlUri }],
+    [drawioPlugin.remarkPlugin, { drawioEmbedUri: config.drawioEmbedUri }],
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
   );
@@ -334,6 +335,7 @@ export const generateViewOptions = (
     [lsxGrowiPlugin.rehypePlugin, { pagePath }],
     [sanitize, deepmerge(
       commonSanitizeOption,
+      drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
     )],
     katex,
@@ -398,6 +400,7 @@ export const generateSimpleViewOptions = (config: RendererConfig, pagePath: stri
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { baseUrl: config.plantumlUri }],
+    [drawioPlugin.remarkPlugin, { drawioEmbedUri: config.drawioEmbedUri }],
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
   );
@@ -411,6 +414,7 @@ export const generateSimpleViewOptions = (config: RendererConfig, pagePath: stri
     [keywordHighlighter.rehypePlugin, { keywords: highlightKeywords }],
     [sanitize, deepmerge(
       commonSanitizeOption,
+      drawioPlugin.sanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
     )],
     katex,
@@ -434,9 +438,9 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
   remarkPlugins.push(
     math,
     [plantuml.remarkPlugin, { baseUrl: config.plantumlUri }],
+    [drawioPlugin.remarkPlugin, { drawioEmbedUri: config.drawioEmbedUri }],
     xsvToTable.remarkPlugin,
     lsxGrowiPlugin.remarkPlugin,
-    drawioPlugin.remarkPlugin,
   );
   if (config.isEnabledLinebreaks) {
     remarkPlugins.push(breaks);
@@ -449,6 +453,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     [sanitize, deepmerge(
       commonSanitizeOption,
       lsxGrowiPlugin.sanitizeOption,
+      drawioPlugin.sanitizeOption,
       addLineNumberAttribute.sanitizeOption,
     )],
     katex,
@@ -459,7 +464,7 @@ export const generatePreviewOptions = (config: RendererConfig, pagePath: string)
     components.lsx = props => <Lsx {...props} />;
   }
 
-  verifySanitizePlugin(options, false);
+  // verifySanitizePlugin(options, false);
   return options;
 };
 

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

@@ -3,7 +3,7 @@ import { Plugin } from 'unified';
 import { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
-const SUPPORTED_ATTRIBUTES = ['drawioUri'];
+const SUPPORTED_ATTRIBUTES = ['drawioEmbedUri'];
 
 type Lang = 'drawio';
 
@@ -11,36 +11,34 @@ function isDrawioBlock(lang: unknown): lang is Lang {
   return /^drawio$/.test(lang as string);
 }
 
-function rewriteNode(node: Node, lang: Lang) {
-  const contents = node.value as string;
+export type DrawioRemarkPluginParams = {
+  drawioEmbedUri?: string,
+}
+
+function rewriteNode(node: Node, options: DrawioRemarkPluginParams) {
+  const data = node.data ?? (node.data = {});
 
-  // TODO: add node
-  console.log('contents', contents);
+  node.type = 'paragraph';
+  node.children = [{ type: 'text', value: node.value }];
+  data.hName = 'drawio';
+  data.hProperties = { drawioEmbedUri: options.drawioEmbedUri };
 }
 
-export const remarkPlugin: Plugin = function() {
+export const remarkPlugin: Plugin<[DrawioRemarkPluginParams]> = function(options = {}) {
   return (tree) => {
     visit(tree, (node) => {
       if (node.type === 'code') {
         if (isDrawioBlock(node.lang)) {
-          rewriteNode(node, node.lang);
+          rewriteNode(node, options);
         }
       }
     });
   };
 };
 
-export type DrawioRehypePluginParams = {
-  drawioUri: string,
-}
-
-export const rehypePlugin: Plugin<[DrawioRehypePluginParams]> = (options) => {
-  // TODO: impl
-};
-
 export const sanitizeOption: SanitizeOption = {
   tagNames: ['drawio'],
   attributes: {
-    lsx: SUPPORTED_ATTRIBUTES,
+    drawio: SUPPORTED_ATTRIBUTES,
   },
 };