mirror of
https://github.com/purrgrammer/grimoire.git
synced 2026-04-12 00:17:02 +02:00
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:
@@ -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>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user