NightSpire/web-next/components/RichTextArea.tsx

'use client'

import { useRef } from 'react'
import { useTranslations } from 'next-intl'

/**
 * Editor ligero: barra de formato que envuelve la selección del textarea en HTML
 * (que luego se sanea en el servidor con cleanPostHtml). Sin dependencias pesadas.
 */
export function RichTextArea({
  value,
  onChange,
  placeholder,
  rows = 4,
}: {
  value: string
  onChange: (v: string) => void
  placeholder?: string
  rows?: number
}) {
  const t = useTranslations('Editor')
  const ref = useRef<HTMLTextAreaElement>(null)

  function surround(before: string, after: string, placeholderText = '') {
    const el = ref.current
    if (!el) return
    const start = el.selectionStart
    const end = el.selectionEnd
    const selected = value.slice(start, end) || placeholderText
    const next = value.slice(0, start) + before + selected + after + value.slice(end)
    onChange(next)
    // Reposiciona el cursor dentro del texto insertado tras el re-render.
    requestAnimationFrame(() => {
      el.focus()
      const pos = start + before.length
      el.setSelectionRange(pos, pos + selected.length)
    })
  }

  function insertLink() {
    const url = prompt(t('linkPrompt'), 'https://')
    if (!url) return
    surround(`<a href="${url.replace(/"/g, '&quot;')}" target="_blank">`, '</a>', t('linkText'))
  }

  const btn =
    'rounded border border-nw-border/60 px-2 py-1 text-xs text-nw-muted hover:border-nw-gold/60 hover:text-nw-gold-light'

  return (
    <div className="space-y-2">
      <div className="flex flex-wrap gap-1">
        <button type="button" onClick={() => surround('<strong>', '</strong>')} className={`${btn} font-bold`} title={t('bold')}>
          B
        </button>
        <button type="button" onClick={() => surround('<em>', '</em>')} className={`${btn} italic`} title={t('italic')}>
          I
        </button>
        <button type="button" onClick={() => surround('<u>', '</u>')} className={`${btn} underline`} title={t('underline')}>
          U
        </button>
        <button type="button" onClick={() => surround('<s>', '</s>')} className={`${btn} line-through`} title={t('strike')}>
          S
        </button>
        <button type="button" onClick={insertLink} className={btn} title={t('link')}>
          🔗
        </button>
        <button type="button" onClick={() => surround('<blockquote>', '</blockquote>', t('quoteText'))} className={btn} title={t('quote')}>
          ❝
        </button>
        <button type="button" onClick={() => surround('<ul>\n<li>', '</li>\n</ul>', t('listItem'))} className={btn} title={t('list')}>
          •
        </button>
        <button type="button" onClick={() => surround('<code>', '</code>')} className={`${btn} font-mono`} title={t('code')}>
          {'</>'}
        </button>
      </div>
      <textarea
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows}
        className="nw-input"
      />
    </div>
  )
}