fix(rtl): replace ellipsis span anchor content with bdi (#3123)

elk-zone · Jan 3, 2025 · e59f5db · e59f5db
1 parent e986de7
commit e59f5db
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/composables/content-render.ts b/composables/content-render.ts
@@ -60,16 +60,40 @@ export function nodeToVNode(node: Node): VNode | string | null {
   }
 
   if ('children' in node) {
-    if (node.name === 'a' && (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.'))) {
-      node.attributes.to = node.attributes.href
+    if (node.name === 'a') {
+      if (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.')) {
+        node.attributes.to = node.attributes.href
+
+        const { href: _href, target: _target, ...attrs } = node.attributes
+        return h(
+          RouterLink as any,
+          attrs,
+          () => node.children.map(treeToVNode),
+        )
+      }
 
-      const { href: _href, target: _target, ...attrs } = node.attributes
+      // fix #3122
       return h(
-        RouterLink as any,
-        attrs,
-        () => node.children.map(treeToVNode),
+        node.name,
+        node.attributes,
+        node.children.map((n: Node) => {
+          // replace span.ellipsis with bdi.ellipsis inside links
+          if (n && n.type === ELEMENT_NODE && n.name !== 'bdi' && n.attributes?.class?.includes('ellipsis')) {
+            const children = n.children.splice(0, n.children.length)
+            const bdi = {
+              ...n,
+              name: 'bdi',
+              children,
+            } satisfies ElementNode
+            children.forEach((n: Node) => n.parent = bdi)
+            return treeToVNode(bdi)
+          }
+
+          return treeToVNode(n)
+        }),
       )
     }
+
     return h(
       node.name,
       node.attributes,

diff --git a/tests/nuxt/__snapshots__/content-rich.test.ts.snap b/tests/nuxt/__snapshots__/content-rich.test.ts.snap
@@ -257,7 +257,7 @@ exports[`content-rich > link + mention 1`] = `
     rel="nofollow noopener noreferrer"
     target="_blank"
     ><span class="invisible">https://</span
-    ><span class="ellipsis">github.com/ayoayco/astro-react</span
+    ><bdi class="ellipsis">github.com/ayoayco/astro-react</bdi
     ><span class="invisible">ive-library/pull/203</span></a
   >
 </p>