Foro: reprocesar los enlaces de wowhead tras montar los posts

Los enlaces de wowhead de un post salían en crudo (item=41599) en vez de con
nombre, color e icono. Causa: tooltips.js solo recorre el DOM al cargar, así que el
contenido que monta React (los posts, inyectados con dangerouslySetInnerHTML, y las
páginas abiertas por navegación SPA) se quedaba sin procesar.

Se añade WowheadRefresh, un componente cliente que llama a
$WowheadPower.refreshLinks() al montar (con reintentos, porque tooltips.js carga
afterInteractive) y se repite al cambiar de tema/página. Es exactamente lo que ya
hacía la tienda (StoreBrowser) tras cada AJAX. Con esto los enlaces reciben color
por calidad, icono y —al llevar data-wh-rename-link— el nombre automático.

Verificado: refreshLinks compilado en el bundle; la página del tema carga
tooltips.js y sirve el enlace con data-wh-rename-link + href /wotlk/.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-16 13:10:58 +00:00
parent a8d329ad79
commit b04a8f897d
2 changed files with 33 additions and 0 deletions
@@ -17,6 +17,7 @@ import { Pagination } from '@/components/Pagination'
import { ReplyForm } from '@/components/ReplyForm'
import { EditPostForm } from '@/components/EditPostForm'
import { ForumModActions } from '@/components/ForumModActions'
import { WowheadRefresh } from '@/components/WowheadRefresh'
export const dynamic = 'force-dynamic'
@@ -66,6 +67,7 @@ export default async function TopicPage({
}
>
<div className="main-wide">
<WowheadRefresh dep={`${id}-${page}`} />
{path && (
<ForumBreadcrumb
items={[
+31
View File
@@ -0,0 +1,31 @@
'use client'
import { useEffect } from 'react'
/**
* Reaplica el tratamiento de wowhead (color por calidad, icono y nombre automático)
* a los enlaces que React acaba de montar. `tooltips.js` solo recorre el DOM al
* cargar, así que los enlaces de un post (inyectados con dangerouslySetInnerHTML) o
* los de una página abierta por navegación SPA se quedan sin procesar sin esto.
* Es lo mismo que hace la tienda con $WowheadPower.refreshLinks() (ver StoreBrowser).
*
* Se reintenta un rato porque tooltips.js carga `afterInteractive` y puede no estar
* listo justo al montar. `dep` (p.ej. tema+página) fuerza que se repita tras navegar.
*/
export function WowheadRefresh({ dep }: { dep?: string | number }) {
useEffect(() => {
let tries = 0
let timer: ReturnType<typeof setTimeout>
const run = () => {
const wp = (window as unknown as { $WowheadPower?: { refreshLinks?: () => void } }).$WowheadPower
if (wp?.refreshLinks) {
wp.refreshLinks()
return
}
if (tries++ < 25) timer = setTimeout(run, 150)
}
run()
return () => clearTimeout(timer)
}, [dep])
return null
}