feat: add LTR/RTL in hashtags and mentions support (#2541)

Co-authored-by: Daniel Roe <daniel@roe.dev>

components/tag/TagCard.vue

@@ -39,8 +39,10 @@ function go(evt: MouseEvent | KeyboardEvent) {
     <div>
       <h4 flex items-center text-size-base leading-normal font-medium line-clamp-1 break-all ws-pre-wrap>
         <TagActionButton :tag="tag" />
+        <bdi>
           <span>#</span>
           <span hover:underline>{{ tag.name }}</span>
+        </bdi>
       </h4>
       <CommonTrending v-if="tag.history" :history="tag.history" text-sm text-secondary line-clamp-1 ws-pre-wrap break-all />
     </div>

composables/content-parse.ts

@@ -72,6 +72,8 @@ const sanitizer = sanitize({
 /**
  * Parse raw HTML form Mastodon server to AST,
  * with interop of custom emojis and inline Markdown syntax
+ * @param html The content to parse
+ * @param options The parsing options
  */
 export function parseMastodonHTML(
   html: string,
@@ -140,6 +142,8 @@ export function parseMastodonHTML(
 
 /**
  * Converts raw HTML form Mastodon server to HTML for Tiptap editor
+ * @param html The content to parse
+ * @param customEmojis The custom emojis to use
  */
 export function convertMastodonHTML(html: string, customEmojis: Record<string, mastodon.v1.CustomEmoji> = {}) {
   const tree = parseMastodonHTML(html, {

composables/content-render.ts

@@ -1,5 +1,5 @@
-import { TEXT_NODE } from 'ultrahtml'
+import { ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
-import type { Node } from 'ultrahtml'
+import type { ElementNode, Node } from 'ultrahtml'
 import { Fragment, h, isVNode } from 'vue'
 import type { VNode } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -98,6 +98,23 @@ function treeToVNode(
   return null
 }
 
+function addBdiNode(node: Node) {
+  if (node.children.length === 1 && node.children[0].type === ELEMENT_NODE && node.children[0].name === 'bdi')
+    return
+
+  const children = node.children.splice(0, node.children.length)
+  const bdi = {
+    name: 'bdi',
+    parent: node,
+    loc: node.loc,
+    type: ELEMENT_NODE,
+    attributes: {},
+    children,
+  } satisfies ElementNode
+  children.forEach((n: Node) => n.parent = bdi)
+  node.children.push(bdi)
+}
+
 function handleMention(el: Node) {
   // Redirect mentions to the user page
   if (el.name === 'a' && el.attributes.class?.includes('mention')) {
@@ -108,11 +125,13 @@ function handleMention(el: Node) {
         const [, server, username] = matchUser
         const handle = `${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
         el.attributes.href = `/${server}/@${username}`
+        addBdiNode(el)
         return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
       }
       const matchTag = href.match(TagLinkRE)
       if (matchTag) {
         const [, , name] = matchTag
+        addBdiNode(el)
         el.attributes.href = `/${currentServer.value}/tags/${name}`
       }
     }

pages/[[server]]/tags/[tag].vue

@@ -28,7 +28,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <span text-lg font-bold>#{{ tagName }}</span>
+      <bdi text-lg font-bold>#{{ tagName }}</bdi>
     </template>
 
     <template #actions>

tests/nuxt/__snapshots__/content-rich.test.ts.snap

@@ -44,8 +44,9 @@ exports[`content-rich > code frame 2 1`] = `
       class="u-url mention"
       rel="nofollow noopener noreferrer"
       to="/webtoo.ls/@antfu"
-    ></a
+      ><bdi>@<span>antfu</span></bdi></a
-  ></span>
+    ></span
+  >
   Testing<br />
   <pre class="code-block">const a = hello</pre>
 </p>
@@ -56,6 +57,62 @@ exports[`content-rich > code frame empty 1`] = `"<p><pre class="code-block"></pr
 
 exports[`content-rich > code frame no lang 1`] = `"<p><pre class="code-block">hello world</pre><br>no lang</p>"`;
 
+exports[`content-rich > collapse mentions 1`] = `
+"<p>
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@elk"
+      ><bdi>@<span>elk</span></bdi></a
+    ></span
+  >
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@elk"
+      ><bdi>@<span>elk</span></bdi></a
+    ></span
+  >
+  content
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@antfu"
+      ><bdi>@<span>antfu</span></bdi></a
+    ></span
+  >
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/mastodon.roe.dev/@daniel"
+      ><bdi>@<span>daniel</span></bdi></a
+    ></span
+  >
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@sxzz"
+      ><bdi>@<span>sxzz</span></bdi></a
+    ></span
+  >
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@patak"
+      ><bdi>@<span>patak</span></bdi></a
+    ></span
+  >
+  content
+</p>
+"
+`;
+
 exports[`content-rich > custom emoji 1`] = `
 "Daniel Roe
 <picture class="custom-emoji" alt=":nuxt:" data-emoji-id="nuxt" title="nuxt"
@@ -81,8 +138,13 @@ exports[`content-rich > group mention > html 1`] = `
       class="u-url mention"
       rel="nofollow noopener noreferrer"
       to="/m.webtoo.ls/@pilipinas@lemmy.ml"
+      ><bdi
+        ><span data-type="mention" data-id="pilipinas@lemmy.ml"
+          >@pilipinas</span
+        ></bdi
       ></a
-  ></span>
+    ></span
+  >
 </p>
 "
 `;
@@ -115,6 +177,39 @@ exports[`content-rich > handles html within code blocks 1`] = `
 "
 `;
 
+exports[`content-rich > hashtag adds bdi 1`] = `
+"<p>
+  Testing bdi is added
+  <a
+    class="mention hashtag"
+    rel="nofollow noopener noreferrer"
+    to="/m.webtoo.ls/tags/turkey"
+    ><bdi>#<span>turkey</span></bdi></a
+  >
+</p>
+<p></p>
+"
+`;
+
+exports[`content-rich > hashtag doesn't add 2 bdi 1`] = `
+"<p>
+  Testing bdi not added
+  <a
+    class="mention hashtag"
+    rel="nofollow noopener noreferrer"
+    to="/m.webtoo.ls/tags/turkey"
+    ><bdi></bdi
+  ></a>
+</p>
+<p></p>
+"
+`;
+
+exports[`content-rich > hides collapsed mentions 1`] = `
+"<p>content</p>
+"
+`;
+
 exports[`content-rich > inline code with link 1`] = `
 "<p>
   Inline code with link:
@@ -139,8 +234,9 @@ exports[`content-rich > link + mention 1`] = `
       class="u-url mention"
       rel="nofollow noopener noreferrer"
       to="/webtoo.ls/@vitest"
-    ></a
+      ><bdi>@<span>vitest</span></bdi></a
-  ></span>
+    ></span
+  >
   (migrated from chai+mocha)
   <a
     href="https://github.com/ayoayco/astro-reactive-library/pull/203"
@@ -159,6 +255,53 @@ exports[`content-rich > plain text 1`] = `
 "
 `;
 
+exports[`content-rich > shows some collapsed mentions grouped 1`] = `
+"<p>
+  <mention-group
+    ><span class="h-card"
+      ><a
+        class="u-url mention"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/@antfu"
+        ><bdi>@<span>antfu</span></bdi></a
+      ></span
+    >
+    <span class="h-card"
+      ><a
+        class="u-url mention"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/@patak"
+        ><bdi>@<span>patak</span></bdi></a
+      ></span
+    >
+    <span class="h-card"
+      ><a
+        class="u-url mention"
+        rel="nofollow noopener noreferrer"
+        to="/m.webtoo.ls/@sxzz"
+        ><bdi>@<span>sxzz</span></bdi></a
+      ></span
+    ></mention-group
+  >content
+</p>
+"
+`;
+
+exports[`content-rich > shows some collapsed mentions inline 1`] = `
+"<p>
+  <span class="h-card"
+    ><a
+      class="u-url mention"
+      rel="nofollow noopener noreferrer"
+      to="/m.webtoo.ls/@antfu"
+      ><bdi>@<span>antfu</span></bdi></a
+    ></span
+  >
+  content
+</p>
+"
+`;
+
 exports[`editor > transform mentions 1`] = `
 "
 @elk Hello"

tests/nuxt/content-rich.test.ts

@@ -89,55 +89,7 @@ describe('content-rich', () => {
     const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://mastodon.roe.dev/@daniel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>daniel</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> content</p>', {
       collapseMentionLink: true,
     })
-    expect(formatted).toMatchInlineSnapshot(`
+    expect(formatted).toMatchSnapshot()
-      "<p>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@elk"
-          ></a
-        ></span>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@elk"
-          ></a
-        ></span>
-        content
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@antfu"
-          ></a
-        ></span>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/mastodon.roe.dev/@daniel"
-          ></a
-        ></span>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@sxzz"
-          ></a
-        ></span>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@patak"
-          ></a
-        ></span>
-        content
-      </p>
-      "
-    `)
   })
 
   it('hides collapsed mentions', async () => {
@@ -145,10 +97,7 @@ describe('content-rich', () => {
       collapseMentionLink: true,
       inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
     })
-    expect(formatted).toMatchInlineSnapshot(`
+    expect(formatted).toMatchSnapshot()
-      "<p>content</p>
-      "
-    `)
   })
 
   it('shows some collapsed mentions inline', async () => {
@@ -156,19 +105,7 @@ describe('content-rich', () => {
       collapseMentionLink: true,
       inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
     })
-    expect(formatted).toMatchInlineSnapshot(`
+    expect(formatted).toMatchSnapshot()
-      "<p>
-        <span class="h-card"
-          ><a
-            class="u-url mention"
-            rel="nofollow noopener noreferrer"
-            to="/m.webtoo.ls/@antfu"
-          ></a
-        ></span>
-        content
-      </p>
-      "
-    `)
   })
 
   it('shows some collapsed mentions grouped', async () => {
@@ -176,33 +113,7 @@ describe('content-rich', () => {
       collapseMentionLink: true,
       inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
     })
-    expect(formatted).toMatchInlineSnapshot(`
+    expect(formatted).toMatchSnapshot()
-      "<p>
-        <mention-group
-          ><span class="h-card"
-            ><a
-              class="u-url mention"
-              rel="nofollow noopener noreferrer"
-              to="/m.webtoo.ls/@antfu"
-            ></a
-          ></span>
-          <span class="h-card"
-            ><a
-              class="u-url mention"
-              rel="nofollow noopener noreferrer"
-              to="/m.webtoo.ls/@patak"
-            ></a
-          ></span>
-          <span class="h-card"
-            ><a
-              class="u-url mention"
-              rel="nofollow noopener noreferrer"
-              to="/m.webtoo.ls/@sxzz"
-            ></a></span></mention-group
-        >content
-      </p>
-      "
-    `)
   })
 
   it ('block with injected html, without language', async () => {
@@ -237,6 +148,21 @@ describe('content-rich', () => {
     `)
     expect(formatted).toMatchSnapshot()
   })
+
+  it ('hashtag adds bdi', async () => {
+    const { formatted } = await render(`
+      <p>Testing bdi is added <a href="https://universeodon.com/tags/turkey" class="mention hashtag" rel="tag">#<span>turkey</span></a></p>
+    `)
+    expect(formatted).toMatchSnapshot()
+  })
+
+  // REVIEW: there is something wrong with this test in the rendered output, missing bdi content, ultrahtml parses it correctly
+  it ('hashtag doesn\'t add 2 bdi', async () => {
+    const { formatted } = await render(`
+      <p>Testing bdi not added <a href="https://universeodon.com/tags/turkey" class="mention hashtag" rel="tag"><bdi>#<span>turkey</span></bdi></a></p>
+    `)
+    expect(formatted).toMatchSnapshot()
+  })
 })
 
 describe('editor', () => {
@@ -273,8 +199,10 @@ async function render(content: string, options?: ContentParseOptions) {
 vi.mock('vue-router', async () => {
   const { defineComponent, h } = await import('vue')
   return {
-    RouterLink: defineComponent((attrs) => {
+    RouterLink: defineComponent({
-      return () => h('a', attrs)
+      setup(props, { slots }) {
+        return () => h('a', props, { default: () => slots?.default?.() })
+      },
     }),
   }
 })