From 72fdead9f31d22ef5a12ab441961542af7dbca03 Mon Sep 17 00:00:00 2001
From: adevopg <adevopg@gmail.com>
Date: Mon, 13 Jul 2026 01:03:38 +0000
Subject: [PATCH] =?UTF-8?q?Foro:=20editor=20rico=20ligero=20(barra=20de=20?=
 =?UTF-8?q?formato)=20en=20respuestas,=20temas=20y=20edici=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 web-next/components/NewTopicForm.tsx |  3 +-
 web-next/components/PostActions.tsx  |  3 +-
 web-next/components/ReplyForm.tsx    |  4 +-
 web-next/components/RichTextArea.tsx | 87 ++++++++++++++++++++++++++++
 web-next/messages/en.json            | 14 +++++
 web-next/messages/es.json            | 14 +++++
 6 files changed, 121 insertions(+), 4 deletions(-)
 create mode 100644 web-next/components/RichTextArea.tsx

diff --git a/web-next/components/NewTopicForm.tsx b/web-next/components/NewTopicForm.tsx
index 1497b6c..3838f34 100644
--- a/web-next/components/NewTopicForm.tsx
+++ b/web-next/components/NewTopicForm.tsx
@@ -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>
diff --git a/web-next/components/PostActions.tsx b/web-next/components/PostActions.tsx
index 0971e9b..d96de74 100644
--- a/web-next/components/PostActions.tsx
+++ b/web-next/components/PostActions.tsx
@@ -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')}
diff --git a/web-next/components/ReplyForm.tsx b/web-next/components/ReplyForm.tsx
index c661766..6cb60bc 100644
--- a/web-next/components/ReplyForm.tsx
+++ b/web-next/components/ReplyForm.tsx
@@ -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>
diff --git a/web-next/components/RichTextArea.tsx b/web-next/components/RichTextArea.tsx
new file mode 100644
index 0000000..d7c4f88
--- /dev/null
+++ b/web-next/components/RichTextArea.tsx
@@ -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>
+  )
+}
diff --git a/web-next/messages/en.json b/web-next/messages/en.json
index 47b983b..9e2a32e 100644
--- a/web-next/messages/en.json
+++ b/web-next/messages/en.json
@@ -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"
   }
 }
diff --git a/web-next/messages/es.json b/web-next/messages/es.json
index b80e109..4f10a73 100644
--- a/web-next/messages/es.json
+++ b/web-next/messages/es.json
@@ -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"
   }
 }