Foro: editor rico ligero (barra de formato) en respuestas, temas y edición

- components/RichTextArea.tsx: barra de formato (negrita, cursiva, subrayado, tachado, enlace, cita, lista, código) que envuelve la selección del textarea en HTML; el HTML se sanea en el servidor con cleanPostHtml. Sin dependencias pesadas (evita CKEditor y no rompe el pipeline de saneado). - Cableado en ReplyForm, NewTopicForm y PostActions (edición). - i18n es/en: namespace Editor. Verificado: build OK, /forum y home 200. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-13 01:03:38 +00:00
parent 7c1cd195ff
commit 72fdead9f3
6 changed files with 121 additions and 4 deletions
@@ -0,0 +1,87 @@
+'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>
+  )
+}