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'))
  }

  return (
    <div>
      <div className="lefted">
        <button type="button" onClick={() => surround('<strong>', '</strong>')} className="nw-tool-btn" title={t('bold')}>
          <b>B</b>
        </button>{' '}
        <button type="button" onClick={() => surround('<em>', '</em>')} className="nw-tool-btn" title={t('italic')}>
          <i>I</i>
        </button>{' '}
        <button type="button" onClick={() => surround('<u>', '</u>')} className="nw-tool-btn" title={t('underline')}>
          <u>U</u>
        </button>{' '}
        <button type="button" onClick={() => surround('<s>', '</s>')} className="nw-tool-btn" title={t('strike')}>
          <s>S</s>
        </button>{' '}
        <button type="button" onClick={insertLink} className="nw-tool-btn" title={t('link')}>
          🔗
        </button>{' '}
        <button type="button" onClick={() => surround('<blockquote>', '</blockquote>', t('quoteText'))} className="nw-tool-btn" title={t('quote')}>
          ❝
        </button>{' '}
        <button type="button" onClick={() => surround('<ul>\n<li>', '</li>\n</ul>', t('listItem'))} className="nw-tool-btn" title={t('list')}>
          •
        </button>{' '}
        <button type="button" onClick={() => surround('<code>', '</code>')} className="nw-tool-btn" title={t('code')}>
          {'</>'}
        </button>
      </div>
      <br />
      <textarea
        ref={ref}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        rows={rows}
      />
    </div>
  )
}