From c4961879dfe18fa86c96cb5e773f04d80c4a53ad Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Thu, 16 Jul 2026 13:18:13 +0000
Subject: [PATCH] =?UTF-8?q?Foro:=20color=20de=20calidad=20en=20los=20?=
 =?UTF-8?q?=C3=ADtems=20y=20vista=20previa=20en=20el=20editor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dos ajustes sobre los enlaces de wowhead:

1) Color en el post. forum.css teñía TODOS los enlaces del post de dorado y los
   subrayaba, con más especificidad que la clase de calidad de wowhead, así que el
   nombre salía dorado/azul en vez del color de calidad. Ahora la regla dorada
   excluye los enlaces con data-wowhead (`a:not([data-wowhead])`) y a esos se les
   quita el subrayado, para que se vean con su color de calidad como en el tooltip.

2) Vista previa en el editor. TinyMCE vive en un iframe con su propio documento, al
   que no llega el tooltips.js de la página, por eso en el editor salía item=41599
   en crudo. Se carga el script de wowhead dentro del iframe (con renameLinks:true)
   y se refresca tras insertar, así el ítem se ve con icono, nombre y calidad ya al
   redactar. No afecta a lo que se guarda: los formularios envían el HTML del estado
   de React (lo insertado, limpio), no la mutación visual del iframe.

Verificado: el CSS servido excluye los enlaces de wowhead del dorado; la inyección
del script en el iframe queda compilada en el bundle.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/forum.css              |  5 ++++-
 web-next/components/ForumEditor.tsx | 34 +++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/web-next/app/forum.css b/web-next/app/forum.css
index 74da45d..82793c8 100644
--- a/web-next/app/forum.css
+++ b/web-next/app/forum.css
@@ -197,7 +197,10 @@ h3.post_field dd { margin: 0; }
   text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
 }
 .topic_post .right_side .post_container img { display: block; max-width: 100%; height: auto; }
-.topic_post .right_side .post_container a { color: var(--forum-gold-soft); text-decoration: underline; }
+/* 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; }
 .post_deleted { opacity: .5; }
 
 ul.post_controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; list-style: none; padding: 15px; margin: auto 0 0; }
diff --git a/web-next/components/ForumEditor.tsx b/web-next/components/ForumEditor.tsx
index 7dc86a4..e12a8f2 100644
--- a/web-next/components/ForumEditor.tsx
+++ b/web-next/components/ForumEditor.tsx
@@ -75,6 +75,38 @@ export function ForumEditor({
           'bold italic strikethrough forecolor backcolor emoticons | link wowhead image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
         image_advtab: true,
         setup: (editor) => {
+          // Vista previa: carga el script de tooltips de wowhead DENTRO del iframe
+          // del editor para que el enlace insertado se vea con icono, nombre y color
+          // de calidad, igual que al postear. No afecta a lo que se guarda: los
+          // formularios envían el HTML del estado de React (lo insertado, limpio),
+          // no la mutación visual que wowhead hace en el iframe.
+          const refreshEditorWowhead = () => {
+            try {
+              const wp = (editor.getWin() as unknown as { $WowheadPower?: { refreshLinks?: () => void } })
+                .$WowheadPower
+              wp?.refreshLinks?.()
+            } catch {
+              /* preview no crítico */
+            }
+          }
+          editor.on('init', () => {
+            try {
+              const doc = editor.getDoc()
+              const win = editor.getWin() as unknown as { whTooltips?: unknown }
+              win.whTooltips = { colorLinks: true, iconizeLinks: true, renameLinks: true }
+              if (!doc.getElementById('wh-tooltips-editor')) {
+                const s = doc.createElement('script')
+                s.id = 'wh-tooltips-editor'
+                s.src = 'https://wow.zamimg.com/js/tooltips.js'
+                doc.head.appendChild(s)
+              }
+              // procesa el contenido inicial (posts en edición) cuando el script cargue
+              setTimeout(refreshEditorWowhead, 400)
+              setTimeout(refreshEditorWowhead, 1200)
+            } catch {
+              /* preview no crítico */
+            }
+          })
           editor.ui.registry.addButton('wowhead', {
             text: 'Wowhead',
             tooltip: L.tooltip,
@@ -119,6 +151,8 @@ export function ForumEditor({
                     `<a href="${href}" data-wowhead="${esc(wh)}"${rename} target="_blank" rel="noopener noreferrer">${label}</a>&nbsp;`,
                   )
                   api.close()
+                  // pinta el ítem recién insertado en el editor (icono/nombre/calidad)
+                  setTimeout(refreshEditorWowhead, 60)
                 },
               })
             },