Inna
72fdead9f3
- 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>
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
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')
|
|
const router = useRouter()
|
|
const [text, setText] = useState('')
|
|
const [busy, setBusy] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
if (busy || !text.trim()) return
|
|
setBusy(true)
|
|
setError(null)
|
|
try {
|
|
const res = await fetch('/api/forum/reply', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ topicId, text }),
|
|
})
|
|
const data: { success?: boolean } = await res.json()
|
|
if (data.success) {
|
|
setText('')
|
|
router.refresh()
|
|
} else {
|
|
setError(t('genericError'))
|
|
}
|
|
} catch {
|
|
setError(t('genericError'))
|
|
} finally {
|
|
setBusy(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="mt-6 space-y-3">
|
|
<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>
|
|
{error && <p className="text-red-400">{error}</p>}
|
|
</form>
|
|
)
|
|
}
|