NightSpire/web-next/components/ForumEditor.tsx

'use client'

import { Editor } from '@tinymce/tinymce-react'
import { useLocale } from 'next-intl'
import { wowheadUrl, wowheadData, type WowheadType } from '@/lib/wowhead'

/**
 * Editor TinyMCE del foro (community, self-hosted desde /tinymce — ver
 * scripts/copy-tinymce.mjs). Mismo editor que el foro original de FusionCMS, con su
 * skin oscura y su lista de plugins, adaptado a React como componente controlado:
 * el HTML vive en el estado del padre (value/onChange) y se envía por fetch, en vez
 * del `tinyMCE.triggerSave()` + jQuery del forum.js original.
 *
 * `licenseKey: 'gpl'` deja claro que es la edición community (GPL), no la de nube.
 * El HTML que produce se sanea SIEMPRE en el servidor con nh3 (lib/forum-sanitize),
 * nunca se confía en el cliente.
 *
 * Botón «Wowhead»: abre un diálogo (tipo + ID + texto) e inserta un enlace de
 * wowhead con su data-wowhead en el idioma de la web, para que salga el tooltip,
 * el color por calidad y el icono (lo pinta el script global tooltips.js).
 */

const WOWHEAD_TYPES: { value: WowheadType; es: string; en: string }[] = [
  { value: 'item', es: 'Ítem', en: 'Item' },
  { value: 'spell', es: 'Hechizo', en: 'Spell' },
  { value: 'quest', es: 'Misión', en: 'Quest' },
  { value: 'npc', es: 'PNJ', en: 'NPC' },
  { value: 'achievement', es: 'Logro', en: 'Achievement' },
  { value: 'object', es: 'Objeto', en: 'Object' },
]

function esc(s: string): string {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
}

export function ForumEditor({
  value,
  onChange,
  height = 400,
}: {
  value: string
  onChange: (html: string) => void
  height?: number
}) {
  const locale = useLocale()
  const es = locale !== 'en'
  const L = {
    title: 'Wowhead',
    tooltip: es ? 'Insertar enlace de Wowhead' : 'Insert a Wowhead link',
    type: es ? 'Tipo' : 'Type',
    id: 'ID',
    text: es ? 'Texto (vacío = nombre automático)' : 'Text (empty = auto name)',
    insert: es ? 'Insertar' : 'Insert',
    cancel: es ? 'Cancelar' : 'Cancel',
  }

  return (
    <Editor
      tinymceScriptSrc="/tinymce/tinymce.min.js"
      licenseKey="gpl"
      value={value}
      onEditorChange={(content) => onChange(content)}
      init={{
        height,
        menubar: false,
        statusbar: false,
        skin: 'oxide-dark',
        content_css: 'dark',
        branding: false,
        promotion: false,
        mobile: { menubar: true },
        plugins:
          'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount emoticons',
        toolbar:
          'bold italic strikethrough forecolor backcolor emoticons | link wowhead image media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
        image_advtab: true,
        setup: (editor) => {
          editor.ui.registry.addButton('wowhead', {
            text: 'Wowhead',
            tooltip: L.tooltip,
            onAction: () => {
              editor.windowManager.open({
                title: L.title,
                body: {
                  type: 'panel',
                  items: [
                    {
                      type: 'listbox',
                      name: 'wtype',
                      label: L.type,
                      items: WOWHEAD_TYPES.map((t) => ({ value: t.value, text: es ? t.es : t.en })),
                    },
                    { type: 'input', name: 'wid', label: L.id },
                    { type: 'input', name: 'wtext', label: L.text },
                  ],
                },
                initialData: { wtype: 'item', wid: '', wtext: '' },
                buttons: [
                  { type: 'cancel', text: L.cancel },
                  { type: 'submit', text: L.insert, primary: true },
                ],
                onSubmit: (api) => {
                  const data = api.getData() as { wtype: WowheadType; wid: string; wtext: string }
                  const id = String(data.wid).trim().replace(/\D/g, '')
                  if (!id) {
                    api.close()
                    return
                  }
                  const type = (data.wtype || 'item') as WowheadType
                  const href = wowheadUrl(type, id, locale)
                  const wh = wowheadData(type, id, locale)
                  const custom = data.wtext.trim()
                  // Sin texto: wowhead pone el nombre real (y color+icono) gracias a
                  // data-wh-rename-link; el `type=id` es solo un marcador hasta que
                  // corre el script. Con texto: se respeta el que escriba el usuario.
                  const rename = custom ? '' : ' data-wh-rename-link="true"'
                  const label = esc(custom || `${type}=${id}`)
                  editor.insertContent(
                    `<a href="${href}" data-wowhead="${esc(wh)}"${rename} target="_blank" rel="noopener noreferrer">${label}</a>&nbsp;`,
                  )
                  api.close()
                },
              })
            },
          })
        },
      }}
    />
  )
}