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 = `` + } } catch { /* wowhead no disponible: se usa el fallback */ } const rename = name ? '' : ' data-wh-rename-link="true"' const label = esc(name || `${type}=${id}`) editor.insertContent( - `${label} `, + `${iconHtml}${label} `, ) // 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'],