LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Wiki Activity

fix: preserve whitespace around mentions

Browse Source 
renderContent: mention span now includes trailing space when the
next text segment doesn't start with one (React collapses whitespace
between sibling inline elements).

handleMentionSelect: avoid double space when the text after cursor
already starts with a space.
This commit is contained in:
Dustin Newkirk
2026-07-02 11:41:12 -04:00
parent 89f8381e2d
commit 5a7d4dc57e
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/ChatArea.tsx
+6 -2
View File
@@ -59,9 +59,12 @@ function renderContent(content: string, memberUsernames: Set<string>) {
return segments.map((seg, idx) => { return segments.map((seg, idx) => {
if (seg.type === "mention") { if (seg.type === "mention") {
// ponytail: add trailing space because React collapses whitespace between sibling spans
const nextSeg = segments[idx + 1];
const needsSpace = !nextSeg || (nextSeg.type === "text" && !nextSeg.value.startsWith(" "));
return ( return (
<span key={idx} className="text-gb-aqua"> <span key={idx} className="text-gb-aqua">
@{seg.value} @{seg.value}{needsSpace ? " " : ""}
</span> </span>
); );
} }
@@ -458,7 +461,8 @@ export function ChatArea() {
if (atIndex === -1) return; if (atIndex === -1) return;
const before = currentValue.slice(0, atIndex); const before = currentValue.slice(0, atIndex);
const after = currentValue.slice(cursor); const after = currentValue.slice(cursor);
const next = `${before}@${username} ${after}`; const separator = after.startsWith(" ") || after === "" ? "" : " ";
const next = `${before}@${username}${separator}${after}`;
setInput(next); setInput(next);
setMentionQuery(null); setMentionQuery(null);
// Also set the DOM value immediately so cursor positioning works // Also set the DOM value immediately so cursor positioning works