Fix newline rendering in chat messages

The Text component was not properly rendering newlines in chat messages.
The previous implementation had buggy logic that only rendered <br /> for
empty lines and used an inconsistent mix of spans and divs for non-empty
lines, which didn't create proper line breaks between consecutive text lines.

Changes:
- Render each line in a span with <br /> between consecutive lines
- Remove unused useMemo import and fix React hooks violation
- Simplify logic for better maintainability

This ensures that multi-line messages in chat (and other text content)
display correctly with proper line breaks.

Fixes rendering of newlines in NIP-29 groups and NIP-53 live chat.
This commit is contained in:
Claude
2026-01-13 19:35:19 +00:00
parent 4078ea372a
commit 711759572f

View File

@@ -1,5 +1,4 @@
import { CommonData } from "applesauce-content/nast";
import { useMemo } from "react";
interface TextNodeProps {
node: {
@@ -11,23 +10,22 @@ interface TextNodeProps {
export function Text({ node }: TextNodeProps) {
const text = node.value;
const lines = useMemo(() => text.split("\n"), [text]);
if (text.includes("\n")) {
return (
<>
{lines.map((line, idx) =>
line.trim().length === 0 ? (
<br />
) : idx === 0 || idx === lines.length - 1 ? (
<span dir="auto">{line}</span> // FIXME: this should be span or div depnding on context
) : (
<div dir="auto" key={idx}>
{line}
</div>
),
)}
</>
);
// If no newlines, render as simple span
if (!text.includes("\n")) {
return <span dir="auto">{text}</span>;
}
return <span dir="auto">{text}</span>;
// Multi-line text: split and render with <br /> between lines
const lines = text.split("\n");
return (
<>
{lines.map((line, idx) => (
<span key={idx} dir="auto">
{line}
{idx < lines.length - 1 && <br />}
</span>
))}
</>
);
}