Support hashtags in markdown()

Author: dahlia

deno.json

@@ -17,6 +17,7 @@
   },
   "imports": {
     "@fedify/fedify": "jsr:@fedify/fedify@^1.3.4",
+    "@fedify/markdown-it-hashtag": "jsr:@fedify/markdown-it-hashtag@^0.3.0",
     "@fedify/markdown-it-mention": "jsr:@fedify/markdown-it-mention@^0.2.0",
     "@hongminhee/x-forwarded-fetch": "jsr:@hongminhee/x-forwarded-fetch@^0.2.0",
     "@hono/hono": "jsr:@hono/hono@^4.6.18",

docs/concepts/text.md

@@ -404,6 +404,9 @@ The above code will create a text like this:
 Markdown
 --------
 
+> [!NOTE]
+> The `markdown()` function does not support raw HTML syntax.
+
 Sometimes you have a Markdown text and want to render it as a `Text` object.
 You can use the `markdown()` function to convert the Markdown text to the `Text`
 object.  It is a block construct.  For example:
@@ -452,7 +455,11 @@ The above code will create a text like this:
 > -  I can have an _italic_ text.
 
 Besides the standard Markdown syntax, the `markdown()` function also supports
-the following mentioning syntax for the fediverse:
+mentioning and hashtag syntax for the fediverse.
+
+### Mentions
+
+The following example shows how to mention an account:
 
 ~~~~ typescript
 markdown(`Hello, @fedify@hollo.social!`)
@@ -483,8 +490,39 @@ The above code will create a text like this:
 
 > Hello, @fedify@hollo.social!
 
+### Hashtags
+
+The following example shows how to include a hashtag:
+
+~~~~ typescript
+markdown(`Here's a hashtag: #BotKit`)
+~~~~
+
+The above code will create a text like this:
+
+> Here's a hashtag: [#BotKit](https://mastodon.social/tags/botkit).
+
 > [!NOTE]
-> The `markdown()` function does not support raw HTML syntax.
+> The `markdown()` function does not only format the hashtag but also denotes
+> the hashtag so that ActivityPub software can recognize it as a hashtag.
+> The hashtag will be searchable in the fediverse (some software may search it
+> only from public messages though).  If you want to just link to the hashtag
+> without denoting it, use the normal link syntax instead:
+>
+> ~~~~ typescript
+> markdown(`Here's a hashtag: [#BotKit](https://mastodon.social/tags/botkit)`)
+> ~~~~
+
+If you want `#`-syntax to be treated as a normal text, turn off the syntax
+by setting the `hashtags` option to `false`:
+
+~~~~ typescript
+markdown(`Here's a hashtag: #BotKit`, { hashtags: false })
+~~~~
+
+The above code will create a text like this:
+
+> Here's a hashtag: #BotKit.
 
 
 Determining if the text mentions an account

src/text.test.ts

@@ -559,7 +559,8 @@ Deno.test("markdown()", async () => {
 - I can have a list.
 - I can have a **bold** text.
 - I can have an _italic_ text.
-- I can mention @fedify@hollo.social.`;
+- I can mention @fedify@hollo.social.
+- I can tag #Hashtag.`;
   const t: Text<"block", void> = markdown(md);
   assertEquals(
     (await Array.fromAsync(t.getHtml(session))).join(""),
@@ -571,13 +572,17 @@ Deno.test("markdown()", async () => {
       '<a  translate="no" class="h-card u-url mention" target="_blank" href="https://hollo.social/@fedify">' +
       '<span class="at">@</span><span class="user">fedify</span>' +
       '<span class="at">@</span><span class="domain">hollo.social</span></a>.</li>\n' +
+      '<li>I can tag <a  class="mention hashtag" rel="tag" target="_blank" href="https://example.com/tags/hashtag">#<span>Hashtag</span></a>.</li>\n' +
       "</ul>\n",
   );
   const tags = await Array.fromAsync(t.getTags(session));
-  assertEquals(tags.length, 1);
+  assertEquals(tags.length, 2);
   assertInstanceOf(tags[0], Mention);
   assertEquals(tags[0].name, "@fedify@hollo.social");
   assertEquals(tags[0].href, new URL("https://hollo.social/@fedify"));
+  assertInstanceOf(tags[1], Hashtag);
+  assertEquals(tags[1].name, "#hashtag");
+  assertEquals(tags[1].href, new URL("https://example.com/tags/hashtag"));
   const cache = t.getCachedObjects();
   assertEquals(cache.length, 1);
   assertInstanceOf(cache[0], Person);

src/text.ts

@@ -22,6 +22,7 @@ import {
   type Object,
 } from "@fedify/fedify";
 import { Hashtag } from "@fedify/fedify/vocab";
+import { hashtag as hashtagPlugin } from "@fedify/markdown-it-hashtag";
 import {
   mention as mentionPlugin,
   toFullHandle,
@@ -718,6 +719,12 @@ export interface MarkdownTextOptions {
    */
   readonly mentions?: boolean;
 
+  /**
+   * Whether to render hashtags in the Markdown text.
+   * @default {true}
+   */
+  readonly hashtags?: boolean;
+
   /**
    * Whether to automatically linkify URLs in the Markdown text.
    * @default {true}
@@ -727,6 +734,8 @@ export interface MarkdownTextOptions {
 
 interface MarkdownEnv {
   mentions: string[];
+  hashtags: string[];
+  origin: string;
   actors?: Record<string, string | null>;
 }
 
@@ -739,6 +748,7 @@ export class MarkdownText<TContextData> implements Text<"block", TContextData> {
   readonly #content: string;
   readonly #markdownIt: typeof MarkdownIt;
   readonly #mentions?: string[];
+  readonly #hashtags?: string[];
   #actors?: Record<string, Object>;
 
   /**
@@ -767,10 +777,40 @@ export class MarkdownText<TContextData> implements Text<"block", TContextData> {
         },
         label: toFullHandle,
       });
-      const env: MarkdownEnv = { mentions: [] };
+      const env: MarkdownEnv = {
+        mentions: [],
+        hashtags: [],
+        origin: "http://localhost",
+      };
       md.render(content, env);
       this.#mentions = env.mentions;
     }
+    if (options.hashtags ?? true) {
+      md.use(hashtagPlugin, {
+        link(hashtag: string, env: MarkdownEnv) {
+          const tag = hashtag.substring(1).toLowerCase();
+          return new URL(`/tags/${encodeURIComponent(tag)}`, env.origin).href;
+        },
+        linkAttributes(_hashtag: string, _env: MarkdownEnv) {
+          return {
+            class: "mention hashtag",
+            rel: "tag",
+            target: "_blank",
+          };
+        },
+        label(hashtag: string, _env: MarkdownEnv) {
+          const tag = hashtag.substring(1);
+          return `#<span>${tag}</span>`;
+        },
+      });
+      const env: MarkdownEnv = {
+        mentions: [],
+        hashtags: [],
+        origin: "http://localhost",
+      };
+      md.render(content, env);
+      this.#hashtags = env.hashtags;
+    }
     this.#markdownIt = md;
   }
 
@@ -815,7 +855,12 @@ export class MarkdownText<TContextData> implements Text<"block", TContextData> {
         ] satisfies [string, string | null]
       ).filter(([_, url]) => url != null),
     );
-    const env: MarkdownEnv = { mentions: [], actors };
+    const env: MarkdownEnv = {
+      mentions: [],
+      hashtags: [],
+      origin: session.context.origin,
+      actors,
+    };
     yield this.#markdownIt.render(this.#content, env);
   }
 
@@ -829,6 +874,18 @@ export class MarkdownText<TContextData> implements Text<"block", TContextData> {
         href: object.id,
       });
     }
+    if (this.#hashtags != null) {
+      for (const hashtag of this.#hashtags) {
+        const tag = hashtag.substring(1).toLowerCase();
+        yield new Hashtag({
+          name: `#${tag}`,
+          href: new URL(
+            `/tags/${encodeURIComponent(tag)}`,
+            session.context.origin,
+          ),
+        });
+      }
+    }
   }
 
   getCachedObjects(): Object[] {