feat: room abbreviations with hover tooltips#415
Draft
Just-Insane wants to merge 4 commits intodevfrom
Draft
Conversation
- Add StateEvent.RoomAbbreviations ('moe.sable.room.abbreviations')
- Include abbreviations event in sliding sync required state
- Add AbbreviationsPage to RoomSettingsPage enum
- New RoomAbbreviations settings page (add/remove term+definition pairs)
- Wire page into RoomSettings.tsx menu
- New useRoomAbbreviations hook + RoomAbbreviationsContext
- Provide context in Room.tsx
- RenderBody.tsx: highlight defined terms in plain-text messages with
TooltipProvider+abbr tooltip; HTML messages unaffected
- buildAbbreviationsMap now stores exact-case keys (no .toLowerCase()) - splitByAbbreviations regex uses 'g' flag instead of 'gi' — user-defined casing is matched exactly (FOSS won't match 'foss' in text) - Word boundaries (\b) still prevent matching inside longer words - RoomAbbreviations settings page duplicate check updated to exact match - Add 19 unit tests covering edge cases: empty map, no-match, start/mid/end splits, case sensitivity, word boundaries, longest-match priority
- Revert to case-insensitive matching (gi flag, lowercase map keys) and
update tests and duplicate-entry check accordingly
- Remove title attribute from <abbr> — was causing native browser tooltip
to overlap with our custom TooltipProvider tooltip
- Extract AbbreviationTerm component; adds click/tap handler that pins
the definition as a PopOut positioned above the term
- Desktop: hover still shows tooltip via TooltipProvider
- Mobile: tap pins the tooltip open; tap anywhere else dismisses it
(one-shot document click listener, stopped by e.stopPropagation so
the opening click does not immediately close it)
Contributor
Deploying with
|
| Status | Preview URL | Commit | Alias | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! | https://pr-415-sable.raspy-dream-bb1d.workers.dev | bf9862f | pr-415 |
Fri, 20 Mar 2026 06:49:05 GMT |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #403
Summary
Adds the ability for room moderators to define a list of term/definition abbreviation pairs in room state. Defined terms are highlighted in plain-text messages with a hover tooltip showing the definition.
Changes
New state event:
moe.sable.room.abbreviations{ entries: [{ term: string, definition: string }] }Room settings page
stateEventpower level)Message rendering
<abbr>elements with a tooltip showing the definition\b), case-insensitive, longest terms matched firstRoomAbbreviationsContext) — no prop threading neededFiles changed
src/types/matrix/room.tsStateEvent.RoomAbbreviationssrc/client/slidingSync.tssrc/app/state/roomSettings.tsRoomSettingsPage.AbbreviationsPagesrc/app/utils/abbreviations.tsbuildAbbreviationsMap,splitByAbbreviationssrc/app/hooks/useRoomAbbreviations.tssrc/app/components/message/RenderBody.tsxsrc/app/features/room-settings/abbreviations/RoomAbbreviations.tsxsrc/app/features/room-settings/RoomSettings.tsxsrc/app/features/room/Room.tsx.changeset/feat-room-abbreviations.md