feat: room abbreviations with hover tooltips and space inheritance#514
feat: room abbreviations with hover tooltips and space inheritance#514Just-Insane wants to merge 16 commits intoSableClient:devfrom
Conversation
|
requested review from @Rosy-iso because it seems to be an ui change and from @TastelessVoid because they (according to github) recently worked on the changed files |
|
I'll give it a look soon |
- 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)
- Add textDecoration: 'underline dotted' and cursor: 'help' to <abbr> elements in AbbreviationTerm so users can see the hover indicator - RoomAbbreviations: add isSpace prop; when true, show 'Space Abbreviations' / 'space-level' labels and hide the inherited-from-space section - SpaceSettings: pass isSpace to RoomAbbreviations
- useMergedAbbreviations: drop space param; use getAllParents+roomToParentsAtom to traverse the full ancestor chain and subscribe to state events at every level (not just direct parent) via useStateEventCallback on the mx client - Room.tsx: drop parentSpace/useSpaceOptionally — hook handles it internally - RoomAbbreviations settings: replace two-section layout with a single flat list; room entries shown without badge, inherited entries show a 'Space - <SpaceName>' chip badge; supports arbitrary nesting depth (mirrors the useImagePackRooms multi-level pattern)
…idity on input change
Just-Insane
force-pushed
the
feat/room-abbreviations
branch
from
0232c4e to
6d68944
Compare
Rosy-iso
left a comment
Rosy-iso
left a comment
There was a problem hiding this comment.
Interesting feature! I like the concept a lot actually, is this idea from you or is it from some matrix spec?
That aside, consistency wise things are mostly okay: the abbreviations list is perfectly consistent while the abbreviation creation modal is...almost consistent. While the fact that the modal itself is not split into multiple sections might seem the issue at first, that is actually perfectly fine as this is something with precedence that is rarely done for the few settings that must work with multiple elements at once (room settings, emoji pack settings)
The inaccuracy is in the spacing and placement: the elements of the modal are too close together and the button should be on the left, not the right, use the other modals as reference
|
The abbreviation concept is mine, I wanted a lightweight way for rooms to define their own jargon/acronyms without needing a full wiki or pinned message. Saw a few people asking about PMP messages were while that was being developed. Fixed both spacing issues: bumped the form's internal gap from |
|
Seems to be an issue with abbreviations not showing properly, trying to track that down. Edit: looks good now, looks like it was an issue with messages sent via PMPs |
Previously, abbreviation term highlighting was skipped for any message that has a formatted_body (virtually all messages from modern clients using a rich-text editor), because RenderBody returned early from the customBody path before reaching the abbreviation logic. The fix adds an optional replaceTextNode callback to getReactCustomHtmlParser. Since opts closes over itself, renderChildren inside element handlers recurses through the same replace function, so text nodes nested inside <p>, <strong>, <em>, list items, etc. are all processed correctly. buildAbbrReplaceTextNode is exported from RenderBody.tsx and wired into both RoomTimeline and ThreadDrawer via useRoomAbbreviationsContext.
Rosy-iso
left a comment
Rosy-iso
left a comment
There was a problem hiding this comment.
Seems to be consistent now indeed, this works :)
(This approval is purely UI wise, the code should still be audited and reviewed separately by someone else!)
3 participants
Description
Adds a room abbreviations feature: moderators can define term/definition pairs in room settings. Defined terms are highlighted with a dotted underline in messages and show a tooltip on hover (tap-to-pin on mobile). Abbreviations defined in a parent space are inherited by child rooms and nested spaces, with overrides allowed at each level. The settings UI shows a flat list of inherited and locally-defined entries.
Fixes #
Type of change
Checklist:
AI disclosure:
The code adds changes that allow for setting and viewing room abbreviations, with an on-hover tooltip (or press on mobile - semi-persistent). It stores these in the room state under a new key, and recursively fetches abbreviations from the space level. This also adds regex so that abbreviations correctly work at word boundaries. Also adds the needed hooks to
room.tsandslidingSync.ts