From 957a9f57b15e7d62e92cec515e0dfae93fd30181 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Thu, 16 Jul 2026 13:31:06 +0000
Subject: [PATCH] =?UTF-8?q?Foro:=20hornear=20tambi=C3=A9n=20el=20icono=20d?=
 =?UTF-8?q?el=20=C3=ADtem=20de=20wowhead?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Al hornear la clase de calidad (qN), el script de wowhead daba el enlace por
procesado y dejaba de añadir el icono, así que el icono desapareció. Ahora el icono
se hornea junto al enlace: el endpoint /api/forum/wowhead ya devuelve el nombre del
icono, y el botón inserta <img class="wh-icon" src="…zamimg…/small/<icono>.jpg">
antes del enlace.

Así el ítem queda con nombre, color de calidad e icono TODO guardado, sin parpadeo
y sin depender del script (que solo aporta ya el tooltip al pasar el ratón). El
saneador permite class en img; forum.css estiliza .wh-icon.

Verificado en producción: el post guarda la img del icono (clase wh-icon + URL de
zamimg) junto al nombre y la clase q2, y el CSS del icono se sirve.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web-next/app/forum.css              |  3 +++
 web-next/components/ForumEditor.tsx | 16 +++++++++++++---
 web-next/lib/forum-sanitize.ts      |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/web-next/app/forum.css b/web-next/app/forum.css
index 72c3d6c..3d717d4 100644
--- a/web-next/app/forum.css
+++ b/web-next/app/forum.css
@@ -213,6 +213,9 @@ h3.post_field dd { margin: 0; }
 .post_container a.q5 { color: #ff8000 !important; }
 .post_container a.q6 { color: #e6cc80 !important; }
 .post_container a.q7, .q7 { color: #00ccff !important; }
+
+/* Icono de wowhead horneado junto al enlace (no depende del script). */
+img.wh-icon { display: inline-block; width: 18px; height: 18px; vertical-align: middle; border-radius: 3px; margin: 0 4px 2px 0; }
 .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 ba303f5..a744643 100644
--- a/web-next/components/ForumEditor.tsx
+++ b/web-next/components/ForumEditor.tsx
@@ -2,7 +2,7 @@
 
 import { Editor } from '@tinymce/tinymce-react'
 import { useLocale } from 'next-intl'
-import { wowheadUrl, wowheadData, type WowheadType } from '@/lib/wowhead'
+import { wowheadUrl, wowheadData, wowheadIcon, type WowheadType } from '@/lib/wowhead'
 
 /**
  * Editor TinyMCE del foro (community, self-hosted desde /tinymce — ver
@@ -154,18 +154,28 @@ export function ForumEditor({
                   // «item=xxx». Si falla, se cae al modo data-wh-rename-link.
                   let name = custom
                   let qClass = ''
+                  let iconHtml = ''
                   try {
                     const res = await fetch(`/api/forum/wowhead?type=${type}&id=${id}&locale=${locale}`)
-                    const info = (await res.json()) as { name: string | null; quality: number | null }
+                    const info = (await res.json()) as {
+                      name: string | null
+                      quality: number | null
+                      icon: string | null
+                    }
                     if (!name && info.name) name = info.name
                     if (typeof info.quality === 'number' && info.quality >= 0) qClass = ` q${info.quality}`
+                    // Icono horneado: así no depende del script (que, al ver la clase
+                    // de calidad, da el enlace por procesado y no añadía icono).
+                    if (info.icon) {
+                      iconHtml = `<img class="wh-icon" src="${esc(wowheadIcon(info.icon, 'small'))}" width="18" height="18" alt="" />`
+                    }
                   } catch {
                     /* wowhead no disponible: se usa el fallback */
                   }
                   const rename = name ? '' : ' data-wh-rename-link="true"'
                   const label = esc(name || `${type}=${id}`)
                   editor.insertContent(
-                    `<a href="${href}" data-wowhead="${esc(wh)}" class="wowhead-link${qClass}"${rename} target="_blank" rel="noopener noreferrer">${label}</a>&nbsp;`,
+                    `${iconHtml}<a href="${href}" data-wowhead="${esc(wh)}" class="wowhead-link${qClass}"${rename} target="_blank" rel="noopener noreferrer">${label}</a>&nbsp;`,
                   )
                   // icono en el editor (el nombre y el color ya van puestos)
                   setTimeout(refreshEditorWowhead, 60)
diff --git a/web-next/lib/forum-sanitize.ts b/web-next/lib/forum-sanitize.ts
index 7a4a035..488cc5d 100644
--- a/web-next/lib/forum-sanitize.ts
+++ b/web-next/lib/forum-sanitize.ts
@@ -39,7 +39,7 @@ export function cleanPostHtml(html: string): string {
       // automáticamente (sobrescribe el renameLinks:false global, que existe para no
       // pisar los nombres en español de la tienda). data-wh-icon-size ajusta el icono.
       a: ['href', 'title', 'target', 'data-wowhead', 'data-wh-rename-link', 'data-wh-icon-size', 'class'],
-      img: ['src', 'alt', 'title', 'width', 'height'],
+      img: ['src', 'alt', 'title', 'width', 'height', 'class'],
       span: ['style', 'data-wowhead'],
       div: ['style'],
       td: ['colspan', 'rowspan'],