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/app/forum.css

@@ -200,7 +200,14 @@ h3.post_field dd { margin: 0; }
 /* Enlaces normales del post en dorado; los de wowhead (data-wowhead) se dejan con
    SU color de calidad e icono, sin subrayado, para que se vean como en el tooltip. */
 .topic_post .right_side .post_container a:not([data-wowhead]) { color: var(--forum-gold-soft); text-decoration: underline; }
-.topic_post .right_side .post_container a[data-wowhead] { text-decoration: none; }
+/* enlaces de wowhead sin subrayado, tanto en el post como en la vista previa */
+.post_container a[data-wowhead] { text-decoration: none; }
+
+/* Vista previa bajo el editor (se ve como el post publicado, con icono/nombre/calidad). */
+.forum-preview { margin-top: 14px; border: 1px solid #2a2723; border-radius: 3px; background: rgba(0, 0, 0, .18); padding: 10px 14px; }
+.forum-preview-label { font-size: 11px; text-transform: uppercase; color: #8a8578; margin-bottom: 8px; }
+.forum-preview .post_container { color: #b5b1a3; font-size: 13px; }
+.forum-preview .post_container img { max-width: 100%; height: auto; }
 
 /* Colores de calidad de WoW. theme.css solo trae q3..q6, así que aquí se completan
    q0..q2 y q7 (con !important para ganar al color del enlace del post). Sin esto,

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>
+      )}
+    </>
   )
 }