feat(desktop): live @mention and #channel preview in message composer#149
feat(desktop): live @mention and #channel preview in message composer#149wesbillman merged 2 commits intomainfrom
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aa67c51cf5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
| type Segment = { type: "text" | "mention" | "channel"; value: string }; | ||
|
|
||
| const MENTION_OR_CHANNEL_RE = /@\S+|#\w[\w-]*/g; |
There was a problem hiding this comment.
Match mention tokens that include spaced display names
useMentions.insertMention builds mentions as @${displayName} and displayName values commonly include spaces, but this regex uses @\S+, which stops at the first space. As a result, a mention like @Jane Doe is rendered as a partial pill (@Jane) plus plain text (Doe), so the new live preview is inconsistent with the actual mention semantics (extractMentionPubkeys still treats the full display name as one mention) and gives misleading feedback while composing.
Useful? React with 👍 / 👎.
Adds a transparent overlay to the message composer that renders @mention and #channel tokens with styled highlight pills as the user types. The textarea text becomes transparent while the overlay shows the formatted version, keeping native cursor, selection, and IME support.
aa67c51 to
c2f63a6
Compare
Summary
Adds a transparent overlay to the message composer that renders
@mentionand#channeltokens with styled highlight pills as the user types.Changes
ComposerMentionOverlay.tsx(new) — Parses composer text into segments (plain text,@mention,#channel) and renders mentions/channels with colored pill styling (bg-primary/15 text-primary).MessageComposer.tsx— Wraps the textarea in a relative container with the overlay positioned behind it. The textarea text is made transparent (text-transparent) so the overlay's styled tokens show through, while the native caret, selection, scroll, and IME behavior are fully preserved.How it works
text-transparentandcaret-foregroundso the cursor is visible but the raw text is not.aria-hiddenoverlay sits behind the textarea and mirrors the content with highlighted pills for@and#tokens.onScrollhandler so the overlay stays aligned during multi-line input.Testing