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
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useRouter } from '@/i18n/navigation'
+import { RichTextArea } from './RichTextArea'

 export function NewTopicForm({ forumId }: { forumId: number }) {
  const t = useTranslations('Forum')
@@ -41,7 +42,7 @@ export function NewTopicForm({ forumId }: { forumId: number }) {
    <form onSubmit={handleSubmit} className="mt-8 space-y-3 nw-card">
      <h3 className="font-semibold text-amber-400">{t('newTopic')}</h3>
      <input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('newTopicName')} maxLength={200} className={field} />
-      <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('newTopicText')} rows={4} className={field} />
+      <RichTextArea value={text} onChange={setText} placeholder={t('newTopicText')} rows={4} />
      <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
        {busy ? t('publishing') : t('publish')}
      </button>
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useRouter } from '@/i18n/navigation'
+import { RichTextArea } from './RichTextArea'

 export function PostActions({ postId, initialText }: { postId: number; initialText: string }) {
  const t = useTranslations('Forum')
@@ -61,7 +62,7 @@ export function PostActions({ postId, initialText }: { postId: number; initialTe
  if (editing) {
    return (
      <div className="mt-3 space-y-2">
-        <textarea value={text} onChange={(e) => setText(e.target.value)} rows={4} className="nw-input" />
+        <RichTextArea value={text} onChange={setText} rows={4} />
        <div className="flex gap-2">
          <button type="button" onClick={save} disabled={busy} className="nw-btn text-sm disabled:opacity-60">
            {busy ? t('sending') : t('save')}
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { useTranslations } from 'next-intl'
 import { useRouter } from '@/i18n/navigation'
+import { RichTextArea } from './RichTextArea'

 export function ReplyForm({ topicId }: { topicId: number }) {
  const t = useTranslations('Forum')
@@ -37,10 +38,9 @@ export function ReplyForm({ topicId }: { topicId: number }) {
    }
  }

-  const field = 'nw-input'
  return (
    <form onSubmit={handleSubmit} className="mt-6 space-y-3">
-      <textarea value={text} onChange={(e) => setText(e.target.value)} placeholder={t('replyText')} rows={3} className={field} />
+      <RichTextArea value={text} onChange={setText} placeholder={t('replyText')} rows={3} />
      <button type="submit" disabled={busy} className="nw-btn disabled:opacity-60">
        {busy ? t('sending') : t('sendReply')}
      </button>
@@ -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>
+  )
+}
@@ -401,5 +401,19 @@
    "requirementsNotMet": "Requirements not met (or friends share your IP).",
    "deliveryError": "Error delivering the reward.",
    "claimSuccess": "Reward “{reward}” delivered to {character}."
+  },
+  "Editor": {
+    "bold": "Bold",
+    "italic": "Italic",
+    "underline": "Underline",
+    "strike": "Strikethrough",
+    "link": "Link",
+    "quote": "Quote",
+    "list": "List",
+    "code": "Code",
+    "linkPrompt": "Link URL:",
+    "linkText": "link text",
+    "quoteText": "quote",
+    "listItem": "item"
  }
 }
@@ -401,5 +401,19 @@
    "requirementsNotMet": "No cumples los requisitos (o los amigos comparten tu IP).",
    "deliveryError": "Error al entregar la recompensa.",
    "claimSuccess": "Recompensa «{reward}» entregada a {character}."
+  },
+  "Editor": {
+    "bold": "Negrita",
+    "italic": "Cursiva",
+    "underline": "Subrayado",
+    "strike": "Tachado",
+    "link": "Enlace",
+    "quote": "Cita",
+    "list": "Lista",
+    "code": "Código",
+    "linkPrompt": "URL del enlace:",
+    "linkText": "texto del enlace",
+    "quoteText": "cita",
+    "listItem": "elemento"
  }
 }