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:
@@ -17,6 +17,7 @@ import { Pagination } from '@/components/Pagination'
|
|||||||
import { ReplyForm } from '@/components/ReplyForm'
|
import { ReplyForm } from '@/components/ReplyForm'
|
||||||
import { EditPostForm } from '@/components/EditPostForm'
|
import { EditPostForm } from '@/components/EditPostForm'
|
||||||
import { ForumModActions } from '@/components/ForumModActions'
|
import { ForumModActions } from '@/components/ForumModActions'
|
||||||
|
import { WowheadRefresh } from '@/components/WowheadRefresh'
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic'
|
export const dynamic = 'force-dynamic'
|
||||||
|
|
||||||
@@ -66,6 +67,7 @@ export default async function TopicPage({
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="main-wide">
|
<div className="main-wide">
|
||||||
|
<WowheadRefresh dep={`${id}-${page}`} />
|
||||||
{path && (
|
{path && (
|
||||||
<ForumBreadcrumb
|
<ForumBreadcrumb
|
||||||
items={[
|
items={[
|
||||||
|
|||||||
@@ -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
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user