From 9168acbb9d6c5d333af8f2d7ed8afabeb2b97267 Mon Sep 17 00:00:00 2001
From: Yuki Takei <yuki@weseek.co.jp>
Date: Tue, 12 Nov 2024 10:03:27 +0000
Subject: [PATCH] output TextDirective and LeafDirective as HTML

---
 .../renderer/remark-plugins/echo-directive.ts | 40 +++++++++++++++++++
 apps/app/src/services/renderer/renderer.tsx   |  2 +
 2 files changed, 42 insertions(+)
 create mode 100644 apps/app/src/services/renderer/remark-plugins/echo-directive.ts

diff --git a/apps/app/src/services/renderer/remark-plugins/echo-directive.ts b/apps/app/src/services/renderer/remark-plugins/echo-directive.ts
new file mode 100644
index 00000000000..d5479ef9e7d
--- /dev/null
+++ b/apps/app/src/services/renderer/remark-plugins/echo-directive.ts
@@ -0,0 +1,40 @@
+import type { ElementContent } from 'hast';
+import { h } from 'hastscript';
+import type { Text } from 'mdast';
+import type { LeafDirective, TextDirective } from 'mdast-util-directive';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+
+
+function echoDirective(node: TextDirective | LeafDirective): ElementContent[] {
+  const mark = node.type === 'textDirective' ? ':' : '::';
+
+  return [
+    h('span', `${mark}${node.name}`),
+    ...(node.children ?? []).map((child: Text) => h('span', `[${child.value}]`)),
+  ];
+}
+
+export const remarkPlugin: Plugin = () => {
+  return (tree) => {
+
+    visit(tree, 'textDirective', (node: TextDirective) => {
+      const tagName = 'span';
+
+      const data = node.data ?? (node.data = {});
+      data.hName = tagName;
+      data.hProperties = h(tagName, node.attributes ?? {}).properties;
+      data.hChildren = echoDirective(node);
+    });
+
+    visit(tree, 'leafDirective', (node: LeafDirective) => {
+      const tagName = 'div';
+
+      const data = node.data ?? (node.data = {});
+      data.hName = tagName;
+      data.hProperties = h(tagName, node.attributes ?? {}).properties;
+      data.hChildren = echoDirective(node);
+    });
+
+  };
+};
diff --git a/apps/app/src/services/renderer/renderer.tsx b/apps/app/src/services/renderer/renderer.tsx
index e3cc3fd6c0b..0a5fe07c63b 100644
--- a/apps/app/src/services/renderer/renderer.tsx
+++ b/apps/app/src/services/renderer/renderer.tsx
@@ -26,6 +26,7 @@ import * as addClass from './rehype-plugins/add-class';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
 import * as codeBlock from './remark-plugins/codeblock';
+import * as echoDirective from './remark-plugins/echo-directive';
 import * as emoji from './remark-plugins/emoji';
 import { pukiwikiLikeLinker } from './remark-plugins/pukiwiki-like-linker';
 import * as xsvToTable from './remark-plugins/xsv-to-table';
@@ -101,6 +102,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       pukiwikiLikeLinker,
       growiDirective,
       remarkDirective,
+      echoDirective.remarkPlugin,
       remarkFrontmatter,
       codeBlock.remarkPlugin,
     ],