Foro: vista previa bajo el editor (se ve como el post publicado)

Se añade una vista previa DEBAJO del editor que renderiza el texto actual y se ve
igual que el post publicado: los ítems de wowhead con icono, nombre y color de
calidad. Vive en el documento principal (no en el iframe del editor), así que la
procesa el tooltips.js global sin ensuciar lo que se guarda (el editor sigue
enviando el enlace plano). Un efecto refresca los enlaces de la preview al cambiar
el texto (con debounce).

forum.css: caja .forum-preview + la regla de «sin subrayado» de wowhead se
generaliza a cualquier .post_container (post y preview).

Verificado: el CSS de la preview se sirve y el componente queda compilado.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web-next/components/ForumEditor.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useEffect } from 'react'
 import { Editor } from '@tinymce/tinymce-react'
 import { useLocale } from 'next-intl'
 import { wowheadUrl, wowheadData, type WowheadType } from '@/lib/wowhead'
@@ -52,9 +53,25 @@ export function ForumEditor({
     text: es ? 'Texto (vacío = nombre automático)' : 'Text (empty = auto name)',
     insert: es ? 'Insertar' : 'Insert',
     cancel: es ? 'Cancelar' : 'Cancel',
+    preview: es ? 'Vista previa' : 'Preview',
   }
 
+  // Reprocesa los enlaces de wowhead de la VISTA PREVIA (que vive en el documento
+  // principal, no en el iframe del editor) cada vez que cambia el texto. Así el
+  // preview se ve como el post publicado sin ensuciar lo que se guarda.
+  useEffect(() => {
+    const t = setTimeout(() => {
+      try {
+        ;(window as unknown as { $WowheadPower?: { refreshLinks?: () => void } }).$WowheadPower?.refreshLinks?.()
+      } catch {
+        /* no crítico */
+      }
+    }, 300)
+    return () => clearTimeout(t)
+  }, [value])
+
   return (
+    <>
     <Editor
       tinymceScriptSrc="/tinymce/tinymce.min.js"
       licenseKey="gpl"
@@ -153,5 +170,12 @@ export function ForumEditor({
         },
       }}
     />
+      {value.trim() && (
+        <div className="forum-preview">
+          <div className="forum-preview-label">{L.preview}</div>
+          <div className="post_container" dangerouslySetInnerHTML={{ __html: value }} />
+        </div>
+      )}
+    </>
   )
 }