From 65a97aab2d32908addddc60aab9a9da2aa272ed9 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Thu, 16 Jul 2026 13:47:47 +0000
Subject: [PATCH] Foro: vista previa bajo el editor (se ve como el post
 publicado)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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              |  9 ++++++++-
 web-next/components/ForumEditor.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/web-next/app/forum.css b/web-next/app/forum.css
index 72c3d6c..852e0ef 100644
--- a/web-next/app/forum.css
+++ b/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,
diff --git a/web-next/components/ForumEditor.tsx b/web-next/components/ForumEditor.tsx
index 9dd3962..4dc6326 100644
--- a/web-next/components/ForumEditor.tsx
+++ b/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>
+      )}
+    </>
   )
 }